Flex导航设计与表单验证

上传人：7*** IP属地：湖北上传时间：2022-01-30 格式：DOC 页数：16 大小：121.50KB 积分：20 举报 版权申诉

已阅读5页，还剩11页未读，继续免费阅读

版权说明：本文档由用户提供并上传，收益归属内容提供方，若内容存在侵权，请进行举报或认领

文档简介

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 容器，当然还可以设定很多属性了：

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

4、quot; /> 4 id="myWD" duration="300" /> 5 id="myWR" duration="300" /> 6 7 dataProvider="myViewStack" 8 borderStyle="solid" 9 backgroundColor="#EEEEFF"/> 10 id="myViewStack" 11 borderStyle="solid" 12

5、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 hid

6、eEffect="myWD" 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. TabNaviga

7、tor导航容器TabNavigator容器用来创建和管理一组tabs ，这些tabs 可以帮用户导航选择需要的子容器板块。创建TabNavigator 容器你可以通过标记来定义个TabNavigator容器。用户可以通过tab 选择对应的板块容器。当用户改变当前容器时， TabNavigator 容器都会触发一个change 事件。TabNavigator 容器会自动为每一个子容器创建一个tab, 并且通过label 属性设定tab 里面的值。当然你可以指定图片等。用户还可以设定enable disable 属性来决定那个容器可用与否。举例：Xml代码 35 version="1.

8、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 47 label="Stocks" 48 width="300" 49 height="150&qu

9、ot; 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 支持键盘导航功能，即

10、可以通过键盘来选择tabs. 具体可以参考development guide.3. Accordion导航容器窗体是很常见的容器了，可是有时候组件很多一个窗体放不下，accordion 就提供了一个可以来回移动的窗体。这个容器可以包含一系列的子panels 。但是任意时刻都只有一个panel 是可见的。创建Accordion 容器你可以使用标记来创建这个容器。举例说明：Xml代码 63 version="1.0"?> 64 65 66 height="600" 67 creationComplete="setButtonStyles(;

11、"> 68 69 <span style="font-family:Symbo

12、l;TimesNewRoman;color:#2B91AF;font-size:14px;">70 public function setButtonStyles(:void &

13、lt;/span>71<span style="font-family:Symbol;Times

14、NewRoman;color:#2B91AF;font-size:14px;"> comp.getHeaderAt(0.setStyle('color', 0xAA0000; <p style="font-family:Monaco;margin-left:24px;border-left:1pxsolid#D

15、1D7DC;background:#auto;text-align:left;">72 <span style="font-family:Mon

16、aco;color:#000000;background:#FAFAFA;"> comp.getHeaderAt(1.setStyle('color', 0x00AA00; <span style="font-family:Symbol;TimesNewR

17、oman;color:#2B91AF;font-size:14px;">73 <p style="font-fami

18、ly:Monaco;margin-left:24px;border-left:1pxsolid#D1D7DC;background:#auto;text-align:left;">74

19、 75 76 id="comp" height="250" > 77 id="shippingAddress" label="1. Shipping Address" > 78 id="sfirstNameItem" label="First Name" > 79 id

20、="sfirstName" /> 80 81 82 id="billingAddress" label="2. Billing Address" > 83 id="backButton" label="Back" click="comp.selectedIndex=0;" /> 84 id="nextButton" label="Next" click="comp.selectedIndex=2;"

21、 /> 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.同时还可以设

22、定每个 panels的外观，包括字体、颜色等。ButtonBar和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="hold

23、er" x="41" y="45" width="330" height="280" horizontalGap="2" 20 direction="horizontal" tileHeight="80" tileWidth="80"> 21 label="btn_1" height="50" width="75" /> 22 label="bt

24、n_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=&quo

25、t;btn_6" height="50" width="75" /> 27 label="btn_7" height="50" width="75" /> 28 label="btn_8" height="50" width="75" /> 29 label="btn_9" height="50" width="75" /> 30 31 x=&

