了解Flex 3.0

2018-05-03作者:聂晓霞, 编著编辑:Solomon

Flex 应用技术

对于 Flex 的初学者,首先需要了解什么是 Flex 技术,了解 Flex 所使用的其他附加技术。简单地 说,编程者在 Flex 框架中建立 Flex 应用程序,并在 Flash Player 上进行应用。下面详细地讲解一下 Flex 所使用的各项技术。


1.了解 Flash Player

Flex 是 Adobe Flash 平台的一个组成部分,也是 Flash Player 的一组核心技术。Flex 的应用程序需要在 Flash Player 上展开,也就是在 Flash Player 中运行 Flex 应用程序。Flash Player 是一个用于内容和应用程序的轻量型运行库,它不仅符合安全要求,而且是基于许多 Web 标准(包括 ECMA-262 编程语言)构建的。

Flash Player 是被广泛应用的软件技术,几乎所有的计算机都安装某一个版本的 Flash Player,因此 Flex 可以不受平台限制地得以广泛的应用,并且它仅占用 1MB 的少量内存。

Flex 2 以上版本的产品都需要基于 Flash Player 9 的运行,因此在使用高于 Flex 2 版本的 Flex 产品 时,需要安装 Flash Player 9 以上的产品。使用 Flex 框架可以建立和编译代码为.swf 的文件格式,.swf 文件格式是 Flash Player 可以阅读的二进制代码。

2.了解 Flex 框架

Flex 框架就是 Flex 类库和 Flex 所使用的 ActionScript 类的集合的代言词。Flex 框架完全由 ActionScript 类所书写,定义了其控件、容器和管理组件。在本书中,Flex 的类库是将要讲解的主要内 容。如图显示了 Flex 框架所包含的各类组件。


qqqqq.jpg


3.Flex Builder

Flex Builder 是 Adobe 官方发布的 IDE(集成开发系统),用来构建在开源的 Eclipse IDE 上,使用 Flex 的 MXML 和 ActionScrip 技术,进行 Flex 书写和调试。

要注意的是,Flex Builder 和 Flex Framework(框架)并不是同一个概念。Flex Builder 是 Adobe 格 栅商业化的产品,但 Flex SDK 是免费的,编程者可以在任何文本编辑器中编辑 MXML 和 ActionScript 文件,然后在命令行对文件进行编译。

4.与 Live Cycle Data Service(LCDS)集成

LCDS 是 Flex 应用的重要组成部分,简单地说,其作用在于 Flex 应用与数据层之间的发送和获取 数据。在 Flex 中使用数据服务就如使用其他的组件和类。

5.附加的 Flex 库和组件

到目前为止,Flex 3 中有两个官方附加的库,即 Flex Charting 组件(图表组件)和 Flex

AdvancedDataGrid(高级数据列表组件)。 

6.Flex IDE

以开源 Eclipse 为基础的、功能强大的 IDE,具有自动部署、调试和追踪的功能。


Flex 组成元素

Flex 表现层服务器包含 Flex 应用框架和 Flex 运行服务,而 Flex 框架又包含 MXML 描述语言、ActionScript 程序语言和 Flex 类库。编程者结合 MXML 和 ActionScript 来建立应用程序,MXML 原理定义用户界面元素,ActionScript 原理定义客户逻辑和程序控制。Flex 类库则包含了 Flex 组件、管理器和行为控制。


asdasdad.jpg


Flex 运行服务包括支持服务器端的数据传输、编译和高速缓冲内存,内部资源的集成和运行服务 的需求。下面详细介绍各个组成部分。

1.MXML 界面语言

MXML 是基于 XML 的标记语言,用于应用程序用户界面的布局,该用户界面中可包含用于操 作结构化数据和大型数据集合的高级组件。MXML 提供了表示层逻辑的声明抽象以及用户界面和服务器端数据之间的绑定。MXML 将表示层问题从业务逻辑中剥离出来,从而有助于开发者生产力和应用程序可用性的最大化。使用 MXML 标签可以进行布局、描述行为效果、过渡、定义数据模型、数据绑定。

2.ActionScript 编程模型

ActionScript 是基于 ECMA-262 标准的一种类似于 JavaScript 的强类型面向对象语言,可用于定 义事件监听器和处理器、设置或检索组件属性值,以及处理回调函数等。

ActionScript 是 Flash Player 可以理解的编程语言,也是 Flex 应用的基础。ActionScript 是 MXML 的基础,可以完成 MXML 所不能完成的任务,包括下面的用途:

 控制事件。

 控制错误。

 绑定数据对象到 Flex 控件。

 定义用户组件。

3.Flex 类库

Flex 类库提供了可扩展的预建组件(如容器和控件)、数据绑定、行为以及其他功能。4.建立 Flex 应用程序的步骤

通常,建立一个基本的 Flex 应用程序包括以下步骤。

(1)使用 MXML 代码设计和布局 Flex 的容器和控件,例如一个按钮控件。代码如下:

