6 Replies Latest reply on Aug 1, 2011 8:53 AM by Flex problems

    Multiple themes for one application

    Flex Rock Level 1

      Hi,

              How to apply multiple themes dynamically for singel application. Is there any sample available.

       

      Regards,

      Jayagopal.

        • 1. Re: Multiple themes for one application
          fakerabbit

          You should read some articles on the skinClass property. You can use it to switch between css files defining your skins.

          Sorry, don't have an example right now, but try googling "flex skinClass", I'm sure something will come up.

          • 3. Re: Multiple themes for one application
            Flex problems

            Hi,

            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/AeonGraphic al.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.css,${flexlib}/themes/Spark/spark.css,${flexlib}/theme s/AeonGraphical/AeonGraphical.css

              or -theme+=assets/Halo/halo.css,assets/Spark/spark.css,assets/AeonGraphical/AeonGraphical.cs s

             

            i tried with locally project assets path, and framework path nothing work out. and added these themes in the flex-config.xml file also.

            And i tried to run your MyStyle app same problem. Please advise me ASAP.

             

             

             

            Advance Thanks,

            Usha

             

             

            Optional Information:

            Computer OS: Windows XP

            Programming Language: mxml/as3

            Compiler: flash 4.1.0

            • 4. Re: Multiple themes for one application
              saisri2k2 Level 4

              Try to add listeners for the loadStyleDeclaration. If you add them you will

              kow if there is an error or everything went fine.

               

              http://livedocs.adobe.com/flex/3/html/help.html?content=styles_10.html

              • 5. Re: Multiple themes for one application
                Flex Rock Level 1

                Hi Usha,

                                Are you able to see the default themes loaded when your application is launched. If you want to specify a theme at run time using the .swf file you have to specify them in preInitialize of the application ie(Before components get created).

                 

                For example:

                 

                <?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" preinitialize="onPreInitialize(event)"
                               creationPolicy="none">
                    <fx:Declarations>
                        <!-- Place non-visual elements (e.g., services, value objects) here -->
                    </fx:Declarations>
                    <fx:Script>
                        <![CDATA[
                            import mx.events.FlexEvent;
                            import mx.events.StyleEvent;
                            private var eventDispatcher:IEventDispatcher
                            private var themeName:String;
                            private function onPreInitialize(evt:FlexEvent = null):void{
                                 themeName = "assets/AeonGraphical/AeonGraphical.swf";
                                loadTheme(themeName)
                               
                            }
                            private function loadTheme(themeName:String):void{
                                if(themeName != null && themeName != ''){
                                eventDispatcher = styleManager.loadStyleDeclarations(themeName);
                                eventDispatcher.addEventListener(StyleEvent.COMPLETE, onComplete)
                                eventDispatcher.addEventListener(IOErrorEvent.IO_ERROR, getNextTheme);
                                eventDispatcher.addEventListener(StyleEvent.ERROR, getNextTheme);
                                }
                                getNextTheme();
                            }
                            private function onComplete(evt:StyleEvent):void{
                                createDeferredContent();
                            }
                            private function getNextTheme(evt:Event):void{
                                // You can try for the next theme by calling the loadTheme once again
                                themeName = "assets/AeonGraphical/Halo.swf";
                            }
                        ]]>
                    </fx:Script>

                <s:Label id="lblText" styleName="Stylename" width="100" height="100"/>
                </s:Application>

                You can have style name as inline for the above sample.

                 

                What you have done is correct, except that you need to explicitly set the style by using the below one.

                You need to go for setStyle() method.

                 

                lblText.styleName="stylename"

                lblText.setStyle('color',styleManager.getStyleDeclaration('.stylename').getStyle('stylepro perty'));

                 

                Regards,

                Jayagopal.

                • 6. Re: Multiple themes for one application
                  Flex problems Level 1

                  Hi Jay,

                   

                  Thank you so much FYI. But I tried all these too. nothing working out. do you have any working sample?

                  If yes can you pls send it to me. Is there any no# to reach you out as i need to submit this asap.