Flex学习笔记_05 使用容器控制界面布局_03动态布局、导航容器、表单布局

3. 动态控制对象的布局

 

3.1 使用Tile 显示多个按钮

Tile直接继承Container，使用起来非常方便。适合重复排列的元素。

direction 属性值为 horizontal时，设置其子级对象的布局方向为水平方向。

tileWidth 和 tileHeight 用来控制每个子级对象的长和宽。

<?xml version="1.0" encoding="utf-8"?> <mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" layout="absolute"> <mx:Script> <!--[CDATA[ //导入 Button对象 import mx.controls.Button; internal function addItem():void{ //创建Button实例 var btn:Button = new Button(); btn.label = "btn_10"; btn.height = 50; btn.width = 75; //向Tile容器中添加该按钮 holder.addChild(btn); } ]]--> </mx:Script> <mx:Tile id="holder" x="41" y="45" width="330" height="280" horizontalGap="2" direction="horizontal" tileHeight="80" tileWidth="80"> <mx:Button label="btn_1" height="50" width="75"/> <mx:Button label="btn_2" height="50" width="75"/> <mx:Button label="btn_3" height="50" width="75"/> <mx:Button label="btn_4" height="50" width="75"/> <mx:Button label="btn_5" height="50" width="75"/> <mx:Button label="btn_6" height="50" width="75"/> <mx:Button label="btn_7" height="50" width="75"/> <mx:Button label="btn_8" height="50" width="75"/> <mx:Button label="btn_9" height="50" width="75"/> </mx:Tile> <mx:Button x="266" y="340" label="增加一个按钮" fontSize="12" click="addItem()"/> </mx:Application>

3.2 更强大的 Grid组件

Grid 继承自Box，类似于HTML中的表格，由行和单元格组成。单元格中可以包含其他元素。行必须为GridRow对象，每个单元格必须为GridItem对象。两者继承自HBox。

colSpan 表示单元格所占的横向格数，rowSpan 表示单元格所占的纵向行数。类似于HTML的Table。

<?xml version="1.0" encoding="utf-8"?> <mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" layout="absolute"> <mx:Grid x="62" y="96" horizontalGap="2"> <mx:GridRow width="100%" height="79"> <mx:GridItem width="100%" height="100%"> <mx:Button label="Button1"/> </mx:GridItem> <mx:GridItem width="100%" height="100%" colSpan = "2"> <mx:Button label="Button2" height="60"/> </mx:GridItem> <mx:GridItem width="100%" height="100%"> <mx:Button label="Button3"/> <mx:Button label="Button4"/> </mx:GridItem> </mx:GridRow> <mx:GridRow width="100%" height="79"> <mx:GridItem width="100%" height="100%"> <mx:Button label="Button"/> </mx:GridItem> <mx:GridItem width="100%" height="100%"> <mx:Button label="Button" height="60" width="98"/> </mx:GridItem> <mx:GridItem width="112" height="100%"> <mx:Button label="Button" width="41" height="55"/> <mx:Button label="Button" width="85"/> </mx:GridItem> </mx:GridRow> </mx:Grid> </mx:Application>

4. 方便的导航容器

导航类允许用户在其子级元素之间却换，但必须是容器类型，单我们可以在子级容器中圈套其他容器和组件。

 

4.1 Accordion 组件

Accordion 是一个可折叠的导航器，包含一个子面板列表，但一次仅显示一个面板。

selectedChild 和 selectedIndex  表示当前显示的子元素和显示元素的索引号，可以利用这两个属性来控制组件的显示内容。如代码中的tab_menu.selectedIndex = 1 表示却换到第2个面板。

<?xml version="1.0" encoding="utf-8"?> <mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" layout="absolute"> <mx:Script> <!--[CDATA[ internal function doSkip():void{ tab_menu.selectedIndex = 1; } ]]--> </mx:Script> <mx:Accordion id="tab_menu" x="57" y="67" width="194" height="270" fontSize="12"> <mx:Canvas label="Item 1" width="100%" height="100%"> <mx:Label text="Canvas1" /> <mx:ColorPicker x="10" y="38"/> </mx:Canvas> <mx:VBox label="Item 2" width="100%" height="100%"> <mx:Text text="这里插入内容" height="28"/> <mx:ComboBox> <mx:Array> <mx:Object label="请选择性别"/> <mx:Object label="女"/> <mx:Object label="男"/> </mx:Array> </mx:ComboBox> </mx:VBox> <mx:Panel title="内嵌的Panel" label="Item 3" width="90%" height="90%"> </mx:Panel> </mx:Accordion> <mx:Button x="259" y="315" label="跳到第二个菜单" fontSize="14" labelPlacement="right" click="doSkip()"/> </mx:Application>

