5 Replies Latest reply on Jul 29, 2011 8:41 AM by Flex problems

    Changing themes of application in Flex 3

    S k R Pasha Level 1

      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>

        • 1. Re: Changing themes of application in Flex 3
          BhaskerChari Level 4

          Hi Rajik Pasha,

           

          I don't think there is any property called styleSheet on application object.

           

          Application.application.styleSheet = sheet;

           

          You better make use of StyleManager class to load or unload css in the form of a swf.

           

          Alert1.swf is the swf file for your Alert.css which you can create it by just right clicking on the css file and select the option from menu as Compile CSS to SWF.

           

          StyleManager.loadStyleDeclarations("assets/css/Alert1.swf");

           

           

          StyleManager.unloadStyleDeclarations("assets/css/Alert1.swf");

          StyleManager.loadStyleDeclarations("assets/css/Alert2.swf");

           

          StyleManager.unloadStyleDeclarations("assets/css/Alert2.swf");

          StyleManager.loadStyleDeclarations("assets/css/Alert3.swf");

           

           

          So as I mentioned above before you load another css swf file trt to unload the previously loaded swf file.

           

           

          Thanks,

          Bhasker

          • 2. Re: Changing themes of application in Flex 3
            S k R Pasha Level 1

            Thanks brother...

             

            Will it work fine when we specify .css instead of .swf ????

            • 3. Re: Changing themes of application in Flex 3
              BhaskerChari Level 4

              No you only need to specify swf file not the css.

               

              Thanks,

              Bhasker

              • 4. Re: Changing themes of application in Flex 3
                S k R Pasha Level 1

                THANKS A LOTTT.........................

                ===========================

                • 5. Re: Changing themes of application in Flex 3
                  Flex problems

                  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