Thursday, January 30, 2014

A better way to manage which tab is up in a TabBar in a dojox app.

I got rid of this.tabs.push(btn); as suggested here, which was something I had added in the wrong way of doing things which did not exist before, and had the following methods in a controller manage the tabs. (see below) Note that setting the "selected" state on a tab does nothing and I am doing it just out of feeling a need to keep this setting consistent with what happens in a ._setSelectedAttr call (which is what causes an existing tab to be lit as active or muted as not currently active) in a psychosomatic hand washing way.

init: function() {
   this.createTabButton("Foo", false);
   this.createTabButton("Bar", false);
   this.createTabButton("Baz", false);
   this.createTabButton("Qux", false);
},
afterActivate: function(current, data) {
   this.setTabs(this.app.currentView.name);
},
setTabs: function (currentTab){
   var priorTab = this.assetTabBar.getSelectedTab();
   if (priorTab) {
      priorTab.set("selected", false);
      priorTab._setSelectedAttr(false);
   }
   if (currentTab == "Foo") this.setTabUp(0);
   if (currentTab == "Bar") this.setTabUp(1);
   if (currentTab == "Baz") this.setTabUp(2);
   if (currentTab == "Qux") this.setTabUp(3);
   this.actionButton.on("click", lang.hitch(this.actions, this.actions.open));
   this.actions.addAction("Whatever", "mblDomButtonIconAdd", lang.hitch(this,
         this.addLaborEntry));
},
setTabUp: function (currentTab){
   var activeTab = this.assetTabBar.getChildren()[currentTab];
   activeTab.set("selected", true);
   activeTab._setSelectedAttr(true);
},

 
 

In figuring out how to make these changes I looked at three web pages and three files. The web pages were:

  1. http://dojotoolkit.org/reference-guide/1.9/dojox/mobile/TabBar.html
  2. http://stackoverflow.com/questions/6819098/how-to-programmatically-create-a-dojox-mobile-tabbar
  3. http://dojo-toolkit.33424.n3.nabble.com/Adding-a-tabBarButton-programmatically-td3438220.html

 
 

The files:

  1. dojox/mobile/TabBar.js is where dojox keeps the TabBar widget which holds TabBarButton type widgets. Looking at the code for this widget initially gave me no help. I did ultimately use .getSelectedTab() out of here.
  2. digit/_Container.js is used by all dojox widgets which could be considered containers such as a TabBar which will contain, you'd assume, more than one TabBarButton. In this file I found the addChild and removeChild methods for the TabBar widget which I previously had no insight into.
  3. dojox/mobile/TabBarButton.js is a separate widget for the buttons which go in the widget which contains them. A look through the first two files gave me little hope for finding a better way to implement a TabBar, but at the child widget lay ._setSelectedAttr which I use above. The underscore convention at ._setSelectedAttr should imply a "private" method but I am latching onto it nonetheless. I'm the devil.

No comments:

Post a Comment