接上回 Flex学习笔记(二)

5）Panel、TitleWindow

Panel的layout= absolute，此时Panel的效果相当于Canvas

Panel的layout= horizontal，此时Panel的效果相当于HBox

Panel的layout= vertical，此时Panel的效果相当于VBox。

Panel有一个自己的组件ControlBar，它固定在最下面布局为HBox。宽度随着Panel变化而变化。

TitleWindow和Panel基本相同，只是比Panel多了一个关闭按钮。

我们通过showCloseButton=true，让关闭按钮显示。

通过close 属性，可以做需要的操作

 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:HBox  width ="100%"  height ="50%" >
 5              < mx:Panel  height ="100%"  width ="33%"  layout ="absolute"  id ="panel1" >
 6                  < mx:Label  text ="Panel的layout设为absolute"  x ="64"  y ="11" />
 7                  < mx:Label  text ="此时的Panel相当于Canvas"  x ="10"  y ="116" />
 8              </ mx:Panel >
 9              < mx:Panel  height ="100%"  width ="37%"  layout ="horizontal" >
10                  < mx:Label  text ="Panel的layout设为horizontal" />
11                  < mx:Label  text ="此时的Panel相当于HBox" />
12                  < mx:ControlBar >
13                      < mx:Button  label ="Open Panel1"  click ="panel1.visible=true" />
14                      < mx:Button  label ="Close Panel1"  click ="panel1.visible=false" />
15                  </ mx:ControlBar >
16              </ mx:Panel >         
 17              < mx:Panel  height ="100%"  width ="30%"  layout ="vertical" >
18                  < mx:Label  text ="Panel的layout设为vertical" />
19                  < mx:Label  text ="此时的Panel相当于VBox" />
20                  < mx:ControlBar >
21                      < mx:Button  label ="Open TitleWindow"  click ="titleWindows.visible=true" />
22                  </ mx:ControlBar >
23              </ mx:Panel >                 
 24          </ mx:HBox >
25          < mx:TitleWindow  width ="50%"  height ="50%"  close ="titleWindows.visible=false"  id ="titleWindows"  showCloseButton ="true" >
26              < mx:Label  text ="这是一个TitleWindow" />
27              < mx:Label  text ="它比Panel多了一个关闭按钮，通过showCloseButton=true让它显示" />
28              < mx:Label  text ="通过close属性，可以做一些相关操作" />
29          </ mx:TitleWindow >     
 30      </ mx:VDividedBox >
31 </ mx:Application >

Flex效果：




6）ViewStack、TabNavigator

ViewStack是由若干个重合在一起的子容器组成的。但是每次只有一个子容器是可见的。ViewStack不提供可视化的操作来切换它的子容器，但是我们可以通过selectedChild来实现。TabNavigator和viewStack基本相同，只不过它多了一个可视化的标签条来切换内部的子容器。

 1 <? xml version="1.0" ?>
 2 < mx:Application  xmlns:mx ="http://www.adobe.com/2006/mxml"  fontSize ="12" >
 3 < mx:VDividedBox  width ="100%"  height ="100%" >
 4       < mx:Panel  title ="ViewStack Example"  height ="40%"  width ="95%"  
  5          paddingTop ="10"  paddingLeft ="10"  paddingRight ="10"  paddingBottom ="10" >
 6
 7          < mx:HBox  borderStyle ="solid"  width ="100%"
 8             paddingTop ="5"  paddingLeft ="5"  paddingRight ="5"  paddingBottom ="5" >
 9              < mx:Button  label ="Search Panel"
