随笔-75  评论-193  文章-5  trackbacks-0

在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>
posted on 2009-11-11 21:59 The Matrix 阅读(1586) 评论(0)  编辑  收藏 所属分类: Flex

只有注册用户登录后才能发表评论。


网站导航: