Flex學習筆記

Flex是一個安裝在客戶端的表現層的服務器;是一個富用戶界面組件庫;是一個類XML基礎的標記語言,用來佈局組件;是使用ActionScript這種OOP(面向對象程序設計)語言用於用戶界面和應用程序的一個框架。
類的名稱使用大寫字母開頭。屬性名稱起始於一個小寫字母,並且在分離的單詞的頭一個字母使用大寫字母。
Flex建議將屬性值爲簡單的標量值的屬性定義在標籤內,將屬性值爲複雜的類型如ActionScript對象的屬性定義爲子標籤。
使用約束佈局的子類組件必須放置在絕對值佈局的容器中。在Flex中,應用容器、面板容器及畫布容器可使用絕對值佈局。
有三類容器支持絕對值定位。
①、應用容器(Application)和麪板(Panel)容器:在定義layout屬性爲absolute時,支持自動定位。
②、畫布容器(Canvas):支持絕對值定位。
大多數容器,如盒子(Box)、格柵(Grid)、格(Form)、都使用自動定位。當容器使用自動定位時,定義x、y值不會產生影響。
■絕對值定位的容器(畫布、應用容器、面板)沒有定位規則,子類組件直接放入容器中,必須給出子類組件的x、y座標的像素值。

■如果約束定位定義了組件的位置和大小,其值就會覆蓋由絕對值定義的位置的大小。例如,定義了左邊距(left)後,組件的位置、大小就不能再由寬度(width)或者百分比寬度(percentWidth)來定義。

■標籤條控件<mx:TabBar>應用類似於標籤導航(TabNavigator)容器,但標籤條按鈕不能放置子類。標籤導航容器使用標籤來打開和關閉子容器。標籤條控件可用來設置單個容器的可視性。

■菜單控件只能在ActionScript代碼中定義。它通過用戶的行爲觸發,彈出菜單項。它不具有MXML標籤。

菜單控件一般情況下處於不可視狀態,要通過用戶行爲的觸發,彈出菜單項,才處於可視狀態。菜單條控件<mx:MenuBar>和菜單控件一樣,都是從數據源中獲得數據,也支持相同的事件。但與菜單控件不同的是,菜單條總保持可視狀態,它是一個靜態的控件,因此菜單條可以在MXML中實現。

■彈出菜單按鈕控件<mx:PopUpMenuButton>只支持單級的菜單,因此當選擇了菜單中的子菜單後,住按鈕上的標籤或圖標不會改變。

■Flex語言提供了多樣化的容器,其中最基本的容器是應用(Application)容器。它類似於Java中Swing的Frame,可以容納所有其他的容器。

除畫布(Canvas)之外,Flex所有的容器都支持自動佈局。畫布容器、應用容器和麪板(Panel)容器都支持精確佈局。此時,編程者需給出子類的絕對定位值或相對定位值。精確佈局可使編程者控制某個容器的大小和定位,利用這類容器還可以設計出組件重疊的效果。

Flex容器按其使用方式又可分爲兩類:佈局(Layout)和導航(Navigator)。導航容器用於控制用戶對多個子類容器的導航、轉移。導航容器只定義子類容器的順序,不定義子類容器的佈局和定位。導航容器中的子類必須是容器,而不是控件、組件。導航容器包括:視窗堆棧導航容器(ViewStack Navigator Container)、列表導航容器(TabNavigator)、摺疊導航容器(Accordion Navigator Container)。不論是佈局容器還是導航容器,它們都基於最基本的容器——應用容器(Application)。

視窗堆棧導航容器(ViewStack Navigator Container)可以使用selectedChild屬性激活子類容器,此屬性是定義子類容器的ID,如果沒有容器被選擇,其值爲null。此屬性只能在ActionScript中被定義,而不能在MXML中定義。

列表導航容器(TabNavigator)是視窗堆棧導航容器的子類,它繼承了視窗堆棧導航容器的多數功能。

畫布佈局容器<mx:Canvas>可以使用絕對值定位和約束版面佈局兩種不同的定位方式和畫布子類可重疊的特性。

可以用兩種方法定義垂直或水平的盒子:一種是使用<mx:VBox>、<mx:HBox>標籤;另一種是使用<mx:Box>標籤,但設定其direction屬性值爲垂直或水平。

在MXML中,使用<mx:TitleWindow>標籤定義標題窗口布局容器。標題窗口可以在瀏覽器中被拖動,其窗口的典型用法是顯示一個表格,以供用戶填寫信息。

