flex_(视图状态)使用创建和销毁策略;

<?xml version="1.0" encoding="utf-8"?>
<s:Application xmlns:fx="http://ns.adobe.com/mxml/2009"
               xmlns:s="library://ns.adobe.com/flex/spark"
               xmlns:mx="library://ns.adobe.com/flex/mx"
               minWidth="1024" minHeight="768" pageTitle="TheStudioOfCenyebao"
               applicationComplete="initFn(event)">
    
    <!-- Demo_(视图状态)使用创建和销毁策略(Using creation and destruction policies) -->
    
    <s:layout>
        <s:VerticalLayout paddingLeft="20" paddingTop="20"/>
    </s:layout>
    
    <s:states>
        <s:State name="orange" stateGroups="box"/>
        <s:State name="black" stateGroups="box"/>
        
        <s:State name="green" stateGroups="circle"/>
        <s:State name="blue" stateGroups="circle"/>
    </s:states>
    
    <fx:Script>
        <![CDATA[
            
            protected function initFn(event:Event):void{
                trace("=>initFn_start");
                log(event);    
                trace(boxElement, circleElement);
                trace("=>initFn_end");
            }
            
            protected function log(event:Event):void{
                trace("=>log()_start");
                trace(event.target.id, event.type);
                trace("=>log()_end");
            }
        ]]>
    </fx:Script>
    
    <!--view-->
    <s:Button label.orange="Black" label.black="Green" label.green="Blue" label.blue="Orange"
              click.orange="currentState='black'" click.black="currentState='green'"
              click.green="currentState='blue'" click.blue="currentState='orange'"/>
    <s:Group id="boxElement" includeIn="box" itemCreationPolicy="deferred" itemDestructionPolicy="auto"
             creationComplete="log(event);" addedToStage="log(event);" removedFromStage="log(event);">
        <s:Rect width="200" height="200">
            <s:fill>
                <s:SolidColor color.black="black" color.orange="#de7800"/>
            </s:fill>
        </s:Rect>
    </s:Group>
    
    <s:Group id="circleElement" includeIn="circle" itemCreationPolicy="immediate" itemDestructionPolicy="never"
             creationComplete="log(event);" addedToStage="log(event);" removedFromStage="log(event);">
        <s:Ellipse width="200" height="200">
            <s:fill>
                <s:SolidColor color.green="green" color.blue="blue" />
            </s:fill>
        </s:Ellipse>
    </s:Group>
    
</s:Application>