Optimal way to enable user to pick style at run time - Flex

Question

What I'm trying to do: allow a user to be able to select a color palette for a custom component by selecting from a drop down menu with a variety of icons.

I have the drop down menu part down, but I'm trying to understand how to best handle the various styles in my code. Ideally I would have liked to be able to load styles at run time, but I don't see a major advantage with this so I'm now thinking about compiling in all styles. Still, I can't seem to find a decent way to structure the code. Hacking it seems pretty easy / fast, but there's got a better way than having a big fat array of values which can be indexed via some index associated with each icon - yuck!

Would love to hear your thoughts or see any pointers to obvious ways to handle this.

thank you!

fred

Answer 1

I'd define a set of style names in CSS, then you can use a collection of style names to provide values for your style selector control, like so:

<?xml version="1.0" encoding="utf-8"?>
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" layout="absolute">
    <mx:Style>
        .style1{color:red;}
        .style2{color:green;}
        .style3{color:blue;}
    </mx:Style>
    <mx:Script>
        <![CDATA[
            import mx.collections.ArrayCollection;

            public static const styleNames:ArrayCollection = 
                    new ArrayCollection(['style1', 'style2', 'style3']);
        ]]>
    </mx:Script>
    <mx:ComboBox 
        id="styleCombo" 
        styleName="{styleCombo.value}" 
        dataProvider="{styleNames}" 
    />
</mx:Application>

Answer 2

The optimal way to achieve this is to compile several CSS+Swf(assets) files and then loading them at runtime according to what the user selected.

This is by far the best practice out there, I used it for large applications and small applications and it stands tall above every other solution I could think of.

good luck