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，希望對大家的學習有幫助