Posts tagged "video"

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