flex3 state和flex4 state的差异

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

??????? Flex 4中已经为States功能提供了全面的MXML支持,在新的states语法中，已经去掉了AddChild、RemoveChild的用法，作为替代的，你可以在组件中使用includeIn and excludeFrom 属性来指定其所属state.

?Flex3:??????

<mx:states>
    <mx:State name="submitState" basedOn="">
        <mx:AddChild relativeTo="{loginForm}" >
           <mx:Button label="submit" bottom="10" right="10"/>
        </mx:AddChild>
        <mx:RemoveChild target="{firstTextInput}"/>
    </mx:State>
</mx:states>
 
<mx:TextInput id="firstTextInput" />
<mx:Canvas id="loginForm" />
<!-- http://www.myflexhero.com/share/flex-hero-flex4/flex-hero-components/flex-hero-effect/flex-hero-state/893 -->

Flex4:

<s:states>
    <s:State name="submitState" />
</s:states>
<s:TextInput id="firstTextInput" excludeFrom="submitState" />
<s:Group id="loginForm" >
    <s:Button label="submit" bottom="10" right="10" includeIn="submitState"/>
</s:Group>

在Flex 3中使用SetProperty,SetStyle,和SetEventHandler的方式来为组件赋值在Flex 4中已经没有了，转而替换为在MXML中设置属性的方式。请看下面Flex 3的代码.

<mx:states>
    <mx:State name="submitState" basedOn="">
        <mx:SetProperty target="{submitButton}" name="label" value="submit" />
        <mx:SetStyle target="{submitButton}" name="textDecoration" value="underline"/>
        <mx:SetEventHandler target="{submitButton}" name="click" handler="trace('done');"/>
    </mx:State>
    <mx:State name="clearState" basedOn="">
        <mx:SetProperty target="{submitButton}" name="label" value="clear" />
        <mx:SetEventHandler target="{submitButton}" name="click" handler="emptyDocument()" />
    </mx:State>
</mx:states>
 
<mx:Button id="submitButton" />

Flex4:

 
<s:states>
    <s:State name="submitState" />
    <s:State name="clearState" />
</s:states>
 
<s:Button label.submitState="submit" textDecoration.submitState="underline"
   click.submitState="trace('done')" click.clearState="emptyDocument()"
   label.clearState="clear" textDecoration.clearState="none"/>