使用約束版面,必須定義容器的layout屬性是絕對的,即layout=“absolute"。這一屬性的定義給出了改變定位和改變大小的可行性,並提供了當容器改變大小時,移動和縮放組件的能力。在使用約束版面時,所有相對的邊寬度是容器相對於容器,而不能被設定爲相對於其它控件。

Flex通過兩個類——一個工廠類和一個實體類(Factory and Instance Classes)實現行爲效果控制。

             ※工廠類:建立一個實體類的對象來表現效果。

             ※實體類:用來實現效果邏輯。

首先定義工廠類的行爲效果,然後爲使用行爲效果的目標控件賦值。示例代碼如下:

    <!-- 定義工廠類 -->

    <mx:WipeDown id="wipeOut" duration="1000"/>
    <mx:WipeDown id="wipeIn" duration="1000"/>
    <!-- 給效果目標控件賦予工廠類 -->

    <mx:Image source="@Embed(source='assets/Nokia_6630.png')"
            visible="{cb1.selected}"
            hideEffect="{wipeOut}" showEffect="{wipeIn}"/>

當效果完成,Flex銷燬實體對象。如果效果有多個目標控件,工廠類就建立多個實體對象,每個目標一個。

工廠類與實體類有相對應的關係。在使用一個行爲效果時,就執行了下面的步驟。

(1)建立一個工廠類對象。

(2)定義這個工廠類對象。

當Flex顯示一個效果時,就執行了下面的行爲:

(1)給每一個行爲效果的目標組件建立一個實體類的對象。

(2)複製工廠對象的定義信息到實體對象。

(3)使用實體對象在目標上顯示效果。

(4)當效果完成時,刪除實體對象。

如果使用了Glow發光效果,則不能在同一個組件上使用GlowFilter或第二個發光效果。

     移動效果(Move)一般應用在目標組件使用絕對位置的容器中,例如畫布(Canvas)。

如果使用的容器是自動佈局,如VBox和Grid,它也可以產生移動的效果,但下一次容器改變升級佈局時,目標組件會回到初始的位置。可以通過設定該類容器的autoLayout屬性爲false來使組件不能移動回初始位置。

一些行爲控制融合、褪色和旋轉只能對嵌入的文本產生作用。如果在帶有系統字體的控件上使用這些效果,文本不會發生任何改變。

在標籤中必須使用駝峯格式camel-case版本來定義樣式屬性。camel-case是一種命名方式,除了第一個單詞以外的其他單詞的首字母都是大寫,其他所有字符都是小寫。例如必須使用fontSize,而不是font-size(在CSS文件中使用)。

當使用樣式屬性時,最好使用駝峯格式(camel-case),例如fontWeight和fontFamily。不過在CSS文件和setStyle方法中,Flex支持駝峯格式和連字符語法。

在MXML標籤中,不能使用連字符樣式屬性名稱,因此必須使用駝峯格式。另外,在CSS文件中樣式名稱不能使用連字符名稱。下面的代碼定義了樣式名稱。

.myClass{...}/*合法的樣式名稱*/

.my-class{...}/*非法的樣式名稱*/

在運行時,可以使用StyleManager來加載樣式表單(此樣式表單是從Flex應用程序中動態加載的SWF文件中獲得)。通過動態加載樣式表單,可以加載圖像、字體、類型和類選擇器及自定義的外觀。在運行時加載樣式表單的步驟如下:

(1)爲當前的應用程序書寫一個CSS文件。

(2)將其編譯爲SWF文件。

(3)使用StyleManager.loadStyleDeclarations()方法加載此SWF文件到當前應用程序中。

在運行時加載的樣式表單不能代替編譯時的樣式,只是重寫。編程者可以加載多個樣式表單。

■類選擇器比類型選擇器優先.類型選擇器應用在某個特定的類時,它的子類和子組件也同樣應用此樣式。例如定義VBox控件的顏色屬性爲藍色。代碼如下:

<mx:Style>

    VBox{

             color:blue

             }

</mx:Style>

則它裏面包含的子類組件上的顏色也爲藍色。

