Flex3到Flex4的轉變新特性值得關注

作者：燮羽天翔 2010-07-27 09:37:44

本文向大家介紹一下從Flex3到Flex4的轉變，Flex4beta發布了，它是自Flex3以來的重大改革。Flex4beta提供了一種新的組件和皮膚的架構。

本文和大家重點討論一下從Flex3到Flex4的轉變，作為一個Flex3的開發者，當你用Flex4beta編譯你的Flex3應用時你應該不會遇到太大的挑戰，因為Flex4beta的一個目標就是保持與Flex3的兼容。

從Flex3到Flex4的轉變一覽

Flex4beta發布了，它是自Flex3以來的重大改革。Flex4beta提供了一種新的組件和皮膚的架構。作為一個Flex3的開發者，當你用Flex4beta編譯你的Flex3應用時你應該不會遇到太大的挑戰，因為Flex4beta的一個目標就是保持與Flex3的兼容。

在這篇文章里我會提供關于Flex4beta主體帶的一個大概的瀏覽，介紹一下Flex3到Flex4架構上的區別，以及在組件，布局，狀態，效果上的改變。這篇文章里，halo代表Flex3里的原始組件。spark代表Flex4beta里的新的組件。

將應用遷移到Flex4beta

把應用從Flex3遷移到Flex4，不會遇到太大的麻煩。除了看到一些bug被修補了以及默認的主題換了，你還會看到你的應用會在Flex4里工作的更好。但是還是有些東西你需要注意。

◆播放器的依賴

Flex4beta需要flashplayer10的支持。

◆樣式選擇器需要命名空間

對于一個css樣式選擇器以前你可能只需要這樣寫

Button{  
cornerRadius:10;  
}  
DateField{  
color:#780800;  
}

但是在Flex4beta里你必須加上命名空間。

<mx:Style> 
@namespace"http://www.adobe.com/2006/mxml";  
…  
</mx:Style>

更進一步，如果你用了StyleManager.getStyleDeclaration("Button")，在Flex4里你必須把命名空間給加上如：StyleManager.getStyleDeclaration("mx.controls.Button")。

◆Flex3到Flex4主題的變化

主題已經由默認的halo變成了spark。所以你的應用在Flex4里看起來可能會不一樣了。當然了，你要是想用halo也是有辦法的。你可以用-compatibility-version=3.0這個標識也可以修改additionalcompilerargument（附加的編譯器自變量）為_localenUS-theme=halo.swc。

如果你選擇用Spark，你會發現很多在Halo里工作的樣式到Spark里就不工作了，spark主題只支持有限的樣式。想要修改如border之類的外觀你需要自定義的皮膚。Flex4也提供了一個Wireframe皮膚來幫助你快速建立模型。

除了默認樣式的變化，預加載進度條也變化了。這個更輕量級的進度條會縮短啟動的時間。你要想還是用原來的加載進度條你只需加上下面這一條：preloader="mx.preloaders.DownloadProgressBar"。#p#

Flex3到Flex4beta架構改變一覽

Flex4給設計師和開發者提供一個更平滑的工作流。為了實現這個，Flex4框架提供了可視化組件和其行為的明確的分界。在Flex3里一個組件代碼包括邏輯，布局和可視化的變化，但是在Flex4里一個組件被分配到了不同的類，每個類都掌控不同的方面。

◆Flex4里的包和命名空間

Flex4里保存了Flex3的全部類，它們全在mx.*的包里。當然除此之外，flex還提供全新的spark.*包來保存組件，核心類，效果，濾鏡，布局，皮膚和工具。

flex提供了一套組件，其中很多與halo有同樣的名字，為了避免名字的沖突，隨Flex4而來的是4個不同的命名空間：MXML2006,MXML2009,Spark,andHalo。

MXML2006:過時的mxml語言命名空間，曾用在Flex3。如果用Flex4編譯Flex3的應用程序，你依然可以用這個命名空間。

URI:http://www.adobe.com/2006/mxml

默認前綴：mx

MXML2009:全新的mxml語言命名空間，是純的語言命名空間，不包含組件。

URI:http://ns.adobe.com/mxml/2009

默認前綴：fx

SPARK:這個命名空間里包含了所有的新的Spark組件，他應該和MXML2009一起使用。

URI:library://ns.adobe.com/flex/spark

默認前綴:s

HALO:這個命名空間包含所有halo的組件，應該與MXML2009一起使用。

URI:library://ns.adobe.com/flex/halo

默認前綴：mx

Flex4在css方面也提供了多樣的命名空間的支持。所以，在使用css時必須注意命名空間已避免沖突。

Mxml代碼

