Video: How to Skin a TabbedViewNavigatorApplication

Developing skins for the TabbedViewNavigatorApplication isn’t too hard. You just have to know where to start. The diagram below shows the major pieces of a TabbedViewNavigatorApplication:

  1. TabbedViewNavigator – This is a skin part of the TabbedViewNavigatorApplication. The TabbedViewNavigator contains 1..N ViewNavigators. Each ViewNavigator is displayed as a tab in the tab bar.
  2. ViewNavigator – The ViewNavigator is used to push and pop views. Each button on the tab bar represents a single ViewNavigator. In a ViewNavigatorApplication (no tabs) there’s only 1 ViewNavigator.
  3. tabBar skin part – The tabBar skin part belongs to the TabbedViewNavigator. In the Mobile theme, the TabbedViewNavigatorSkin creates this skin part. What’s not so obvious is that this skin part is actually implemented as a ButtonBar, not as a TabBar. The tabBar can be any ButtonBarBase. We chose to use ButtonBar to implement first, middle and last button skins for our default Mobile theme.
  4. ButtonBarButton – Not much to say here. It’s a ButtonBarButton that gets it’s label and icon from the ViewNavigator.

Since the tabs are just a ButtonBar, we could declare a style rule using “s|ButtonBar” as the selector, but that would affect all ButtonBars in the application. Instead, we need to use advanced CSS as follows:

s|TabbedViewNavigator #tabBar
  chromeColor: #000000;
  color: #FFFFFF;
  skinClass: ClassReference("skins.TabbedViewNavigatorTabBarSkin");

Of course, the major detail I’m leaving out here is the actual TabbedViewNavigatorTabBarSkin. With a little work, I can get my application to look like this:

All it takes is a little bit of FXG and subclassing the existing skins used in the Mobile theme. Watch the video below for a quick explanation, or just download chirpie.fxp and try it out for yourself.

With the June update for Flex and Flash Builder coming soon, knowing your way around the Mobile theme, mobile skins and CSS will help you get started writing cross-platform applications quickly.

Share on Facebook

9 Responses to Video: How to Skin a TabbedViewNavigatorApplication

  1. Pingback: AIR Mobile – Appliquer une Skin à une TabbedViewNavigatorApplication - Adobe Flex Tutorial - Tutoriaux Flex Builder, MXML, ActionScript, AS3

  2. Hi,
    I can’t for the life of me see where the back button is being skinned in the action bar. I can see that BeveledBackButtonSkin is being assigned to it via the design view and right click, but I don’t see in the code where that is set.
    Thanks for any help

  3. olsn says:

    is there ANY way you can do this with FLEX(?!??!!) your skins are all pure AS3…and when i try it with mxml-skins it allways throws an error, that the middle-button is missing…

  4. olsn says:

    okay, nvm I got it…

  5. Blue_Chi says:

    Can you please show us how to change the icon of each tab depending on the DPI by using CSS?

  6. Royce says:

    Really excellent article. With your help I was able to quickly style the TabViewNavigator exactly as I wanted it. Saved me a lot of work!