By Alain Thibodeau – Consultant
In a Flex mobile application, the ActionBar is the main bar at the top which contains several content areas. These areas consists of the titleDisplay, actionGroup, titleGroup and navigationGroup skin parts. With a custom skin you can move these skin parts where you need them and add background images.
I first hit Photoshop and created my visuals for the ActionBar as shown below. (I know most of you designers out there will give me the “eye brow” with my design, but go easy on me please…)

I sliced out the logo and a 3 pixel slice of the bar. Looking like this:

I then created a Flex Mobile Project. In the main project file, I referenced a css file which contains this code:
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 | @namespace s "library://ns.adobe.com/flex/spark"; s|ActionBar { skinClass:ClassReference("skins.CustomActionBarSkin"); defaultButtonAppearance: beveled; } s|ActionBar #titleDisplay { fontWeight:normal; color: #000000; } s|ActionBar #titleGroup { fontWeight:normal; color: #FFFFFF; } |
The most important part of the css file is the declaration of the skin class for our custom skin. The other styles are for the text in the titleGroup and titleDisplay groups.
Here is the custom action bar mxml skin. It could have been written in ActionScript, however, I did not notice any performance issues with mxml.
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 | <?xml version="1.0" encoding="utf-8"?> <s:Skin xmlns:fx="http://ns.adobe.com/mxml/2009" xmlns:s="library://ns.adobe.com/flex/spark"> <fx:Metadata> [HostComponent("spark.components.ActionBar")] </fx:Metadata> <s:states> <s:State name="titleContentWithActionAndNavigation"/> <s:State name="titleContentWithNavigation"/> <s:State name="titleContentWithAction"/> <s:State name="titleContent"/> <s:State name="titleWithActionAndNavigation"/> <s:State name="titleWithNavigation"/> <s:State name="titleWithAction"/> <s:State name="title"/> </s:states> <s:Image source="@Embed('/assets/images/bar.png')" left="0" right="0" scaleMode="stretch"/> <s:Image source="@Embed('/assets/images/logo.png')" horizontalCenter="0"/> <s:Group id="navigationGroup" left="12" top="15"/> <s:Group id="titleGroup" left="10" top="68"/> <s:Group id="actionGroup" right="12" top="15"/> <s:Label id="titleDisplay" horizontalCenter="0" top="8"/> </s:Skin> |
The modifications to the skin are adding the background images and moving the skin parts where we need them. In this case, my slice of the background is stretched across the width of the application. The logo is then put on top of the bar and centered, aligning itself with the lines and shadows.
What I didn’t add is consideration for different dpis. This could be accomplished by having different images for the different screen resolutions.
Lastly, here is the view that defines what goes in the content areas. We could extend the ActionBar and add more skin parts as needed. In our case we are using the “titleContent” SkinPart for some form of subtitle text area.
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 | <?xml version="1.0" encoding="utf-8"?> <s:View xmlns:fx="http://ns.adobe.com/mxml/2009" xmlns:s="library://ns.adobe.com/flex/spark" title="Action Bar Skin"> <s:navigationContent> <s:Button label="Back"/> </s:navigationContent> <s:titleContent> <s:Label text="Some Text Here"/> </s:titleContent> <s:actionContent> <s:Button label="Action" /> </s:actionContent> </s:View> |
Here is what the application looks like with the custom ActionBarSkin:







By Alain Thibodeau – Consultant
