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!

AIR locks suck. They make life hell when you’re debugging.

I’ve just found the hard way that an application running on AIR puts an exclusive lock on your flashlog.txt file. So if you’re a fan of FlashTracer to keep track of your trace statements and of installing and using AIR apps, you’re SOL.

In short, you can either develop AIR apps or use them, but not both.

You can check out the useless bug page, here.