Flex 概述

唐朝

浏览: 260696 次
性别:
来自: 西安

最近访客更多访客>>

cpca2003

zfynq

deaboway

hanbang0619

博主相关

博客

微博

相册

留言

关于我

文章分类

社区版块

存档分类

博客分类：

flex

Flex ActionScript 应用服务器 Flash 编程

一，概述

Flex是Adobe公司的支持RIA(rich internet applications)开发和部署的平台，它是一系列发展中的技术和产品线的概括词,包括Flex Framework, Flex Builder 2, Flex Enterprise Services 2等。

FLEX试图通过提供一个程序员们已经熟知的工作流和编程模型，让程序员比从前更快更简单地开发动画及RIA应用。在多层式开发模型中，FLEX应用属于表现层。FLEX的语言和文件结构也试图把应用程序的逻辑从设计中分离出来。

二，Flex开发环境

1，Flex的客户端: 须安装Flash Player

Flash Player: 8.5版本开始加入AS3虚拟机，作为FLEX2应用的运行时(runtime)

2, Flex的web服务器端：

1). 纯静态web 服务器，仅返回一个简单的静态HTML页面。此时的Flex 应用程序的SWF 文件嵌入到一个HTML 页面中。

2). web应用服务器，如JRun、ColdFusion ? 或者PHP，它们可以动态地生成页面。在这种情况下，你将使用到与服务器技术相关的库，并动态地处理它们的内容。

3). J2EE应用服务器或servlet 容器。向一个J2EE 应用服务器或servlet 容器发出请求，如JRun、Tomcat 或WebSphere?，通常你需要使用Flex Data Services。

3，Flex产品系列: Flex产品线包括了进行设计、开发、发布整套RIA 所需的一系列产品。它们是：

1). Adobe Flex 2 SDK(Software Development Kit):是技术实现和程序编制的基础集合，它使你可以使用Flex 系列产品来创建应用程序。Flex 2 SDK 包含了Flex Framework构架（类库），Flex 编译器，调试器，MXML 和ActionScript? 编程语言，以及其它实用程序。Flex SDK 还包括了核心Flex 构架类库的源代码，使你可以学习这些类的代码并扩展它们以备你自己的使用。

2). Adobe Flex Builder 2: Flex开发的官方IDE

3). Adobe Flex Data Services 2(FLEX服务器):通过使用Flex Data Services，大大地增强了Flex 2 SDK 的功能性。Flex Data Services新增了对企业通信的支持(提供一种发布/订阅的通信架构)，以及对于Flex 2 SDK 的数据服务支持(使本地处理的数据和服务器端同步)。你可以在J2EE 应用服务器上或者servlet 容器里将Flex Data Services 发布为一个标准的web 应用程序。Flex Data Services 能够简化操作服务器上数据的编程模式。支持自动测试。支持创建静态文件(使用解释编译方式并且不需要购买服务器许可证就可以在线部署)。它也是客户端和XML Web Services及远程对象(Coldfusion CFCs，或Java类，等支持Action Message Format的其他对象)之间通讯的通路。

4). Adobe Flex Charting 2: Flex Charting 图表组件 2: 提供平滑的数据可视能力，可看作是Flex Framework的扩展。FLEX还有其它多种组件，可实现Web Services，远程对象，drag and drop，列排序，图表等功能；

三，RIA的发展和Flex的版本历史

术语: RIA ?,Macromedia,XUL?,[Thin client]?瘦客户端,XAML?,MXML?

IT业的系统架构重要转变:基于主机模式→C/S模式→B/S模式→RIA模式。系统架构发展的下一步是RIA，它最大程度地提高了广泛性和丰富性。RIA 是集桌面应用程序的最佳用户界面功能与Web应用程序的普遍采用和快速、低成本布署以及互动多媒体通信的实时快捷于一体的新一代网络应用程序。

1, 前Flex阶段:Flex Server 1.0 and 1.5的目标市场是企业应用开发，价格约 US$15000 每CPU。每个许可证包含五个Flex Builder许可证。使用收费的Flex Framework技术。

A，Flex 1.0-2004年3月: FLEX最初是作为一个J2EE应用，或者可以说是JSP标签库而发布的。它可以把运行中的MXML (FLEX标记语言)和 ActionScript?编译成FLASH应用程序(即二进制的SWF文件)。

B，Flex 1.5-2004年10月:Flex 1.5的重点在于表现层，由于SWF客户端只需要载入一次，大大改善工作流。

C，Flex Builder 1.5 是基于Dreamweaver编码环境的服务于Flex 1.5的编程环境，实现了设计/代码视图，高亮语法显示，代码缩进和应用预览等功能。

2, 新Flex阶段:Flex是第一个被Adobe冠上Adobe商标而重新命名的原Macromedia 产品。Flex2和AS3的巨大变动在使用者社区引起了巨大的争议。

A，Flex 2.0 Alpha-2005年10月,

B，Flex 2.0 Beta 1/2/3 - 2006年2月/3月/5月,

