Flex State对象

 

在Flex 程序中，引入了状态设计的概念。在一个程序中，按照功能的需求，将界面切分成相对独立的部分。运行过程中，随着用户交互，界面在各个部分之间切换。比如在购物车程序中，登录界面、选购商品界面、购物车界面、付款界面，这些部分代表着不同的功能，显示当前程序的运行状态，每个界面便是一个状态（Status）。

 

在一个复杂的程序中，将程序按照功能进行结构划分是非常重要的，这样，问题会变得明了，这也是使用状态设计的原因。

 

其实，我们和状态打过很多交道，只不过没有把它理论化。比如，鼠标的点击动作，也是由几个状态组成的：鼠标移上、鼠标按下、鼠标松开、鼠标移开。用这种视角来分析问题，条理就很清楚，不容易陷入令人烦恼的逻辑纠纷中。

 

当状态发生改变时，我们可以为两个状态的切换添加形变动画。形变动画由若干个动画效果组成，可以理解为：状态的切换也是行为的一种，因此，形变动画的创建和使用与行为一样，非常简单。

 

在Flex中，状态的创建也是很简单的。我们不需要花费时间在界面的设计上，也不用去关心状态的运作方式，这些都由Flex来完成。

 

所有的组件都实现了状态机制，一般情况下，容器类组件或有容器特色的组件和状态机制是最佳组合，这样状态机制就可以控制程序的一个功能块。

 

请看实例demo.mxml的源程序：

<?xml version="1.0" ?>

<!-- Simple example to demonstrate the States class. -->

<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml">

<mx:Script>

        <![CDATA[

            import mx.controls.Alert;

            import mx.events.CloseEvent;

 

            private function clickHandler(event:Event):void {

                Alert.show("Do you want to save your changes?", "Save Changes", 3, this, alertClickHandler);

            }

 

            // Event handler function for displaying the selected Alert button.

            private function alertClickHandler(event:CloseEvent):void {

                 if (event.detail==Alert.YES)

                 {

                    //status.text="You answered Yes";

                    lable1.text = "Please Login!";

                    currentState='';

                 }

                 else

                 {

                     currentState='Register';

                    //status.text="You answered No";

                 }

            }

        ]]>

</mx:Script>           

    <!-- Define one view state, in addition to the base state.-->

    <mx:states>

        <mx:State name="Register">

            <mx:AddChild relativeTo="{loginForm}" position="lastChild">

                <mx:target>

                    <mx:FormItem id="confirm" label="Confirm:">

                        <mx:TextInput/>

                    </mx:FormItem>                    

                 </mx:target>

            </mx:AddChild>

            <mx:AddChild relativeTo="{loginForm}" position="lashChild">

                 <mx:target>

                    <mx:FormItem id="email" label="Email:">

                        <mx:TextInput id="emailId"/>

                    </mx:FormItem>

                </mx:target>

            </mx:AddChild>

            <mx:SetProperty target="{loginPanel}" name="title" value="Register"/>

            <mx:SetProperty target="{loginButton}" name="label" value="Register"/>            

            <mx:SetEventHandler target="{loginButton}" name="click" handlerFunction="clickHandler" />

 

            <mx:SetStyle target="{loginButton}" 

                name="color" value="blue"/>

            <mx:RemoveChild target="{registerLink}"/>

 

            <mx:AddChild relativeTo="{spacer1}" position="before">

                <mx:target>

                    <mx:LinkButton id="loginLink" label="Return to Login" click="currentState=''"/>

                </mx:target>

            </mx:AddChild>

        </mx:State>

    </mx:states>

 

    <!-- Define a Panel container that defines the login form.-->

    <mx:Panel title="Login" id="loginPanel" 

        horizontalScrollPolicy="off" verticalScrollPolicy="off"

        paddingTop="10" paddingLeft="10" paddingRight="10" paddingBottom="10">

 

        <mx:Text width="100%" color="blue" id="lable1"

            text="Click the 'Need to Register?' link to change state. Click the 'Return to Login' link to return to the base state."/>

 

        <mx:Form id="loginForm" >

            <mx:FormItem label="Username:">

                <mx:TextInput/>

            </mx:FormItem>

            <mx:FormItem label="Password:">

                <mx:TextInput/>

            </mx:FormItem>

        </mx:Form>

 

        <mx:ControlBar>

            <mx:LinkButton id="registerLink"  label="Need to Register?"

                click="currentState='Register'"/>

            <mx:Spacer width="100%" id="spacer1"/>

            <mx:Button label="Login" id="loginButton"/>

        </mx:ControlBar>

 

    </mx:Panel>

