flex4组件_s:states 一知半解

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

下面是一个简单的例子：
<?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里状态的定义与flex3不同，你只需在<states></states>标签内定义状态就可以了。添加子元素和设置属性之类，不在这里进行了。如下所示：
<s:states>
<s:State name="State1"/>
<s:State name="State2"/>
<s:State name="State3"/>
.
.
</s:states>

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