C，Flex 2.0 FINAL - 2006年6月28日

D，Flex 2.01 - 2007年1月5日

Flex 2改变了许可模式，把原Flex Framework技术加入到免费的Adobe Flex 2 SDK，全新于1.5的 Flex Builder 2 基于Eclipse IDE是收费的，但Flex编译器是免费的。

Flex 2并引入了新版本的语言ActionScript3?的使用，这需要 Flash Player 9 以上版本作为运行时(runtime)。ActionScript? 3是Flex Framework的核心。虽然语法和AS2类似，但它更加面向对象化和类型化。而且因为在新的虚拟机中运行，所以比AS2快得多。

当然，对于有特别需要的用户来说，仍提供收费的企业级服务。Flex2.0中把RemoteObject?分离成为一个组件单独来收费，称为Flex Data Services 2(FDS,在Beta2之前旧称Flex Enterprise Services 2)，是Flex 1.5 server的下一代，提供诸如data push和自动测试等高级功能。但同时提供免费的限制授权用于单一CPU主机的Flex Data Services Express。

3，Flex开源项目的发展: 如免费的AMFPHP，Yahoo AS2 Library, Google flex code....

1), OpenLaszlo?:一般被认为可能是FLEX替代品的是 OpenLaszlo?和Ajax 技术。还可以参考一下早已是标准的SVG?技术。

2), NeoSwiff:从C#到SWF的编译器

3), MTASC:免费并开源的 AS 2 编译工具

4)，ColdFusion?: Macromedia 把一部份Flex 1.5的子集嵌入到了它的Coldfusion MX 7中间件平台中以供在Flash forms中使用。虽然可以使用这个平台来开发RIA，但是它原来的目的只是为了开发丰富的forms应用，所以这个功能并不为Macromedia 所支持。

5), Ajax, Aflax

6), 开源的Granite Data Services graniteds

7), 开源JAVA的Red5 : Open Source Flash Server

8), AMFPHP,Flash 直接连接MySQL的AS3驱动类

四，使用FLEX BUILDER 2进行应用开发步骤

Flex Builder教程

Flex Builder 2是在Eclipse基础上创建的(可作为标准的独立应用软件，也可作为Eclipse的插件使用，可共享Eclipse工作平台上丰富的开源资源)一个使用Flex SDK、Flex Data Services 和Flash Player 来开发应用程序的集成开发环境（IDE），是生成FLEX应用的最简单最强大的方式。实现了集成编译器，代码缩进，调试，设计视图，源代码控制系统集成等许多功能。

1，创建一个新工程:

2，界面设计: 在一个文本编辑器或集成开发环境（IDE）中，如Adobe Flex Builder、Eclipse 或IntelliJ?中插入MXML 根标签。组织安排一系统预定义组件(窗口，按钮等)来定义一个开发界面。添加一个或更多容器。在容器中添加控件，如输入栏、按钮和输出栏。可使用风格和主题来定义可见设计。

对于用户界面的设计， Flex Builder 支持可视化的设计视图，它可以使开发人员或者设计人员去布置Flex 组件，定制它们的外观，以及如何与用户进行互动。Flex Builder 设计视图的界面如下所示：

3，逻辑编程:Flex Builder 提供了一套针对MXML、ActionScript?、层叠样式表（CSS）的代码编辑器，帮助你更加容易地管理代码的源代码操纵工具，以及帮助排除程序中故障的调试器。Flex Builder 进行程序编制的界面如下图所示：

1). 定义一种数据模型，并在需要时连接上一个数据服务。

2). 添加一个web 服务器，HTTP 服务器，或向远程Java 对象发送请求。

3)，增加动态动作，如应用程序之间的互动:为数据输入添加验证。为组件添加脚本。

4，编译与发布: 可以使用 Adobe Flex Builder 2 把 Flex 应用程序编译成SWF 文件。或者直接在命令行中调用编译器。Flex 编译器是处于 Flex 2 安装文件夹下的 Flex SDK 2.0\bin 文件夹中的一个很小的可执行文件 mxmlc 。最好确保这个文件夹是系统路径中。这样可以直接用如下命令行单独调用它。

//编译器选项--strict强制编译器进入严格的 Strict 模式,--file-specs 指定被编译的 MXML 文件mxmlc --strict=true --file-specs MyFirst.mxml

Flex 平台的发布模式共有三种：

1). 纯客户端运行模式和简单的RPC(HTTPService和WebService?)访问服务器模式:如上可以将应用程序发布成一个编译好的SWF文件。客户端进行访问的格式是：http://hostname/path/filename.swf

2). RemoteObjects?模式(Flex Data Services等模式)访问服务器:可以将应用程序发布为一组MXML 和ActionScript? 文件。客户端进行访问的格式是：http://hostname/path/filename.mxml

5，设置断点，调试:你可以在代码编辑器中查看和编辑出错或被警告的代码。同时，你还可以设置断点、或单步执行来帮助你进行程序的调试。

五，Flex编程语言

