Flex頁面布局（容器類和導航類） Part.1

回顧上一章《 Flex學習筆記(一) 》 

Flex超炫的視覺效果，相信很多人都為之震撼。因此頁面布局就就成為程序開發中重要的一個環節。它直接決定了程序的成敗。

剛開始學習這一塊兒的時候，在腦中閃現出以前學習Swing時郁悶的場景。呵呵，這次讓我們換一種學習方法，用實例來學習，這樣不會空洞的只剩下長篇的理論，也不會枯燥的讓我們想睡覺。

1）ApplicationControlBar

對于ApplicationControlBar，我們需要注意的是dock這個屬性。

Dock是決定ApplicationControlBar的位置，默認為false。

當dock=true，ApplicationControlBar將始終顯示在窗口的頂部，并且自動縮放，適應窗口大小。

當dock=false，它的位置可以隨意設定。

 1<?xml version="1.0" encoding="utf-8"?>
 2<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" layout="absolute" fontSize="12">
 3    <mx:ApplicationControlBar dock="true">
 4        <mx:Label text="dock=true"/>
 5        <mx:MenuBar labelField="@label">
 6            <mx:XMLList>
 7                <item label="Country Name">
 8                    <node label = "China"/>                    
 9                    <node label = "America"/>                    
10                </item>
11                <item label="City Name">
12                    <node label = "BeiJing"/>                    
13                    <node label = "QingDao"/>                    
14                </item>
15            </mx:XMLList>
16        </mx:MenuBar>        
17    </mx:ApplicationControlBar>    
18    <mx:Label text="這個ApplicationControlBar的dock屬性設置成了true，所以它永遠顯示在窗口的最頂端" y="10"/>    
19    <mx:ApplicationControlBar x="66" y="111" width="322">
20        <mx:Label text="dock=false"/>    
21    </mx:ApplicationControlBar>
22    <mx:Label text="默認的情況下dock的屬性值為false，所以它可以出現在程序的任何地方" y="152" x="10"/>
23</mx:Application>

Flex效果：

2）Accordion

這個是一個可以收縮的導航控件。

這個我們可以了解一下Accordion的selectedIndex和selectedChild兩個屬性。

selectedIndex：元素的索引號

selectedChid：元素的ID

 1<?xml version="1.0" encoding="utf-8"?>
 2<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" layout="absolute" fontSize="12">
 3<mx:Accordion id="simple" x="10" y="10">
 4        <mx:Panel label="Choose panel1" id="p1">
 5            <mx:Label text="This is Panel1"/>
 6        </mx:Panel>
 7        <mx:Panel label="Choose panel2" id="p2">
 8            <mx:Label text="This is panel2"/>
 9        </mx:Panel>
10        <mx:Panel label="Choose panel3" id="p3">
11            <mx:Label text="This is panel3"/>
12        </mx:Panel>
13    </mx:Accordion>
14    <mx:HBox x="10" y="169">
15        <mx:Label text="通過selectedIndex訪問"/>
16        <mx:Button label="Show Panel1" click="simple.selectedIndex=0"/>
17        <mx:Button label="Show Panel2" click="simple.selectedIndex=1"/>
18        <mx:Button label="Show Panel3" click="simple.selectedIndex=2"/>
19    </mx:HBox>
20    <mx:HBox y="215" x="10">
21        <mx:Label text="通過selectedChild訪問"/>
22        <mx:Button label="Show Panel1" click="simple.selectedChild=p1" x="10" y="201"/>
23        <mx:Button label="Show Panel2" click="simple.selectedChild=p2" x="10" y="201"/>
24        <mx:Button label="Show Panel3" click="simple.selectedChild=p3" x="10" y="201"/>
25    </mx:HBox>
26</mx:Application>

Flex效果：



 

3）Box、HBox、VBox

HBox和VBox是Box的子類，HBox為水平分布，VBox為垂直分布

Box通過設置direction的屬性，可以達到HBox，或者VBox的效果。

Box的direction="horizontal"，相當于HBox

Box的direction="vertical"，相當于VBox

Flex效果：



 

4）DividedBox、HDividedBox、VDividedBox

HDividedBox和VDividedBox是DividedBox的子類，HDividedBox為水平分布，VDividedBox為垂直分布

DividedBox通過設置direction的屬性，可以達到HDividedBox，或者VDividedBox的效果。

DividedBox的direction="horizontal"，相當于HDividedBox

DividedBox的direction="vertical"，相當于VDividedBox

需要注意的一點是有個liveDragging屬性，

liveDragging=true的時候，元素在拖動的時候就會不斷的調整位置。

liveDragging=false的時候，元素只有在鼠標松開的時候才調整位置。默認的情況是false。

Flex效果：



 這塊內容太多，所以決定分兩張帖子，在下一個章中將會給大家提供一個綜合所講實例的explorer，希望對大家的學習有幫助。
學習下一章《 Flex學習筆記(三) 》
 

PS:工作比較忙，一般只有下班時間才能整理筆記，所以更新的有些慢，請大家見諒。

                                                                                                                                    
                                                                                                        2008年7月23日19:27:44
                                                                                                                    Alps Wong