Flex mobile development tips and tricks – Part 2: Styling your application's tabs and ActionBar

This is Part 2 of a multipart series of articles that cover tips and tricks for Flex mobile development. Part 1 focused on handling data when switching between views and between application executions. This part covers styling the ActionBar and tab components in your mobile application.

When you’re building a TabbedViewNavigatorApplication in Flex 4.5, you can customize your tabs or ActionBar (the title bar that contains title text and any other components or navigation content) in a couple of different ways. One approach would be to skin the tabs with your own custom assets (for example with FXG or skins). If your application does not need extensive customization, however, you may be able to use simple CSS properties. CSS styling provides a quick and easy way to make a dramatic change away from the default boring gray tabs.

I created a sample tabbed application to illustrate how this can be done. In the following examples you will see how adding some simple properties and just a few lines of CSS can change your ActionBar and mobile application tabs quickly!

Consider the following code for a Flex TabbedViewNavigatorApplication with three tabs that link to their own first views:

By default, when you create a Flex mobile project the Mobile theme will be applied automatically (see Figure 1).

This is, of course, not very exciting. However, one way to make it more engaging is by adding icons to the tabs.

To add an icon to the tabs you can set the icon property on each of the ViewNavigator components to an icon of our choice. In the code below I’ve added three icons from the assets directory within my project root. .

With just that simple change, you can add character to your tabs (see Figure 2).

Icons on the tabs are a good start, but if you’re like me, you’re eager to change the gray colors used on the ActionBar component and tabs to match a theme that you have in mind. You can do that with CSS.

For the ActionBar you simply use the Spark selector for the ActionBar component and specify any supported styles or inherited styles to change.

Note: The Flex 4.5 ActionScript API documentation shows the specific style properties supported for each component, as well as inherited styles. It also shows if a style property has CSS inheritance or not. If you check out the ActionBar component in the API, you can see what can be styled.

Before you start changing styles, you may be interested in knowing what the default values are. For instance, you may want to know what the default font size and weight is, which may not be as obvious as the font color. You can take a look at the default CSS properties for the Mobile theme to better understand what you’re styling. On Mac OS, the defaults.css file can be found at: /Applications/Adobe Flash Builder 4.5/sdks/4.5/frameworks/projects/mobiletheme/defaults.css. On Windows, it can be found at: C:\Program Files (x86)\Adobe\Adobe Flash Builder 4.5\sdks\4.5.0\frameworks\projects\mobiletheme\defaults.css.

Here are two snippets from that file on the ActionBar and its title:

Notice the font color, size, and weight are set using the titleDisplay ID selector.

Since there’s not much to the ActionBar in my sample application—it just has a text title— I’m just going to customize the title. If you have buttons and other components within your ActionBar, you can customize supported styles for those as well.

The titleDisplay skin part of the ActionBar is easily styled using CSS. I simply set the following CSS properties for my sample application in an <fx:style> tag:

The ActionBar now has centered white text on an aqua background in Comic Sans (see Figure 3).

You can also use CSS to style the tabs in a tab bar. For this you’ll need to specify the tabBar skin part of the TabbedViewNavigator component in the CSS rule. Take another look at the defaults.css file for the Mobile theme, to see this skin part’s default settings:

Note: The tabBar defined in the TabbedViewNavigator component is actually a ButtonBar. The Spark TabBar is not yet optimized for mobile. If you go down the path of customizing skins, this is important to know since the TabbedViewNavigatorTabBarSkin actually extends ButtonBarSkin.

Once again, I can add a CSS rule to my application’s <fx:style> tag to customize the look of the component by adding my own style:

Now the tabs are in Comic Sans with a background color that matches the ActionBar (see Figure 4). Keep in mind, I am definitely not a designer, but it should be apparent how easy it is to change the look of your application by simply adding a block of CSS.

Here’s the full source for the main tabbed application file. In addition to the CSS, it references the basic views in the views folder by setting the firstView property in the ViewNavigator objects to views.TrendsView, views.AttachView, and views.CallView respectively:

Note: The above example includes the styles within the MXML application for simplicity. However, it’s generally a good practice to create a separate CSS file to contain all of your styles and include a reference to that CSS file in your main application file.

You can explore the complete source code for this project by downloading and importing the sample files for this article.

Now that you’ve seen how easy it is to style your Flex mobile application, here are some general guidelines to keep in mind:

• If you are styling colors, text, alignment, icons, and so on then use CSS.
• If you want to create a look with more graphical elements then use FXG, custom skins, and images.
• If you need to skin for devices that have different dots-per-inch (DPI) densities then use CSS media filters or special skin classes in FXG loaded for each DPI you want to support. DPI varies between devices and operating systems. The iPhone 4 or iPad (both 320 DPI) have a different density than the Android Nexus One (240 DPI) and Motorola Xoom (160 DPI). Flex 4.5 has several built-in capabilities for supporting screen densities. Be sure to read Jason San Jose’s article Flex mobile skins – Part 2: Handling different pixel densities for more on this topic.

Note: If you’re targeting a specific device and you don’t know its DPI, choose that device in the Flash Builder Run Configurations or Debug Configurations dialog box, run the application on the device (or via the emulator), and inspect the runtimeDPI property off the root mobile application (either TabbedViewNavigatorApplication or ViewNavigatorApplication) via a trace statement or in the debugger.

Make a point to check out the other articles in Jason San Jose’s series, which begins with Flex mobile skins – Part 1: Optimized skinning basics. It provides tons of useful information on using FXG for skinning as well as creating density aware skins.

You may also want to check out Part 3 of this series, in which I cover how to control the visibility of the ActionBar and tabs.