4.2 ViewStack 组件

由若干重叠在一起的子容器组成，每次只有一个容器是可见或活动的。但它不为用户提供却换当前活动容器的界面接口，可以通过AS进行控制，或者和其他控制类容器联合使用。如：LinkBar、TabBar、ButtonBar、ToggleButtonBar等。

一般用来做向导类的应用。就是有那种下一步下一步的。

selectedChild 表示当前处于激活状态的子级对象。

<?xml version="1.0" encoding="utf-8"?> <mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" layout="absolute"> <mx:Script> <!--[CDATA[ internal function doChange():void{ if(viewstack_1.selectedChild == child2){ viewstack_1.selectedChild = child1; }else{ viewstack_1.selectedChild = child2; } } ]]--> </mx:Script> <mx:ViewStack x="46" y="72" id="viewstack_1" width="200" height="200"> <mx:Canvas id="child1" label="View 1" width="100%" height="100%"> <mx:List fontSize="12"> <mx:Array> <mx:Object label="请选择您感兴趣的技术："/> <mx:Object label="Flash"/> <mx:Object label="Flex"/> <mx:Object label="Flash Media server"/> <mx:Object label="Breeze"/> </mx:Array> </mx:List> </mx:Canvas> <mx:Canvas id="child2" label="View 2" width="100%" height="100%"> <mx:TextInput text="请输入您的邮箱地址" fontSize="12"/> </mx:Canvas> </mx:ViewStack> <mx:Button x="46" y="304" label="切换按钮" fontSize=" 12" click="doChange()"/> </mx:Application>

4.3 使用 TabNavigator 进行快速导航

继承自ViewStack，还提供了用户却换内容的界面接口。

类似标签页却换面板。

<?xml version="1.0" encoding="utf-8"?> <mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" layout="absolute"> <mx:TabNavigator x="70" y="91" width="200" height="200" > <mx:Canvas label="Tab 1" width="100%" height="100%"> <mx:CheckBox x="10" y="31" label="选中我" fontSize="12"/> </mx:Canvas> <mx:Canvas label="Tab 2" width="100%" height="100%"> <mx:Label x="20" y="41" text="第二个面板" fontSize="12"/> </mx:Canvas> </mx:TabNavigator> </mx:Application>

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 version="1.0" encoding="utf-8"?> <mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" layout="absolute"> <mx:Panel title="用户注册信息" width="359" height="303" x="24.5" y="37" fontSize="12"> <mx:Form width="100%" height="100%" horizontalGap="0"> <mx:FormHeading label="用户资料" width="100%"/> <mx:FormItem label="用户名：" width="100%" required="true"> <mx:TextInput width="100%" id="user_txt"/> </mx:FormItem> <mx:FormItem label="密码：" width="100%" required="true"> <mx:TextInput width="100%" displayAsPassword="true" id="pass_txt"/> </mx:FormItem> <mx:FormItem label="性别：" width="100%" direction="horizontal"> <mx:RadioButton groupName="isMale" label="男" /> <mx:RadioButton groupName="isMale" label="女" /> </mx:FormItem> <mx:FormItem label="邮箱：" width="100%"> <mx:TextInput width="100%" id="email_txt"/> </mx:FormItem> <mx:FormItem label="电话：" width="100%"> <mx:TextInput width="100%" id="phone_txt"/> </mx:FormItem> <mx:FormItem label="出生年月：" width="100%"> <mx:TextInput width="100%" id="birth_txt"/> </mx:FormItem> </mx:Form> <mx:ControlBar height="32" paddingBottom="0" paddingTop="0" horizontalAlign="center"> <mx:Button label="确定"/> <mx:Button label="重写"/> </mx:ControlBar> </mx:Panel> <mx:StringValidator source="{user_txt}" property="text" minLength="6" maxLength="12" tooShortError="用户名太短了"/> <mx:StringValidator source="{pass_txt}" property="text" minLength="6" maxLength="12"/> <mx:PhoneNumberValidator source="{phone_txt}" property="text"/> <mx:DateValidator source="{birth_txt}" property="text"/> <mx:EmailValidator source="{email_txt}" property="text"/> </mx:Application>