■如果在文件中只定義了一個樣式,Flex就使用它來定義樣式。然而,一個應用程序中可以有多個樣式文件、本地樣式定義、外部樣式定義和組件實體上定義的樣式屬性。在這種情況下,Flex就需要決定它們的優先權來確定屬性值。Flex首先尋找在組件實體的標籤內部定義的樣式;如果沒有,Flex檢查實體是否使用setStyle()方法;如果沒有,Flex檢查實體的StyleName屬性是否被賦值;如果沒有,Flex繼續檢查類型選擇器定義的樣式;如果沒有定義類型選擇器,Flex則檢查實體父類容器上定義的屬性;如果父類容器沒有定義,Flex進而檢查父類的父類;如果父類定義的屬性不能被繼承,Flex就忽略父類容器的樣式設定。樣式屬性的優先權順序,從第一到最後排序如下:

□   標籤內部定義(Inline)

□   類選擇器(Class selector)

□    類型選擇器(Type selectors)

□   父類容器(可繼承的樣式)

□   全局選擇器(Global selector)

■當Flex組件中包含子組件時,子組件也會繼承類型選擇器所設定的樣式屬性。例如,文本條(TextInput)被用作下拉列表(ComboBox)、計數器(NumbericStepper)和富文本編輯器(RichTextEditor)的子組件,同樣會映射子組件的樣式

■ 每個控件都有自己默認的條目渲染器。在默認情況下,列表控件使用文本條作爲條目渲染器。

建立標籤內部(drop-in)條目渲染器和選項編輯器就是在標籤內定義itemRender或itemEditor屬性的值爲某些控件。

■在組件嵌套的環境下,如果子類容器定義了工具條提示,將自動顯示子類的提示;如果沒有定義提示,ToolTipManager就會自動顯示父類容器的工具條提示。

使用下列的容器時,該容器將自動使用其子類的工具條提示。如果定義了其子類容器的工具條提示,當鼠標指向容器標籤時,將顯示定義在子類容器上的工具條提示,但當鼠標指向子類容器時,工具條提示則不顯示。

□摺疊導航容器(Accordion)

□標籤導航容器(TabNavigator)

□按鈕條(ButtonBar)

□鏈接按鈕條(LinkBar)

□列表條(TabBar)

□切換按鈕條(ToggleButtonBar)

在使用重複控件時,需要注意以下幾點:

□ 不能使用重複控件循環一個二維的數組對象

□ 在運行時改變重複組件的數據源數組,不會對重複組件產生影響。可以使用集合(collection)來定義數據源

□ 在使用重複控件時,定義其數據源時不要忘記“{}”標識

□ 如果使用相鄰或嵌套的重複控件,可能需要在Repeater標籤之後定義一個虛設的UIComponent控件。

■建立一種新的視窗狀態,首先應定義一種基本的狀態(Base State),然後在此基礎上定義一組變化或重寫來定義新的狀態。每種新的視窗狀態都是在基本視窗的基礎上增加或減少子類組件。不過,新的視窗不是一定要在基本視窗的基礎上進行修改,它可以基於任何其他的視窗狀態來改變。

在ActionScript代碼中建立新的視窗狀態時,有以下幾個步驟:

(1)輸入mx.states類包。

(2)聲明一個State變量

(3)建立一個函數來完成以下工作:

①建立新的State對象實體。

②給State變量賦值

③設定狀態名稱

④爲重寫類對象聲明變量,並將它們賦值給新的類的實體。

⑤定義重寫對象的屬性

⑥增加重寫實體到State對象overrides數組

⑦增加狀態到states數組

(4)在程序初始化時調用此函數。

■過渡(Transition)就是一個或多個行爲效果的組合,用於定義如何改變視窗狀態(States)。Flex使用行爲效果定義過渡行爲。當改變視窗狀態時,Flex在同一時間顯示應用程序外觀改變。

當應用程序改變視窗狀態時,Flex尋找符合當前和目標視窗狀態的Transition對象。如果Transition中定義的fromState和toState屬性均爲“*”(默認情況),則所有視窗狀態的改變都符合該Transition對象過渡行爲的定義。可以在過渡中使用target和targets屬性來定義複雜的效果目標。

■和所有的效果行爲一樣,過渡也需要定義目標組件的起始和終止的信息,例如移動效果的xFrom、yFrom、xTo和yTo屬性。Flex使用下面的規則來確定行爲效果起始和終止值:

□   如果效果明確定義地定義了起始、終止屬性值,就在過渡中使用這些值。

□ 如果效果沒有定義起始值,Flex使用當前視窗的值。

□ 如果效果沒有定義終止值,Flex使用目標視窗的值。

□ 如果沒有明確的定義,Flex也不能從當前和目標視窗狀態中得到值,則效果使用默認的屬性值。

發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章