Flex课件

Adobe Flex 课程
富互联网应用程序 RIA(Rich Internet Application)
RIA将桌面应用程序的强交互性与传统Web应用的 灵活性结合起来，为用户带来全新的体验。 RIA的富客户端采用异步方式和服务端通信，这是 一种安全、具备良好适应性的服务器运行模式 Macromedia公司于2001年初创造了Rich Internet Application这个词语
Web服务器的运用
1. 纯 web服务器，它们仅将用户的请求回复 一个简单的静态 HTML页面。在这种情况 下，你需要将 Flex应用程序的 SWF文件 嵌入到一个 HTML页面中。 2. J2EE应用服务器或 servlet容器。向一个 J2EE应用服务器或 servlet容器发出请求， 如 JRun、Tomcat或 WebSphere，通常 你需要使用 Flex Data Services。
用FlexBuilder创建Flex项目
对于开发者来说第一件事就是如何创建一个 Flex项目。Flex项目和其他项目有点不一样， 因为它需要包含SWC (Flex库) Flex library SWC (不像ActionScript项目) 编译生成的可 被Flash播放器执行的SWF文件(不像Flex Library项目)。要想创建项目，在Flex Navigator视图中点击鼠标右键，在弹出菜 单中选择New Flex Project，然后会弹出创 建项目对话框。
如何把MXML和ActionScript相互关联起来呢？ 对于编译器来说，解析这两种语法后最终 被翻译成同一个对象，比如： <mx:Button id="btn" label="My Button" height="100"/>
Var btn:Button = new Button(); bel = "My Button"; btn.height = 100;
Flex的 MVC模型
为了增强系统的复用性和可维护性，应该采 用具有良好体系架构的模型，即 ModelView-Controller（MVC）。 1. 模型/Model组件封装了数据和与数据相 关的行为。 2. 视图/View组件定义了应用程序的用户界 面。 3. 控制器 /Controller组件则负责处理程序 中的数据连接。
练习题：要求可以输入一个字符串，中间 以逗号相隔，例如：1，2，5 点击按钮后，将该字符串作为数据源显示 在Combox里，但是需要过滤包含1的数据 项，要求用自定义组件方式实现，不能使 用AS直接实现。
创建您的第一个应用程序
<?xml version="1.0" encoding="utf-8"?> <mx:Application xmlns:mx="/2006/mxml" viewSourceURL="src/HelloWorld/index.html" horizontalAlign="center" verticalAlign="middle" width="300" height="160" > <mx:Panel paddingTop="10" paddingBottom="10" paddingLeft="10" paddingRight="10" title="My Application" > <mx:Label text="Hello World!" fontWeight="bold" fontSize="24"/> </mx:Panel> </mx:Application>
创建您的第一个应用程序
MXML 文件是普通的 XML 文件, 所以可以选择多种开发环境。 简单 的文件编辑器、专用的 XML 编辑器或者支持文本编辑的集成开发环 境 (IDE) 均可用于 MXML 代码编写。 Flex 提供专用的 IDE, Adobe Flex Builder 3, 您可以使用它来开发应用程序。 MXML 文件的第一行是 XML 声明。 此行必须成为每个 MXML 文件 的第一行。 下一行是 <mx:Application> 标签, 它定义始终是 Flex 应用程序的根标 签的 Application 容器。 <mx:Panel> 标签定义包含一个标题栏、一个标题、一条状态消息、 一个边框和其子级的一个内容区域的 Panel 容器。 其 title 属性被设 置为 "My Application"。 <mx:Label> 标签代表一个 Label 控件, 一个用于显示文本的非常简单 的用户界面组件。 其 text 属性被设置为 "Hello, World!"。 <mx:Label> 标签的 fontWeight 和 fontSize 属性改变使用的字体的样 式。 还可以使用 CSS 来设置组件的样式。
自定义组件
flex组件编写起来很简单，而编写的形式又 分为两种 ，分别一mxml形式或者as class 编写，两者都可以，置换直观的朋友都可 以采用 mxml形式辨析，但如果你的组件需 要分开多个类来写，又或者是想效率高点 的话，你可以采用as写但最终我们都需要 一个mxml的组件界面来装载我们的组件。
自定义组件
在创建组件时，MXML和ActionScript语言有不同的优点和缺 点： 当你创建一个创建一个符合组件，MXML使得它容易被创建 和安置子组件。当你修改组件的行为，也就是说，覆盖他 的方法，那么应该使用ActionScript。 大多数时间，当创 建组件和应用时，同时使用MXML和ActionScript。Flex提 供几种同时使用MXML和ActionScript的途径，包含如下： 1、在MXML标记中放置ActionScript代码声明，这使用于内 联事件处理 2、在<mx:Script>标记中放置ActionScript代码。 3、使用<mx:Script>标记的source属性引入外部ActionScript 文件。 使用MXML安置组件，把ActionScript代码放在一 个类定义中。这种方式被叫做代码分离
数组和对象
数组和对象是最常见的存储数据的两种数据类型，可通过ActionScript或在MXML中定 义。 要想在MXML中定义数据，是使用<mx:Array> 标签包裹数组的所有数据项： <mx:Array> <mx:String>Flex</mx:String> <mx:String>Flash</mx:String> <mx:String>Flash Media Server</mx:String> <mx:String>Flash Lite</mx:String> <mx:String>AIR</mx:String> </mx:Array> 数组中的所有数据都是通过索引进行访问。在MXML中还可以创建多维数组，如： <mx:Array> <mx:Array> <mx:String>Flex</mx:String> <mx:String>Flash</mx:String> <mx:Array> </mx:Array>
在MXML中添加事件监听器
<mx:Canvas xmlns:mx="/2006/mxml" width="400“ height="300"> <mx:Script> <![CDATA[ Private function buttonClick():void { trace("Button has been clicked ");}]]> </mx:Script> <mx:Button click="buttonClick()" label="Click Me"/> </mx:Canvas>
使用容器
容器定义 Adobe® Flash® Player 的绘图表面的一 个矩形区域。在容器内, 可以定义希望出现在容器 内的组件, 包括控件和容器。在容器内定义的组件 称为容器的子级。Adobe Flex 提供范围广泛的容 器, 从简单的框到面板和表单, 到在子容器之间提 供内置导航 的元素 (如折叠式导航器或选项卡式 导航器)。 在 Flex 应用程序的根部是称为 Application 容器的 单一容器, 它代表整个 Flash Player 绘图表面。 此 Application 容器容纳所有其他容器和组件。
Flex发展历史 2004年3月正式退出Flex1.0，这是RIA思想付诸实 施后诞生的产品，是为RIA开发量身定做的强有 力的工具。
什么是Flex？
Flex 是 Macromedia发布的presentation server（展现服务），它是java web container或者.net server的一个应用，根 据.mxml文件（纯粹的xml描述文件和 actions cript）产生相应得.swf文件，传送 到客户端，由客户端的flash player或者 shockwave player解释执行，给用户以丰富 的客户体验。
容器导航
不同的容器支持不同的布局规则, 包括 automatic 和 absolute 定位。 导航器容器控制子级是其他容器的多个子 级之间的用户移动或导航。 导航器容器的直接子级必须是容器, 要么是 布局容器, 要么是导航器容器。 无法在导航 器内直接嵌套控件；控件必须是导航器容 器的子容器的子级。