在很多富互联网应用,网页外观的改变基于用户的行为。一个状态就定义了组件的一种表现样式。要想使用状态,你应该首先定义一个默认的状态,然后在此基础上重写或者更改,这样就形成了一系列的其他样式。你可以添加、移除某些子元素,更改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"/>