Programming Social Applications

Integrating a Tabbed Gadget User Interface

The OpenSocial JavaScript libraries define several easy methods for creating a tabbed environment within your gadgets.

To integrate the tabbed UI feature set, you need to take a few steps:

1. Within the ModulePrefs node of the gadget spec file, add a Require element to enable the tabs JavaScript library.

   • Include: <Require feature="tabs"/>

2. Within the gadget JavaScript layer, insert a TabSet constructor method call for the tabbed UI features.

   • Method call: var tabs = new gadgets.TabSet(__MODULE_ID__, "Default Tab ID");

3. To create a new tab within the TabSet, call the addTab() method of the tabs JavaScript library.

   • Method call: tabs.addTab(tabName, optParams);

The addTab() method accepts the following parameters:

tabName (string)

The name identifier for the tab to be created.

optParams (object)

A series of optional parameters that may be used to customize the tab being created. This object may be replaced with a string to signify the id for the tab. The addTab() optional parameters include:

callback (function reference)

A reference to a JavaScript function to be called when a tab is selected. The tab id is passed in as a parameter to the callback function when executed.

contentContainer (DOM node reference)

A reference to an HTML entity node out of which the tab content is created. This parameter can be the result of obtaining an element using document.getElementById("ID"). If the DOM node does not exist, it will be created.

index (number)

The numeric index at which ...