Disabling tabs?

Anyone know how to disable/enable a tab? Basically, I want to create a wizard flow, with say 5 steps. When the user enters the page, only the first tab will be enabled. Tabs 2-5 will be disabled. As soon as the user enters all the required info on the first tab, I want to enable the second tab, so that the user now has access to both of the first two tabs. Etc.

Any ideas?

From what I saw of a post that Alex made the other day, currently you can not disable AW controls. He knows this is needed and is working on it. I don't know when the fix will make it out to us.

You could fake it by setting the font color for the 'disabled' controls to a different, lighter color. And in the click routine for the tabs, if a 'disabled' tab is selected then ignore the click and make sure that the currently selected tab stays selected.

Ok, I've been trying to get this working for hours now, and I can't for the life of me figure out how to tell a tab header to NOT unselect itself. So far I have been able to track whether or not I should draw a tab's content when clicking, and even prevent the newly selected tab header from displaying as selected. However, the tab that should stay selected instead draws itself as unselected. Does anyone know how to prevent a tab header from unselecting itself?

Please help!

Here's what I have:

Code:

var tabNameArray = ["tab 1", "tab 2", "tab 3", "tab 4"];
createTabs("whatever", tabNameArray);

function createTabs(id, tabNameArray) {
    var tabContent = new AW.HTML.SPAN;

    var obj = new AW.UI.Tabs;
    obj.setId(id);
    obj.setItemText(tabNameArray);
    obj.setItemCount(tabNameArray.length);
    obj.setSelectedItems([0]);

    obj._tabEnabled = new Array();
    for (var i = 0; i < tabNameArray.length; i++)
        obj._tabEnabled[i] = true;

    // redraw tab content when tab is clicked
    obj.onCurrentItemChanged = function(i) {
        if (tabContent.element() && obj._tabEnabled[i]) {
            tabContent.element().innerHTML = getTabContent(i); //draw current tab
        }
    };

    // prevent tab headers from updating
    obj.calculateItemState = function(i) {
        if (obj._tabEnabled[i]) {
            var state = "";

            if (this.getCurrentItem() == i) {state = "current"}
            if (this.getItemSelected(i))    {state = "selected"}

            if (this.getItemState(i) != state) {
                this.setItemState(state, i);
            }
        }
    };
}

function disableTab(tabsId, tabIndex) {
    setTabEnabled(tabsId, tabIndex, false);
}

function enableTab(tabsId, tabIndex) {
    setTabEnabled(tabsId, tabIndex, true);
}

function setTabEnabled(tabsId, tabIndex, enabled) {
    var tabs = AW.object(tabsId);
    if (tabs) tabs._tabEnabled[tabIndex] = enabled;
}

thanks

You can actually cancel tab click events so the tab will not be selected -

// cancel event
obj.onItemClicked = function(event, index){
    if (index == 1) {
        return true;
    }
}

Great! (but why does returning "true" cancel the event, and not "false", as is the standard behavior with form element events)

thanks!

You can return any non-zero value or string. The idea was that it could be used for error reporting. Actually if you cancel onSomePropertyChanging event than this value will be passed to onSomePropertyError event.

I see. Good stuff. Below is the full code for creating a tab set with tab-disabling capability. Thanks to Jim and Alex for the help.

style
----------
    .aw-extension-tabs-enabled {color:black;}
    .aw-extension-tabs-disabled {color:gray; background-position: 100% 0px!important;}
    .aw-extension-tabs-disabled .aw-item-box {color:gray; background-position: 0px -50px!important;}

javascript
----------
function createTabs(id, tabNameArray) {
    var tabContainer = new AW.HTML.SPAN;

    var obj = new AW.UI.Tabs;
    obj.setId(id);
    obj.setItemText(tabNameArray);
    obj.setItemCount(tabNameArray.length);
    obj.setSelectedItems([0]);

    obj._tabEnabled = new Array();
    for (var i = 0; i < tabNameArray.length; i++)
        obj._tabEnabled[i] = true;

    // redraw tab container when tab is clicked
    obj.onCurrentItemChanged = function(i) {
        if (tabContainer.element() && obj._tabEnabled[i]) {
            tabContainer.element().innerHTML = getTabContent(i); //draw current tab
        }
    };

    obj.onItemClicked = function(event, index) {
        return !(index != obj.getCurrentItem() && obj._tabEnabled[index]);
    };

    document.write(obj);
    document.write(tabContainer);
}

function disableTab(tabsId, tabIndex) {
    setTabEnabled(tabsId, tabIndex, false);
}

function enableTab(tabsId, tabIndex) {
    setTabEnabled(tabsId, tabIndex, true);
}

//private
function setTabEnabled(tabsId, tabIndex, enabled) {
    var tabs = AW.object(tabsId);
    if (tabs) {
        var tab = tabs.getItemTemplate(tabIndex);
        if (tab) {
            tabs._tabEnabled[tabIndex] = enabled;
            tab.setClass("extension", (enabled ? "tabs-enabled" : "tabs-disabled"));
            tab.refresh();
        }
    }
}

doh, forgot to wrap that in a code block. oh well, you get the idea...

fixed code block :-)

You can go one bit further and add 'disabled' image to grid.png :-)

Taking wombats code and expanding on it, I have rolled this into a new control. You must use the styles that wombat created along with the new code. I would not have even thought of creating this without the code that wombat posted. Thanks wombat!. Here is the new control:

<s t y l e>
    .aw-extension-tabs-enabled {color:black;}
    .aw-extension-tabs-disabled {color:gray; background-position: 100% 0px!important;}
    .aw-extension-tabs-disabled .aw-item-box {color:gray; background-position: 0px -50px!important;}
</ s t y l e>

AW.UI.TabsEnhanced = AW.UI.Tabs.subclass();
AW.UI.TabsEnhanced.create = function()
{
  var obj = this.prototype;

  obj.isEnabled = function(col)
  {
    if  (typeof this.getItemTemplate(col).getAttribute('isEnabled') == 'undefined')
      return true
    else
      return (this.getItemTemplate(col).getAttribute('isEnabled'))
  }
  obj.setTabEnabled = function(tabIndex, enabled)
  {
    if (enabled == true)
    {
      this.getItemTemplate(tabIndex).setAttribute('isEnabled', true);
      this.getItemTemplate(tabIndex).setClass("extension", "tabs-enabled")
    }
    else
    {
      this.getItemTemplate(tabIndex).setAttribute('isEnabled', false);
      this.getItemTemplate(tabIndex).setClass("extension", "tabs-disabled")
    }
  }
  obj.onItemClicked = function(event, index)
  {
    if (this.isEnabled(index) == false)
      return true;
  }
}

Here is how to use it:

a = new AW.UI.TabsEnhanced;
a.setItemText(["one","two","three"]);
a.setItemCount(3);
a.setTabEnabled(1, false);
document.write(a);

now you have two new methods to use
if you want to know if a tab is enabled or not call

a.isEnabled(columnNumber);

it will return true or false.
If this seems to work for everyone, I will put it into the new library we are assembling on the FriendsOfAW site.
Let me know what everyone thinks.