<mx:Button label="按钮 A" click="handleClickFunction(event)" />

如果使用 Flex Builder IDE,则可以应用更多的技术,例如拖放、状态改变、行为效果等。

(2)在 ActionScript 代码中完成实现函数功能。代码如下:

private function handleClickFunction(event:Event):void{ //实现业务逻辑

}

(3)编译代码,Flex 编译器自动转换 MXML 代码为 ActionScript 代码,并且编译为二进制代码, 输出为 SWF 文件格式,并且在 Flash Player 上运行。使用 Flex Builder IDE 可以完全自动编译所有的 文件。

(4)将 SWF 文件包装在服务器的 HTML 网页中,使用 Flex Builder IDE 这个过程也是完全自动 生成的。


Flex 技术与传统网页技术的对比

在共同点上,传统技术和 Flex 技术都是 N-层(N-Tier)的结构。n 的具体数目取决于应用的很多 因素。多数传统技术包含了至少 3 层的结构:1 个数据层(Data Tier)、1 个业务层(Business Tier)、 1 个表现层(Presentation Tier)。数据层通常指数据库或数据源;业务层指应用核心的业务逻辑部分; 传统技术在其表现层包括了 HTML、CSS、JavaScript、JSP、PHP 等技术。Flex 首先包含了 1 个数据层(Data Tier)、1 个业务层(Business Tier),数据层和业务层中间的集成层(Integration Tier)、表现层(Presentation Tier)。与传统技术不同的是,Flex 还有一个客户层(Client Tier),这是与传统网页技术完全不同的一个层面。Flex 的客户层允许用户脱离服务器工作,不受网络的限制,并且与用户更好地互动。


dadadadad.jpg


