Search Flex Components Free

Custom Search

March 16, 2008

Styling Alert controls in Flex using the StyleManager class and setStyle() methods





The following example shows how you can style a Flex Alert control using the static StyleManager.getStyleDeclaration() method, and the setStyle() method.


Full code after the jump.


View MXML


<?xml version="1.0" encoding="utf-8"?>

<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml"

layout="vertical"

verticalAlign="middle"

backgroundColor="white"

creationComplete="init();">



<mx:Script>

<![CDATA[

import mx.controls.Alert;

import mx.styles.StyleManager;



private var alert:Alert;

private var alertCSS:CSSStyleDeclaration;



private function init():void {

alertCSS = StyleManager.getStyleDeclaration("Alert");

}



private function showAlert(color:Object):void {

alertCSS.setStyle("modalTransparencyColor", color);

alertCSS.setStyle("themeColor", color);

alert = Alert.show("The quick brown fox...");

}

]]>

</mx:Script>



<mx:ApplicationControlBar dock="true">

<mx:Button label="Red"

themeColor="red"

click="showAlert('red');" />

<mx:Button label="Orange"

themeColor="haloOrange"

click="showAlert('haloOrange');" />

<mx:Button label="Yellow"

themeColor="yellow"

click="showAlert('yellow');" />

<mx:Button label="Green"

themeColor="haloGreen"

click="showAlert('haloGreen');" />

<mx:Button label="Blue"

themeColor="haloBlue"

click="showAlert('haloBlue');" />

</mx:ApplicationControlBar>



</mx:Application>

Related Flex Tutorials