26、quot;266" y="340" label=" 增加一个按钮 " fontSize="12" click="addItem(" /> 32 3.2 更强大的 Grid组件Grid 继承自Box，类似于HTML中的表格，由行和单元格组成。单元格中可以包含其他元素。行必须为GridRow对象，每个单元格必须为GridItem对象。两者继承自HBox。colSpan 表示单元格所占的横向格数，rowSpan 表示单元格所占的纵向行数。类似于HTML的Table。Xml代码 33 version=&qu

27、ot;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%" heigh

28、t="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

29、="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"

30、 width="41" height="55" /> 57 label="Button" width="85" /> 58 59 60 61 4. 方便的导航容器导航类允许用户在其子级元素之间却换，但必须是容器类型，单我们可以在子级容器中圈套其他容器和组件。4.1 Accordion 组件Accordion 是一个可折叠的导航器，包含一个子面板列表，但一次仅显示一个面板。selectedChild 和 selectedIndex 表示当前显示的子元素和显示元素的索引号，可以利用这两个属性来控制组件的显示

31、内容。如代码中的tab_menu.selectedIndex = 1 表示却换到第2个面板。Xml代码 62 version="1.0" encoding="utf-8"?> 63 > 64 65 66 <p style="font-family:Monaco;margin-left:24p

32、x;border-left:1pxsolid#D1D7DC;background:#auto;">67 <span style="font-fa

33、mily:Monaco;color:#000000;background:#FAFAFA;"> internal function doSkip(:void <span style="font-family:Symbol;TimesNewRoman;color:#2B91AF;font-size:14p

34、x;">68 tab_menu.selectedIndex = 1; <p style="font-family:M

35、onaco;margin-left:24px;border-left:1pxsolid#D1D7DC;background:#auto;">69 <spa

36、n style="font-family:Monaco;color:#000000;background:#FAFAFA;"> <span style="font-family:Symbol;TimesNewRoman;color:#2B91AF;font-size:14px;"&g

37、t;70 71 72 73 id="tab_menu" x="57" y="67" width="194" hei

38、ght="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=

39、" 这里插入内容 " 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"

40、 y="315" label=" 跳到第二个菜单 " fontSize="14" labelPlacement="right" click="doSkip(" /> 95 4.2 ViewStack 组件由若干重叠在一起的子容器组成，每次只有一个容器是可见或活动的。但它不为用户提供却换当前活动容器的界面接口，可以通过AS进行控制，或者和其他控制类容器联合使用。如：LinkBar、TabBar、ButtonBar、ToggleButtonBar等。一般用来做向导类的应用。就是有那种下一步下一

41、步的。selectedChild 表示当前处于激活状态的子级对象。Xml代码 96 version="1.0" encoding="utf-8"?> 97 > 98 99 &

42、lt;span style="font-family:Helvetica;color:#000000;background:#EFEFEF;">100 internal function doChange(:void

43、101 <span

44、 style="font-family:Monaco;font-size:12px;"> if(viewstack_1.selectedChild = child2 102<span sty

45、le="font-family:Helvetica;color:#000000;background:#EFEFEF;"> viewstack_1.selectedChild = child1; <span style="

46、;font-family:Helvetica;color:#000000;background:#EFEFEF;">103 else <p style="font-f

47、amily:Helvetica;background:#auto;">104 <span style="font-family:Monaco;font-size:12px;

48、"> viewstack_1.selectedChild = child2; 105<span style="font-family:Helvetica;color:#000000;back

49、ground:#EFEFEF;"> 106<

50、;span style="font-family:Helvetica;color:#000000;background:#EFEFEF;"> <span style="font-family:Helvetica;colo

51、r:#000000;background:#EFEFEF;">107 108 109 x="46" y="72" id="viewstack_1" width=&quo

52、t;200" height="200" > 110 id="child1" label="View 1" width="100%" height="100%" > 111 fontSize="12" > 112 113 label=" 请选择您感兴趣的技术： " /> 114 label="Flash" /> 115 label="Flex" /> 116 label=&

53、quot;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" labe

54、l=" 切换按钮 " fontSize=" 12" click="doChange(" /> 126 4.3 使用 TabNavigator 进行快速导航继承自ViewStack，还提供了用户却换内容的界面接口。类似标签页却换面板。Xml代码 127 version="1.0" encoding="utf-8"?> 128 > 129 x="70" y="91" width="200" height="200

55、" > 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="

56、;41" text=" 第二个面板 " fontSize="12" /> 136 137 138 139 5. 表单布局Flex提供了一套表弟组件，让我们可方便的构建复杂的表单程序。Form容器是表单功能组件中的主要成员，继承自Container，相关的组件还有FormItem 和 FormHeading。5.1 简单的用户输入表单FormHeading 表示表弟标题，这里也可以放置顶部的导航控制。FormItem 可以容纳多个组件，且组件的布局方向有 horizontal 和 vertical。FormItem 还有一个属性required 表示本栏的值是否为空。5.2 表单验证最后添加了5个验证对象，分别针对不同的组件，他们的source属性表示目标对象：StringValidator 字符验证，property="text " 为文本属性，minLength 和 maxLength 表示字符最短长度和最长长度。tooShortError 提示信息。PhoneNumberValidator 电话号码验证DataValidator 日期验证EmailValidator 邮箱验证Xml代码 140 version

人人文库> 全部分类> 教育资料 > 辅导培训

温馨提示

1. 本站所有资源如无特殊说明，都需要本地电脑安装OFFICE2007和PDF阅读器。图纸软件为CAD,CAXA,PROE,UG,SolidWorks等.压缩文件请下载最新的WinRAR软件解压。
2. 本站的文档不包含任何第三方提供的附件图纸等，如果需要附件，请联系上传者。文件的所有权益归上传用户所有。
3. 本站RAR压缩包中若带图纸，网页内容里面会有图纸预览，若没有图纸预览就没有图纸。
4. 未经权益所有人同意不得将文件中的内容挪作商业或盈利用途。
5. 人人文库网仅提供信息存储空间，仅对用户上传内容的表现方式做保护处理，对用户上传分享的文档内容本身不做任何修改或编辑，并不能对任何下载内容负责。
6. 下载文件中如有侵权或不适当内容，请与我们联系，我们立即纠正。
7. 本站不保证下载资源的准确性、安全性和完整性, 同时也不承担用户因使用这些下载资源对自己和他人造成任何形式的伤害或损失。

Flex导航设计与表单验证

文档简介

温馨提示

最新文档

评论

Flex导航设计与表单验证

文档简介

温馨提示

最新文档

评论

相关文档