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!

The Flex Task Plugin parses .mxml and .as files looks for instances of “TODO” or “FIXME” and adds the comments that follow to your Tasks view.

How freaking cool is that? Simple. Perfect. Love it.

This kind of reasoning was satisfying in the beginning but as I gain more experience with component development in Flex, I’m finding that it may not be as clear cut as I once thought. In fact, it wasn’t until I glanced at this article on Adobe’s Developer Connection site that I’ve since refined my decision-making process.

Here are the two points mentioned in the article:

• When you create composite controls declaratively, MXML makes it easier to create and lay out child controls.
• When you modify the behavior of components, that is, override their methods, you typically use ActionScript.

As simple and obvious as they may sound, they’re quite powerful when trying to decide in which direction to take your development. As stated in the article, most of the time you’ll be using a combination of the two. One way to do that is by using a technique called “code behind” which is something I’m working on right now…

UPDATE: After playing with the code behind technique mentioned in the article it seems obvious to me that it’s the way to go in most cases. It’s also very satisfying to separate form from function in a sensible manner.  Unless, you’re developing a very simple component you should probably get in the habit of writing core logic (as a class) in ActionScript and extending it via the root tag in MXML.