May 8, 2012

Flex: Changing Tab Style at run time

I have struggled to change the tab style at run time. After spending 2 days on Google and StackOverflow, I came across multiple ways to change the style of the tabs in TabNavigator. It can be done in following ways:


  1. Changing all the tab styles at run time:
    var cssStyle:CSSStyleDeclaration = StyleManager.getStyleDeclaration(".MyTabs");
    cssStyle.setStyle("borderColor", "red");
  2. Changing individual tab style through TabBar component. TabBar allows to access each tab at run time and then it's style can be updated using getStyle method. Getting TabBar from TabNavigator is little bit tricky:

    //this import may not auto-complete for you
    import mx.controls.tabBarClasses.Tab;

    function tabBar_creationComplete(tabBar:TabBar):void {
            var colorArr:Array = ["red", "haloOrange", "yellow", "haloGreen", "haloBlue"];
            var color:String;
            var tab:Tab;
            var idx:uint;
    for (idx = 0; idx < len; idx++) {
                var i:int = idx % colorArr.length;
                color = colorArr[i];
                tab = Tab(tabBar.getChildAt(idx));
                tab.setStyle("fillColors", [color, "white"]);
                tab.setStyle("fillAlphas", [1.0, 1.0]);
                tab.setStyle("backgroundColor", color);
            }
        }
  3. This is the shortest and simplest way to do it. This is another way to do it as Tab extends Button component.
    (tabNavigator.getTabAt(index) as Button).setStyle("borderColor", 0xFF0000);

No comments:

Post a Comment