Comments on: Custom skin for tab bar navigator

By: Stelian Crisan

Stelian Crisan — Fri, 31 Oct 2008 07:07:59 +0000

I think you can do different style arguments for each tab, in this case you need to know how many tabs you have. So, there are a few steps:

1. Go to your .css file and on tab class add something like this:
bgColorTab1: #ff0000;
bgColorTab2: #00ff00;
bgColorTab3: #0000ff;
and so on for each argument you need to change.

2. Go to your skin file and define you new arguments
var bgColorTabs:Array= new Array(getStyle(”bgColorTab1″), getStyle(”bgColorTab2″), getStyle(”bgColorTab3″));

3. Find the tab index. In skin file you can add this code:
var xTab:int = 0;
if ( parent != null )
{
xTab = Math.round(parent.x/w);
}

4. Use the colors. In skin file change for example off color:
case “upSkin”:
case “overSkin”:
{
….
drawRoundRect(
1, 2, w - 4, h - 3, cr2,
uint(bgColorTabs[xTab]), 1);
…
}

I think that is the solution, for now. I will try to make an nice example in a few days, but until then you can have a look on this solution at http://www.flexer.info/…/CustomSkinForTabBar2.swf

By: Glenn

Glenn — Thu, 30 Oct 2008 19:23:47 +0000

@Greg I’m trying to accomplish individual styles for tabs as well. We need a clean way to add a styleName attribute to the tabBar’s tabs.

By: Stelian Crisan

Stelian Crisan — Tue, 09 Sep 2008 08:01:17 +0000

Hi Yui,

The source in the zip archive posted at the bottom of the article, search for “CustomSkinForTabBar” on this page.

By: Yui

Yui — Tue, 09 Sep 2008 07:45:35 +0000

Hello,
I would love to see the source of this custom skinning tab bar if possible, as there’s no link to it anymore, it seems.

Hope you can help, thanks

By: Stelian Crisan

Stelian Crisan — Tue, 05 Aug 2008 07:27:41 +0000

Hi Greg,

I know that you can have different skin for each action (up, down, over, disabled,selectedUp, selectedDown, selectedOver, selectedDisabled), also you can add more styles an use them for skins but I don’t know if you could have different skin for each tab. You can have different renderer for tab content (for each canvas content).

If you need to know more you can also have a look at a very good component made by Doug McCune here: SuperTabNavigator.

By: Greg

Greg — Mon, 04 Aug 2008 23:22:20 +0000

I read your article on skinning a Flex Tabbar. Glad you posted this. Thanks. Do you know if it’s possible to have each tab skinned differently? If so, where and how do you specify how each tab should be skinned.
I’ve been given graphics specific to what each tab should have, including it’s up, down, over, and disabled state for each tab.
Thanks for you assistance.