- 浏览: 254536 次
- 性别:
- 来自: 厦门
-
文章分类
最新评论
-
topbox163:
图片显示不了
Flex 学习曲线图 -
彭利贤:
你好,想请教您一些关于flash的问题,您可以加我qq吗 59 ...
全屏flash的尺寸分析 -
jingj6:
是开源的吗?
小日本做的非常强大的一款AS3 3D引擎 -
hugh52066:
LZ牛B。
Flex 学习曲线图 -
sweed0:
a dream~~
一个让人瞠目结舌的传奇电脑高手!
本文的相关文章:
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>
发表评论
-
如何使用Cairngorm3的导航库(Spring AS)
2011-08-29 17:39 2922一、概述 二、LIB库包配置 下载需要的LIB库 ... -
Flex学习笔记_06 使用行为对象和动画效果_ 放缩\调整大小效果
2008-09-28 16:47 38516.3.2 放缩效果和调整大 ... -
Flex学习笔记_06 使用行为对象和动画效果_模糊、发光效果
2008-09-27 22:33 32026.3.1 模糊效果和发光效 ... -
Flex学习笔记_06 使用行为对象和动画效果_认识行为对象、行为和组件
2008-08-17 01:30 22556.1 认识行为对象 6.1.1 什么是行为对象 行 ... -
Flex学习笔记_09 数据绑定_运用实例
2008-07-28 23:41 32639.3.1 实现界面的多语言切换 <?xml vers ... -
Flex学习笔记_09 数据绑定_晋级篇
2008-07-28 22:27 29009.2.1 函数和类级别的绑 ... -
Flex学习笔记_09 数据绑定_概念、使用
2008-07-21 23:32 21009.1 认识数据绑定 9.1.1 数据绑定的概念 ... -
Flex学习笔记_08 Flex的事件机制_高级应用
2008-07-16 23:11 32248.3 事件机制的高级应用 8.3.1 事件的优先级别和 ... -
Flex学习笔记_08 Flex的事件机制_事件工作流程
2008-07-15 09:05 27578.2 事件机制的工作流程 8.2.1 关于事件流 ... -
Flex学习笔记_08 Flex的事件机制_事件架构
2008-07-14 08:54 25078.1 一切从事件开始 8.1.1 关于事件 事件有 ... -
Flex学习笔记_07 ActionScript 3.0 编程基础_数据类型及其运算、程序流程
2008-07-13 19:21 46887.3 数据类型和数据运算 7.3.1 关于数据类型 ... -
Flex学习笔记_07 ActionScript 3.0 编程基础
2008-07-09 23:15 29127.1 了解 ActionScript 3.0 7.1 ... -
Flex学习笔记_06 使用组件处理数据和交互_03控件的实例应用
2008-07-06 14:26 26153. 控件的实例应用 3.1 制作一个简单的涂鸦板 ... -
Flex学习笔记_06 使用组件处理数据和交互_02导航类组件
2008-07-02 00:04 30322. 导航类组件 2.1 ToggleButtonBa ... -
Flex学习笔记_06 使用组件处理数据和交互_01常用组件(下)
2008-06-30 10:37 4646Flex学习笔记_06 使用组 ... -
Flex学习笔记_06 使用组件处理数据和交互_01常用组件(中)
2008-06-29 22:50 3990Flex学习笔记_06 使用组件处理数据和交互_01常用组件( ... -
Flex学习笔记_06 使用组件处理数据和交互_01常用组件(上)
2008-06-26 23:11 4555Flex学习笔记_06 使用组件处理数据和交互_01常用组件( ... -
Flex学习笔记_05 使用容器控制界面布局_02窗口布局
2008-06-24 09:07 5178本文的相关文章: Flex学习笔记_05 使用容器控制界面布局 ... -
Flex学习笔记_05 使用容器控制界面布局_01管理程序的布局
2008-06-23 23:52 5680本文的相关文章: Flex学习笔记_05 使用容器控制界面布局 ... -
Flex学习笔记_04 MXML语言简介
2008-06-17 22:52 54671. MXML语法 MXML语言是专门用于Flex程序中, ...
相关推荐
根据给定的文件信息,我们可以提炼出以下关于Flex学习的关键知识点: ### 1. ActionScript 核心概念 #### 1.1 类和对象 (Class and Object) - **定义**:类是对象的抽象,而对象是类的具体实例。一个类定义了对象...
### Flex4.5学习笔记知识点总结 #### 一、Flex基础——布局 **知识点1:Flex布局** - **垂直布局** (`s:VerticalLayout`): 控件垂直排列。 - **水平布局** (`s:HorizontalLayout`): 控件水平排列。 - **平铺布局**...
### Flex学习笔记:ActionScript与Flex开发入门 #### 1. ActionScript核心概念 ##### 1.1 类和对象(Class and Object) 类是对象的模板,定义了一组具有相同特性和行为的对象的共同属性和方法。在ActionScript中...
### ExtJS 学习笔记概览 #### 一、ExtJS 入门 **1.1 ExtJS 构成及如何引用** ExtJS 是一款基于 JavaScript 的开源框架,专为 Web 应用程序的前端界面设计。其核心优势在于提供了一套丰富的 UI 组件和强大的数据...
- 常用组件包括视图容器(view、scroll-view)、基础内容(text、image)、表单组件(input、picker、button)、导航(navigator)、布局(flex、grid)等。 - 还有日期时间选择器、地图、视频、直播、广告等高级...
学习和使用响应式登录框模板可以帮助开发者提高工作效率,快速创建出符合现代Web标准的登录界面,同时提供一致且优质的用户体验。通过深入理解响应式设计原理和实践,可以更好地应对不断变化的数字环境。