Question

I am implementing a mobile application using the Dojo Toolkit. The application has several pages and all pages have the same TabBar. At the moment, the TabBar is hardcoded in every page. So if want to make changes, I need to change the TabBar in every page. How can I solve this problem with the Dojo Toolkit?

Answer 1

Use dojo.declare, create your custom widget extended by TabBar. Then in your initialization code, require that module and in your markup code, set the dojoType to your custom module name. Something similar to this:

require([
     "dojox/mobile/TabBar", 
     "dojox/mobile/TabBarButton"
  ], function ( TabBar, Button ) {

   dojo.declare("myTabBar", [ TabBar ], {

       buildRendering: function() {
           this.inherited(arguments); // call parent
           // add a number of children
           this.addChild( new Button( {
                icon1: 'path/to/image',
                icon1: 'path/to/hoverimage',
                label: 'clickme',
                moveTo:"view1"
           }));
       }
   });
});

Instead of an UL / LI html markup in your code, simply add:

<div dojoType="myTabBar"></div>

Running sample : http://jsfiddle.net/8sD6A/