Flex导航设计与表单验证

1、Flex3界面导航设计教程 博客分类：module可以延迟加载, 这样在你的程序初始化的时候, 只需要加载MailFrame. FlexAdobeActionScriptXML一个导航容器可以通过一组子容器来监控用户的操作。比如，TabNavigator 这个容器就可以通过一组tabs 来让用户选择可见的子容器。Flex3 提供了三种主要的导航容器： ViewStack TabNavigator Accordion接下来的时间逐个介绍每个容器的使用方法。1. ViewStack导航容器ViewStack 导航容器，以下简称VS 容器。是由很多子容器组合起来的，这些子容器相互叠在彼此之上，并且在

2、某一特定的时间内只有一个容器是可见的或者说是Active 状态的。VS 容器没有定义 built-in 的机制来切换当前处于active 状态的容器，所以用户需要使用像LinkBar,TabBar 或者ToggleButtonBar 这些控件，或者使用ActionScript 来更改当前可见容器的状态。比你可以定义一系列的按钮来控制所有子容器的切换动作。图中左边的图片显示VS 容器中第一个子容器是激活的，可以用索引的方法来表示VS 容器里面的子容器。比如0- （n-1 ）.创建一个VS 容器使用 标记就可以定义一个VS 容器，当然还可以设定很多属性了： selectedIndex表示如果VS

3、容器里里面有多余一个的子容器，那么selectedIndex 的值所对应的那个子容器就是active 的可见的。其取值范围0 到n-1.n 代表子容器的个数。 selectedChild当前激活的容器当定义了一个或者多个子容器，如果没有定义子容器，其值为null 。并且这个属性必须是现在AS 当中指定你要激活的那个容器的id. numChildren值VS 容器当中到底有多少个子容器。举例：我们试图增加一些特效。Xml代码 1 2 3 id=myWU duration=300 / 4 id=myWD duration=300 / 5 id=myWR duration=300 / 6 7 dat

4、aProvider=myViewStack 8 borderStyle=solid 9 backgroundColor=#EEEEFF/ 10 id=myViewStack 11 borderStyle=solid 12 width=100% 13 creationCompleteEffect=myWR 14 id=search 15 label=Search 16 hideEffect=myWD 17 showEffect=myWU 18 text=Search Screen / 19 20 id=custInfo 21 label=Customer Info 22 hideEffect=m

5、yWD 23 showEffect=myWU 24 text=Customer Info / 25 26 id=accountInfo 27 label=Account Info 28 hideEffect=myWD 29 showEffect=myWU 30 text=Account Info / 31 32 33 34 效果图：2. TabNavigator导航容器TabNavigator容器用来创建和管理一组tabs ，这些tabs 可以帮用户导航选择需要的子容器板块。创建TabNavigator 容器你可以通过 标记来定义个TabNavigator容器。用户可以通过tab 选择对应的板

6、块容器。当用户改变当前容器时， TabNavigator 容器都会触发一个change 事件。TabNavigator 容器会自动为每一个子容器创建一个tab, 并且通过label 属性设定tab 里面的值。当然你可以指定图片等。用户还可以设定enable disable 属性来决定那个容器可用与否。举例：Xml代码 35 version=1.0? 36 38 id=myWL / 39 40 label=Accounts 41 width=300 42 height=150 43 showEffect=myWL 44 45 text=This is a text control. / 46 4

7、7 label=Stocks 48 width=300 49 height=150 50 showEffect=myWL 51 52 text=This is a text control. / 53 54 label=Futures 55 width=300 56 height=150 57 showEffect=myWL 58 59 text=This is a text control. / 60 61 62 效果如图：TabNavigator 支持键盘导航功能，即可以通过键盘来选择tabs. 具体可以参考development guide.3. Accordion导航容器窗体是很常见的

