解析FlexBuilder教程中數據綁定,界面布局和導航用法
本文和大家重點討論一下FlexBuilder教程中數據綁定,界面布局和導航方面的內容,以MXML標記來描述UI,數據綁定(Databinding)來連接數據,這樣就真正實現了UI和程序邏輯的分離。
一,FlexBuilder教程中的數據綁定
以MXML標記來描述UI,數據綁定(Databinding)來連接數據,這樣就真正實現了UI和程序邏輯的分離。Databinding可以一綁多或者多綁一。
1,在MXML中使用大括號{}語句:格式為:{源對象.屬性}??芍苯觽魉徒o目標對象;高級用法是在{}中包含AS表達式、AS函數或者E4X表達式
2,在MXML中使用<mx:Binding>標簽:這是{}語句的替代用法,格式為:<mx:Bindingsource="源對象.屬性"destination="目標對象.屬性"/>;
高級用法是在標簽中包含AS表達式或者E4X表達式//在Model數據中使用{}語句來綁定數據
- <mx:Modelidmx:Modelid="thing1">
- <data>
- <part>{input1.text}</part>
- </data>
- </mx:Model>
- //用<mx:Binding>標簽來綁定數據
- <mx:Bindingsourcemx:Bindingsource="input2.text"destination="thing1.part"/>
- <mx:TextInputidmx:TextInputid="input1"/>
- <mx:TextInputidmx:TextInputid="input2"/>
- <mx:TextAreatextmx:TextAreatext="{thing1.part}"/>
3,使用AS類來綁定:使用mx.binding.utils.BindingUtils的bindProperty()或者bindSetter()方法
二,FlexBuilder教程中界面布局和導航
容器定義了FlashPlayer的繪圖表面的一個矩形區域。子容器包括控件和容器。Container類是所有Flex容器類的基本類。擴展Container類的容器添加它們自己的功能以進行子組件布局。Application容器是的Flex應用程序的唯一根部容器,代表整個FlashPlayer繪圖表面。
1,布局容器:
使用FlexBuilder教程中布局容器可進行用戶界面布局。
A,面板(Panel)容器顯示一個標題欄、一個標題、一個邊框及其子級。默認情況下,Panel容器會對子組件進行垂直布局,并且可以通過將布局屬性設置為"absolute"或"horizontal"來覆蓋此設置。
B,HDividedBox容器對子組件進行水平布局,除了在子級之間插入一個可調整的分割線之外,它與HBox容器很相似。VDividedBox容器對子組件進行垂直布局,而且也在子級之間插入一個可調整的分割線。
C,平鋪(Tile)容器以多行或多列的形式排列其子級。
D,表單(Form)容器以標準的表單格式排列其子級。
E,ApplicationControlBar容器容納提供全局導航和應用程序命令的組件,并可以??吭贏pplication容器的上邊緣。
F,ControlBar容器將控件置于Panel或TitleWindow容器的下邊緣。
G,另外可使用Spacer控件來輔助布局。Spacer控件并非容器,而是基于百分比的可用于擠占留空以準確定位的一個不可見控件。
2,導航容器:
使用FlexBuilder教程中導航容器可以控制其他容器的多個子級之間的用戶移動或導航。導航器容器不能直接嵌套控件,只能嵌套容器。
A,手風琴(Accordion)容器定義一個子面板序列,但一次僅顯示一個面板。若要導航容器,用戶會單擊與他們需要訪問的子面板相對應的導航按鈕。使用Accordion容器,用戶可以按任何順序訪問子面板以在表單中前后移動。
B,TabNavigator容器創建和管理一組選項卡,使用它們可在其子級中間導航。TabNavigator容器的子級是其他容器。TabNavigator容器為每個子級創建一個選項卡。當用戶選中某個選項卡時,TabNavigator容器會顯示相關聯的子級。
C,ViewStack容器由彼此堆疊在一起的子容器的一個集合組成,一次只有一個容器是可見的或活動的。ViewStack容器不為用戶定義切換當前活動容器的內置機制;您必須使用LinkBar、TabBar、ButtonBar或ToggleButtonBar控件或自己在ActionScript中構建邏輯讓用戶來更改當前活動的子級。
3,使用容器Containers進行定位布局
定位方式有三種:
A,自動定位:多數Flex容器使用默認預定義的規則來自動定位你在其中定義的所有的子組件。
B,使用絕對定位:用于使控件重疊
C,使用基于約束的布局:可以錨定容器的邊緣或者中心點,然后控件就會隨著容器的伸縮而伸縮
Canvas容器,和layout屬性為absolute的Application或Panel容器才能進行絕對定位,或約束布局。
4,使用視圖狀態(或ViewStack導航容器)進行用戶界面切換導航
可以為一個Flex程序或組件定義幾種視圖狀態,然后通過改變(切換)視圖狀態而改變用戶界面。(ViewStack導航容器可實現同樣效果)
1),設計基礎狀態(Basestate,Start,currentState=''):就是在默認狀態下設計用戶界面。
2),設計視圖狀態(currentState='SomeState'):在設計模式中,在狀態查看(Window>States)上點擊新狀態/NewState按鈕。然后在此狀態下編輯的界面即為該視圖的對應界面。
3),創建用戶行為切換控件:定義用戶變換狀態的點擊事件處理器。一般是使用一個LinkButtun,激活currentState='SomeState'以切換到某界面,激活currentState=''以回到默認界面。
【編輯推薦】