Archive

Posts Tagged ‘Flex Template Chooser’

Compiling Flex Themes Examples

March 18th, 2009
6 comments

To use multiple styles, themes, skins from within flex we need to compile corresponding layout data to a sfw-file. Some examples bellow.

Compile a simple css file on windows to use it as switchable style (style.swf):

C:\FLEX\flex_sdk_3\bin\mxmlc C:\AIRSDK\pslrss\css\style.css

Compile a theme/skin from fillcolors.com on windows:

C:\FLEX\flex_sdk_3\bin\mxmlc

-include-libraries=
C:\AIRSDK\pslrss\themes\rainbow\CSSPlus.swc,
C:\AIRSDK\pslrss\themes\rainbow\Mate3.swc

C:\AIRSDK\pslrss\themes\rainbow\Rainbow.css

stevie AIR 1.5, Flex 3 , , , ,

Theme Chooser in Flex

February 10th, 2009
10 comments

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 ;-).

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