8、容器了，可是有时候组件很多一个窗体放不下，accordion 就提供了一个可以来回移动的窗体。这个容器可以包含一系列的子panels 。但是任意时刻都只有一个panel 是可见的。创建Accordion 容器你可以使用 标记来创建这个容器。举例说明：Xml代码 63 version=1.0? 64 65 66 height=600 67 creationComplete=setButtonStyles(; 68 69 70 public function setButtonStyles(:void 71 comp.getHeaderAt(0.setStyle(color, 0xAA0000;

9、72 comp.getHeaderAt(1.setStyle(color, 0x00AA00; 73 74 75 76 id=comp height=250 77 id=shippingAddress label=1. Shipping Address 78 id=sfirstNameItem label=First Name 79 id=sfirstName / 80 81 82 id=billingAddress label=2. Billing Address 83 id=backButton label=Back click=comp.selectedIndex=0; / 84 id=

10、nextButton label=Next click=comp.selectedIndex=2; / 85 86 id=creditCardInfo label=3. Credit Card Information 87 88 89 我们增加了一些效果。比如用户通过按钮可以选择那个panel 是可见的。Xml代码 90 id=lastButton label=Last click=accordion1.selectedIndex = accordion1.numChildren - 1; / 这段程序就可以打开最后一个 panel.同时还可以设定每个 panels的外观，包括字体、颜色等。B

11、uttonBar和ToggerButtonBar和的效果图一样3. 动态控制对象的布局3.1 使用Tile 显示多个按钮Tile直接继承Container，使用起来非常方便。适合重复排列的元素。direction 属性值为 horizontal时，设置其子级对象的布局方向为水平方向。tileWidth 和 tileHeight 用来控制每个子级对象的长和宽。Xml代码 1 version=1.0 encoding=utf-8? 2 3 4 5 18 19 id=holder x=41 y=45 width=330 height=280 horizontalGap=2 20 direction=

12、horizontal tileHeight=80 tileWidth=80 21 label=btn_1 height=50 width=75 / 22 label=btn_2 height=50 width=75 / 23 label=btn_3 height=50 width=75 / 24 label=btn_4 height=50 width=75 / 25 label=btn_5 height=50 width=75 / 26 label=btn_6 height=50 width=75 / 27 label=btn_7 height=50 width=75 / 28 label=b

13、tn_8 height=50 width=75 / 29 label=btn_9 height=50 width=75 / 30 31 x=266 y=340 label= 增加一个按钮 fontSize=12 click=addItem( / 32 3.2 更强大的 Grid组件Grid 继承自Box，类似于HTML中的表格，由行和单元格组成。单元格中可以包含其他元素。行必须为GridRow对象，每个单元格必须为GridItem对象。两者继承自HBox。colSpan 表示单元格所占的横向格数，rowSpan 表示单元格所占的纵向行数。类似于HTML的Table。Xml代码 33 versi

14、on=1.0 encoding=utf-8? 34 35 x=62 y=96 horizontalGap=2 36 width=100% height=79 37 width=100% height=100% 38 label=Button1 / 39 40 width=100% height=100% colSpan = 2 41 label=Button2 height=60 / 42 43 width=100% height=100% 44 label=Button3 / 45 label=Button4 / 46 47 48 width=100% height=79 49 width=

15、100% height=100% 50 label=Button / 51 52 width=100% height=100% 53 label=Button height=60 width=98 / 54 55 width=112 height=100% 56 label=Button width=41 height=55 / 57 label=Button width=85 / 58 59 60 61 4. 方便的导航容器导航类允许用户在其子级元素之间却换，但必须是容器类型，单我们可以在子级容器中圈套其他容器和组件。4.1 Accordion 组件Accordion 是一个可折叠的导航器，

16、包含一个子面板列表，但一次仅显示一个面板。selectedChild 和 selectedIndex 表示当前显示的子元素和显示元素的索引号，可以利用这两个属性来控制组件的显示内容。如代码中的tab_menu.selectedIndex = 1 表示却换到第2个面板。Xml代码 62 version=1.0 encoding=utf-8? 63 64 65 66 67 internal function doSkip(:void 68 tab_menu.selectedIndex = 1; 69 70 71 72 73 id=tab_menu x=57 y=67 width=194 heigh

17、t=270 fontSize=12 74 label=Item 1 width=100% height=100% 75 text=Canvas1 / 76 x=10 y=38 / 77 78 79 label=Item 2 width=100% height=100% 80 text= 这里插入内容 height=28 / 81 82 83 label= 请选择性别 / 84 label= 女 / 85 label= 男 / 86 87 88 89 90 title= 内嵌的 Panel label=Item 3 width=90% height=90% 91 92 93 94 x=259 y

18、=315 label= 跳到第二个菜单 fontSize=14 labelPlacement=right click=doSkip( / 95 4.2 ViewStack 组件由若干重叠在一起的子容器组成，每次只有一个容器是可见或活动的。但它不为用户提供却换当前活动容器的界面接口，可以通过AS进行控制，或者和其他控制类容器联合使用。如：LinkBar、TabBar、ButtonBar、ToggleButtonBar等。一般用来做向导类的应用。就是有那种下一步下一步的。selectedChild 表示当前处于激活状态的子级对象。Xml代码 96 version=1.0 encoding=utf-

19、8? 97 98 99 100 internal function doChange(:void 101 if(viewstack_1.selectedChild = child2 102 viewstack_1.selectedChild = child1; 103 else 104 viewstack_1.selectedChild = child2; 105 106 107 108 109 x=46 y=72 id=viewstack_1 width=200 height=200 110 id=child1 label=View 1 width=100% height=100% 111

20、fontSize=12 112 113 label= 请选择您感兴趣的技术： / 114 label=Flash / 115 label=Flex / 116 label=Flash Media server / 117 label=Breeze / 118 119 120 121 id=child2 label=View 2 width=100% height=100% 122 text= 请输入您的邮箱地址 fontSize=12 / 123 124 125 x=46 y=304 label= 切换按钮 fontSize= 12 click=doChange( / 126 4.3 使用 T

21、abNavigator 进行快速导航继承自ViewStack，还提供了用户却换内容的界面接口。类似标签页却换面板。Xml代码 127 version=1.0 encoding=utf-8? 128 129 x=70 y=91 width=200 height=200 130 label=Tab 1 width=100% height=100% 131 x=10 y=31 label= 选中我 fontSize=12 / 132 133 134 label=Tab 2 width=100% height=100% 135 x=20 y=41 text= 第二个面板 fontSize=12 / 1

22、36 137 138 139 5. 表单布局Flex提供了一套表弟组件，让我们可方便的构建复杂的表单程序。Form容器是表单功能组件中的主要成员，继承自Container，相关的组件还有FormItem 和 FormHeading。5.1 简单的用户输入表单FormHeading 表示表弟标题，这里也可以放置顶部的导航控制。FormItem 可以容纳多个组件，且组件的布局方向有 horizontal 和 vertical。FormItem 还有一个属性required 表示本栏的值是否为空。5.2 表单验证最后添加了5个验证对象，分别针对不同的组件，他们的source属性表示目标对象：Stri

23、ngValidator 字符验证，property=text 为文本属性，minLength 和 maxLength 表示字符最短长度和最长长度。tooShortError 提示信息。PhoneNumberValidator 电话号码验证DataValidator 日期验证EmailValidator 邮箱验证Xml代码 140 version=1.0 encoding=utf-8? 141 142 title= 用户注册信息 width=359 height=303 x=24.5 y=37 fontSize=12 143 width=100% height=100% horizontalGap=0 144 label= 用户资料 width=100% / 145 label= 用户名： width=100% required=true 146 width=100% id=use