Programming Social Applications

Creating a Tab from Markup

One method for defining a tab’s content is to create a tab out of an existing HTML DOM node, such as a div. This is an excellent tab method to use if you are trying to promote Model-View-Controller (MVC) design patterns, which separate markup from programming logic.

Applying what we have learned thus far about the tab creation methods in a gadget XML spec, we can build out a tab using a base HTML node as our foundation:

<Content view="canvas">
   <![CDATA[
      <div id="tab1" style="display:none;">This is the content of Tab 1</div>
      <div id="tab2" style="display:none;">
         <b>Heading for Tab 2</b><br />
         See more details on <a href="http://www.mysite.com">my site</a>.
      </div>

      <script type="text/javascript">
      //create a new tabset object with the default tab set
      var tabs = new gadgets.TabSet(__MODULE_ID__, "Second Tab");

      //create two tabs out of our markup
      tabs.addTab("First Tab ", "tab1");
      tabs.addTab("Second Tab", "tab2");
      </script>
   ]]>
</Content>

Note

The full code for this sample is available at https://github.com/jcleblanc/programming-social-applications/blob/master/chapter_4/creating_tabs_from_markup.xml.

In this example, we create two tabs, one with just plain text and another with additional HTML markup within the div node. To prevent a jarring UI switch, we set the display for both tabs to none to hide them until they’re built.

Within the script block, we create a new TabSet object with the module ID as the first parameter and the name of the default tab as the second ...