以下內(nèi)容轉(zhuǎn)載自互聯(lián)網(wǎng),如侵犯您的權(quán)利,請(qǐng)來(lái)信告知!
flex4 beta發(fā)布了,它是自flex3以來(lái)的重大改革。flex4 beta 提供了一種新的組件和皮膚的架構(gòu)。作為一個(gè)flex3的開發(fā)者,當(dāng)你用flex4 beta編譯你的flex3應(yīng)用時(shí)你應(yīng)該不會(huì)遇到太大的挑戰(zhàn),因?yàn)閒lex4 beta的一個(gè)目標(biāo)就是保持與flex3的兼容。
在這篇文章里我會(huì)提供關(guān)于flex4 beta主體帶的一個(gè)大概的瀏覽,介紹一下Flex3到Flex4架構(gòu)上的區(qū)別,以及在組件,布局,狀態(tài),效果上的改變。這篇文章里,halo代表flex3里的原始組件。spark代表flex4 beta里的新的組件。
將應(yīng)用遷移到flex4 beta
把應(yīng)用從flex3遷移到flex4,不會(huì)遇到太大的麻煩。除了看到一些bug被修補(bǔ)了以及默認(rèn)的主題換了,你還會(huì)看到你的應(yīng)用會(huì)在flex4里工作的更好。但是還是有些東西你需要注意。
◆播放器的依賴
flex4 beta 需要flash player10的支持。
◆樣式選擇器需要命名空間
對(duì)于一個(gè)css樣式選擇器以前你可能只需要這樣寫
Button {cornerRadius: 10;}DateField {color: #780800;}
但是在flex4 beta里你必須加上命名空間。
< mx:Style>@namespace "http://www.adobe.com/2006/mxml";…< /mx:Style>
更進(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í)也可以修改additional compiler argument(附加的編譯器自變量)為_local en US -theme=halo.swc。
如果你選擇用Spark,你會(huì)發(fā)現(xiàn)很多在Halo里工作的樣式到Spark里就不工作了,spark主題只支持有限的樣式。想要修改如border之類的外觀你需要自定義的皮膚。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"。
Flex3到flex4 beta架構(gòu)改變一覽
flex4 給設(shè)計(jì)師和開發(fā)者提供一個(gè)更平滑的工作流。為了實(shí)現(xiàn)這個(gè),flex4框架提供了可視化組件和其行為的明確的分界。 在flex3里一個(gè)組件代碼包括邏輯,布局和可視化的變化,但是在flex4里一個(gè)組件被分配到了不同的類,每個(gè)類都掌控不同的方面。
◆flex4里的包和命名空間
flex4里保存了flex3的全部類,它們?nèi)趍x.*的包里。當(dāng)然除此之外,flex還提供全新的spark.*包來(lái)保存組件,核心類,效果,濾鏡,布局, 皮膚和工具。
flex提供了一套組件,其中很多與halo有同樣的名字,為了避免名字的沖突,隨flex4而來(lái)的是4個(gè)不同的命名空間:MXML 2006, MXML 2009, Spark, and Halo。
MXML 2006:過時(shí)的mxml語(yǔ)言命名空間,曾用在flex3。如果用flex4編譯flex3的應(yīng)用程序,你依然可以用這個(gè)命名空間。
URI: http://www.adobe.com/2006/mxml
默認(rèn)前綴:mx
MXML 2009: 全新的mxml語(yǔ)言命名空間,是純的語(yǔ)言命名空間,不包含組件。
URI: http://ns.adobe.com/mxml/2009
默認(rèn)前綴:fx
SPARK:這個(gè)命名空間里包含了所有的新的Spark組件,他應(yīng)該和MXML 2009一起使用。
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í)必須注意命名空間已避免沖突。
- < fx:Style>
- @namespace s "library://ns.adobe.com/flex/spark";
- @namespace mx "library://ns.adobe.com/flex/halo";
- s|Button {
- color: #FF0000;
- }
- mx|DateChooser {
- color: #FF0000;
- }
- < /fx:Style>
新的組件和容器
◆組件
flex4修改和新增了一些組件,也有些組件是halo有的,但是spark沒有。adobe建議你halo和spark一起用。至于兩者都有什么,沒什么下面有個(gè)網(wǎng)址你可以去看看。
http://www.adobe.com/devnet/flex/articles/flex3and4_differences_04.html
◆state語(yǔ)法的改變
state語(yǔ)法變了,變得更加的有彈性和直接。你甚至可以根據(jù)上下文來(lái)針對(duì)性的改變你的狀態(tài)。下面是重點(diǎn):
1,只有狀態(tài)被定義到了狀態(tài)數(shù)組。
2,AddChild和RemoveChild,不能再用了。取而代之的是includeIn和excludeFrme屬性 。這兩個(gè)屬性是組件的屬性。
看例子吧!
這是flex3應(yīng)用狀態(tài)的方式。
- < 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被點(diǎn)語(yǔ)法取代了。
下面是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,組件不能在無(wú)狀態(tài)或空的狀態(tài)。它默認(rèn)的狀態(tài)時(shí)第一個(gè)聲明的狀態(tài)。
flex4 beta還有其他的特性,以后的文章繼續(xù)在討論。
adobe官方說(shuō)從flex3到flex4得轉(zhuǎn)變painless。你認(rèn)為呢?
customizations much more straightforward. Here is a table showing Flex 3 Halo components and their Flex 4 beta Spark counterparts:
Flex 3 Halo Component | Flex 4 beta Spark Component |
---|---|
mx.controls.Button | spark.components.Button |
mx.controls.ButtonBar | spark.components.ButtonBar |
mx.controls.CheckBox | spark.components.CheckBox |
mx.controls.ComboBox | spark.components.DropDownList (w/o editability) |
mx.controls.HorizontalList | spark.components.List (with a HorizontalLayout) |
mx.controls.HRule | spark.primitives.Line |
mx.controls.HScrollBar | spark.components.HScrollBar |
mx.controls.HSlider | spark.components.HSlider |
mx.controls.Image | spark.primitives.BitmapImage |
mx.controls.LinkBar | spark.components.ButtonBar (with a custom skin) |
mx.controls.LinkButton | spark.components.Button (with a custom skin) |
mx.controls.List | spark.components.List |
mx.controls.NumericStepper | spark.components.NumericStepper |
mx.controls.RadioButton | spark.components.RadioButton |
mx.controls.RadioButtonGroup | spark.components.RadioButtonGroup |
mx.controls.TextArea | spark.components.TextArea |
mx.controls.TextInput | spark.components.TextInput |
mx.controls.TileList | spark.components.List (with a TileLayout) |
mx.controls.ToggleButtonBar | spark.components.ButtonBar |
mx.controls.VideoDisplay | spark.components.VideoPlayer |
mx.controls.VRule | spark.primitives.Line |
mx.controls.VScrollBar | spark.components.VScrollBar |
mx.controls.VSlider | spark.components.VSlider |
mx.core.Application | spark.components.Application |
mx.core.Window | spark.components.Window |
mx.core.WindowedApplication | spark.components.WindowedApplication |
mx.containers.Canvas | spark.components.Group |
mx.containers.HBox | spark.components.HGroup |
mx.containers.Panel | spark.components.Panel |
mx.containers.Tile | spark.components.Group (with a TileLayout) |
mx.containers.VBox | spark.components.VGroup |
Adobe encourages you to use Halo components and containers along with Spark components. Because Adobe continues to build components atop the same base class (UIComponent), there should be full interoperability between Spark and Halo. Here is a table of the components and containers that do not currently have direct Spark equivalent classes.
Flex 3 classes with no direct Flex 4 beta counterpart |
---|
mx.controls.Alert |
mx.controls.ColorPicker |
mx.controls.DataGrid |
mx.controls.DateChooser |
mx.controls.DateField |
mx.controls.Menu |
mx.controls.MenuBar |
mx.controls.PopUpButton |
mx.controls.PopUpMenuButton |
mx.controls.ProgressBar |
mx.controls.RichTextEditor |
mx.controls.TabBar |
mx.controls.Tree |
mx.containers.Accordion |
mx.containers.ApplicationControlBar |
mx.containers.ControlBar |
mx.containers.DividedBox |
mx.containers.Form |
mx.containers.Grid |
mx.containers.TabNavigator |
mx.containers.TitleWindow |
mx.containers.ViewStack |
Flex 4 beta has promoted the states functionality to a full MXML language feature. As a result, you will likely find states to be much more flexible and direct. The new states syntax is more inline, allowing state-specific changes to be specified in context. Here are the key differences in the Flex 4 beta syntax:
In the following Flex 3 example, states are used to include a Button and remove a TextInput only when the de>currentStatede> of the document is de>submitStatede>. This approach can get very verbose with more complex states.
<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" />
Here is the simpler Flex 4 beta code using de>includeInde> and de>excludeFromde>.
<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>
In the following Flex 3 example, the code defines a property, style, and event for a Button in de>submitStatede>.
<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" />de><mx:SetEventHandler target="{submitButton}" name="click" de>handler="emptyDocument()" /></mx:State></mx:states><mx:Button id="submitButton" />
In Flex 4 beta, the code looks like this:
<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"/>
Additionally, each component now supports a set of states defined in its skin class, which makes it simpler to apply visual changes depending on the state of a component. For example, if you look at the skin for the Spark Button, you will find the following states defined:
<s:states><s:State name="up" /><s:State name="over" /><s:State name="down" /><s:State name="disabled" /></s:states>
The ButtonSkin class defines what happens visually to a Spark Button in each one of these states.
This is only a brief introduction to the new Flex 4 beta states syntax. Visit the Enhanced States Syntax Spec to find more details.
聯(lián)系客服