Changing themes of application in Flex 3

Question

Hi All ,below is my  mxml file , in which i am trying to change theme of my flex application by selecting the themes in combo box, but it is not working fine.Is there any bug in code ??? How to change the theme of flex application in Flex 3.. Plzz help...
<?xml version="1.0" encoding="utf-8"?>
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" layout="absolute">
<mx:Script>
<![CDATA[
           import mx.controls.Alert;
            import mx.collections.ArrayCollection;
            import mx.styles.StyleManager;
            private var cssLoader:URLLoader;
          private var cssRequest:URLRequest;
          [Bindable]
            public var cards:ArrayCollection = new ArrayCollection(
                [ {label:"Theme 0", data:0},
                  {label:"Theme 1", data:1},
                  {label:"Theme 2", data:2},
                  {label:"Theme 3", data:3} ]);
               private function closeHandler(event:Event):void {
               if(event.target.selectedItem.data == 1){
                cssLoader = new URLLoader();
                cssRequest = new URLRequest("Alert.css");
                cssLoader.addEventListener(Event.COMPLETE, cssLoaderComplete);
                cssLoader.load(cssRequest);
            if(event.target.selectedItem.data == 2){
              cssLoader = new URLLoader();
                cssRequest = new URLRequest("Alert1.css");
                cssLoader.addEventListener(Event.COMPLETE, cssLoaderComplete);
                cssLoader.load(cssRequest);
            if(event.target.selectedItem.data == 3){
              cssLoader = new URLLoader(); 
                cssRequest = new URLRequest("Alert2.css");
                cssLoader.addEventListener(Event.COMPLETE, cssLoaderComplete);
                cssLoader.load(cssRequest);
             private function cssLoaderComplete(event:Event):void
                 var sheet:StyleSheet = new StyleSheet();
                 sheet.parseCSS(cssLoader.data);
                 Application.application.styleSheet = sheet;
]]>
</mx:Script>
<mx:Button label="Click Me"  x="337" y="148"/>
<mx:ComboBox dataProvider="{cards}" id="themeCombo" width="100"  change="closeHandler(event);" x="308" y="205"/>
</mx:Application>

Answer 1

Hi Bhasker,
I work for big bank sector corp - Citigroup.,i am using themes to load themes dynamically using style manager class.i wrote a application which have 3 themes as a combo box items. when theme selected the look and feel of the same application's UI screen has to change. for the loading i used below mxml application. please advise me as need to submit this task today to implement all our project.it will be very gr8 if u can help me.
<?xml version="1.0" encoding="utf-8"?><s:Application xmlns:fx="http://ns.adobe.com/mxml/2009" xmlns:s="
library://ns.adobe.com/flex/spark" xmlns:mx="
library://ns.adobe.com/flex/mx" minWidth="955" minHeight="600">
 <fx:Script><![CDATA[
import mx.controls.Alert;
import mx.styles.StyleManager;
import mx.events.StyleEvent;
[Bindable] private var themes:Array = [ "AeonGraphical","Spark","Halo" ];
private function initApp():void {
//Initialize the ComboBox to the first theme in the themes Array.
themesCmbBox.selectedIndex = themes.indexOf(0);
private function thmsCmbChangeHandler(themeName:String):void {
themeName= themesCmbBox.selectedLabel;
if (themeName!=null && themeName == "AeonGraphical") {
styleManager.loadStyleDeclarations("assets/AeonGraphical/AeonGraphical.swf");
if (themeName!=null && themeName == "Spark") {
styleManager.unloadStyleDeclarations("assets/AeonGraphical/AeonGraphical.swf");
styleManager.loadStyleDeclarations("assets/Spark/spark.swf");
if (themeName!=null && themeName == "Halo") {
styleManager.unloadStyleDeclarations("assets/Spark/spark.swf");
styleManager.loadStyleDeclarations("assets/Halo/halo.swf");
private function registrationComplete():void {
Alert.show('Thank you for registering!');
private function clickClear(event:KeyboardEvent=null):void {
if(event==null || event.keyCode == 13 ) {
person.text = "" ;
addr.text = "" ;
city.text = "";
state.text = "" ;
zip.text = "" ;
]]>
</fx:Script>
 <mx:Form id="Themes">
 <mx:FormItem>  
<mx:Label text="{'Themes Demo in Flash 4'}" fontSize="35"/>  
</mx:FormItem>  
<mx:FormItem label="Themes" >  
<mx:ComboBox id="themesCmbBox" dataProvider="{themes}" change="thmsCmbChangeHandler(themesCmbBox.selectedLabel)" />  
</mx:FormItem>  
<mx:FormItem label="Person Name">
 <mx:TextInput id="person" />
 </mx:FormItem>
 <mx:FormItem label="Street Address">
 <mx:TextInput id="addr"/>
 </mx:FormItem>
 <mx:FormItem label="City">
 <mx:TextInput id="city"/>
 </mx:FormItem>
 <mx:FormItem label="State">
 <mx:TextInput id="state" />
 </mx:FormItem>
 <mx:FormItem label="ZIP Code">
 <mx:TextInput id="zip" />
 </mx:FormItem>  
</mx:Form>
 <mx:HBox>
 <mx:Button id="sub" label="{'Submit'}" y="100" click="registrationComplete()" />
 <mx:Button id="reset" label="{'Reset'}" buttonDown="clickClear()" keyDown="clickClear(event)" />
 </mx:HBox> 
</s:Application>
and i given the compiler option: -theme=${flexlib}/themes/Halo/halo.swc,${flexlib}/themes/Spark/spark.css,${flexlib}/theme s/AeonGraphical/AeonGraphical.css
i tried with locally project assets path, and framework path nothing work out. and added these themes in the flex-config.xml file also. please advise me ASAP
Advance Thanks,
Usha
Optional Information:
Computer OS: Windows XP
Programming Language: mxml/as3
Compiler: flash 4.1.0