TitleWindow objects are great, but if you want more than just a close button in the title bar you’ll need to extend the component and add the functionality yourself.

Here’s a quick how-to:

package
{
    import mx.containers.TitleWindow;
    import mx.controls.Button;
    import mx.controls.LinkButton;

    public class CustomTitleWindow extends TitleWindow
    {
        private var helpButton : LinkButton;
        private var _closeButton : Button;

        public function CustomTitleWindow ()
        {
            title = "Custom TitleWindow";
            showCloseButton = true;
        }

        private function get closeButton () : Button
        {
            if (! _closeButton)
            {
                for (var i : int = 0; i < titleBar.numChildren; ++ i)
                {
                    if (titleBar.getChildAt (i) is Button &&
                        titleBar.getChildAt (i) != helpButton)
                    {
                        _closeButton = titleBar.getChildAt (i) as
                            Button;
                    }
                }
            }

            return _closeButton;
        }

        override protected function createChildren () : void
        {
            super.createChildren ();

            if (! helpButton)
            {
                helpButton = new LinkButton ();
                helpButton.label = "Help";
                helpButton.focusEnabled = false;
                helpButton.setStyle ("paddingTop", 4);

                titleBar.addChild (helpButton);
                helpButton.owner = this;
            }
        }

        override protected function layoutChrome (w : Number,
            h : Number) : void
        {
            super.layoutChrome (w, h);

            var width : Number =
                helpButton.getExplicitOrMeasuredWidth ();
            var height : Number =
                helpButton.getExplicitOrMeasuredHeight ();

            var x : Number = closeButton.x – width;
            var y : Number = closeButton.y – Math.floor
                ((height – closeButton.height) * 0.50);

            helpButton.setActualSize (width, height);
            helpButton.move (x, y);
        }

    }
}


As you can see above, all you need to do is extend TitleWindow and override the createChildren() and layoutChrome() methods. You add your button(s) to the title bar in the former, and size and position them in the latter.

Keep in mind this example doesn’t include an event handler, so you’ll need to implement one if you actually want your button to do something. 🙂