How to Skin The Tabs in a TabNavigator Container

Vikram singh — Fri, 16 Jan 2009 09:54:01 +0000

TabNavigator containers come with a handful of styles that allow you to customize the appearance of the tabs:

tabStyleName
Name of CSS style declaration that specifies styles for the tabs. The default value is undefined.

firstTabStyleName
Name of CSS style declaration that specifies styles for the first tab. If this is unspecified, the default value of the tabStyleName style property is used.

lastTabStyleName
Name of CSS style declaration that specifies styles for the last tab. If this is unspecified, the default value of the tabStyleName style property is used.

selectedTabTextStyleName
Name of CSS style declaration that specifies styles for the text of the selected tab.

But sadly, you cannot easily specify a CSS style declaration for the selected tab. You can only specify a style for the text of the selected tab. This sucks.

Luckily, there is a better way to customize the appearance of the tabs, without being constrained or limited by the styles mentioned above. You can skin them!. In the CSS for your application, create a new style declaration for your tabs. Then define values for any or all of the skin properties: skin, disabledSkin, downSkin, overSkin, upSkin, selectedDisabledSkin, selectedDownSkin, selectedOverSkin, selectedUpSkin.

Now this is where it gets beautiful. The values you specify for the skin properties can point to custom components OR embeddable assets! You can use ClassReference() to specify custom components and Embed() to specify custom assets like images or SWFs.What’s great about this solution is that you can also use the standard TabNavigator styles in tandem with the custom skins.

This means you can skin the tab backgrounds with a GradientCanvas container, for example, and use the tabStyleName and selectedTabTextStyleName styles to customize the tab fonts!

Update: I’ve posted sample code below that uses a Canvas container and some basic black-and-white styles to demonstrate how this works!

Sample code for the custom styles:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37

.tab
{
up-skin: ClassReference(”TabSkin”);
down-skin: ClassReference(”TabSkin”);
over-skin: ClassReference(”TabSkin”);

selected-up-skin: ClassReference(”SelectedTabSkin”);
selected-down-skin: ClassReference(”SelectedTabSkin”);
selected-over-skin: ClassReference(”SelectedTabSkin”);

background-color: #FFFFFF;

font-weight: normal;
color: #000000;
text-roll-over-color: #000000;

corner-radius: 0;

border-style: solid;
border-thickness: 1;
border-color: #000000;
}

.selectedTab
{
background-color: #000000;

font-weight: bold;
color: #FFFFFF;
text-roll-over-color: #FFFFFF;

corner-radius: 0;

border-style: solid;
border-thickness: 1;
border-color: #000000;
}

Sample code for the tab skins:

1
2
3
4
5
6
7
8
9
10
11
12
13

package
{
import mx.containers.Canvas;
public class TabSkin extends Canvas
{
override protected function updateDisplayList
(w : Number, h : Number) : void
{
this.styleName = “tab”;
super.updateDisplayList (w, h);
}
}
}

1
2
3
4
5
6
7
8
9
10
11
12
13
14

package
{
import mx.containers.Canvas;
public class SelectedTabSkin extends Canvas
{
override protected function updateDisplayList
(w : Number, h : Number) : void
{
this.styleName = “selectedTab”;
super.updateDisplayList (w, h);
}

}
}

Sample code for the TabNavigator container:

tabStyleName=”tab” selectedTabTextStyleName=”selectedTab” />

original post here

FlexOut » skinning

How to Skin The Tabs in a TabNavigator Container