Signing up is easy and free.
About us
askMeFlash is question answer platform for flash Flex .This website is collaborative effort by many experienced flash experts .Asking questions is 100% free.
Dynamic Style Sheet - theme flex
Posted By : Redni | Posted At: 2009-03-31 14:08:12

Dynamic Style Sheet Implementation in Flex- dynamic theme chooser for you application

Introduction:What if I just choose color and my application theme gets changed. Amazing isnt it. This what this article is all about . We will use a color picker to select color and change the color theme based on that color .Its an amazing feature that you can give your users to set color theme of there application accourding to there preferences. Or you can use this feature to decide which color suits your website best.

1) Users: Give Optionto users to change color theme themselves by just selecting color.
2) Developers: A lot of re-work is reduced because stylesheet is dynamic .
3) Designers: Designers can select the best color theme required for there applications

Dynamic stylesheet in action see this.Choose the color from color picker and whole theme changed with a single click.
Download Source file here

How to implement dynamic stylesheet in flex:All you need to do do is just place a "ColorPicker" component in your application and call the method "ChangeTheme(colorpick.selectedColor)" and pass the color selected from color picker .I have written styles for all main components if you want to add more components you can add more styles similar to I have done.Note that I have changed global styles for all components which means that all components will be efffected .i.e Following line will change color theme for all buttons in application:

StyleManager.getStyleDeclaration("Button").setStyle("fillColors", [color, 0xffffff, color, 0xeeeeee]);

If you want to use styles for specific components , or say you want to use with one button and for other button diffefent style. then you can use it by defining customised css class . like this

StyleManager.getStyleDeclaration(".Button1css").setStyle("fillColors", [color, 0xffffff, color, 0xeeeeee]);

Above code will update only that button with style set as ".Button1css".

private function ChangeTheme ( color:uint):void {
StyleManager.getStyleDeclaration("ApplicationControlBar").setStyle("fillColors",[color,0xffffff]); StyleManager.getStyleDeclaration(".myTabs").setStyle("fillColors",[color,color]); StyleManager.getStyleDeclaration("ComboBox").setStyle("fillColors", [color, 0xffffff, color, 0xeeeeee]); StyleManager.getStyleDeclaration("Button").setStyle("fillColors", [color, 0xffffff, color, 0xeeeeee]); StyleManager.getStyleDeclaration("Panel").setStyle("headerColors",[color,0xffffff]); StyleManager.getStyleDeclaration("Panel").setStyle("backgroundColor",ColorUtil.adjustBrightness2(color,94)); StyleManager.getStyleDeclaration("Panel").setStyle("borderColor",ColorUtil.adjustBrightness2(color,70)); StyleManager.getStyleDeclaration("TitleWindow").setStyle("headerColors", [color, 0xffffff, color, 0xeeeeee]); StyleManager.getStyleDeclaration("TitleWindow").setStyle("backgroundColor",ColorUtil.adjustBrightness2(color,94)); StyleManager.getStyleDeclaration("TitleWindow").setStyle("borderColor",ColorUtil.adjustBrightness2(color,70)); StyleManager.getStyleDeclaration("ScrollBar").setStyle("fillColors", [color, ColorUtil.adjustBrightness2(color,50), color, 0xeeeeee]); StyleManager.getStyleDeclaration("HBox").setStyle("backgroundColor",ColorUtil.adjustBrightness2(color,94)); StyleManager.getStyleDeclaration("TabNavigator").setStyle("borderColor",ColorUtil.adjustBrightness2(color,80)); StyleManager.getStyleDeclaration("TextArea").setStyle("borderColor",ColorUtil.adjustBrightness2(color,80)); StyleManager.getStyleDeclaration("HBox").setStyle("borderColor",ColorUtil.adjustBrightness2(color,40)); StyleManager.getStyleDeclaration("DataGrid").setStyle("borderColor",ColorUtil.adjustBrightness2(color,40)); StyleManager.getStyleDeclaration("DataGrid").setStyle("headerColors",[ColorUtil.adjustBrightness2(color,80),0xffffff]); StyleManager.getStyleDeclaration("DataGrid").setStyle("alternatingItemColors",[ColorUtil.adjustBrightness2(color,90),0xffffff]);
Register and get access to:
  • Flash applications
  • Post Flash Questions and get answers from experts.
  • Get workarounds for flash bugs
  • Get Sourcecode
  • Get free experts advice
  • Meet Other Flash/Flex/FMS developers
  • Flash | Flex | FMS | Flash Media Server | Adobe AIR | ActionScript,Flash Solutions | Flash Question | Flash Answers | Flash Developers | Flash Problem,Flash Help,Flash bugs,Flash workaround | Flash Blog | Flash Forum | Flex Development | Actionscript development | Flash development | Adobe AIR development
    Copyright � 2008 All rights reserved