Fx{r} is trying to start the Fx{r} Community! Please join our group on Adobe Groups following this link: http://groups.adobe.com/groups/ab29539ab9.
Fx{r} is now on Twitter too. Follow us @ twitter.com/fx_r!
«
»

ActionScript, CSS, Flex 2, How to, MXML, Skin

Custom skin for tab bar navigator

Stelian Crisan | 08.02.08 | 7 Comments

Google Buzz

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.

Share and Enjoy:
  • Twitter
  • Google Buzz
  • LinkedIn
  • Google Bookmarks
  • del.icio.us
  • Digg
  • Sphinn
  • blogmarks
  • Reddit
  • StumbleUpon
  • Facebook
  • DZone
  • FriendFeed
  • Yahoo! Buzz
  • Yahoo! Bookmarks
  • Slashdot
  • MySpace
  • Add to favorites
CustomSkinForTabBar (1)
CustomSkinForTabBar




Tags: , , ,

This post was written by Stelian Crisan

Views: 19562

related

7 Comments

have your say

Add your comment below, or trackback from your own site. Subscribe to these comments.

Be nice. Keep it clean. Stay on topic. No spam.

You can use these tags:
<a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong> <pre lang="" line="" escaped="">

:

:


«
»