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 the new tab should be inserted. If this value is not included, the new tab will be inserted at the end of the tab list.

tooltip (string)

A tool tip that is displayed to a user when she hovers her mouse over a tab.

The addTab() method contains enough abstraction to allow developers to define the tab and its content in many different ways within their gadgets.