How to programmatically create a dojox.mobile.TabBar?

I want to create a dojox.mobile.TabBar of the segmented control type, like the one at the top of this page:

http://download.dojotoolkit.org/release-1.6.0/dojo-release-1.6.0/dojox/mobile/tests/test_iPhone-TabBar.html

Looking at the source, I can see how to do it declaratively:

   <ul dojoType="dojox.mobile.TabBar" barType="segmentedControl">
   <li dojoType="dojox.mobile.TabBarButton" icon1="images/tab-icon-16.png" icon2="images/tab-icon-16h.png" moveTo="view1" selected="true">New</li>
   <li dojoType="dojox.mobile.TabBarButton" icon1="images/tab-icon-15.png" icon2="images/tab-icon-15h.png" moveTo="view2">What's Hot</li>
    <li dojoType="dojox.mobile.TabBarButton" icon1="images/tab-icon-10.png" icon2="images/tab-icon-10h.png" moveTo="view3">Genius</li>
    </ul>

But I have been unable to figure out how to do the same programatically. TabBar is new in Dojo 1.6, but is covered in the documentation at http://dojotoolkit.org/api/1.6/dojox/mobile/TabBar

But my newbie self is still clueless as how to programatically create the TabBarButtons and associate them with a TabBar. I can find multiple examples on the web that show how to do it declaratively, but not programmatically.

Anyone know of any programmatic examples, or could supply one here?

Solution

To archive the same result of creating widgets declaratively in your question, you can use following JavaScript code to create them programatically.

var tabBar = new dojox.mobile.TabBar({barType : "segmentedControl"}, node1);
var button1 = new dojox.mobile.TabBarButton({icon1 : "", icon2 : ""}, node2);
var button2 = ...;
var button3 = ...;
tabBar.addChild(button1);
tabBar.addChild(button2);
tabBar.startup();

So the rules to convert from declaratively creation to programatically creation can be simple. Use new to create a new instance of the dijit class and supply two parameters. The first parameter is JavaScript object contains the properties to initiate the widget, taken from the DOM attributes in the declarative syntax. The second parameter is the DOM node associated with the widget.

Widgets like dojox.mobile.TabBar are container widgets that can contain other widgets. These widgets inherites from dijit._Container and can use addChild function to add child widgets.

Don't forget to use startup to start the container widget. This function tells the container that you have finished the work with the container and its children. Container widget normally does some resizing work in the startup function. The startup is called automatically when creating declaratively.