Flex页面布局(容器类和导航类) Part.1

回顾上一章《 Flex学习笔记(一) 》 

Flex超炫的视觉效果,相信很多人都为之震撼。因此页面布局就就成为程序开发中重要的一个环节。它直接决定了程序的成败。

刚开始学习这一块儿的时候,在脑中闪现出以前学习Swing时郁闷的场景。呵呵,这次让我们换一种学习方法,用实例来学习,这样不会空洞的只剩下长篇的理论,也不会枯燥的让我们想睡觉。

1ApplicationControlBar

对于ApplicationControlBar,我们需要注意的是dock这个属性。

Dock是决定ApplicationControlBar的位置,默认为false

dock=trueApplicationControlBar将始终显示在窗口的顶部,并且自动缩放,适应窗口大小。

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效果:


2Accordion

这个是一个可以收缩的导航控件。

这个我们可以了解一下AccordionselectedIndexselectedChild两个属性。

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效果:



 

3BoxHBoxVBox

HBoxVBoxBox的子类,HBox为水平分布,VBox为垂直分布

Box通过设置direction的属性,可以达到HBox,或者VBox的效果。

Boxdirection="horizontal",相当于HBox

Boxdirection="vertical",相当于VBox

 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:Panel height="80%" width="80%" paddingTop="10" paddingLeft="10" paddingRight="10" paddingBottom="10">
 4    <mx:VDividedBox width="80%" height="80%">
 5        <mx:Panel width="80%" height="40%">
 6            <mx:Box direction="horizontal" borderStyle="solid">
 7                <mx:Label text="box的direction=horizontal"/>
 8                <mx:Label text="这是水平分布,相当于HBox"/>
 9                <mx:Button label="Button"/>
10            </mx:Box>
11            
12            <mx:Box direction="vertical" borderStyle="solid">
13                <mx:Label text="box的direction=vertical"/>
14                <mx:Label text="这是垂直分布,相当于VBox"/>
15                <mx:Button label="Button"/>
16            </mx:Box>
17        </mx:Panel>
18        
19        <mx:Panel width="80%" height="40%">
20            <mx:HBox borderStyle="solid">
21                <mx:Label text="HBox,是水平分布"/>
22                <mx:Label text="相当于Box的direction=horizontal"/>
23                <mx:Button label="Button"/>
24            </mx:HBox>
25            <mx:VBox borderStyle="solid">
26                <mx:Label text="VBox,是垂直分布"/>
27                <mx:Label text="相当于Box的direction=vertical"/>
28                <mx:Button label="Button"/>
29            </mx:VBox>
30        </mx:Panel>
31    </mx:VDividedBox>
32    </mx:Panel>    
33</mx:Application>


Flex效果:



 

4DividedBoxHDividedBoxVDividedBox

HDividedBoxVDividedBoxDividedBox的子类,HDividedBox为水平分布,VDividedBox为垂直分布

DividedBox通过设置direction的属性,可以达到HDividedBox,或者VDividedBox的效果。

DividedBoxdirection="horizontal",相当于HDividedBox

DividedBoxdirection="vertical",相当于VDividedBox

需要注意的一点是有个liveDragging属性,

liveDragging=true的时候,元素在拖动的时候就会不断的调整位置。

liveDragging=false的时候,元素只有在鼠标松开的时候才调整位置。默认的情况是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:VDividedBox width="100%" height="100%">
 4    <mx:HDividedBox width="100%" height="50%">
 5        <mx:Label text="这是DividedBox"/>
 6        <mx:Canvas width="40%" height="100%" >
 7            <mx:DividedBox direction="horizontal" width="100%" height="100%" liveDragging="true">
 8                <mx:Panel height="100%" width="50%" >
 9                    <mx:Label text="liveDragging=true"/>
10                    <mx:Label text="direction=horizontal"/>
11                </mx:Panel>
12                <mx:Panel height="100%" width="50%">
13                    <mx:Label text="direction=horizontal"/>
14                </mx:Panel>
15            </mx:DividedBox>
16        </mx:Canvas>
17        <mx:Canvas width="40%" height="100%">
18            <mx:DividedBox direction="vertical" width="100%" height="100%" x="10" liveDragging="false">
19                <mx:Panel height="50%" width="100%">
20                    <mx:Label text="liveDragging=false"/>
21                    <mx:Label text="direction=vertical"/>
22                </mx:Panel>
23                <mx:Panel height="50%" width="100%">
24                    <mx:Label text="direction=vertical"/>
25                </mx:Panel>
26            </mx:DividedBox>
27        </mx:Canvas>
28    </mx:HDividedBox>
29    
30    <mx:HDividedBox width="100%" height="50%">
31        <mx:HBox width="40%" height="100%">
32            <mx:Label text="这是HDividedBox"/>
33            <mx:HDividedBox width="100%" height="100%" liveDragging="true">
34                <mx:Panel height="100%" width="50%">
35                    <mx:Label text="liveDragging=true"/>
36                </mx:Panel>
37                <mx:Panel height="100%" width="50%"/>
38            </mx:HDividedBox>
39        </mx:HBox>
40        <mx:HBox width="40%" height="100%" >
41            <mx:Label text="这是VDividedBox"/>
42            <mx:VDividedBox width="100%" height="100%" liveDragging="false">
43                <mx:Panel height="50%" width="100%">
44                    <mx:Label text="liveDragging=false"/>
45                </mx:Panel>
46                <mx:Panel height="50%" width="100%"/>
47            </mx:VDividedBox>
48        </mx:HBox>
49    </mx:HDividedBox>
50</mx:VDividedBox>
51</mx:Application>


Flex效果:



 这块内容太多,所以决定分两张帖子,在下一个章中将会给大家提供一个综合所讲实例的explorer,希望对大家的学习有帮助。
学习下一章《 Flex学习笔记(三) 》
 

PS:工作比较忙,一般只有下班时间才能整理笔记,所以更新的有些慢,请大家见谅。

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