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.
<?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:
<?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.
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
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
Because in Module not appear a image in CLose Button ?
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?