aodz

How to Skin The Tabs in a TabNavigator Container

Posted on: January 16, 2009


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:

.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:

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);
}

}
}

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:

<mx:TabNavigator id=”tabs”
tabStyleName=”tab” selectedTabTextStyleName=”selectedTab” />

original post here

Advertisements

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s

I have moved to a different location

check out my new home Flexout

calendar

January 2009
M T W T F S S
« Dec   Feb »
 1234
567891011
12131415161718
19202122232425
262728293031  

Blog Stat

  • 83,725 Hop's so far!!!

follow me

Archives

Linkedin Blogger Twitter Youtube Orkut

Top Clicks

  • None

latest flickr photos

top rated

%d bloggers like this: