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