Pageflakes Developer Guide

Adding a Settings Tab

In the previous example, the flake was hard-coded to show weather from the 80301 zip code. In this example, we'll improve the flake by adding a settings page. In the settings page, users can select a zip code and the flake will display the weather for that zip code.

First, add a variable to hold the zip code within the com_pageflakes_devdocs_weatherflake function:
var zipcode = null;

Next, create a special

section to contain markup for the settings page:

<body>
  <div id='_PAGEFLAKES_current_weather'/>
  <div id='_PAGEFLAKES_edit' class="edit">
    <table>
      <tr>
        <td>ZIP code</td>
        <td><input id='_PAGEFLAKES_zipcode' type='text'></td>
      </tr>
      <tr>
        <td>
          <input id="_PAGEFLAKES_saveButton"
                 onclick="_PAGEFLAKES_.saveOptions();
                 type="button"
                 value="Save" /> 
        </td> 
        <td> 
          <input id="_PAGEFLAKES_cancelButton"
                 onclick="_PAGEFLAKES_.cancelOptions();"
                 type="button"
                 value="Cancel" /> 
        </td>
      </tr>
    </table>
  </div>
</body>

This markup includes a single field where the zip code can be entered, as well as Save and Cancel buttons. Each button's onclick attribute invokes saveOptions() and cancelOptions() respectively (those will be shown shortly). The _PAGEFLAKES_ prefix indicates that those functions belong to the Flake User Object.

Note:

This
element must have the id attribute set to _PAGEFLAKES_edit.
The class attribute must be set to "edit" to ensure proper formatting.
The framework toggles between the flake and the flake settings when the user clicks on the "Edit" button.

Then, script is added to retrieve the zip code from storage and save it in this variable, as well as the settings page:


this.loadOptions = function()
{
  if (fso.Profiles["zip"])
    zipcode = fso.Profiles["zip"];
  else
    zipcode = "80301";

  var zipelement = $(id + "zipcode");
  zipelement.value = zipcode;
};

The loadOptions() function uses a key-value pair list in the Flake System Object to retrieve the zip code. This list can be used to store any flake data.

Note: PF.$(id + "zipcode") is used as a shortcut for document.getElementById(id + "zipcode"). For more details, see Pageflakes Functions.

The last couple of lines, are used to retrieve the <input> element from the settings page, and set the correct zip code in that element. In addition, the zip code is set it in the newly created variable.

Next, the saveOptions() function is created:


this.saveOptions = function()

{

  var zipelement = $(id + "zipcode");

  zipcode = zipelement.value;

  fso.Profiles["zip"] = zipcode;
  fso.save();

  fso.hideEditArea();

  _self_.getWeather();
};
this.getWeather = function()

{

  var url = "http://xml.weather.yahoo.com/forecastrss?p=" + zipcode + "&u=c"

  ContentProxy.GetUrl(url, callback);

};

The saveOptions() function does the following:

Retrieves a reference to the <input> element containing the zip code and extracts its value.
Stores the zip code in the newly created variable.
Stores the zip code in a name-value pair list in the Flake System Object.
Stores the name-value pair list into permanent store by calling save() on the Flake System Object
Exits the “edit” mode, such that the user is returned to the normal flake view.

The getWeather() function is slightly modified to invoke the ContentProxy with a URL that reflects the correct zip code.

Finally, the cancelOptions() function:

Toggles back to the flake and hide the settings page using the hideEditArea() function on the Flake System Object
Reloads the option from permanent store, in order to discard the recent user input.


this.cancelOptions = function()
{
  fso.hideEditArea();
  _self.loadOptions();
};

Example

This example adds user settings to the Weather flake.

Developers

Pageflakes Developer Guide

Adding a Settings Tab

Example