<fx:Style> 
@namespaces"library://ns.adobe.com/flex/spark";  
@namespacemx"library://ns.adobe.com/flex/halo";  
s|Button{  
color:#FF0000;  
}  
mx|DateChooser{  
color:#FF0000;}  
</fx:Style> 
 
<fx:Style> 
@namespaces"library://ns.adobe.com/flex/spark";  
@namespacemx"library://ns.adobe.com/flex/halo";  
s|Button{  
color:#FF0000;  
}  
mx|DateChooser{  
color:#FF0000;}  
</fx:Style>

#p#

新的組件和容器

◆組件

Flex4修改和新增了一些組件，也有些組件是halo有的,但是spark沒有。adobe建議你halo和spark一起用。至于兩者都有什么，沒什么下面有個網址你可以去看看。

◆state語法的改變

state語法變了，變得更加的有彈性和直接。你甚至可以根據上下文來針對性的改變你的狀態。下面是重點：

1，只有狀態被定義到了狀態數組。

2，AddChild和RemoveChild，不能再用了。取而代之的是includeIn和excludeFrme屬性。這兩個屬性是組件的屬性。

看例子吧！

3.這是Flex3應用狀態的方式。

Mxml代碼

<mx:states> 
<mx:Statenamemx:Statename="submitState"basedOn=""> 
<mx:AddChildrelativeTomx:AddChildrelativeTo="{loginForm}"> 
<mx:Buttonlabelmx:Buttonlabel="submit"bottom="10"right="10"/> 
</mx:AddChild> 
<mx:RemoveChildtargetmx:RemoveChildtarget="{firstTextInput}"/> 
</mx:State> 
</mx:states> 
<mx:TextInputidmx:TextInputid="firstTextInput"/> 
<mx:Canvasidmx:Canvasid="loginForm"/> 
 
<mx:states> 
<mx:Statenamemx:Statename="submitState"basedOn=""> 
<mx:AddChildrelativeTomx:AddChildrelativeTo="{loginForm}"> 
<mx:Buttonlabelmx:Buttonlabel="submit"bottom="10"right="10"/> 
</mx:AddChild> 
<mx:RemoveChildtargetmx:RemoveChildtarget="{firstTextInput}"/> 
</mx:State> 
</mx:states> 
<mx:TextInputidmx:TextInputid="firstTextInput"/> 
<mx:Canvasidmx:Canvasid="loginForm"/>

這是Flex4

Mxml代碼

<s:states> 
<s:Statenames:Statename="submitState"/> 
</s:states> 
<s:TextInputids:TextInputid="firstTextInput"excludeFrom="submitState"/> 
<s:Groupids:Groupid="loginForm"> 
<s:Buttonlabels:Buttonlabel="submit"bottom="10"right="10"includeIn="submitState"/> 
 
<s:states> 
<s:Statenames:Statename="submitState"/> 
</s:states> 
<s:TextInputids:TextInputid="firstTextInput"excludeFrom="submitState"/> 
<s:Groupids:Groupid="loginForm"> 
<s:Buttonlabels:Buttonlabel="submit"bottom="10"right="10"includeIn="submitState"/> 
 
3,setProperty,setStyle和setEvent被點語法取代了。

#p# 下面是Flex3的做法

Mxml代碼

<mx:states> 
<mx:Statenamemx:Statename="submitState"basedOn=""> 
<mx:SetPropertytargetmx:SetPropertytarget="{submitButton}"name="label"value="submit"/> 
<mx:SetStyletargetmx:SetStyletarget="{submitButton}"name="textDecoration"value="underline"/> 
<mx:SetEventHandlertargetmx:SetEventHandlertarget="{submitButton}"name="click"handler="trace('done');"/> 
</mx:State> 
<mx:Statenamemx:Statename="clearState"basedOn=""> 
<mx:SetPropertytargetmx:SetPropertytarget="{submitButton}"name="label"value="clear"/> 
<mx:SetEventHandlertargetmx:SetEventHandlertarget="{submitButton}"name="click"handler="emptyDocument()"/> 
</mx:State> 
</mx:states> 
<mx:Buttonidmx:Buttonid="submitButton"/> 
 
<mx:states> 
<mx:Statenamemx:Statename="submitState"basedOn=""> 
<mx:SetPropertytargetmx:SetPropertytarget="{submitButton}"name="label"value="submit"/> 
<mx:SetStyletargetmx:SetStyletarget="{submitButton}"name="textDecoration"value="underline"/> 
<mx:SetEventHandlertargetmx:SetEventHandlertarget="{submitButton}"name="click"handler="trace('done');"/> 
</mx:State> 
<mx:Statenamemx:Statename="clearState"basedOn=""> 
<mx:SetPropertytargetmx:SetPropertytarget="{submitButton}"name="label"value="clear"/> 
<mx:SetEventHandlertargetmx:SetEventHandlertarget="{submitButton}"name="click"handler="emptyDocument()"/> 
</mx:State> 
</mx:states> 
<mx:Buttonidmx:Buttonid="submitButton"/>

下面是Flex4的做法

Mxml代碼

<s:states> 
<s:Statenames:Statename="submitState"/> 
<s:Statenames:Statename="clearState"/> 
</s:states> 
 
<s:Buttonlabel.submitStates:Buttonlabel.submitState="submit"textDecoration.submitState="underline"click.
submitState="trace('done')"click.clearState="emptyDocument()"label.clearState="clear"textDecoration.clearState="none"/> 
 
<s:states> 
<s:Statenames:Statename="submitState"/> 
<s:Statenames:Statename="clearState"/> 
</s:states> 
 
<s:Buttonlabel.submitStates:Buttonlabel.submitState="submit"textDecoration.submitState="underline"click.
submitState="trace('done')"click.clearState="emptyDocument()"label.clearState="clear"textDecoration.clearState="none"/>

4,組件不能在無狀態或空的狀態。它默認的狀態時第一個聲明的狀態。

Flex4beta還有其他的特性，以后的文章繼續在討論。

adobe官方說從Flex3到Flex4得轉變painless。你認為呢？

【編輯推薦】

Flex開發者需要知道的10件事
FlexBuilder的路在何方　
FlexBuilder利用trace函數成功調試簡明步驟
FlexBuilder3.0與Eclipse3.4的完美結合
術語匯編 FlexBuilder入門指導

責任編輯：佚名來源： javaeye.com

Flex