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!
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!
Adding icons to the tabs
Consider the following code for a Flex TabbedViewNavigatorApplication with three tabs that link to their own first views:
<?xml version="1.0"
encoding="utf-8"?>
<s:TabbedViewNavigatorApplication
xmlns:fx="http://ns.adobe.com/mxml/2009"
xmlns:s="library://ns.adobe.com/flex/spark"><s:ViewNavigator
id="trends" label="Trends" width="100%" height="100%"
firstView="views.TrendsView"/>
<s:ViewNavigator id="attach" label="Attach" width="100%"
height="100%" firstView="views.AttachView"/>
<s:ViewNavigator id="call" label="Call Center" width="100%"
height="100%" firstView="views.CallView"/>
</s:TabbedViewNavigatorApplication>
By default, when you create a Flex mobile project the Mobile theme will be applied automatically (see Figure 1).
Figure 1. The sample application with the default Mobile theme.
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
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. .<?xml version="1.0"
encoding="utf-8"?>
<s:TabbedViewNavigatorApplication
xmlns:fx="http://ns.adobe.com/mxml/2009"
xmlns:s="library://ns.adobe.com/flex/spark">
<s:ViewNavigator id="trends" label="Trends" width="100%"
height="100%" firstView="views.TrendsView"
icon="@Embed('assets/column-chart-icon32.png')"/>
<s:ViewNavigator id="attach" label="Attach" width="100%"
height="100%" firstView="views.AttachView"
icon="@Embed('assets/paperclip-icon32.png')"/>
<s:ViewNavigator id="call" label="Call Center" width="100%"
height="100%" firstView="views.CallView"
icon="@Embed('assets/receptionist-icon32.png')"/>
</s:TabbedViewNavigatorApplication>
With just that simple change, you can add character to your tabs (see Figure 2).
Figure 2. The sample application with icons on the tabs.
Styling the ActionBar
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.
Here are two snippets from that file on the ActionBar and its title:
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:
ActionBar
{
chromeColor: #484848;
defaultButtonAppearance: normal;
skinClass: ClassReference("spark.skins.mobile.ActionBarSkin");
textShadowAlpha: .65;
textShadowColor: #000000;
paddingBottom: 1;
paddingLeft: 0;
paddingRight: 0;
paddingTop: 1;
}
...
ActionBar #titleDisplay
{
color: #FFFFFF;
fontSize: 28;
fontWeight: bold;
}
Notice the font color, size, and weight are set using the
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 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:s|ActionBar
{
chromeColor: #229988;
titleAlign: center;
}
s|ActionBar #titleDisplay
{
color: #CCCCCC; /* default color is white */
fontSize: 40;
fontFamily: "Comic Sans MS";
}
The ActionBar now has centered white text on an aqua background in Comic Sans (see Figure 3).
Figure 3. The sample application with a styled ActionBar.
Styling tabs
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:TabbedViewNavigator #tabBar
{
chromeColor: #484848;
color: #FFFFFF;
fontSize: 20;
fontWeight: normal;
iconPlacement: top;
interactionMode: mouse;
skinClass: ClassReference("spark.skins.mobile.TabbedViewNavigatorTabBarSkin");
textShadowAlpha: .65;
textShadowColor: #000000;
}
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:TabbedViewNavigator #tabBar
{
chromeColor: #229988;
color: #CCCCCC;
fontFamily: "Comic Sans MS";
iconPlacement:left;
textDecoration:underline;
}
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.
Figure 4. The original sample application (left) and the application with styled tabs (right).
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: <?xml version="1.0"
encoding="utf-8"?>
<s:TabbedViewNavigatorApplication
xmlns:fx="http://ns.adobe.com/mxml/2009"
xmlns:s="library://ns.adobe.com/flex/spark">
<fx:Style>
@namespace s "library://ns.adobe.com/flex/spark";
s|ActionBar
{
chromeColor: #229988;
titleAlign: center;
}
s|ActionBar #titleDisplay
{
color: #CCCCCC;
fontSize: 40;
fontFamily: "Comic Sans MS";
}
s|TabbedViewNavigator #tabBar
{
chromeColor: #229988;
color: #CCCCCC;
fontFamily: "Comic Sans MS";
iconPlacement:left;
textDecoration:underline;
}
</fx:Style>
<s:ViewNavigator id="trends" label="Trends" width="100%"
height="100%" firstView="views.TrendsView"
icon="@Embed('assets/column-chart-icon32.png')"/>
<s:ViewNavigator id="attach" label="Attach" width="100%"
height="100%" firstView="views.AttachView"
icon="@Embed('assets/paperclip-icon32.png')"/>
<s:ViewNavigator id="call" label="Call Center" width="100%"
height="100%" firstView="views.CallView"
icon="@Embed('assets/receptionist-icon32.png')"/>
</s:TabbedViewNavigatorApplication>
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.Where to go from here
- 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.
No comments:
Post a Comment