浏览 8340 次
|
精华帖 (0) :: 良好帖 (0) :: 新手帖 (0) :: 隐藏帖 (0)
|
|
|---|---|
| 作者 | 正文 |
|
发表时间：2008-06-25
本文的相关文章：Flex学习笔记_05 使用容器控制界面布局_01管理程序的布局Flex学习笔记_05 使用容器控制界面布局_02窗口布局
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>
声明：ITeye文章版权属于作者，受法律保护。没有作者书面许可不得转载。
推荐链接
|
| 返回顶楼 | |
