Posts tagged "skinning"

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

Flex Size and Scaling Issues on the Motorola Atrix

As more and more devices come out, we on the Flex team have occasionally seen platform-specific or device-specific bugs. One of the more visible ones is when flash.system.Capabilities.screenDPI reports the wrong value.

Flex Mobile applications use the screenDPI property for application scaling (when setting the applicationDPI property) or when choosing density-specific skins (i.e. not using the applicationDPI property). When this value is wrong, Flex component skins and layout will either be too big or too small for the screen.

Unfortunately, the Motorola Atrix with AIR 2.6 is incorrectly classified as a 160 DPI device. What you’ll see when running your application is that component skins are too small. The bug is logged as SDK-29999.

Luckily, Flex 4.5 provides a way to override the DPI classification at runtime. The spec for this is posted at http://opensource.adobe.com/wiki/display/flexsdk/Override+Default+Density+Mapping.

For the Atrix in particluar, we’ve attached a workaround to bug SDK-29999 and I’ve posted an example FXP project here. The AIR bug will be fixed in a future release of AIR.

Download: SDK29999.fxp

Share on Facebook