Posts in Category "tutorial"

Tutorial: Styling the ActionBar

The ActionBar appears at the top of your application when you use ViewNavigatorApplication or TabbedViewNavigatorApplication in your project. It’s a skin part in the ViewNavigator that updates as Views are pushed and popped. Since it’s built into the default ViewNavigatorSkin, you don’t normally create it on your own in MXML. Because it’s built in, styling the ActionBar a little less obvious. So, I’d like to show you a few easy ways to customize the look of the ActionBar through CSS.

chromeColor

ActionBar supports the chromeColor style introduced with Spark in Flex 4. This example changes the ActionBar chromeColor to red for the entire application:

<?xml version="1.0" encoding="utf-8"?>
<s:ViewNavigatorApplication
xmlns:fx="http://ns.adobe.com/mxml/2009"
xmlns:s="library://ns.adobe.com/flex/spark"
firstView="views.holrHomeView">
<fx:Style>
@namespace s "library://ns.adobe.com/flex/spark";
 s|ActionBar
{
chromeColor: #990000;
}
</fx:Style>
</s:ViewNavigatorApplication>

titleAlign

By default, the ActionBar title is left aligned. To change the horizontal alignment of the title text, set the titleAlign style to left, center or right.

s|ActionBar
{
  chromeColor: #990000;
  titleAlign: center;
}

defaultButtonAppearance

By default, the ActionBar uses flat-styled button skins for Buttons inside the navigationContent or actionContent of the application or view. These buttons are designed to be flush with the edges of the ActionBar.

The ActionBar has two built-in button styles that are controlled by the defaultButtonAppearance style. The second option is a beveled, iOS-styled look seen here:

s|ActionBar
{
  chromeColor: #990000;
  defaultButtonAppearance: beveled;
}
...
<s:navigationContent>
  <s:Button label="Back">
</s:navigationContent>
<s:actionContent>
  <s:Button label="Buy">
</s:actionContent>

Using defaultButtonAppearance=”beveled” is a shortcut for setting several different style values besides the Button skinClass values. These styles include padding, font sizes, and titleAlign.

Advanced CSS Selectors

Setting styles on the ActionBar will cause those styles to be inherited down to title, navigationGroup and actionGroup components. For this reason, the SDK has structured the ActionBar style rules in the Mobile theme to use advanced CSS selectors (see sdks/4.5.1/frameworks/projects/mobiletheme/defaults.css). This is done to isolate styles to specific components and skin parts. For example, you can see that the beveled button skins use a smaller font size than the ActionBar title.

Using advanced CSS selectors does have the drawback of being less obvious to override. Here’s an example of overriding the advanced CSS in the mobile theme to (1) use a normal and italic font for the title and (2) replace the arrow-styled back button in navigationContent with the same skin as buttons used in actionContent.

s|ActionBar
{
  chromeColor: #990000;
  defaultButtonAppearance: beveled;
}

s|ActionBar #titleDisplay
{
    fontWeight: normal;
    fontStyle: italic;
}

s|ActionBar.beveled s|Group#navigationGroup s|Button
{
    /* use the rounded button instead of the arrow button */
    skinClass: ClassReference("spark.skins.mobile.BeveledActionButtonSkin");
}

Next Steps

Use these CSS examples in your mobile projects for quick and easy styling. For more control over the look and feel of the ActionBar, apply your own custom skins.

Share on Facebook