自拍偷在线精品自拍偷,亚洲欧美中文日韩v在线观看不卡

Flex3到Flex4的轉(zhuǎn)變新特性值得關(guān)注

作者：燮羽天翔
開(kāi)發(fā) 后端
本文向大家介紹一下從Flex3到Flex4的轉(zhuǎn)變，F(xiàn)lex4beta發(fā)布了，它是自Flex3以來(lái)的重大改革。Flex4beta提供了一種新的組件和皮膚的架構(gòu)。

本文和大家重點(diǎn)討論一下從Flex3到Flex4的轉(zhuǎn)變，作為一個(gè)Flex3的開(kāi)發(fā)者，當(dāng)你用Flex4beta編譯你的Flex3應(yīng)用時(shí)你應(yīng)該不會(huì)遇到太大的挑戰(zhàn)，因?yàn)镕lex4beta的一個(gè)目標(biāo)就是保持與Flex3的兼容。

從Flex3到Flex4的轉(zhuǎn)變一覽

Flex4beta發(fā)布了，它是自Flex3以來(lái)的重大改革。Flex4beta提供了一種新的組件和皮膚的架構(gòu)。作為一個(gè)Flex3的開(kāi)發(fā)者，當(dāng)你用Flex4beta編譯你的Flex3應(yīng)用時(shí)你應(yīng)該不會(huì)遇到太大的挑戰(zhàn)，因?yàn)镕lex4beta的一個(gè)目標(biāo)就是保持與Flex3的兼容。

在這篇文章里我會(huì)提供關(guān)于Flex4beta主體帶的一個(gè)大概的瀏覽，介紹一下Flex3到Flex4架構(gòu)上的區(qū)別，以及在組件，布局，狀態(tài)，效果上的改變。這篇文章里，halo代表Flex3里的原始組件。spark代表Flex4beta里的新的組件。

將應(yīng)用遷移到Flex4beta

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

◆播放器的依賴

Flex4beta需要flashplayer10的支持。

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

對(duì)于一個(gè)css樣式選擇器以前你可能只需要這樣寫(xiě)

  1. Button{  
  2. cornerRadius:10;  
  3. }  
  4. DateField{  
  5. color:#780800;  
  6. }  
  7.  

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

  1. <mx:Style> 
  2. @namespace"http://www.adobe.com/2006/mxml";  
  3. …  
  4. </mx:Style> 
  5.  

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

◆Flex3到Flex4主題的變化

主題已經(jīng)由默認(rèn)的halo變成了spark。所以你的應(yīng)用在Flex4里看起來(lái)可能會(huì)不一樣了。當(dāng)然了，你要是想用halo也是有辦法的。你可以用-compatibility-version=3.0這個(gè)標(biāo)識(shí)也可以修改additionalcompilerargument（附加的編譯器自變量）為_(kāi)localenUS-theme=halo.swc。

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

除了默認(rèn)樣式的變化，預(yù)加載進(jìn)度條也變化了。這個(gè)更輕量級(jí)的進(jìn)度條會(huì)縮短啟動(dòng)的時(shí)間。你要想還是用原來(lái)的加載進(jìn)度條你只需加上下面這一條：preloader="mx.preloaders.DownloadProgressBar"。#p#

Flex3到Flex4beta架構(gòu)改變一覽

Flex4給設(shè)計(jì)師和開(kāi)發(fā)者提供一個(gè)更平滑的工作流。為了實(shí)現(xiàn)這個(gè)，F(xiàn)lex4框架提供了可視化組件和其行為的明確的分界。在Flex3里一個(gè)組件代碼包括邏輯，布局和可視化的變化，但是在Flex4里一個(gè)組件被分配到了不同的類(lèi)，每個(gè)類(lèi)都掌控不同的方面。

◆Flex4里的包和命名空間

Flex4里保存了Flex3的全部類(lèi)，它們?nèi)趍x.*的包里。當(dāng)然除此之外，flex還提供全新的spark.*包來(lái)保存組件，核心類(lèi)，效果，濾鏡，布局，皮膚和工具。

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

MXML2006:過(guò)時(shí)的mxml語(yǔ)言命名空間，曾用在Flex3。如果用Flex4編譯Flex3的應(yīng)用程序，你依然可以用這個(gè)命名空間。

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

默認(rèn)前綴：mx

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

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

默認(rèn)前綴：fx

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

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

