Comments on: Styling individual tabs in a TabBar control

By: Dudda

Dudda — Wed, 07 Dec 2011 15:45:34 +0000

half of my post has been cut off.... i'll try again (a preview would be great....) Found a sort of solution finally: if you have:

and the following AS code:

protected function click_but2(event:MouseEvent):void
{
	var box:NavigatorContent = new NavigatorContent;
	box.label = "Child " + navigator.numChildren;
	box.addEventListener(FlexEvent.CREATION_COMPLETE,tabCreationComplete);
	navigator.addChild(box);
}

private function tabCreationComplete(event:FlexEvent):void{
	navigator.getTabAt(navigator.numChildren -1).styleName="myTabCSSSelector";
}

and the following style section


	@namespace s "library://ns.adobe.com/flex/spark";
	@namespace mx "library://ns.adobe.com/flex/mx";
	.myTabCSSSelector{
		color:Yellow;
		chromeColor:Navy;
	}

this works BUT, if you click a second time the button the previuously created tab reverts its styleName property to the default "ButtonBarButton" value. Debugging a bit deeper it seems that after the creation complete of the new tab and after the addChild method there is a re-drawing of the "hidden" tabBar of the TabNavigator which reverts every tab to its default..... If some tester (better then me) can find out which is the problem maybe we could find a solution. Thanks

By: Dudda

Dudda — Wed, 07 Dec 2011 15:42:30 +0000

Found a sort of solution finally:
if you have:

and the following AS code:
protected function click_but2(event:MouseEvent):void { var box:NavigatorContent = new NavigatorContent; box.label = "Child " + navigator.numChildren; box.addEventListener(FlexEvent.CREATION_COMPLETE,tabCreationComplete); navigator.addChild(box); }

private function tabCreationComplete(event:FlexEvent):void{ navigator.getTabAt(navigator.numChildren -1).styleName="myTabCSSSelector"; }
and the following style section


	@namespace s "library://ns.adobe.com/flex/spark";

	@namespace mx "library://ns.adobe.com/flex/mx";

	.myTabCSSSelector{

		color:Yellow;

		chromeColor:Navy;

	}

this works BUT, if you click a second time the button the previuously created tab reverts its styleName property to the default “ButtonBarButton” value.
Debugging a bit deeper it seems that after the creation complete of the new tab and after the addChild method there is a re-drawing of the “hidden” tabBar of the TabNavigator which reverts every tab to its default…..
If some tester (better then me) can find out which is the problem maybe we could find a solution.
Thanks

By: Dudda

Dudda — Tue, 06 Dec 2011 15:28:43 +0000

same problem for me, any ideas? i’ve googled for a week now…. the only solutions are similar to this, but nothing about TabNavigator and tabBar, the Flash Builder 4.5 even doesn’t list mx.controls.tabBarClasses.Tab among context help…
Really Thanks in advance.

By: Shawn

Shawn — Mon, 18 Jul 2011 03:58:36 +0000

Is there a way to set individual tab colors with the Spark TabBar ? The getChildAt(idx) returns a skin in the Spark TabBar.

By: Horyna

Horyna — Tue, 26 Oct 2010 20:12:55 +0000

Yee, the code with chromoColor is working, but: its only make one color, not the nice color transition. Tested as: tab.setStyle(“chromeColor”, [color, "white"]); …how to correct this?

By: Peter deHaan

Peter deHaan — Tue, 28 Sep 2010 03:48:17 +0000

@Richard,

Try something like this instead:

 
"1.0"?>
 name="TabBar_getChildAt_test"
        xmlns:fx="http://ns.adobe.com/mxml/2009" 
        xmlns:s="library://ns.adobe.com/flex/spark" 
        xmlns:mx="library://ns.adobe.com/flex/mx">
    >
         horizontalAlign="center" verticalAlign="middle" />
    >
 
    >
        [CDATA[
            import mx.events.ItemClickEvent;
            import mx.controls.tabBarClasses.Tab;
 
            private function tabBar_creationComplete():void {
                const colorArr:Array = ["red", "haloOrange", "yellow", "haloGreen", "haloBlue"];
                var color:String;
                var tab:Tab;
                var idx:uint;
                const len:uint = tabBar.dataProvider.length;
 
                for (idx = 0; idx < len; idx++) {
                    var i:int = idx % colorArr.length;
                    color = colorArr[i];
                    tab = Tab(tabBar.getChildAt(idx));
                    tab.setStyle("chromeColor", color);
                }
            }
 
            private function tabBar_itemClick(evt:ItemClickEvent):void {
                viewStack.selectedIndex = evt.index;
            }
        ]]>
    >
 
     id="tabBar"
            creationComplete="tabBar_creationComplete();"
            itemClick="tabBar_itemClick(event);">
        >
             id="arr">
                 label="Red" />
                 label="Orange" />
                 label="Yellow" />
                 label="Green" />
                 label="Blue" />
            >
        >
    >
 
     id="viewStack"
            width="{tabBar.width}"
            styleName="plain">
         id="redVBox" width="100%" height="100">
             text="Red VBox" />
        >
         id="orangeVBox" width="100%" height="100">
             text="Orange VBox" />
        >
         id="yellowVBox" width="100%" height="100">
             text="Yellow VBox" />
        >
         id="greenVBox" width="100%" height="100">
             text="Green VBox" />
        >
         id="blueVBox" width="100%" height="100">
             text="Blue VBox" />
        >
    >
 
>

Peter

By: Richard

Richard — Tue, 28 Sep 2010 00:59:32 +0000

This example works in this page, but when I run it in Flashbuilder 4, it does not work. I get the tabs but no color.

By: Tom Van den Eynde

Tom Van den Eynde — Thu, 29 Apr 2010 10:48:55 +0000

In this example the tabs are already instantiated when calling tabBar.getChildAt(idx). However when adding tab pages dynamically the getChildAt often causes an error because the tabs haven’t been set up yet. This makes it rather problematic to set properties (visible…) or styles.

By: Peter deHaan

Peter deHaan — Sat, 27 Mar 2010 03:26:17 +0000

@Shannara,

If you want to use the same text color for each tab you can set the color style in the MXML directly, as seen in the following snippet:

 id="tabBar"
        dataProvider="{arr}"
        color="white"
        creationComplete="tabBar_creationComplete();"
        itemClick="tabBar_itemClick(event);" />

Or if you want a separate text colors for each tab you can set the color style using ActionScript, as seen in the following example:

tab.setStyle("color", Math.random() * 0xFFFFFF);

Peter

By: Shannara

Shannara — Fri, 26 Mar 2010 21:32:00 +0000

How do we change the color of the text on the tab itself? I see stuff for the body of a tab, but not the tab header …