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.
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";
fontSize:24; //may or may not use these
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…
5. In your application just call this dynamically from a menu or button.
BasicStyles.swf is our css file in swf format.