FLEX技术之二控件和容器

1、FLEX技术之二控件和容器1FLEX技术之二控件和容器1Flex 3提供哪些控件2Flex 3提供哪些容器3如何设置组件大小4组件定位和布局的方法5简介数据提供程序和集合应用实践2知识回顾客户端技术 B/S SOA/RIA C/SPros：响应快Cons：部署困难升级困难安全问题（端口）Pros：容易部署Cons：浏览器混杂用户体验差服务器压力大客户端计算资源浪费Rich Internet Application可以看做是基于web的C/S架构Pros：用户体验好带宽加大客户端性能提高对用户体验的要求增加对部署能力的需求3知识回顾什么是FlexFlex 基于FlashFlex是为程序员设计的F

2、lashFlex的开发语言：ActionScript、MXML、CSS。可以把Flex当作FlashFlash：专注平面动画、广告设计、多媒体处理Flex： 一种RIA解决方案，针对企业级网络应用。- Flash for Developer 4知识回顾FLEX的应用程序框架FLEX的应用程序框架（一个库、两个语言） Mxml是flex的标记语言，用来描述界面，同Html非常相似，而且mxml更加规范化和标准化。Mxml最终会被编译器解析为Action Script,然后生成flash的swf文件。MXMLAction ScriptSWF5知识回顾开发Flex应用程序的步骤开发Flex应用程序的

3、步骤：1。 布置组件以设计用户界面。 2。 使用样式和主题来增强视觉方面的设计。 3。 添加动态行为（例如程序部件之间的相互作用） 。 4。 将源代码编译成SWF文件6知识回顾MXML7知识回顾MXMLMXML语言是专门用于Flex程序中，描述界面表现的一中XML标记语言。我们可以用它来管理程序的整体布局，控制组件的样式和外观，也可以构建非可视化的对象，比如XML数据、与服务器端通信的WebService、组件的数据源等。8知识回顾MXML语法命名规范MXML区分大小写，且文件名和变量标示名都区分大小写。MXML文件以mxml作为扩展名，文件名要遵循AS中变量的命名规则。所有的MXML都被视为

4、用户自定义的组件，相当于对象，可以使用代码动态创建。9知识回顾MXML使用控件使用控件 定义一个按钮控件如果控件中未包含其他子元素可这样写：10知识回顾MXML使用组件Panel 容器包括标题栏、标题、边框及其子项的内容区域。通常，您使用 Panel 容器包围顶级应用程序模块。它也是开发中常用的一种容器。11知识回顾AS脚本处理12知识回顾应用程序拓展处理P2413知识回顾应用程序拓展处理P2414FLEX技术之二组件Flex应用程序的界面通常由各种各样的组件来构建。例如，本应用程序包括了Panel容器组件、按钮组件、区域文本框组件等。不同的组件有其特有的功能，如按钮组件的单击动作和双击动作。

5、用户可选择不同的组件来满足应用程序的要求。15FLEX技术之二组件在Flex Builder 3中为了用户使用方便，将可见组件分成以下几类：控件：存放基础的控制组件，如按钮组件、文本组件、下接框组件。数据控件：存放数据呈现组件，如网格组件、下拉列表组件、树组件等。布局：存放布局组件，如窗口组件、表单组件。导航器：存放导航组件，如Tab条组件、按钮条组件。Adobe AIR（Adobe AIR组件）：存放Adobe AIR组件。图表：存放图表组件。定制：存放用户自定义组件16FLEX中的组件Flex的组件非常丰富，这些组件在Sdk里都有例子。但是要完成企业级应用还是需要自己去扩展，如分页组件。F

6、lex SDK代码都是开源的，所以扩展起来比较方便。17FLEX技术之二实例之一ButtonBar导航组件ButtonBar导航组件应用按不同的按钮显示不同的内容：18FLEX技术之二实例之一ButtonBar导航组件ButtonBar导航组件应用按不同的按钮显示不同的内容：19FLEX技术之二实例之一ButtonBar导航组件1.界面布局 20FLEX技术之二实例之一ButtonBar导航组件2.ButtonBar导航的按钮标签内容：3.触发事件： Flash Director Dreamweaver Flex 21FLEX技术之二实例之一ButtonBar导航组件4.代码：按钮显示不同的内

