Flex学习笔记(二)

  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

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



 

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。

 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