学习收藏: Flex之State状态的…

原文: http://www.cnblogs.com/orchid/archive/2009/07/18/1526221.html

什么是状态(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'"/>

 

添加或移除组件

在flex4里，添加或移除某个组件，直接在这组件的属性里搞定。组件多了两个属性,includeIn和excludeFrom。includeIn,表示这个组件要被添加到属性值所指的状态，excludeFrom，表示这个组件要从属性值所指的状态中删除，includeIn和excludeFrom不能在同一个组件标签里出现，他们的值可以是多个状态，之间用逗号隔开。例如:

<s:states>
<s:State name="default"/>
<s:State name="addCheckBox"/>
<s:State name="addTextInput"/>
<s:State name="addCheckBoxandButton"/>
</s:states>

<s:CheckBox id="myCB" label="Checkbox"
includeIn="addCheckBox, addCheckBoxandButton"/>

<s:TextArea text="Exclude from addTextInput"
excludeFrom="addTextInput"/>

更改一个组件的父元素

一个组件的父元素也能变，你信吗？不过flex4真的做到了。用的就是这个<fx:Reparent>标签。还是看段代码吧！

<?xml version="1.0" encoding="utf-8"?>
<!-- states\NewStatesReparent.mxml -->
<s:Application xmlns:fx="http://ns.adobe.com/mxml/2009"
xmlns:mx="library://ns.adobe.com/flex/halo"
xmlns:s="library://ns.adobe.com/flex/spark">
<s:layout>
<s:VerticalLayout/>
</s:layout>
<s:states>
<s:State name="Parent1"/>
<s:State name="Parent2"/>
</s:states>
<s:HGroup>
<s:Panel id="Panel1"
height="100" width="100"
title="Panel 1">
<s:Button id="setCB" includeIn="Parent1"/>
</s:Panel>
<s:Panel id="Panel2"
height="100" width="100"
title="Panel 2">
<fx:Reparent target="setCB" includeIn="Parent2"/>
</s:Panel>
</s:HGroup>
<s:HGroup>
<s:Button label="Parent 1"
click="currentState='Parent1'"
enabled.Parent1="false"/>
<s:Button label="Parent 2"
click="currentState='Parent2'"
enabled.Parent2="false"/>
</s:HGroup>
</s:Application>

这句话：<fx:Reparent target="setCB" includeIn="Parent2"/>什么意思呢？target的值setCB，就是我们要换父亲的组件就是setCB，看上面代码，你看它在哪里？setCB是第一个panel的Button的id吧！当转换到状态Parent2时，这个Button就成了第二个Panle的子元素。因为includeIn="Parent2"告诉我们了，在状态Parent2时，就要换了setCB的父元素，换成fx:Reparent的父元素,即第二个panel。

 

添加子元素时的控制

或许，你有这样的疑问。我为某个状态添加了一个子元素，这个元素在原来的状态是不存在的，至少，你看不见。那么，这个子元素时是在程序一运行时就被创建了还是在切换状态时才创建呢？
flex4的答案是在第一次换到需要这个子元素出现的状态时，它被创建。这是默认的情况。但是，如果这个子元素的创建需要很长时间，那么用户肯定在切换状态时感到延迟，这是不好的。所以，默认的情况，可以改。通过更改itemCreationPolicy，这是组件的一个属性，它有两个值：deferred，默认值，意思是在第一次需要这个组件出现时创建； immediate，它是在程序一被启动就会创建这个子元素。
一旦子元素被创建了，它就会一直存在了。

界面的改变不是仅仅只能通过State。通过导航器，如：Accordion，Tab Navigator，ViewStack containers你也能做到。到底用哪个，取决于你的应用需求以及用户界面的设计。

创建状态组

在flex4里，可以给状态分组，比如第一个状态和第二个状态是一组，第三个状态和第四个状态是一组等等。我们先看怎么分组？

<s:State name="default"/>
<s:State name="addCheckBox" stateGroups="Group1"/>
<s:State name="addTextInput"/>
<s:State name="addCheckBoxandButton" stateGroups="Group1"/>

只需添加一个stateGrooups这个属性。
添加分组的好处是什么呢？

如果一个组件在多个状态中出现，你就可以把这些状态划分到一组。那么，当出现这个族里任何一个状态时，这个组件的设置都会有效。点语法后面的值可以是组的名称，excludeFrom和includeIn的值也可以使组的名称。