Flex4 State状态的使用

什么是状态(States)?

在很多富互联网应用，网页外观的改变基于用户的行为。一个状态就定义了组件的一种表现样式。要想使用状态，你应该首先定义一个默认的状态，然后在此基础上重写或者更改，这样就形成了一系列的其他样式。你可以添加、移除某些子元素，更改CSS或者属性的值，更改触发的事件。这些如何做到，我们会一一介绍。

下面我们先通过一个例子大概看一下如何使用State。

下面这段代码呈现的首先是一个登陆的界面，当你单击注册的链接，它就会变成一个注册界面。它是新的界面但不是新的页面。通过浏览器的后退按钮你是回不到原来的状态的。当然，我们也会有办法实现这个功能，以后会介绍。



<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/halo" minWidth="1024" minHeight="768">
<s:layout>
<s:BasicLayout/>
</s:layout>

<s:states>
<s:State name="default"/>
<s:State name="Register"/>
</s:states>

<!-- Set title of the Panel container based on the view state.-->
<s:Panel id="loginPanel"
title="Login" title.Register="Register">
<s:layout>
<s:VerticalLayout/>
</s:layout>
<mx:Form id="loginForm">
<mx:FormItem label="Username:">
<s:TextInput/>
</mx:FormItem>
<mx:FormItem label="Password:">
<s:TextInput/>
</mx:FormItem>
<mx:FormItem id="confirm" label="Confirm:" includeIn="Register">
<!-- Add a TextInput control to the form for the Register view state. -->
<s:TextInput/>
</mx:FormItem>
<mx:FormItem direction="horizontal">
<!-- Use the LinkButton to change view state.-->
<mx:Spacer width="100%" id="spacer1"/>
<!-- Set label of the control based on the view state.-->
<mx:LinkButton id="registerLink"
label="Need to Register?"
label.Register="Return to Login"
click="currentState='Register'"
click.Register="currentState=''"/>
<s:Button id="loginButton"
label="Login" label.Register="Register"/>
</mx:FormItem>
</mx:Form>
</s:Panel>
</s:Application>


定义状态

flex4里状态的定义与flex3不同，你只需在<states></states>标签内定义状态就可以了。添加子元素和设置属性之类，不在这里进行了。如下所示：



<s:states>
<s:State name="State1"/>
<s:State name="State2"/>
<s:State name="State3"/>
.
.
</s:states>


改变状态

UIComponent类定义了一个currentState属性，通过改变这个属性的值来更换状态，这个属性的默认值是定义在需在<states></states>标签内的第一个状态。例如：



<s:Button id="b1" label="Change to State 1" click="currentState='State2';"/>
<s:Button id="b2" label="Change to the default" click="currentState='State1';"/>


当然也可以通过UIComponent类的setCurrentState方法。


为一个状态设定属性，样式和事件
这是与flex3很不同的地方。在flex4里通过点语法来设定一个组件属于某个状态的属性值。例如：


<s:Button label="Default State" label.State2="New State"/>

上述的代码的意思是，这个按钮的lable值在State2状态下是New State，在其他状态下是Default State。
上述代码也可以这样写:



<s:Button >
<s:label>Default State</s:label>
<s:label.State2>new State</s:label.State2>
</s:Button>


要想在某个状态里清除某个属性的值，可以让属性值等于@clear。如下:

<Button color="0xFF0000" color.State1="@Clear"/>

对于事件也一样可以用点语法，例如：



<s:Button id="b1" label="Click Me"
click="ta1.text='hello';"
click.State1="ta1.text='goodbye'"/>