7、容 Flash Director Dreamweaver Flex 22FLEX技术之二实例之一ButtonBar导航组件5.完整代码： Flash Director Dreamweaver Flex 23FLEX技术之二实例之一ButtonBar导航组件6.试一试24FLEX技术之二组件设置大小在 Flex 应用程序中设置组件的大小方法有三种: 自动大小 使用属性设置绝对值大小 使用属性设置%相对大小 25FLEX技术之二容器布局容器和导航容器容器定义 Adobe Flash Player 的绘图表面的一个矩形区域。在容器内, 可以定义希望出现在容器内的组件, 包括控件和容器。在容器内定义的

8、组件称为容器的子级。Adobe Flex 提供范围广泛的容器, 从简单的框到面板和表单, 到在子容器之间提供内置导航 的元素 (如折叠式导航器或选项卡式导航器)。26FLEX技术之二容器在 Flex 应用程序中定位组件的方法有三种: 使用自动定位 使用绝对定位 使用基于限制的布局 对于使用自动定位的容器, 直接设置其子组件的 x 或 y 属性或调用 move() 方法下列属性是最常见的: layout: 可能的值有 “horizontal”、 “vertical”或 “absolute”。当设置为 “horizontal”时, 容器会将其子级布局在一行内。 当设置为 vertical时, 容器

9、会将其子级布局在一列内。 horizontalAlign: 可能的值有 left、 center或 right。 verticalAlign: 可能的值有 top、 middle或 bottom。 27FLEX技术之二容器在 Flex 应用程序中定位组件的方法有三种: 使用自动定位 使用绝对定位 使用基于限制的布局 使用绝对定位, 你通过使用其 x 和 y 属性来指定子控件的位置, 有三个容器支持绝对定位: 如果您将 layout 属性指定为 absolute, 则 Application 和 Panel 控件使用绝对定位。 Canvas 容器始终使用绝对定位。 使用绝对定位是使 Flex 控

10、件重叠的唯一方法。 28FLEX技术之二容器与CSS BOX模型类型，Flex容器组件有自己的BOX模型。但，区别在于Flex盒子仅有：padding，border，content。而没有CSS盒子中的merginContent 内容Padding-toppadding-bottomBerder-topBerder-bottomBerder-rightBerder-leftpadding-leftpadding-rightCSS widthFlex width29FLEX技术之二容器在 Flex 应用程序中定位组件的方法有三种: 使用自动定位 使用绝对定位 使用基于限制的布局 您可以通过使用基

11、于限制的布局同时管理子组件大小和定位子组件, 在该布局中您锚定组件的侧边或中心以相对于组件的容器进行定位。您可以使用基于限制的布局来确定支持绝对定位的任何容器的即时子级的位置和大小。您通过使用子组件的 top、 bottom、 left、 right、 horizontalCenter或 verticalCenter 样式属性来指定限制。30AlertAlert 控件是一个弹出对话框，可能包含消息、标题、按钮（“确定”、“取消”、“是”和“否”的任意组合）和图标。Alert 控件是模式控件，这意味着在用户将其关闭之前，它将一直保留焦点。例如：Alert.show(你喜欢FLEX吗？,友情提示,

12、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对话框 P353如何修改按钮控件外观 P404如何实现具有定时功能的按钮 P425 如何实现字体下拉框 P456如何实现联动下拉框 P47

13、32实战任务1完成实例之一ButtonBar导航组件2如何设置Alert对话框 P353如何修改按钮控件外观 P404如何实现具有定时功能的按钮 P425 如何实现字体下拉框 P456如何实现联动下拉框 P4733实战任务1完成实例之一ButtonBar导航组件2如何设置Alert对话框 P353如何修改按钮控件外观 P404如何实现具有定时功能的按钮 P425 如何实现字体下拉框 P456如何实现联动下拉框 P4734实战任务1完成实例之一ButtonBar导航组件2如何设置Alert对话框 P353如何修改按钮控件外观 P404如何实现具有定时功能的按钮 P425 如何实现字体下拉框 P456如何实现联动下拉框 P4735实战任务1完成实例之一ButtonBar导航组件2如何设置Alert对话框 P353如何修改按钮控件外观 P404如何实现具有定时功能的按钮 P425 如何实现字体下拉框 P456如何实现联动下拉框 P473