This it’s an working example of how you can customize your tab bar navigation.
So, we have a MXML file, style file and a skin script. Let’s see them all.In MXML file we just link style.css file and I have used a TabNavigator component with 3 tabs. Style.css files contains to css classes one for TabNavigator as a component and for a single tab.To change the skin of a flex component you have to take the actionscript file from Flex SDK folder, move it to your application and customize it. Don’t forget to link this file to you new css class.For example I create a new folder in my aplication assets/skin and I put there TabSkin.as file; in css class I refer to this file for al available states lik ethis:
disabledSkin: ClassReference("assets.skins.TabSkin"); downSkin: ClassReference("assets.skins.TabSkin"); overSkin: ClassReference("assets.skins.TabSkin"); selectedDisabledSkin: ClassReference("assets.skins.TabSkin"); selectedDownSkin: ClassReference("assets.skins.TabSkin"); selectedOverSkin: ClassReference("assets.skins.TabSkin"); selectedUpSkin: ClassReference("assets.skins.TabSkin"); upSkin: ClassReference("assets.skins.TabSkin");
I hope it’s a clear exemple, for more details, please, leave us a comment.
You can also download the source of this example from here.
Popularity: 63%
| ||
|
Tags: actions script, custom, style, tab bar navigation
This post was written by Stelian Crisan
Views: 3734
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.
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.