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

    Flex 4 Halo Theme & Spark Theme

    LB_ROCKS

      Now that most of Halo theme which we used do it by CSS is no longer valid, also if a application is using "Halo" theme then the application can't be simple changed to "Spark" theme withput considerable change to UI look and feel. Also simple thing like TitleWindow close button is now part of skinning if using "Spark" theme, This is no longer a property of s:TitleWindow unlike mx:TitleWindow, similarly header color  was simple in mx:Panel but in s:Panel we have to doa  programatic skining. I am not sure why Adobe decided to "hide" CSS style for all the component.

       

      Anybody has any insight into ? It is much more difficult to change theme dynamically.

       

      Thanks

        • 1. Re: Flex 4 Halo Theme & Spark Theme
          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.