flex3 和 flex4 新组件和容器

新的组件和容器

组件

flex4修改和新增了一些组件，也有些组件是halo有的,但是spark没有。adobe建议你halo和spark一起用。

state语法的改变

state语法变了，变得更加的有弹性和直接。你甚至可以根据上下文来针对性的改变你的状态。下面是重点：

1，只有状态被定义到了状态数组。

2，AddChild和RemoveChild，不能再用了。取而代之的是includeIn和excludeFrme属性 。这两个属性是组件的属性。

看例子吧！

这是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" /> 

这是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>  3,setProperty,setStyle和setEvent被点语法取代了。

下面是flex3的做法

<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"/>  4,组件不能在无状态或空的状态。它默认的状态时第一个声明的状态。

flex4 beta还有其他的特性，以后的文章继续在讨论。

adobe官方说从flex3到flex4得转变painless。你认为呢？