Home > AIR 1.5, Action Script 3, Flex 3 > Theme Chooser in Flex

Theme Chooser in Flex

February 10th, 2009
Goto comments Leave a comment

Have you ever tried to implement a theme chooser in Flex?
We know we have to compile the CSS files for a skin to a SWF to make this happen. But unfortunately the adobe livedocs dont tell something about the nessesarry unloadStyleDeclarations method:

StyleManager.unloadStyleDeclarations(oldStyleFile);

…which will prevent us from some random mysteriouse behavior ;-).
Here comes a complete AS 3 example for Flex:


< ?xml version="1.0" encoding="utf-8"?>

	
    
< ![CDATA[

    import mx.styles.StyleManager;

    [Bindable]
    private var themes: Array = [
        {label:"Smoke", data:"themes/Smoke/Smoke.swf"},
        {label:"Institutional", data:"themes/Institutional/Institutional.swf"},
        {label:"AeonGraphical", data:"themes/AeonGraphical/AeonGraphical.swf"},
        {label:"Shadow", data:"css/shadow.swf"},
        {label:"Default Flex Style", data:"css/style.swf"},
        {label:"Blend", data:"css/blend.swf"},
        {label:"Flex Skins", data:"css/flex_skins.swf"},
        {label:"Ice", data:"themes/Ice/Ice.swf"},
        {label:"Rainbow", data:"themes/rainbow/Rainbow.swf"},
        {label:"Carbon", data:"themes/carbon/carbon.swf"},
        {label:"yflexskin", data:"themes/yflexskin/yflexskin.swf"}

    ];

    private var oldStyleFile:String;

    private function myLoadStyle():void{
        var layout:String=theme.selectedItem.data;
        StyleManager.unloadStyleDeclarations(oldStyleFile);
        StyleManager.loadStyleDeclarations(layout);
        oldStyleFile = layout;
    }

    ]]>

Notice:

1. To avoid any flicker effects while switching themes, we can use fadeIn/fadeOut-flex-effects during style changes.

2. Style-Declarations have to be set equivalent from theme to theme. Otherwise we get some memory effect on forgotten declarations (still present styles after changing).

Exciting FLEX themes/skins can be found here:
http://www.scalenine.com/
http://www.fillcolors.com/
Unfortunately most of them require some modifications for special (or common) purposes ;-).

If you found this useful, leave a comment...I love comments :-).

  • Digg
  • Sphinn
  • del.icio.us
  • Facebook
  • Mixx
  • Google
  • E-mail this story to a friend!
  • Print this article!
  • Spurl
  • StumbleUpon
  • Technorati

stevie AIR 1.5, Action Script 3, Flex 3 , , , , , , ,

  1. wow
    April 22nd, 2009 at 10:25 | #1
    Reply | Quote

    Sounds interesting. Thanks for info .I like You Now! (sounds weird.. should say I follow you Now!.. ) :)

  2. idea-boss
    May 25th, 2009 at 15:43 | #2
    Reply | Quote

    Hi,
    In the code there is only script. I need an UI. for ex., a dropdown or radio button which when selected , the correponding theme gets applied. So could you plz give the complete code ? Any help appreciated.

    Note: I am not a developer but a designer..

  3. stevie
    June 1st, 2009 at 13:29 | #3
    Reply | Quote

    Here comes a component sample. Hope it will be useful :-).
    http://werth.psycholutions.com/wp-content/uploads/2009/06/stylesswitch_component_sample.rar
    But notice, the whole skinning concept has been changed in Flex 4!

  4. flex explorer
    September 8th, 2009 at 13:11 | #4
    Reply | Quote

    In the notice at the end of your text you have mentioned using fadeIn/fadeOut effects in order to prevent flickering. How exactly did you mean to implement this?

    I tried attaching various effects to the Application itself by adding an effect to hideEffect / showEffect and then hiding the application before doing the style switch and making it visible again after the switch was complete. However this didn’t solve the problem…

  5. flex explorer
    September 8th, 2009 at 13:15 | #5
    Reply | Quote

    @flex explorer
    Sorry - I didn’t see you had it solved in the example posted at the end…

  6. U.F.O.
    November 21st, 2009 at 06:55 | #6
    Reply | Quote

    Good post! I plan to move into this stuff after I’m done with school, as most of it is time consuming. It’s a great post to reference back to. My blog needs more time to gain in popularity anyway.

  7. Woopy
    November 23rd, 2009 at 07:50 | #7
    Reply | Quote

    Well, to soon to say if it’s good, but at least it’s well designed.
    I mean I thought I would be blocked after adding some interests, but the site helps you to add more.
    Cheers

  8. Anderson
    May 4th, 2010 at 04:26 | #8
    Reply | Quote

    Hi,I’m trying to implement a theme chooser in my app,but when I use the code below:
    StyleManager.unloadStyleDeclarations(oldStyleFile);
    StyleManager.loadStyleDeclarations(layout);
    to switch from skin A to skin B,skin B is applied while the BorderSkin/HeaderSkin of the Panel defined in A still remains,so it looks like A+B,and then if u switch to a skin C,it’ll apears to be A+B+C.The BorderSkin/HeaderSkin is defined by ClassReference in css,and I do have tried a lot of different ways but I still cannot solve it,any help would be appreciated.

  9. Anderson
    May 4th, 2010 at 04:35 | #9
    Reply | Quote

    it should be fairly clear that unloading is not happening cleanly. Some style properties are getting stuck when doing the unloadStyleDeclartions.Obviously it is *at least in my case* not dumping all of the styles properties back to the defaults.

    how I should *properly* be unloading style sheets compiled to .swf’s? is this just a bug of flex?

    BTW,I’m using Flex Builder 3 and Flex SDK 3.2

  1. No trackbacks yet.
You must be logged in to post a comment.