September 25, 2008

AIR: Creating a custom status bar

It’s easy to create your own customised status bar for AIR applications. For my example, I wanted to be able to display a network status icon that indicates whether the application is connected – this is bound to a state set by AIR’s network service monitor, via Cairngorm.

First of all, in your application MXML file, make sure showStatusBar is set to true, add the statusBarFactory parameter and point it to your custom component:

<mx:WindowedApplication xmlns:mx="http://www.adobe.com/2006/mxml" 
    layout="absolute" 
    showStatusBar="true" 
    statusBarFactory="{new ClassFactory(CustomStatusBar)}">

Then just make a new MXML component called CustomStatusBar and add any elements you want to display in your new status bar. There are a couple of things AIR will be expecting from a StatusBar, most importantly the status setter and getter methods required to display status text:

<?xml version="1.0" encoding="utf-8"?>
<mx:HBox width="100%" 
    xmlns:mx="http://www.adobe.com/2006/mxml" 
    backgroundColor="#E3E1E1" 
    >
    <mx:Script>
        <![CDATA[
            import mx.events.FlexEvent;
            import uk.ac.warwick.filesclient.model.AppModel;
            [Bindable] private var modelLocator:AppModel = AppModel.getInstance();

            [Bindable] public function get status():String
            {
                return this.statusText.text;
            }

            public function set status(value:String):void
            {
                this.statusText.text = value;
            }

            private function showNetworkStatusIcon():void
            {
                var path:String = "";
                if(modelLocator.isNetworked)
                {
                    statusIcon.source = "greenlight.png";
                } else {
                    statusIcon.source = "greylight.png";
                }
            }
        ]]>
    </mx:Script>
    <mx:Label id="statusText" paddingLeft="7" fontAntiAliasType="advanced"/>
    <mx:Image id="statusIcon" 
    toolTip="Network status"  
    horizontalAlign="right" 
    width="100%" 
    height="10" 
    verticalAlign="middle" 
    render="showNetworkStatusIcon()"/>
</mx:HBox>
You can add almost anything you like in there with this technique; animations, custom text etc. Here’s a quick screen grab of my basic custom status bar with its status light on green after a bit more tweaking of the layout and styling – nothing amazing, but its useful to be able to add your own elements when required (click to enlarge);

Status bar

- 2 comments by 1 or more people Not publicly viewable

  1. mnieves

    nice example.
    like to see also the directory list example. i been searching on how to display local file icons like yours. looks clean.

    26 Sep 2008, 03:02

  2. Steven Carpenter

    Thanks – I’ll write something about how I did the icon stuff soon :-)

    26 Sep 2008, 09:14


Add a comment

You are not allowed to comment on this entry as it has restricted commenting permissions.

Trackbacks

Search:

MXNA link

Tweets



    Tags

    Other blogs I like...

    Black Pepper Software Go to 'Black Pepper Software'

    Eismann-sf Go to 'eismann-sf'

    Ted On Flex Go to 'Ted On Flash'

    Galleries

    Meetups:

    Not signed in
    Sign in

    Powered by BlogBuilder
    © MMXIV