Flex编程语言(编程模型)包括MXML、ActionScript ?编程语言和 Flex 类库，Flex应用程序会被实施为 ActionScript? 类库。 Flex通过将 MXML 和 ActionScript? 语言与该类库一起使用来开发应用程序。常用MXML来设置用户界面，并用ActionScript?来编写响应用户交互的逻辑。

1，MXML 标签与 ActionScript? 类或类的属性相对应。当您编译 Flex 应用程序时, Flex 会解析 MXML 标签并生成相应的 ActionScript? 类。接着它将这些 ActionScript? 类编译成存储在 SWF 文件中的 SWF 字节码。

提示: 若要查看 Flex 生成的中间 ActionScript? 文件, 请将 --keep-generated-actionscript 选项添加到 mxmlc 命令中。

2，AS 3 是完全面向对象编程语言。AS3全面兼容ECMAScrip标准(Java Script 2.0的基础标准)。每个类都继承父类的方法属性等。如以下继承关系:Alert->Panel->Container->UIComponent->FlexSprite?->Sprite->InteractiveObject?->DisplayObject? ->EventDispatcher?->Object

3，Flex 类库包括了Flex 组件类(可视组件,容器和控件)、管理器类、数据服务类(RPC即Remote Procedure Control,Messaging和Data Service类)，以及其他功能的类。在Flex Builder 2中，可以充分利用帮助功能查看类对象，可先在源码中选定某类名，然后按F1即可。该类库包含组件 (容器和控件)、管理器类、数据服务类和所有其他功能的类。

4，MXML 和ActionScript?的结合: 虽然MXML 和ActionScript?编程语言都提供了访问Flex 类库的能力。但通常的做法是：使用MXML 去定义用户界面的组件布局(如果用AS来做也可，但代码更长更复杂)，使用ActionScript? 去定义客户端的逻辑并进行控制。

1) 可以在MXML中使用Script 标签来包含ActionScript?

2) 还可将脚本块分隔到外部 ActionScript? 文件中

3) 使用外部ActionScript? 类。

5，Flex 类库调用方法:

1), 使用该组件的全名(全路径):

mx.controls.Alert.show("Do you want to save your changes?");

2)，导入一次，多次使用:

import mx.controls.Alert;Alert.show("Do you want to save your changes?");

六，MXML标记语言

MXML教程

MXML 是用于为Flex应用程序进行用户界面组件布局的 XML 语言。您还使用 MXML 来显式定义应用程序的非可视方面, 例如访问服务器端数据源和用户界面组件与数据源之间的数据绑定。

七，ActionScript编程语言

Action Script教程

在基于组件的开发模型下，开发人员可以运用预先做好的组件。将ActionScript? 添加到Flex 应用程序中。ActionScript? 可以出色地完成如下任务：

1. 处理事件

2. 处理错误

3. 在MXML 语句中将数据对象绑定到Flex 控件上

4. 定制组件

八，Flex面向对象编程

Flex面向对象编程

为了增强系统的复用性和可维护性，采用具有良好体系架构的Model-View-Controller（MVC）开发模型。

1). 模型(Model) 组件封装了数据和与数据相关的行为。

2). 视图(View) 组件定义了应用程序的用户界面和其他数据的显示。Flex 创建一个应用程序时，你使用组件（容器containers 和控件controls）来描述用户的操作界面。例如，容器可以是一个用来进行数据输入的表格容器，如一个盒框Box 或一个栅格Grid；而控件就是该表格中的元素，如一个按钮/Button? 或文本输入栏Text Input field。

3). 控制器(Controller) 组件则负责处理程序中的数据连接。

九，Flex的安全机制

出于安全方面的考虑，在客户端的Flash Player 中运行的应用程序，只有在满足如下条件之一的情况时才能访问远程的数据源

1). 应用程序所编译的SWF 文件与远程数据源位于同一个域中。

2). 使用代理（proxy），并且你的SWF文件位于和代理相同的服务器上。Adobe Flex Data Services 为Flex 应用程序提供了一个完整的代理管理系统。同时，你还可以通过使用一种web 脚本语言，如ColdFusion ?、JSP、PHP 或者ASP 来创建一个简单的代理服务。

3). 安装crossdomain.xml （跨域策略/cross-domain policy）文件在数据源的宿主Web 服务器上。crossdomain.xml 文件允许位于其它域中的SWF 文件对数据源的访问。

十，Flex程序性能的优化

Flex优化

十一，Flex与Flash

从Flash 到Flex:开发一个Flex 应用程序与开发一个Macromedia Flash Professional 8 程序有所不同，即使两者都会最终被编译成SWF 文件。Flash Professional 使用了一些概念，如时间轴/Timeline ?，动画帧/，图层/layers 来组织和控制程序中的内容。而在Flex 中则抛弃了这些内容，转而使用MXML 标签来设计用户界面组件和连接数据源。尽管Flash 和Flex 的开发模型各不相同，但是Flash 仍然是一个非常强大的工具，用来创建定制的组件和视觉方面的资源，然后以外部SWC 文件的形式导入到Flex 中。