flex state example

 The first flex state example:

<?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"    xmlns:mx="library://ns.adobe.com/flex/halo"    width="400" height="300">   <!--定义了二个状态，系统默认状态为第一个-->    <s:states>        <s:State name="State1"/>        <s:State name="State2"/>    </s:states>    <mx:VBox verticalCenter="0"        horizontalCenter="0" >           <s:Button             <!--状态为state1时，设置label属性和单击事件-->            label.State1="Small"           click.State1="currentState='State2'"            <!--状态为state2时，设置width属性、height属性、label2属性和单击事件-->            width.State2="200"            height.State2="200"            label.State2="BIG"            click.State2="currentState='State1'"/>                   <!--状态为state2时，该label才显示-->        <mx:Label includeIn="State2"            width="100%"            text="State 2 Only"            textAlign="center"/>               </mx:VBox></s:Application>

 

2、为一个状态设定属性，样式和事件

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

3、添加或移除组件

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

4、更改一个组件的父元素
一个组件的父元素也能变，你信吗？不过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。

5、创建状态组
   在flex4里，可以给状态分组，比如第一个状态和第二个状态是一组，第三个状态和第四个状态是一组等等。我们先看怎么分组？
<s:State name="default"/>
<s:State name="addCheckBox" stateGroups="Group1"/>
<s:State name="addTextInput"/>
<s:State name="addCheckBoxandButton" stateGroups="Group1"/>
只需添加一个stateGrooups这个属性。

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

6、states简单例子

<?xml version="1.0"?><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:states>        <!-- Define the new view states. -->        <s:State name="default"/>        <s:State name="NewButton"/>    </s:states>        <s:VGroup id="g1">        <s:HGroup>            <!-- Disable Button in the NewButton view state.                 当前状态是NewButton时，b1按钮失效              -->            <s:Button id="b1" label="Click Me"                enabled.NewButton="false"/>            <!-- Add a new child control to the VBox. -->            <!-- 状态为NewButton时，该按钮才显示 -->            <s:Button id="b2" label="New Button"                includeIn="NewButton"/>        </s:HGroup>         <s:Button label="Change to NewButton state"             click="currentState='NewButton';"/>                    <!-- Define Button control to switch to default view state. -->        <s:Button label="Change to default view state"             click="currentState='default';"/>    </s:VGroup>    </s:Application>