Problem
You want to give the users of your application the possibility to load different skins at runtime
Solution
Use the mxmlc compiler command and the loadStyleDeclarations() method of the StyleManager class
Detailed explanation
Create three different skins.
Under the themes folder, there is a subdirectory for each skin. In each subdirectory, there is:
- A SWF file with the skin assets
- A CSS file for the skin that maps the skin assets to the corresponding MXML components
When you are done creating the CSS file, type e.g mxmlc skin1.css in the command line to get skin1.swf in the same folder.
In Flex Builder, create a new Project and type the following script in the Main MXML file:
<mx:Script>The applyRuntimeStyleSheet() method takes a compiled CSS file as a parameter and calls the loadStyleDeclarations() method on the StyleManager class.
<![CDATA[
import mx.styles.StyleManager;
public function applyRuntimeStyleSheet(styleDcl:String):void {
StyleManager.loadStyleDeclarations(styleDcl)
}
]]>
</mx:Script>
In the layout, add three buttons so we can select the skin, calling the applyRuntimeStyleSheet() method:
<mx:Button id="b1" label="Skin 1" click="applyRuntimeStyleSheet('themes/skin1/skin1.swf')"/>
<mx:Button id="b2" label="Skin 2" click="applyRuntimeStyleSheet('themes/skin2/skin2.swf')"/>
<mx:Button id="b3" label="Skin 3" click="applyRuntimeStyleSheet('themes/skin3/skin3.swf')"/>Note that with this recipe, you can either do runtime styling (just styles like background-color, and no skin) or runtime skinning (using graphic assets) as both use a compiled CSS file (a SWF). The only difference is that in the latter case, the compiled stylesheet SWF points to the resources of the skin SWF.
Report abuse
