FLEX技术之二控件和容器

,单击此处编辑母版标题样式,单击此处编辑母版文本样式,第二级,第三级,第四级,第五级,*,单击此处编辑母版标题样式,单击此处编辑母版文本样式,第二级,第三级,第四级,第五级,*,单击此处编辑母版标题样式,单击此处编辑母版文本样式,第二级,第三级,第四级,第五级,*,单击此处编辑母版标题样式,单击此处编辑母版文本样式,第二级,第三级,第四级,第五级,*,FLEX技术之二控件和容器,1,FLEX技术之二控件和容器,1Flex 3提供哪些控件,2Flex 3提供哪些容器,3如何设置组件大小,4组件定位和布局的方法,5简介数据提供程序和集合,应用实践,2,知识回顾客户端技术,B/S,SOA/RIA,C/S,Pros,：,响应快,Cons,：,部署困难,升级困难,安全问题（端口）,Pros,：,容易部署,Cons,：,浏览器混杂,用户体验差,服务器压力大,客户端计算资源浪费,Rich Internet Application,可以看做是基于web的C/S架构,Pros：,用户体验好,带宽加大,客户端性能提高,对用户体验的要求增加,对部署能力的需求,3,知识回顾什么是Flex,Flex 基于Flash,Flex是为程序员设计的Flash,Flex的开发语言：ActionScript、MXML、CSS。,可以把Flex当作Flash,Flash：专注平面动画、广告设计、多媒体处理,Flex： 一种RIA解决方案，针对企业级网络应用。,- Flash for Developer,4,知识回顾FLEX的应用程序框架,FLEX的应用程序框架,（一个库、两个语言）,Mxml是flex的标记语言，用来描述界面，同Html非常相似，而且mxml更加规范化和标准化。,Mxml最终会被编译器解析为Action Script,然后生成flash的swf文件。,MXML,Action Script,SWF,5,知识回顾开发Flex应用程序的步骤,开发Flex应用程序的步骤：,1。 布置组件以设计用户界面。,2。 使用样式和主题来增强视觉方面的设计。,3。 添加动态行为（例如程序部件之间的相互作用） 。,4。 将源代码编译成SWF文件,6,知识回顾MXML,7,知识回顾MXML,MXML语言是专门用于Flex程序中，描述界面表现的一中XML标记语言。我们可以用它来管理程序的整体布局，控制组件的样式和外观，也可以构建非可视化的对象，比如XML数据、与服务器端通信的WebService、组件的数据源等。,8,知识回顾MXML语法,命名规范,MXML区分大小写，且文件名和变量标示名都区分大小写。,MXML文件以mxml作为扩展名，文件名要遵循AS中变量的命名规则。,所有的MXML都被视为用户自定义的组件，相当于对象，可以使用代码动态创建。,9,知识回顾MXML使用控件,使用控件, 定义一个按钮控件,如果控件中未包含其他子元素可这样写：,10,知识回顾MXML使用组件,Panel,容器包括标题栏、标题、边框及其子项的内容区域。通常，您使用,Panel,容器包围顶级应用程序模块。它也是开发中常用的一种容器。,11,知识回顾,AS脚本处理,12,知识回顾,应用程序拓展处理P24,13,知识回顾,应用程序拓展处理P24,14,FLEX技术之二组件,Flex应用程序的界面通常由各种各样的组件来构建。,例如，本应用程序包括了Panel容器组件、按钮组件、区域文本框组件等。,不同的组件有其特有的功能，如按钮组件的单击动作和双击动作。用户可选择不同的组件来满足应用程序的要求。,15,FLEX技术之二组件,在Flex Builder 3中为了用户使用方便，将可见组件分成以下几类：,控件：存放基础的控制组件，如按钮组件、文本组件、下接框组件。,数据控件：存放数据呈现组件，如网格组件、下拉列表组件、树组件等。,布局：存放布局组件，如窗口组件、表单组件。,导航器：存放导航组件，如Tab条组件、按钮条组件。,Adobe AIR（Adobe AIR组件）：存放Adobe AIR组件。,图表：存放图表组件。,定制：存放用户自定义组件,16,FLEX中的组件,Flex的组件非常丰富，这些组件在Sdk里都有例子。但是要完成企业级应用还是需要自己去扩展，如分页组件。Flex SDK代码都是开源的，所以扩展起来比较方便。,17,FLEX技术之二实例之一,ButtonBar导航组件,ButtonBar导航组件应用,按不同的按钮显示不同的内容：,18,FLEX技术之二实例之一,ButtonBar导航组件,ButtonBar导航组件应用,按不同的按钮显示不同的内容：,19,FLEX技术之二实例之一,ButtonBar导航组件,1.界面布局,20,FLEX技术之二实例之一,ButtonBar导航组件,2.ButtonBar导航的按钮标签内容：,3.触发事件：,Flash,Director,Dreamweaver,Flex ,21,FLEX技术之二实例之一,ButtonBar导航组件,4.代码：按钮显示不同的内容,Flash,Director,Dreamweaver,Flex ,22,FLEX技术之二实例之一,ButtonBar导航组件,5.完整代码：,Flash,Director,Dreamweaver,Flex ,23,FLEX技术之二实例之一,ButtonBar导航组件,6.,试一试,24,FLEX技术之二组件设置大小,在 Flex 应用程序中设置组件的大小方法有三种:, 自动大小, 使用属性设置绝对值大小,使用属性设置%相对大小,25,FLEX技术之二容器,布局容器和导航容器,容器定义 Adobe Flash Player 的绘图表面的一个矩形区域。在容器内, 可以定义希望出现在容器内的组件, 包括控件和容器。在容器内定义的组件称为容器的子级。Adobe Flex 提供范围广泛的容器, 从简单的框到面板和表单, 到在子容器之间提供内置导航 的元素 (如折叠式导航器或选项卡式导航器)。,26,FLEX技术之二容器,在 Flex 应用程序中定位组件的方法有三种:, 使用自动定位, 使用绝对定位, 使用基于限制的布局,对于使用自动定位的容器, 直接设置其子组件的 x 或 y 属性或调用 move() 方法,下列属性是最常见的:, layout: 可能的值有 “horizontal”、 “vertical”或 “absolute”。,当设置为 “horizontal”时, 容器会将其子级布局在一行内。,当设置为 vertical时, 容器会将其子级布局在一列内。, horizontalAlign: 可能的值有 left、 center或 right。, verticalAlign: 可能的值有 top、 middle或 bottom。,27,FLEX技术之二容器,在 Flex 应用程序中定位组件的方法有三种:, 使用自动定位, 使用绝对定位, 使用基于限制的布局,使用绝对定位, 你通过使用其 x 和 y 属性来指定子控件的位置,有三个容器支持绝对定位:, 如果您将 layout 属性指定为 absolute, 则 Application 和 Panel 控件使用绝对定位。, Canvas 容器始终使用绝对定位。,使用绝对定位是使 Flex 控件重叠的唯一方法。,28,FLEX技术之二容器,与,CSS BOX,模型类型，,Flex,容器组件有自己的,BOX,模型。但，区别在于,Flex,盒子仅有：,padding,，,border,，,content,。而没有,CSS,盒子中的,mergin,Content 内容,Padding-top,padding-bottom,Berder-top,Berder-bottom,Berder-right,Berder-left,padding-left,padding-right,CSS width,Flex width,29,FLEX技术之二容器,在 Flex 应用程序中定位组件的方法有三种:, 使用自动定位, 使用绝对定位, 使用基于限制的布局,您可以通过使用基于限制的布局同时管理子组件大小和定位子组件, 在该布局中您锚定组件,的侧边或中心以相对于组件的容器进行定位。,您可以使用基于限制的布局来确定支持绝对定位的任何容器的即时子级的位置和大小。,您通过使用子组件的 top、 bottom、 left、 right、 horizontalCenter或 verticalCenter 样式属性来指定限制。,30,Alert,Alert,控件是一个弹出对话框，可能包含消息、标题、按钮（“确定”、“取消”、“是”和“否”的任意组合）和图标。,Alert,控件是模式控件，这意味着在用户将其关闭之前，它将一直保留焦点。,例如：,Alert.show(你喜欢FLEX吗？,友情提示,Alert.OK | Alert.CANCEL,this,clickHandler);,function clickHandler(event:CloseEvent):void ,if (event.detail = Alert.OK),but.label=我非常喜欢FLEX!;,if (event.detail = Alert.CANCEL) ,but.label=不，我非常不喜欢FLEX!;,31,实战任务,1,完成实例之一,ButtonBar导航组件,2如何设置Alert对话框 P35,3如何修改按钮控件外观 P40,4如何实现具有定时功能的按钮 P42,5 如何实现字体下拉框 P45,6如何实现联动下拉框 P47,32,实战任务,1,完成实例之一,ButtonBar导航组件,2如何设置Alert对话框 P35,3如何修改按钮控件外观 P40,4如何实现具有定时功能的按钮 P42,5 如何实现字体下拉框 P45,6如何实现联动下拉框 P47,33,实战任务,1,完成实例之一,ButtonBar导航组件,2如何设置Alert对话框 P35,3如何修改按钮控件外观 P40,4如何实现具有定时功能的按钮 P42,5 如何实现字体下拉框 P45,6如何实现联动下拉框 P47,34,实战任务,1,完成实例之一,ButtonBar导航组件,2如何设置Alert对话框 P35,3如何修改按钮控件外观 P40,4如何实现具有定时功能的按钮 P42,5 如何实现字体下拉框 P45,6如何实现联动下拉框 P47,35,实战任务,1,完成实例之一,ButtonBar导航组件,2如何设置Alert对话框 P35,3如何修改按钮控件外观 P40,4如何实现具有定时功能的按钮 P42,5 如何实现字体下拉框 P45,6如何实现联动下拉框 P47,36,实战任务,1,完成实例之一,ButtonBar导航组件,2如何设置Alert对话框 P35,3如何修改按钮控件外观 P40,4如何实现具有定时功能的按钮 P42,5 如何实现字体下拉框 P45,6如何实现联动下拉框 P47,37,实战任务,1,完成实例之一,ButtonBar导航组件,2如何设置Alert对话框 P35,3如何修改按钮控件外观 P40,4如何实现具有定时功能的按钮 P42,5 如何实现字体下拉框 P45,6如何实现联动下拉框 P47,38,