</mx:Application>

 

这里在mx:states标签中添加了一对mx:State标签，用来定义一个状态，并命名为“detail”。在State对象可以使用如下方法：

 

l  SetEventHandler：设置对象某一事件的监听方法

 

l  SetProperty：设置对象的属性

 

l  SetStyle：设置对象的样式

 

l  AddChild：向对象添加一个子级元素

 

l  RemoveChild：删除一个子级元素

 

l  Transition：设置状态的过渡动画效果

 

当程序或组件切换到目标状态时，里面添加的方法就会被自动调用。

 

在上面的实例中，使用了AddChild和RemoveChild方法。其中AddChild的relativeTo属性表示目标容器，position表示新对象在容器中的位置，可选的值有before、after、firstChild和lastChild。

 

<mx:AddChild relativeTo="{contentPanel}" position="lastChild" creationPolicy="all">

 

      ……

 

</mx:AddChild>

 

position 默认是lastChild，表示在所有子级元素的最后；firstChild表示添加在目标的所有子级元素最前面；before和after分别表示添加到对象的所在容器中，处于对象位置的前面和后面。在添加对象时，creationPolicy可以控制对象对子级元素的显示操作，可选的值有：all， auto，none和queued。all表示总是创建对象；auto表示只有需要对象时才创建；queued表示将对象放在等待创建的队列中，对象完成初始化再开始创建子级元素；none则表示不创建对象，直到调用了createComponentsFromDescriptors函数时才创建它。默认为auto，有时为了强迫对象总是显示出来，可以设为all。如果没有特殊的需求，设为all就可以了。

 

RemoveChild使用起来比较简单，只要指定目标即可：

 

<mx:RemoveChild target="{img}"></mx:RemoveChild>

 

这条语句表示删除img对象。

 

在使用State对象时，currentState属性代表了当前对象的状态，利用它我们可以很方便地操作状态的切换。在函数changeState中，就是利用currentState来改变状态的：

 

//判断当前状态，状态默认为空值

 

if(currentState == "detail"){

 

    currentState = "";          //切换到默认状态         

 

    btn.label = "了解详情";      //修改按钮的文字

 

}else{

 

    currentState = "detail";    //切换到detail状态      

 

    btn.label = "返回简介";

 

}

 

在从默认状态切换到“detail”状态时，<mx:State name = "detail">…< mx:State>标签内的代码开始执行。如果再次返回默认状态，所有的物件仍会恢复原貌。也就是说，“detail”状态下通过 AddChild、RemoveChild等进行的修改不会影响默认状态，被删除的物件仍然还在。 

 

本文来自CSDN博客，转载请标明出处：http://blog.csdn.net/YooLive/archive/2008/05/08/2417661.aspx

 

 

个人博客正式上线，欢迎访问

 

评论

2 楼 流浪的面包树 2009-08-05  

我也觉得State到底有什么好的。。。。。。。不过FLEX 4出来 就强化了State 了

1 楼 民工精髓 2009-08-05  

有个疑问，一直没明白State的优点在哪里？AddChild这种，跟开始的时候就全部写好几个界面放在ViewStack里面，感觉还要麻烦一些啊？