Name

<fb:editor/>

Synopsis

<fb:editor action="...">...</fb:editor>

Renders a special Facebook-formatted form with two columns. This is a great way to render a form that matches the standard Facebook look and feel. For more complex operations for a form, I strongly suggest you just use a standard HTML <form/> tag. See also the following tags elsewhere in this chapter:

  • <fb:editor-button/>

  • <fb:editor-buttonset/>

  • <fb:editor-cancel/>

  • <fb:editor-custom/>

  • <fb:editor-date/>

  • <fb:editor-divider/>

  • <fb:editor-month/>

  • <fb:editor-text/>

  • <fb:editor-textarea/>

  • <fb:editor-time/>

FBML-Specific Attributes

Required

action=[string] default: none

The location to send the form to. Note that all <fb:editor/> forms are sent via the POST form method, so be sure you authenticate properly with that in mind!

Optional

width=[int] default: none

The width of the form as a whole. (The form renders a table—this is the table’s width.)

labelwidth=[int] default: none

The width of the labels in the form (the left column). The right column will adjust based on the width value of <fb:editor/>.

Example FBML

Here is example FBML code for a form using <fb:editor/>:

<fb:editor action="http://apps.facebook.com/fbmlessentials">
  <fb:editor-custom>
    <input type="hidden" name="action" value="editor" />
    <input type="hidden" name="submit" value="true" />
  </fb:editor-custom>
  <fb:editor-text label="Your Name" name="name" value=""/>
  <fb:editor-textarea label="Your Address" name="address" value=""/>
  <fb:editor-date label="Your Birthday" name="birthday"/>
  <fb:editor-month label="Current Month" name="month"/>
  <fb:editor-time label="Current Time" name="time"/>
  <fb:editor-divider/>
  <fb:editor-buttonset>
    <fb:editor-button name="submit" value="Submit Name"/>
    <fb:editor-cancel name="cancel" value="Cancel"/>
  </fb:editor-buttonset>
</fb:editor>

Rendered HTML for Single Instance of Tag

The underlying HTML looks like the following (Figure 3-34 shows the result). This is important because if you need Mock AJAX or a GET request, you have to render your own form:

<form action="http://apps.facebook.com/fbmlessentials" method="post">
  <table class="editorkit" border="0" cellspacing="0" style="width:425px">
  <tr class="width_setter">
    <th style="width:75px"></th>
    <td></td>
  </tr>
  <tr>
    <th class="detached_label"><label></label></th>
    <td class="editorkit_row">
      <input type="hidden" name="action" value="editor" />
      <input type="hidden" name="submit" value="true" />
    </td>
    <td class="right_padding"></td>
  </tr>
  <tr>
    <th><label>Your Name:</label></th>
    <td class="editorkit_row"><input type="text" name="name"/></td>
    <td class="right_padding"></td>
  </tr>
  <tr>
    <th class="detached_label">
      <label>Your Address:</label>
    </th>
    <td class="editorkit_row"><textarea name="address"></textarea></td>
    <td class="right_padding"></td>
  </tr>
  <tr>
    <th><label>Your Birthday:</label></th>
    <td class="editorkit_row">
      <select name="birthday_month" id="birthday_month" 
      onchange="editor_date_month_change(this, 'birthday_day','')," >
        <option value="1">Jan</option><option value="2">Feb</option>
        <option value="3">Mar</option><option value="4">Apr</option>
        <option value="5">May</option><option value="6">Jun</option>
        <option value="7">Jul</option><option value="8">Aug</option>
        <option value="9">Sep</option><option value="10">Oct</option>
        <option value="11">Nov</option>
        <option value="12" selected>Dec</option>
      </select>
      <select name="birthday_day" id="birthday_day">
      <option value="1">1</option><option value="2">2</option>
      <option value="3">3</option><option value="4">4</option>
      <option value="5">5</option><option value="6">6</option>
      <option value="7">7</option><option value="8">8</option>
      <option value="9">9</option><option value="10">10</option>
      <option value="11">11</option><option value="12">12</option>
      <option value="13">13</option><option value="14">14</option>
          <option value="15">15</option>
      <option value="16">16</option><option value="17">17</option>
          <option value="18">18</option>
      <option value="19">19</option><option value="20">20</option>
          <option value="21">21</option>
      <option value="22">22</option><option value="23">23</option>
          <option value="24">24</option>
      <option value="25">25</option><option value="26">26</option>
          <option value="27">27</option>
      <option value="28">28</option><option value="29">29</option>
          <option value="30">30</option>
      <option value="31" selected>31</option>
      </select>
    </td>
    <td class="right_padding"></td>
  </tr>
  <tr>
    <th><label>Current Month:</label></th>
    <td class="editorkit_row">
      <select name="month" id="month"  >
        <option value="-1">Month:</option><option value="1">Jan</option>
            <option value="2">Feb</option>
        <option value="3">Mar</option><option value="4">Apr</option>
            <option value="5">May</option>
        <option value="6">Jun</option><option value="7">Jul</option>
            <option value="8">Aug</option>
        <option value="9">Sep</option><option value="10">Oct</option>
            <option value="11">Nov</option>
        <option value="12">Dec</option>
      </select>
    </td>
    <td class="right_padding"></td>
  </tr>
  <tr>
    <th><label>Current Time:</label></th>
    <td class="editorkit_row">
      <select name="time_hour" id="time_hour">
        <option value="1">1</option><option value="2">2</option>
            <option value="3">3</option>
        <option value="4" selected>4</option><option value="5">5</option>
            <option value="6">6</option>
        <option value="7">7</option><option value="8">8</option>
            <option value="9">9</option>
        <option value="10">10</option><option value="11">11</option>
            <option value="12">12</option>
      </select><span>:</span>
      <select name="time_min" id="time_min">
        <option value="00" selected>00</option><option value="05">05</option>
        <option value="10">10</option><option value="15">15</option>
            <option value="20">20</option>
        <option value="25">25</option><option value="30">30</option>
            <option value="35">35</option>
        <option value="40">40</option><option value="45">45</option>
            <option value="50">50</option>
        <option value="55">55</option></select><select name="time_ampm"
            id="time_ampm">
        <option value="am">am</option><option value="pm" selected>pm</option>
      </select>
    </td>
    <td class="right_padding"></td>
  </tr>
  <tr><th></th><td colspan="2"><div class="divider"></div></td></tr>
  <tr><th></th><td class="editorkit_buttonset">
    <input type="submit" class="editorkit_button action" value="Submit Name"
        name="submit" />
    <span class="cancel_link"><span>or</span><a href="#">Cancel</a></span>
  </td><td class="right_padding"></td></tr>
  </table>
</form>
The result of our <fb:editor/> form example
Figure 3-34. The result of our <fb:editor/> form example

Additional Information

  • <fb:editor/> forms do not work with Mock AJAX. Use a normal form (see the HTML example just shown) to make it work.

  • <fb:editor/> forms get sent via POST methods.

..................Content has been hidden....................

You can't read the all page of ebook, please click here login for view all page.
Reset
18.220.202.209