Flex 应用通常是嵌入在表现层的。Flex 应用的客户层比传统技术的表现层更加精致,因此 Flex 的 客户层的建立理所当然地需要更多的时间和资源。相对于传统的网页,Flex 最突出的优点就是其界面美观,能展现独一无二的图像、动画和音像等多媒体技术。 Nike Air 网页展示的与用户互动的视频效果。可以访问此网站 (http://www.bigspaceship.com/archive/nikeair/)来体验一下 Flex 的 RIA 技术的超强用户体验。同时,由于 Flex 在客户层的 Flash Player 展开使用,因此不存在不同平台不能兼容的问题。Flex独特的框架,使得用户 UI 设计更加容易、便捷。


Flex 的工作原理

Flex 应用展开在 Web 上的工作原理,与以 HTML 为基础的网页应用有很大的差别。了解 Flex 的工作原理,就能够知道什么是 Flex 应用必要的工作元素,知道如何建立更好的用户友好的页面。显示了 Flex 各类基础概念的总结,显示了源程序文件、编译器和 Flash Player 之间的关系。第一部分是

Flex 的源程序部分。Flex 应用需要至少一个 MXML 文件或 ActionScript 类文件来构成 Flex 应用的源程序。


dasdasdaadad.jpg


通常情况下,Flex 应用包含了多个 MXML 和 ActionScript 类文件, 以及需要嵌入的外部资源。MXML 文件首先被编译为 ActionScript 文件,然后 Flex 需要将编译出的 ActionScript 文件和其他的 ActionScript 类共同生成为一个完整的 SWF 文件。在下一步中,如果生成了 外包装的文件,就需要在 HTML 中运行此 SWF 文件;如果不生成外包装文件,可以直接在 Flash Player 上读入此文件。

外部资源也是 Flex 应用的一个组成部分,如 CSS 样式表单、图形文件等。外部资源可以在编译时嵌入到 SWF 文件中,也可以在运行时动态地加载。

有时在运行时 Flex 的数据服务也是必不可少的,也就是说,运行时需要有可以获取数据服务的URL。


配置 Flex Builder 开发环境

要学习如何使用 Flex Builder,首先就要下载、安装和运行 Flex Builder。Flex Builder 提供免费的测试版本,使用期限为一个月。现在最新的可下载版本是 Flex Builder 3。如果用户使用早期版本的 Flex Builder 或 Dreamweaver,可以更容易地掌握 Flex Builder 的使用。


Flex Builder 简介

Flex Builder 是建立在 Eclipse 平台上的,可以对 MXML、ActionScript 和 CSS 代码进行编辑。它具 有可视的代码和设计视窗。Flex Builder 可以提供代码提示和其他的帮助,并可以使用自定义的编译和调试(Debug)。

在此首先需要了解以下的概念,在后文中会详细介绍每个概念。

Eclipse:Flex Builder 是建立在 Eclipse 的基础上。Eclipse 是一个开源的集成开发环境。Flex

Builder 是一个 Eclipse 的插件,它使用了 Eclipse 的基础功能。

工作平台(Workbench):工作平台是指 Flex Builder 整个开发环境。它包括 3 个基本元素:

模式(Perspective)、编辑器(Editor)和面板(View)。

ê 模式(Perspective):一组视窗和编辑器。Flex Builder包括两个模式:开发和调试模式。

ê 编辑器(Editor):可以编写MXML、ActionScript和CSS等代码。

ê 面板(Views):面板是用来支持编辑器的。例如,当编辑MXML代码时,就会出现属性面板。

工作空间(Workspace):是在文件系统中用来存放应用项目的地方。一个 Builder 只能打开

一个工作空间。资源(Resource):在工作空间中的项目中的文件和文件夹。项目(Project):在 Flex Builder 中可以建立 3 种类型的项目,即 Flex、ActionScript 和 Library。格式(LaunchConfiguration):定义项目设置,用来运行和调试程序。

Flex Builder 模式(perspective)

Flex Builder 包括两个模式:开发模式(Flex Development)和调试模式(Flex Debugging)。当建立一个 Flex 项目时,模式自动切换为开发环境;当进行调试操作时,视角自动切换为调试模式。用户也可以选择 Window|Open Perspective 菜单项来手工切换模式。此外,还可以在工作平台的工具条上打开。


Flex Builder 开发模式中的代码视图

当建立一个 Flex 应用时,在开发模式中进行代码编写。开发模式环境包括了导航面板、错误面板、提纲面板、编辑器等。


sadasdadada.jpg


1.编辑器(Editor)

编辑器用来编写 MXML、ActionScript 和 CSS 代码,提供提示和定位格式。它包括代码视图和设 计视图。在设计视图中,可以拖放 Flex 的控件,帮助定位和改变大小。用户可以通过工具按钮来切换代码视图(Source)和设计视图(Design)。

2.导航(Navigator)面板导航面板用来显示所有的工作项目和项目中所有的源文件(文件夹和文件)

3.提纲面板(Outline)

提纲面板用来显示代码中各个组件的层次和名称。

4.错误面板(Problems)

错误面板用来显示所有的错误信息。在默认的情况下,Flex 编译器每次改动后都会自动编译 Flex 项目,用户就可以立刻看到错误信息。


Flex Builder 中代码提示帮助

代码编辑器提供许多帮助来简化代码开发,其中最重要的是内容提示帮助,当输入代码时,它会 自动显示代码提示帮助完成 MXML、ActionScript 和 CSS 代码的书写。


Flex Builder 开发模式中的设计视图

Flex Builder 开发模式包括了两种视图:书写代码的代码视图和显示布局的设计视图。用户可以通 过工具按钮切换这两个视窗。当打开设计视图时,则出现相应的面板,包括设计视图、 组件面板、状态面板和属性面板。


aaaaaa.jpg

1.设计视图(Design View)

设计视图是用来拖放组件和容器,进行布局设计、定位、改变大小的视图。

2.组件面板(Components)

组件面板中包括了所有的 Flex 容器和组件,可以选择并拖放到设计视图上。用户自定义的组件也 可以在此显示出来。

1.设计视图(Design View)

设计视图是用来拖放组件和容器,进行布局设计、定位、改变大小的视图。

2.组件面板(Components)

组件面板中包括了所有的 Flex 容器和组件,可以选择并拖放到设计视图上。用户自定义的组件也 可以在此显示出来 。


sadadadada.jpg

3.状态面板(States)

状态面板是用来建立和管理不同的设计状态,不同的状态是指基于用户不同的要求。

4.Flex 属性面板(Flex Properties) 

当画布中的一个容器或组件被选中,其属性就会在属性面板中显示出来。编程者可以在此视窗设

置和编辑其属性。


关注微信公号“书问”,免费领取万本好书!


内容来源:书问

作者强锋科技、聂晓霞
出版清华大学出版社
定价59.8元
书籍比价

分享到

扫描二维码 ×

参与讨论

电子纸书

Flex 4.0 网络大讲堂

郑千忠、陈军红 等
清华大学出版社[2013] ¥33

Word 2003/Excel 2003/PowerPoint 2003办公应用

九州书源
清华大学出版社[2015] ¥42

Word 2013/Excel 2013/PowerPoint 2013办公应用

九州书源
清华大学出版社[2015] ¥42

Word 2003/Excel 2003办公应用

九州书源
清华大学出版社[2015] ¥42

文化遗产保护100(2000-2010)

吕舟
清华大学出版社[2011] ¥143

诗说清河30年(1983-2013)

《清河30年文丛》编委会
清华大学出版社[2013] ¥395

数说清河30年(1983-2013)

《清河30年文丛》编委会
清华大学出版社[2013] ¥98

图说清河30年 (1983-2013)

《清河30年文丛》编委会
清华大学出版社[2013] ¥109

出版业领先的TMT平台

使用社交账号直接登陆

Copyright © 2018 BookAsk 书问   |   京ICP证160134号


注册书问

一键登录

Copyright © 2018 BookAsk 书问   |   京ICP证160134号