Changing the close button skin on a Flex TitleWindow container

TitleWindow, , , , ,

The following example shows how you can change the appearance of the close button in a TitleWindow container in Flex by setting the closeButtonSkin style (or the closeButtonUpSkin, closeButtonOverSkin, closeButtonDownSkin, closeButtonDisabledSkin styles individually).

Full code after the jump.

View MXML

<?xml version="1.0" encoding="utf-8"?>
<!-- http://blog.flexexamples.com/2007/12/31/changing-the-close-button-skin-on-a-flex-titlewindow-container/ -->
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml"
        layout="vertical"
        verticalAlign="middle"
        backgroundColor="white">

    <mx:Style>
        TitleWindow {
            closeButtonSkin: Embed("cancel.png");
            /* Set values from defaults.css to null. */
            closeButtonDisabledSkin: ClassReference(null);
            closeButtonDownSkin: ClassReference(null);
            closeButtonOverSkin: ClassReference(null);
            closeButtonUpSkin: ClassReference(null);
        }
    </mx:Style>

    <mx:TitleWindow id="titleWindow"
            title="TitleWindow"
            status="status message"
            showCloseButton="true"
            width="100%"
            height="100%" />

</mx:Application>

View source is enabled in the following example.

If you want to use a different image for each state (up, over, down, disabled), you can either set each skin separately, as seen in the following snippet:

<mx:Style>
    TitleWindow {
        closeButtonUpSkin: Embed("bullet_green.png");
        closeButtonOverSkin: Embed("bullet_yellow.png");
        closeButtonDownSkin: Embed("bullet_red.png");
        closeButtonDisabledSkin: Embed("bullet_white.png");
    }
</mx:Style>

Or, you can specify a SWF file and symbol name for the close button skins, as seen in the following snippet:

TitleWindow {
    closeButtonDisabledSkin: Embed(source="Assets.swf", symbol="CloseButtonDisabled");
    closeButtonDownSkin: Embed(source="Assets.swf", symbol="CloseButtonDown");
    closeButtonOverSkin: Embed(source="Assets.swf", symbol="CloseButtonOver");
    closeButtonUpSkin: Embed(source="Assets.swf", symbol="CloseButtonUp");
}

Or, you can create a Flex Componet skin using the Flex Component Kit and Flash CS3 where the movie clip symbol in the library has the following frame labels: up, over, down, disabled, as seen in the following example:

View MXML

<?xml version="1.0" encoding="utf-8"?>
<!-- http://blog.flexexamples.com/2007/12/31/changing-the-close-button-skin-on-a-flex-titlewindow-container/ -->
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml"
        layout="vertical"
        verticalAlign="middle"
        backgroundColor="white">

    <mx:Style>
        TitleWindow {
            closeButtonSkin: Embed(skinClass="BulletSkins");
            /* Set values from defaults.css to null. */
            closeButtonDisabledSkin: ClassReference(null);
            closeButtonDownSkin: ClassReference(null);
            closeButtonOverSkin: ClassReference(null);
            closeButtonUpSkin: ClassReference(null);
        }
    </mx:Style>

    <mx:TitleWindow id="titleWindow"
            title="TitleWindow"
            status="status message"
            showCloseButton="true"
            width="100%"
            height="100%" />

</mx:Application>

View source is enabled in the following example.

9 thoughts on “Changing the close button skin on a Flex TitleWindow container”

  1. Interesting .. but need further help.

    This is a very helpful blog. Thank you very much for sharing it.
    This is the first time that I have to deal with skin class and I do not completely following your example. So here is what I am doing.

    I am using flex 2. My file structure is

    src
       app.mxml
       com
         myapp
             components
               myPopup.mxml
      css
         app.css
       images
         cancel.png

    The cancel.png is exactly following your example

    So here is the issue, when I added the styles into my css, whatever I did, the new cancel button did not show up.

    I actually copied cancel.png to all the possible locations and it still would not work. I am using Flex Builder 2 right now. Could you please let me know what I did wrong? Thank you again

  2. Melvin,

    Does the following work in your app.css?

    /* CSS file */
TitleWindow {
    closeButtonSkin: Embed("../images/cancel.png");
    /* Set values from defaults.css to null. */
    closeButtonDisabledSkin: ClassReference(null);
    closeButtonDownSkin: ClassReference(null);
    closeButtonOverSkin: ClassReference(null);
    closeButtonUpSkin: ClassReference(null);
}

    Peter

  4. Hi Peter,

    Great stuff as usual.

    Im curious if you might consider doing a blog entry on how to add additional ‘buttons’ to the titlewindow header. Is this possible?

      1. Hi, my close button is having size 10*10 and it becomes stretchy. What I do is to resize the image to 16*16 and the problem solved.

  7. I find the cross is just a little small – don’t you? I went to enlarge it but unfortunately it’s been exported by a drawing tool. If someone can give me the codes that I need to stick in to replace the three lines that look like: data=”M 3 5 L 4 5 L 4 6 L 5 6 L 5 7 L 4 7 L 4 8 L 3 8 L 3 9 L 4 9 L 4 10 L 5 10 L 5 9 L 6 9 L 6 8 L 7 8 L 7 9 L 8 9 L 8 10 L 9 10 L 9 9 L 10 9 L 10 8 L 9 8 L 9 7 L 8 7 L 8 6 L 9 6 L 9 5 L 10 5 L 10 4 L 9 4 L 9 3 L 8 3 L 8 4 L 7 4 L 7 5 L 6 5 L 6 4 L 5 4 L 5 3 L 4 3 L 4 4 L 3 4 L 3 5 Z” in order to make it larger then I would be extremely grateful. I know how to do the rest (reposition it and enlarge the box).

Comments are closed.