flex中如何用编程的方式实现State

flex中如何用编程的方式实现State

在Flash Builder 4 Beta 2版本中，使用mxml方式实现state的切换有了很大改进，使用起来更方便，具体可参见下文：

http://onflex.org/learn/fx4/index.php?page=States

看完这篇文章后，想到一个问题，如何用编程的方式实现切换呢，找了参考资料，实现了一个例子，代码如下：

开发环境：Flash Builder 4 Beta2

<? 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"
    creationComplete ="creationCompleteHandler(event)" >
     < fx:Script >
         <![CDATA[
            import mx.core.UIComponent;
            import mx.events.FlexEvent;
            import mx.states.SetProperty;
            import mx.states.State;
            
            import spark.components.Label;
            import spark.components.Panel;

            private var stateArray : Array;
            private var state1 : State;
            private var state2 : State;
            
            protected function creationCompleteHandler(event:FlexEvent):void
            {
                state1 = new State();
                state1.name="state1";
                
                state2 = new State();
                state2.name="state2";
                
                var stateArray1:Array = new Array();
                var stateArray2:Array = new Array();
                
                state1.overrides = stateArray1;
                state2.overrides = stateArray2;
                
                stateArray = new Array();
                stateArray.push(state1);
                stateArray.push(state2);
                this.states = stateArray;
                
                var panel:Panel = new Panel();
                group.addElement(panel);
                var label:Label = new Label();
                panel.addElement(label);
                
                buildStates(stateArray1, stateArray2, panel, label);
                this.currentState = "state1";
            }

            private function buildStates(stateArray1:Array, stateArray2:Array,
                compenent1:UIComponent, compenent2:UIComponent) : void{
                
                stateArray1.push(makeSetProp(compenent1, "title", "Panel1"));            
                stateArray1.push(makeSetProp(compenent2, "text", "One"));
                
                stateArray2.push(makeSetProp(compenent1, "title", "Panel2"));
                stateArray2.push(makeSetProp(compenent2, "text", "Two"));
            }
            
            private function makeSetProp(target:UIComponent, name:String, value:*):SetProperty{
                var sp:SetProperty = new SetProperty();
                sp.target = target;
                sp.name = name;
                sp.value = value;
                return sp;
            } 
         ]]>
     </ fx:Script >
        
     < s:VGroup  autoLayout ="true"  horizontalAlign ="center" >
         < s:HGroup  horizontalCenter ="0" >             
             < s:Button  label ="One"  
                click ="this.currentState='state1'" />             
             < s:Button  label ="Two"  
                click ="this.currentState='state2'" />             
         </ s:HGroup >
         < s:HGroup  id ="group"  horizontalCenter ="0" >             
         </ s:HGroup >
     </ s:VGroup >
    
</ s:Application >