1 Reply Latest reply on Sep 12, 2011 11:55 PM by csmutha

    Dynamic theming

    Flex Rock Level 1

      Hi,

           I am loading the theme swf ie(css file compiled to swf) in my application.

       

      Here is a sample code.

       

      private var eventDispatcher:IEventDispatcher;

       

      private function loadTheme(theme:String):void{
                  if(theme != null && theme != ''){
                      modelLocator.appModel.loadedTheme = theme;
                      themeUrl = 'resources/'+theme+'/styles/tstv/theme.swf';

      eventDispatcher = FlexGlobals.topLevelApplication.styleManager.loadStyleDeclarations(themeUrl,true,true,App licationDomain.currentDomain);
      eventDispatcher.addEventListener(StyleEvent.COMPLETE, themeCompleteHandler, false, 0, true);

      }

       

      private function themeCompleteHandler(evt:StyleEvent):void{
                  IEventDispatcher(evt.currentTarget).removeEventListener(evt.type , themeCompleteHandler);
                  ModelLocator.getInstance().channelGuide.dispatchEvent(new Event('themeLoaded'));
              }

       

      It is not coming to the themeCompleteHandler. It doesn't throw any error as well.

      Any body help me to find out the problem.

       

      Regards,

      Jayagopal.

        • 1. Re: Dynamic theming
          csmutha

           

          Theming Document

           

          1.   Create skinning for all the components in flex using Flash Catalyst 5.5.

           

          (Flash Catalyst  Learning aid : http://tv.adobe.com/show/flash-catalyst-1-1-with-doug-winnie)

          2.   Use them in a model application using CSS.

          Eg. of CSS:

          /* CSS file */

          @namespace s "library://ns.adobe.com/flex/spark";

          @namespace mx "library://ns.adobe.com/flex/mx";

           

          s|Button {

                fontSize:24; //may or may not use these

                color: #FF9933;

                skinClass: ClassReference("ButtonSkin3");

                cornerRadius:10;

               

          }

          Where ButtonSkin3 is the Skinning file… in same folder where the CSS file exists.

          3.   After that model is finalized place the CSS in your Application (Right Click on the CSS and check CSS to SWF) using flash builder.

          4.   Use the SWF file for your application to change the look and feel via a menu at runtime…

          To learn how to do so use this link…

          http://help.adobe.com/en_US/flex/using/WS2db454920e96a9e51e63e3d11c0bf69084-7f8c.html#WS2d b454920e96a9e51e63e3d11c0bf62883-7fd4

           

          5.   In your application just call this dynamically from a menu or button.

          styleManager.loadStyleDeclarations("assets/BasicStyles.swf")

          BasicStyles.swf is our css file in swf format.