<?xml version="1.0" encoding="utf-8"?>
<mx:Application
    xmlns:mx="http://www.adobe.com/2006/mxml"
    creationComplete="creationComplete()"
    backgroundColor="#333333"
    viewSourceURL="source/index.html">
    
    
    <mx:Script>
        <![CDATA[
            
            import com.rubenswieringa.CSSLoader;
            import flash.events.Event;
            import mx.managers.CursorManager;
            
            private var styleLoader:CSSLoader;
            
            private function creationComplete ():void {
                styleLoader = new CSSLoader();
                styleLoader.addEventListener(CSSLoader.LOAD_INIT, onLoadStarted);
                styleLoader.addEventListener(CSSLoader.RESULT, onLoadFinished);
                styleLoader.load('assets/css/default.css', 'default', this);
            }
            
            private function onLoadStarted (event:Event):void {
                CursorManager.setBusyCursor();
            }
            private function onLoadFinished (event:Event):void {
                CursorManager.removeBusyCursor();
            }
            
        ]]>
    </mx:Script>
    
    
    <mx:Panel title="CSSLoader demo" width="700" horizontalScrollPolicy="off">
        <mx:VBox width="100%" verticalGap="10" paddingTop="10" paddingRight="10" paddingBottom="10" paddingLeft="10">
            
            
            <mx:HBox width="100%" verticalAlign="bottom" horizontalGap="15">
                <mx:Label width="50%" text="made by Ruben Swieringa (www.rubenswieringa.com)" id="madeBy" />
                <mx:Button    width="25%"
                            styleName="applyBtn" id="lightBtn"
                            label="load &amp; apply 'light.css'"
                            click="styleLoader.load('assets/css/light.css', 'light', this)" />
                <mx:Button    width="25%"
                            styleName="applyBtn" id="darkBtn"
                            label="load &amp; apply 'dark.css'"
                            click="styleLoader.load('assets/css/dark.css', 'dark', this)" />
            </mx:HBox>
            
            
            <mx:HBox width="100%" verticalAlign="bottom" horizontalGap="5">
                <mx:Label width="100%" text="Usage" styleName="title" />
                <mx:Label width="100%" text="Description" styleName="title"  />
            </mx:HBox>
            
            
            <mx:HBox width="100%" height="100%" horizontalGap="15">
                <mx:TextArea width="100%" height="250" id="usage" wordWrap="false" editable="false" verticalScrollPolicy="off">
                    <mx:htmlText>
                        <![CDATA[import com.rubenswieringa.CSSLoader;<br />import flash.events.Event;<br /><br />var loader:CSSLoader = new CSSLoader();<br /><br /><font color="#888888">// load and automatically apply style to displayObj1 and displayObj2 and their children:</font><br />loader.load('myStyle.css', 'myStyle', displayObj1, displayObj2);<br /><br /><font color="#888888">// load and manually apply style to displayObj1 and displayObj2 and their children:</font><br />loader.load('myStyle.css'); <font color="#888888">// note that the second parameter is optional</font><br />loader.addEventListener(CSSLoader.RESULT, onCSSloaded);<br />private function onCSSLoaded (event:Event):void {<br />    loader.applyLastLoadedStyle(displayObj1, true)<br />}]]>
                    </mx:htmlText>
                </mx:TextArea>
                <mx:TextArea styleName="some" width="100%" height="100%" id="description" editable="false">
                    <mx:htmlText><![CDATA[CSSLoader is a class developed by <a href="http://www.rubenswieringa.com">Ruben Swieringa</a> that enables runtime loading of css files in Actionscript 3.0, which was previously only possible through compiling stylesheets into swf files. More information is to be found in <a href="http://www.rubenswieringa.com/blog/no-runtime-css-what">a post on my blog</a>.<br /><br />Please note that this class is for styling components during runtime, rather than styling text.<br /><br />For a more thorough explanation of features and limitations of this class, please read the readme included in the source.]]></mx:htmlText>
                </mx:TextArea>
            </mx:HBox>
            
            
        </mx:VBox>
    </mx:Panel>
    
    
</mx:Application>