So now that you have your Facebooker Facebook application up and running you probably want to do something with it, right? The first thing I wanted to do was create a form that had some of my stuff in it and some Facebook stuff in it. So lets start with that.
One easy way to create a Facebook form that has the Facebook look and feel is using an fb:editor, an fb:editor form has 2 columns, one for the label and one for the UI component. By default the UI component will auto fill the entire area of the main column of the table:
As you can see on the image on the right this fb:editor is arranged into 2 columns. The left colum has labels like "About", "Title" , "Due Date" etc. The right column has the respective UI components.
The title component is a standard text box and
you can see how it expands to fill the entire area.
If you want to have several components in the area, you can put them inside a div and set the inline css of the div to manage the placement of these components (use relative placement only).
In our example form we want to have at least one of these label components and one date, and one Facebook UI component. I have chosen the friend finder as the example Facebook component.
Now that you have the background on fb:editor, lets get started with a simple version of the view to the right, in this case we will dumb the code down to 1 of each type of component that needs to be explained. This form shows an example create task form operating on the model Task. First the view code (new_task.rhtml) :
<BR/>
<% facebook_form_for(:task,@task,:url => url_for(:action => :create_task), :labelwidth => '75', :width => '500') do |f| %>
<%=f.text_field :ttype, :label=> "Title"%>
<fb:editor-custom label="Due Date">
<%=datetime_select :task, :duedate,:order => [:month,:day,:year],:twelve_hour => true,:minute_step => 15, :use_short_month => true %>
</fb:editor-custom>
<%=f.text(text_field_tag(:newrnumdays, 10), :label => "# Days")%>
<fb:editor-custom label="Assign To">
<%=fb_friend_selector()%>
</fb:editor-custom>
<%=f.buttons "Add" %>
<% end %>
Now lets explain each piece of the form:
1) <% facebook_form_for(:task,@task,:url => url_for(:action =>
:create_task), :labelwidth => '75', :width => '500') do |f| %>
Here we are defining the form it will call create_task method when submitted, note we are overriding the label and main column widths and assigning the form variable to "f".
2) <%=f.text_field :ttype, :label=> "Title"%>
This is a regular old component, by using the :label attribute facebooker is smart enough to create the label and UI component for the fb:editor
3) <fb:editor-custom label="Due Date">
<%=datetime_select :task, :duedate,:order => [:month,:day,:year],:twelve_hour => true,:minute_step => 15, :use_short_month => true %>
</fb:editor-custom>
This example is another way of doing the same thing, we can define the fb:editor tags ourself and simply place the label and the component in the proper spot. Why am I doing this instead of example #2 as its more complicated? At the time of this writing there is a bug in facebooker that makes it barf if you try to define a complex UI component in an fb:editor form (date, checkbox etc). So you need to do it the way I do it in #3 for now. Good to know how this works anyway.
4) <%=f.text(text_field_tag(:newrnumdays, 10), :label => "# Days")%>
This example shows how you can use f.text to wrap a tag and have it be formatted as a fb:editor friendly field. You could do a tag as you did in #3, but this is a bit nicer to look at.
5) <fb:editor-custom label="Assign To">
<%=fb_friend_selector()%>
</fb:editor-custom>
Now we want a Facebook component in our form right, this will define a fb_friend_selector field in your form.
6) <%=f.buttons "Add" %>
Last but not least, we need a submit button for our form, here is where we put it (dont forget the end to end off the form.)
Thats it, now you have a form that has the look of an fb:editor, and some of your components and a facebook component.
Note that in your controller, the only thing you will have to do differnt is fish out the facebook params as they are not part of your model, from the freind selector you can get:
friend_name = params[:friend_selector_name]
friend_id = params[:friend_selector_id]
From the parameters passed to you from facebook.
Good luck with your forms!
Recent Comments