Flex学习笔记(三)

striver

个人空间 相册
性别:
来自:拼吾爱
积分:7097
帖子:7009
注册: 2007-04-09

2008-08-06 10:21 | 只看楼主

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

Code

[copy to clipboard]

CODE:

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

Code

[copy to clipboard]

CODE:

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位" tooL property="text"/>
Source属性：表示要验证的对象。

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

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

Flex效果：

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