Flex学习笔记(三)

最新推荐文章于 2025-06-13 15:15:30 发布

转载最新推荐文章于 2025-06-13 15:15:30 发布 · 1k 阅读

文章标签：

#flex #layout #search #encoding

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 属性，可以做需要的操作

<? 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 基本相同，只不过它多了一个可视化的标签条来切换内部的子容器。

<? 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

< 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

< 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

< 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来学习一下它的用法。

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

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

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

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

Flex效果：

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

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