默認(rèn)前綴:s

HALO:這個(gè)命名空間包含所有halo的組件，應(yīng)該與MXML2009一起使用。

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

默認(rèn)前綴：mx

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

Mxml代碼
 

  1. <fx:Style> 
  2. @namespaces"library://ns.adobe.com/flex/spark";  
  3. @namespacemx"library://ns.adobe.com/flex/halo";  
  4. s|Button{  
  5. color:#FF0000;  
  6. }  
  7. mx|DateChooser{  
  8. color:#FF0000;}  
  9. </fx:Style> 
  10.  
  11. <fx:Style> 
  12. @namespaces"library://ns.adobe.com/flex/spark";  
  13. @namespacemx"library://ns.adobe.com/flex/halo";  
  14. s|Button{  
  15. color:#FF0000;  
  16. }  
  17. mx|DateChooser{  
  18. color:#FF0000;}  
  19. </fx:Style> 
  20.  

#p#

 新的組件和容器

◆組件

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

 ◆state語(yǔ)法的改變

state語(yǔ)法變了，變得更加的有彈性和直接。你甚至可以根據(jù)上下文來(lái)針對(duì)性的改變你的狀態(tài)。下面是重點(diǎn)：

1，只有狀態(tài)被定義到了狀態(tài)數(shù)組。

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

看例子吧！

3.這是Flex3應(yīng)用狀態(tài)的方式。

Mxml代碼
 

  1. <mx:states> 
  2. <mx:Statenamemx:Statename="submitState"basedOn=""> 
  3. <mx:AddChildrelativeTomx:AddChildrelativeTo="{loginForm}"> 
  4. <mx:Buttonlabelmx:Buttonlabel="submit"bottom="10"right="10"/> 
  5. </mx:AddChild> 
  6. <mx:RemoveChildtargetmx:RemoveChildtarget="{firstTextInput}"/> 
  7. </mx:State> 
  8. </mx:states> 
  9. <mx:TextInputidmx:TextInputid="firstTextInput"/> 
  10. <mx:Canvasidmx:Canvasid="loginForm"/> 
  11.  
  12. <mx:states> 
  13. <mx:Statenamemx:Statename="submitState"basedOn=""> 
  14. <mx:AddChildrelativeTomx:AddChildrelativeTo="{loginForm}"> 
  15. <mx:Buttonlabelmx:Buttonlabel="submit"bottom="10"right="10"/> 
  16. </mx:AddChild> 
  17. <mx:RemoveChildtargetmx:RemoveChildtarget="{firstTextInput}"/> 
  18. </mx:State> 
  19. </mx:states> 
  20. <mx:TextInputidmx:TextInputid="firstTextInput"/> 
  21. <mx:Canvasidmx:Canvasid="loginForm"/> 
  22.  

 這是Flex4

Mxml代碼
 

  1. <s:states> 
  2. <s:Statenames:Statename="submitState"/> 
  3. </s:states> 
  4. <s:TextInputids:TextInputid="firstTextInput"excludeFrom="submitState"/> 
  5. <s:Groupids:Groupid="loginForm"> 
  6. <s:Buttonlabels:Buttonlabel="submit"bottom="10"right="10"includeIn="submitState"/> 
  7.  
  8. <s:states> 
  9. <s:Statenames:Statename="submitState"/> 
  10. </s:states> 
  11. <s:TextInputids:TextInputid="firstTextInput"excludeFrom="submitState"/> 
  12. <s:Groupids:Groupid="loginForm"> 
  13. <s:Buttonlabels:Buttonlabel="submit"bottom="10"right="10"includeIn="submitState"/> 
  14.  
  15. 3,setProperty,setStyle和setEvent被點(diǎn)語(yǔ)法取代了。  
  16.  

#p# 下面是Flex3的做法

Mxml代碼
 

  1. <mx:states> 
  2. <mx:Statenamemx:Statename="submitState"basedOn=""> 
  3. <mx:SetPropertytargetmx:SetPropertytarget="{submitButton}"name="label"value="submit"/> 
  4. <mx:SetStyletargetmx:SetStyletarget="{submitButton}"name="textDecoration"value="underline"/> 
  5. <mx:SetEventHandlertargetmx:SetEventHandlertarget="{submitButton}"name="click"handler="trace('done');"/> 
  6. </mx:State> 
  7. <mx:Statenamemx:Statename="clearState"basedOn=""> 
  8. <mx:SetPropertytargetmx:SetPropertytarget="{submitButton}"name="label"value="clear"/> 
  9. <mx:SetEventHandlertargetmx:SetEventHandlertarget="{submitButton}"name="click"handler="emptyDocument()"/> 
  10. </mx:State> 
  11. </mx:states> 
  12. <mx:Buttonidmx:Buttonid="submitButton"/> 
  13.  
  14. <mx:states> 
  15. <mx:Statenamemx:Statename="submitState"basedOn=""> 
  16. <mx:SetPropertytargetmx:SetPropertytarget="{submitButton}"name="label"value="submit"/> 
  17. <mx:SetStyletargetmx:SetStyletarget="{submitButton}"name="textDecoration"value="underline"/> 
  18. <mx:SetEventHandlertargetmx:SetEventHandlertarget="{submitButton}"name="click"handler="trace('done');"/> 
  19. </mx:State> 
  20. <mx:Statenamemx:Statename="clearState"basedOn=""> 
  21. <mx:SetPropertytargetmx:SetPropertytarget="{submitButton}"name="label"value="clear"/> 
  22. <mx:SetEventHandlertargetmx:SetEventHandlertarget="{submitButton}"name="click"handler="emptyDocument()"/> 
  23. </mx:State> 
  24. </mx:states> 
  25. <mx:Buttonidmx:Buttonid="submitButton"/> 
  26.  

 下面是Flex4的做法

Mxml代碼
 

  1. <s:states> 
  2. <s:Statenames:Statename="submitState"/> 
  3. <s:Statenames:Statename="clearState"/> 
  4. </s:states> 
  5.  
  6. <s:Buttonlabel.submitStates:Buttonlabel.submitState="submit"textDecoration.submitState="underline"click.
  7. submitState="trace('done')"click.clearState="emptyDocument()"label.clearState="clear"textDecoration.clearState="none"/> 
  8.  
  9. <s:states> 
  10. <s:Statenames:Statename="submitState"/> 
  11. <s:Statenames:Statename="clearState"/> 
  12. </s:states> 
  13.  
  14. <s:Buttonlabel.submitStates:Buttonlabel.submitState="submit"textDecoration.submitState="underline"click.
  15. submitState="trace('done')"click.clearState="emptyDocument()"label.clearState="clear"textDecoration.clearState="none"/> 
  16.  
  17.  
  18.  

4,組件不能在無(wú)狀態(tài)或空的狀態(tài)。它默認(rèn)的狀態(tài)時(shí)第一個(gè)聲明的狀態(tài)。

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

adobe官方說(shuō)從Flex3到Flex4得轉(zhuǎn)變painless。你認(rèn)為呢？
 

【編輯推薦】

  1. Flex開(kāi)發(fā)者需要知道的10件事
  2. FlexBuilder的路在何方　
  3. FlexBuilder利用trace函數(shù)成功調(diào)試簡(jiǎn)明步驟
  4. FlexBuilder3.0與Eclipse3.4的完美結(jié)合
  5. 術(shù)語(yǔ)匯編 FlexBuilder入門(mén)指導(dǎo)

 

 

責(zé)任編輯：佚名 來(lái)源： javaeye.com
Flex
相關(guān)推薦

2009-07-16 14:09:24

Flex3到Flex4

2010-08-02 12:44:01

Flex3Flex4

2010-08-12 15:10:17

Flex4

2010-08-02 11:09:45

Flex4

2010-08-10 09:08:29

HTMLTemplatFlex4

2010-08-02 10:50:55

Flex3

2010-08-06 10:56:11

Flex4MyEclipse

2010-08-13 09:05:09

Flex4Halo

2010-08-11 12:50:04

Flex4

2010-08-02 14:04:29

Flex4教程

2010-08-12 14:58:12

Flex4

2010-08-09 12:47:00

Flex4beta

2010-07-27 10:11:04

Flex4

2010-07-27 10:03:57

Flex4

2010-08-13 10:30:30

Flex4

2010-08-11 11:10:08

Flex4打印功能

2010-08-02 11:26:21

Flex4

2010-08-12 14:51:40

Flex4

2010-08-12 14:31:42

Flex4

2010-08-13 14:45:58

Flex4布局
點(diǎn)贊
收藏

51CTO技術(shù)棧公眾號(hào)