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'"/>