How can I add controls to the title bar of a flex panel?

Question

I'm trying to implement a collapsible TitleWindow popup by adding a handle to the top right corner of a Panel control. Unfortunately, the image that I add as the handle doesn't show up when the control is drawn. I can trigger a redraw by changing the source of the image, so apparently it's there, but it's somehow hidden.

Is there a way to make this Image control visible to the user?

Here's the code for the window:

package
{
    import mx.containers.Panel;
    import mx.controls.Image;

    public class CollapsableWindow extends Panel
    {
        public function CollapsableWindow()
        {
            super();
        }

        public var close:Image;

        protected override function createChildren():void
        {
            super.createChildren();
            close = new Image();
            close.source = "/assets/close.png";
            close.x = this.width - 20;
            close.y = 8;
            this.titleBar.addChildAt(close, 0);
        } 

    }
}

Answer 1

You need to create your button in the createChildren method, then position it in the updateDisplayList method:

    /**
     * Creates the button and adds it to the titlebar
     */
    override protected function createChildren():void 
    {
        super.createChildren();

        this.myButton = new Button();
        this.myButton.addEventListener(MouseEvent.CLICK, onButtonClick);
        this.titleBar.addChild(this.myButton);
    }

    /**
     * Sizes and positions the button on the titlebar
     */
    override protected function updateDisplayList(unscaledWidth:Number, unscaledHeight:Number):void 
    {
        super.updateDisplayList(unscaledWidth, unscaledHeight);

        this.myButton.setActualSize(myButton.getExplicitOrMeasuredWidth(),
                                       myButton.getExplicitOrMeasuredHeight());

        // Position the button 
        var y:int = 4;
        var x:int = this.width - this.myButton.width - 2;
        this.myButton.move(x, y);
    }   

Answer 2

I've had issues with PNG's not showing up in our app. Every once in a while, all our PNG's disappear. To test whether you're code suffers the same problem, try using a test image that's a GIF or other format. If it works then you're having the same issue I've run into dozens of times.

On our project, we solve this in two ways:

1. A workaround. Toggle your project's SDK version and, for some odd reason, that fixes it
   • So, for example, we use SDK 3.6
   • I right click on the project, chose properties and go to the Flex SDK section
   • From there I switch to ANY OTHER SDK version (say Flex 3.2) and choose ok
   • This triggers an automatic build (with some kind of mysterious PNG-fixing power)
   • Then I go back into the project properties and return it to our version.
   • 8 times out of 10 this restores the PNG images
   • This worked even when we were using Flex SDK 3.4 and 3.5
2. A fix. Change your PNG format to PNG-24
   • It seems the root problem is related to using the PNG-8 format
   • For our images, I open the original in Photoshop press CMD-Shft-Ctrl-S, invoking "Save For Web..."
   • Then I choose PNG-24 for the format, instead of PNG-8
   • A similar process should work in any other image editing program

I hope that helps in some way,

-- gMale