10                 click ="myViewStack.selectedChild=search;" />
11              < mx:Button  label ="Customer Panel"
12                 click ="myViewStack.selectedChild=custInfo;" />
13              < mx:Button  label ="Boss Panel"
14                 click ="myViewStack.selectedChild=accountInfo;" />
15          </ mx:HBox >
16
17          < mx:ViewStack  id ="myViewStack"  borderStyle ="solid"  width ="100%"  height ="80%" >
18              < mx:Canvas  id ="search"  backgroundColor ="#FFFFCC"  label ="Search Info"  width ="100%"  height ="100%" >
19                  < mx:Label  text ="Search Screen" />
20              </ mx:Canvas >
21              < mx:Canvas  id ="custInfo"  backgroundColor ="#CCFFFF"  label ="Customer Info"  width ="100%"  height ="100%" >
22                  < mx:Label  text ="Customer Info" />
23              </ mx:Canvas >
24              < mx:Canvas  id ="accountInfo"  backgroundColor ="#FFCCFF"  label ="Boss Info"  width ="100%"  height ="100%" >
25                  < mx:Label  text ="Boss Info" />
26              </ mx:Canvas >
27          </ mx:ViewStack >
28      </ mx:Panel >
29      < mx:Panel  title ="TabNavigator Example"  height ="60%"  width ="95%"  paddingTop ="10"  paddingLeft ="10"  paddingRight ="10"  paddingBottom ="10" >
30          < mx:TabNavigator  width ="100%"  height ="100%"  id ="tabNav" >
31              < mx:Canvas  id ="search1"  backgroundColor ="#FFFFCC"  label ="Search Info"  width ="100%"  height ="100%" >
32                  < mx:Label  text ="Search Screen" />
33              </ mx:Canvas >
34              < mx:Canvas  id ="custInfo1"  backgroundColor ="#CCFFFF"  label ="Customer Info"  width ="100%"  height ="100%" >
35                  < mx:Label  text ="Customer Info" />
36              </ mx:Canvas >
37              < mx:Canvas  id ="accountInfo1"  backgroundColor ="#FFCCFF"  label ="Boss Info"  width ="100%"  height ="100%" >
38                  < mx:Label  text ="Boss Info" />
39              </ mx:Canvas >
40          </ mx:TabNavigator >
41         
 42          < mx:HBox  borderStyle ="solid"  width ="100%"
43             paddingTop ="5"  paddingLeft ="5"  paddingRight ="5"  paddingBottom ="5" >
44              < mx:Label  text ="selectedChild" />
45              < mx:Button  label ="Search"
46                 click ="tabNav.selectedChild=search1;" />
47              < mx:Button  label ="Customer"
48                 click ="tabNav.selectedChild=custInfo1;" />
49              < mx:Button  label ="Boss"
50                 click ="tabNav.selectedChild=accountInfo1;" />
51          </ mx:HBox >
52           < mx:HBox  borderStyle ="solid"  width ="100%"
53             paddingTop ="5"  paddingLeft ="5"  paddingRight ="5"  paddingBottom ="5" >
54              < mx:Label  text ="selectedIndex" />
55              < mx:Button  label ="Search"
56                 click ="tabNav.selectedIndex=0;" />
57              < mx:Button  label ="Customer"
58                 click ="tabNav.selectedIndex=1" />
59              < mx:Button  label ="Boss"
60                 click ="tabNav.selectedIndex=2" />
61          </ mx:HBox >
62      </ mx:Panel >
63     </ mx:VDividedBox >
64 </ mx:Application >

Flex效果：




 

7）Form、FormItem、FormHeading

FormHeading：表单标题

FormItem：多个FormItem构成表单的内容。FormItem有一个required属性，来设置是否允许为空。

From这个控件很简单，但是需要学习一下如何对这个表单内元素进行验证，Flex提供了强大的验证机制。常用的验证类有StringValidator，NumberValidator，DateValidator，EmailValidator。

拿StringValidator来学习一下它的用法。


1 < mx:StringValidator  source ="{pwd}"  minLength ="6"  maxLength ="12"  tooShortError ="密码要大于6位"  tooLongError ="密码要小于12位"  property ="text" />
 

Source属性：表示要验证的对象。

Property属性：表示要验证对象的那个属性。

这里的意思是要验证的对象为pwd，验证pwd对象的text属性。


Flex效果：





最后，我把这几天讲的Container做成了一个explorer，效果如下，太大了，需要的朋友留地址吧，我把源码一并mail。



看下一章Flex学习笔记(四)


                                                                2008年7月24日21:36:15
                                                                       Alps Wong