Phil Peron Flash Platform Developer and Game Development Hobbyist

Skinning Flex 4 Window Chrome in AIR for both Windows and Mac

The beauty of writing AIR applications is how easy it is to skin the user interface in whatever way you choose. It allows you to spend more time refining that interface instead of worrying about getting it to work. So in the spirit of refinement, let’s take a look at how simple it is to skin an AIR application’s window chrome (or TitleBar) to suit the expectations of users on both Windows and Mac.

First, create a new ActionScript class that extends spark.components.windowClasses.TitleBar:

package com.philperon.components
{
    import spark.components.windowClasses.TitleBar;

    public class TitleBar extends spark.components.windowClasses.TitleBar
    {
        public function TitleBar()
        {
	    super();
	}
    }
}

 

Now, you’ll want to create two skin classes for your TitleBar. One for Mac and one for Windows. To get you started, simply copy TitleBarSkin.mxml and MacTitleBarSkin.mxml from:

YOUR_FLEX_DIR/frameworks/projects/airframework/src/spark/skins/default/

 

…and paste them into your skins directory. Once that’s done, import them into your TitleBar class and override the attachSkin method:

package com.philperon.components
{
    import com.philperon.skins.MacWindowTitleBarSkin;
    import com.philperon.skins.WinWindowTitleBarSkin;

    import spark.components.windowClasses.TitleBar;

    public class TitleBar extends spark.components.windowClasses.TitleBar
    {
        public function TitleBar()
        {
	    super();
	}

	override protected function attachSkin():void
        {
	    if (isMac() && getStyle("skinClass") == WinWindowTitleBarSkin)
	    {
	        setStyle("skinClass", MacWindowTitleBarSkin);
	    } 

	    super.attachSkin();
	}
    }
}

 

Notice the ‘isMac’ method. This is a private method defined in the original TitleBar class that we can copy over as well.

package com.philperon.components
{
    import com.philperon.skins.MacWindowTitleBarSkin;
    import com.philperon.skins.WinWindowTitleBarSkin;

    import flash.system.Capabilities;

    import spark.components.windowClasses.TitleBar;

    public class TitleBar extends spark.components.windowClasses.TitleBar
    {
	public function TitleBar()
	{
	    super();
	}

	override protected function attachSkin():void
	{
	    if (isMac() && getStyle("skinClass") == WinWindowTitleBarSkin)
	    {
	        setStyle("skinClass", MacWindowTitleBarSkin);
	    } 

	    super.attachSkin();
        }

	private static function isMac():Boolean
    	{
            return Capabilities.os.substring(0, 3) == "Mac";
    	}
    }
}

 

Now it’s just a matter of tweaking your new TitleBar skins to match the look and feel you’re trying to express.

To tie it all together, don’t forget to point the component to your new skin. I follow what the Flex team does and default to the Windows style.

@namespace s "library://ns.adobe.com/flex/spark";
@namespace mx "library://ns.adobe.com/flex/halo";
@namespace p "com.philperon.components.*";

p|TitleBar
{
    skinClass: ClassReference("com.philperon.skins.WinWindowTitleBarSkin")
}

 

Happy coding!