Adding an image on the right side of the title bar of a panel in Flex 4

Question

Hi,

I'm trying to create a MXML component based on the spark Panel and I would like to add an image on the right end of the title bar, so that the panel will have a text on the title bar and a small image at the right end. I'm using a skin to define the colors, background fill etc. But how do I add this image at the right end of the title bar? I would like to make that image cutomizable so that when the component is inserted, either the default image is used or a new image can be provided.

Please help with your ideas.

Answer 1

Add the image component to your skin and give it an id, also set the default image you want to show. Then create an ActionScript component extending Panel. In your custom Panel code, declare a skin part using the same name as the id you put in your skin. Now override the partAdded function in your custom Panel and set the image to whatever you like:

package mypackage
{
    import spark.components.Panel;
    import spark.primitives.BitmapImage;

    public class MyCustomPanel extends Panel
    {

        [SkinPart (required="false")]
        public var panelIcon:BitmapImage;

        override protected function partAdded(partName:String, instance:Object):void {
            super.partAdded(partName, instance);

            if (instance == panelIcon) {
                panelIcon.source = someOtherImageSource;
            }
        }
    }
}

Lastly, associate your skin file with your custom panel, either in CSS or by setting the skinClass when you use your custom panel.

Answer 2

You could always use the TitleWindow, and repurpose the close button to do something besides close. There is a good example of skinning the TitleWindow and TitleWindowClosebutton here: http://blog.flexexamples.com/2010/04/04/changing-the-close-button-skin-on-the-spark-titlewindow-container-in-flex-4/