Search Flex Components Free

Custom Search

January 1, 2008

Changing the close button skin on a Flex TitleWindow container

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).

Code Example

<?xml version="1.0" encoding="utf-8"?>
<mx:Application xmlns:mx="" 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>

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"); }

Related Flex Tutorials