《newFlex基础培训贺刚》由会员分享，可在线阅读，更多相关《newFlex基础培训贺刚（36页珍藏版）》请在金锄头文库上搜索。
1、Flex Flex是Adobe公司开发的支持RIA（Rich Internet Applications）开发和部署的技术产品，主要面 向企业级的应用。借助于Flex强大功能，能够开 发出增强更富有交互性和标签的用户界面。 对于初识Flex的开发者，总是对Flex产生不同的 疑问，什么是RIA？什么是Flex？Flex有哪些特点 。本章将带着着这些问题RIA和Flex进行简要的介 绍。RIA技术概述 RIA是Rich Internet Applications的缩写，翻译 为丰富互联网应用程序。RIA的目标是将桌面程序 的表现力与浏览器的程序的方便、快捷结合在一 起。开发者可以在浏览器程序上执
2、行如C/S客户端 的程序，得到比传统HTML更强大的表现力。RIA的特点RIA最突出的特点为“Rich”，同时RIA最核心的部分也体 现在“Rich”中。“Rich”包含了两层含义： 1丰富的数据模型 RIA技术提供了多种数据模型来处理客户端复杂的数据操作 。使用RIA可以将部分原本需要在后台程序处理的问题转移 到客户端，使数据能够被缓存在客户端，从而可以实现一 个比基于HTML的响应速度更快，且数据往返于服务器的次 数更少的用户界面。 2丰富的界面元素 RIA技术提供了比HTML更为丰富的界面表现元素，密集、响 应速度快和图形丰富的页面元素与数据模型结合在一起， 为用户提供好的使用体验。RI
3、A目前的发展趋势 由于RIA技术带来的巨大优势，RIA技术得到不断 的推广和进步。而随着RIA技术的发展，出现数个 各具特色的RIA客户端开发技术，推动RIA技术的 发展,4大主流RIA技术。 1Adobe Flash/Flex 2Microsoft/Silverlight （不开源） 3. sun/JavaFX (和swing类似) 4. Curl （用户太少）什么是Flex 在了解了什么RIA以后，本节开始介绍什么是Flex 。2004年初，RIA技术的主要倡导者Macromedia发 布了Flex。Flex是为满足希望开发RIA的企业级程 序员的需求而推出的表示层服务器和应用程序框 架，
4、它可以运行于J2EE和.NET平台。Flex具有桌 面应用程序的响应性与丰富性，又具有Web传播范 围广的的特性。接下来首先介绍一下Flex的基本 架构。Flex的编译过程MXML to AS 3 CSS to AS 3 AS 3 to ByteCode Assets to SWF ByteCode to SWF SWF 运行于 Flash Player Flex基本架构 Flex与Flash区别 市场定位不同。Flex是面向企业级的网络应用程序，Flash则面向诸如平 面动画、广告设计等多媒体展示程序。 Flex: 1.Flex SDK，基于Flash平台的软件开发包，Flex SDK包含了
5、Web应用程序 框架(framework)和桌面离线应用程序框架(airframework)； 2.Flex Builder，利用Flex SDK开发软件的IDE(Integrated Development Environment 集成开发环境)。 3.基于Flex SDK中的framework，使用Flex Builder开发Web应用程序。 AIR:Adobe Integrated Runtime 1.基于Flash平台的桌面离线应用程序运行环境。 2.基于Flex SDK中的airframework，使用Flex Builder开发桌面离线应用 程序。 Flex Builder不仅仅可
6、以开发Flex应用程序，也可以开发AIR应用程序。 AS3是用来开发这些应用程序的语言，是基础。从Flex和AIR的编译过程也 可以看到这一点（简化版）： 1.将MXML文件翻译成AS3文件 2.将AS3编译成字节码 3.将字节码及其他资源打包进SWF文件Flex与Flash区别Flash：一种创作工具，设计人员和开发人员可使用它来创建演示 文稿、应用程序和其它允许用户交互的内容。 可以说Flex和AIR可以做到的用Flash都可以做到。只不过Flex SDK和AIR runtime简化了许多工作。对开发人员更加友好。 Flash有时间线的概念，Flash的编程模型是基于时间轴的 而FLEX的
7、SDK则把时间线隐藏了，Flex的则是基于窗体,因此采用 FLEX开发项目的时候就和你用DELPHI,VB,C#那样，直接拖放控件 ，编写代码即可，而不是像flash那样，把东西拖放的时间线上。 FLASH9的组件和架构和FLEX的不一样,很多类库也不一样 尽管公用ActionScript,但是使用的库并不完全相同，更合适的说 法是两者使用着两套具有极大“功能重叠”范围的库。FLEX和 FLASH的组件都是从继承flash.display.sprite开始写的 flash.* 开头的类库，基本上FLEX和FLASH都是一样的 ,两者的代码并不通用。 而fl.*开头的是flash独有而FLEX没
8、有的类 而mx.* 开头的就是FLEX独有的类组成1. Flex framework Flex framework 包含了创建RIA 所需要的所有组件，含在公用 组件库（SWC）文件中。 2. MXML 每个 Flex 应用程序至少包含有一个MXML 文件，它被作为该程序 的主文件。MXML 是一种标记语言，它是基于XML 的一种实现，用来创建Flex 应用 程序。你可以使用它去声 明程序中所使用的标签结构的定义。 3. ActionScript 3.0 你可以使用ActionScript 3.0 为应用程序添加动态行为，它是基 于ECMAScript 的一种实现，类似于JavaScript。
9、你可以将 ActionScript 作为一个脚本块，在MXML 文件中直接进行 添加；或者创建一个单独的ActionScript 文件，然后将它们导入 到MXML 文件中。 4. CSS 你可以通过设置组件的属性（properties）来改变组件（按钮、 列表框等）的视觉样式。ButtonCheckBoxColorPickerComboBoxDataGridDateChooserDateFieldHSliderHorizontalListImageLabelLinkButtonListNumericStepper PopUpButton PopUpMenuButton ProgressBar
10、RadioButton RichTextEditor Text TextArea TextInput TileList Tree VSlider VideoDisplay控件容器控件CanvasControlBarFormFormHeadingGridHBoxHDividedBoxModuleLoader Panel Spacer Tile TitleWindow VBox VDividedBox界面布局 Flex中定义的容器分为布局类容器和导航类容器 还有一类应用容器。 布局类容器（Layout Containers）类似于HTML页 面，将组件平铺放置在容器的平面上。下图显式 了部分布局类
11、容器，包括hbox vbox盒子容器、 Canvas画布容器等。导航类容器 导航类容器（Navigator Containers）类似于 HTML中窗口之间的切换。在Flex中，整个应用是 加载在一个浏览器页面中的。很多时候，一个页 面不能满足需求，往往需要多个页面。这种情况 下，就可以使用导航类容器，在一个浏览器页面 中进行Flex的页面切换。导航类容器的优势在于 ，用户在进行页面切换时不需要与服务端通信。 不再像HTML中那样，与服务器进行通信后才可以 打开新的窗口链接。导航类容器 导航类容器不仅加快浏览速度，并且能够有效的 节省页面空间。图显式了三种导航类容器，从左 到右依次为视图Vie
12、wStack堆栈导航器、 TabNavigator选项卡导航器、Accordion层叠导航 器。应用类容器 Flex中的应用都是以应用容器（Application Container）开始的，应用中的所有组件（包括容 器和控件）都装在应用容器中。应用容器对应的 MXML标签为。在上一章的控件 应用中，应用的MXML代码都是以 为开始，以 结束的容器的事件不仅控件中可以触发事件，容器组件也可以触发事件。容 器组件可触发的事件如下所示。 childAdd：当容器中有组件加入时，触发该事件。 scroll：当容器不能完全显示包含的组件时，可以通过滚 动条查看。使用滚动条查看时，触发该事件。 init
13、ialize：当容器结构化以及容器的属性初始化后，触 发该事件。当该事件触发时，容器内所有的静态组件均被 创建，但未在布局上显示。该事件常用来为容器中的组件 定义初始属性以及数据。 creationComplete：容器创建。Flex根据容器及其各组件 的定义，完全创建容器及其包含的组件，使其呈现可视状 态。该事件发生在initialize之后。mx:Applicationmx:Applicationmx:Buttonmx:Buttonmx:Panelmx:Panelmx:DataGridmx:DataGridmx:Buttonmx:Buttonpackage com.mstc import
14、mx.controls.Button; public class MyButton extends Button public function MyButton():void super(); MXMLMXML基于XML，是用来描述用户界面的语言。MXML遵循W3C XML标准，所以也可以把MXML看作普通的XML文件。可以使 用任何的文本编辑器编写MXML。下面就是一个MXML的例子 ，包含标签、属性、命名控件等。 与HTML不同，MXML借助XML的规范拥有更强的结构，更少的 语法歧义。MXML还引入了更丰富的标签集，如：DataGrid 、Tree、TabNavigator、Accor
15、dion和Menu等。这些都是 Flex标签集中的一部分。还可以扩展MXML标签，创建自己 的组件。此外，二者最大的区别是，MXML定义的用户界面 用Flash播放器运行，相对传统的基于HTML、页面为中心的 Web应用而言，这将更具吸引力。标签 MXML是一种描述Flex应用程序构造的XML语言。每 个MXML文件应该以一个XML声明开始： 和其他XML语言一样，MXML包含元素（标签）和属 性，对大小写敏感。但标签名称以大写字母开头 ，大小写混合，必须有对应的结束标签，如下所 示。 也可以这样结束对没有内容的标签，如下所示。 属性属性以小写字母开头，大小写混合。属性必须包含在引号 内。 除
16、了click或initialize之类的事件属性外，其他属性都被 编译器作为文本字符串处理。如果需要绑定数据或者强迫 编译器执行表达式，可以将变量的部分用花括号括起来。 大部分的属性都可以作为子标签。如， 等效代码如下。 myArray 数据绑定在MXML中，还可以对组件进行数据绑定。Flex针对用户界 面数据的复杂性，提出双向的数据绑定机制：可以将用户 界面控件绑定到服务调用的数据结果集上，反过来，也可 以将服务的参数与用户界面控件输入的值进行绑定。 使用数据绑定 事件和行为HTML 应用程序的原理是由客户端发出请求，并从服务器端 得到反应。与之不相同的 是，Flex 应用程序是基于事件的/event-based。举个例子 ，当
