好文档 - 专业文书写作范文服务资料分享网站

Flex中文帮助 

天下 分享 时间: 加入收藏 我要投稿 点赞

译者声明

1. 请大家在转载和使用时保持本文的完整性。

2. 本文所有资料均来自Flex官方文档,其英文版权归Adobe公司所有。

3. 文中某些内容根据译者的理解稍作改动,因此与原版英文在文字上不完全一致。同时,由于译者水平有限,翻译不妥之处请大家多多见谅。

重庆大坪 刘刚

第一章 Flex是如何工作的

该部分文档的内容是为用户提供关于Adobe?Flex 工作机制的一个快速综述。通过本章节的学习,你可以创建你的第一个Flex 应用程序,并将它与你以前所熟悉的Web开发技术进行比较,以领会Flex的内涵和精髓。

第一节 构建并运行Flex应用程序

Flex是一个提供开发设计和运行支持的架构,它可以使开发人员创建利用Adobe?

Flash? Player 9作为前台的“富客户端互联网应用程序/rich Internet applications/RIA”,以满足用户更为直观和极具交互性的在线体验。

开发Flex应用程序的典型步骤如下(通常是这样):

1. 选取一系列预先定制好的、用于设计应用程序界面的组件(如表格、按钮等等)

2. 布置组件以设计用户界面。

3. 使用样式和主题来增强视觉方面的设计。

4. 添加动态行为(例如程序部件之间的相互作用)。 5. 定义并连接所需的数据库服务。

6. 将源代码编译成SWF文件,然后在Flash Player中运行。

一个典型的Flex应用程序包括如下元素: 1. Flex framework

Adobe? Flex 2 framework包含了创建RIA所需要的所有组件,它们是:用于应用程序布局规划的容器;针对用户界面和从用户处获取数据的控制(例如文本框和按钮);广泛支持的数据绑定、数据格式化、以及有效值验证;事件驱动的开发模式。Flex framework被包含在公用组件库(SWC)文件中。 2. MXML

每个Flex应用程序至少包含有一个MXML文件,它被作为该程序的主文件。MXML是一种标记语言,它是基于XML的一种实现,用来创建Flex应用程序。你可以使用它去声明程序中所使用的标签结构的定义。 3. ActionScript 3.0

你可以使用ActionScript 3.0为应用程序添加动态行为,它是基于ECMAScript的一种实现,类似于JavaScript。你可以将ActionScript作为一个脚本块,在MXML文件中直接进行添加;或者创建一个单独的ActionScript文件,然后将它们导入到MXML文件中。 4. CSS

你可以通过设置组件的属性(properties)来改变组件(按钮、列表框等)的视觉样式。例如,按钮组件有一个fontFamily属性,你可以使用它来进行字体的设置。样式的属性通常有四种方法来进行控制:通过主题(theme);在CSS文件中进行定义;在MXML文件中的样式块中进行定义;在组件的实例中进行设置。 5. 图形资源

与很多应用程序一样,Flex包含了各种各样的图形资源,如图标和图象。

6. 数据

一些组件被使用来进行数据显示(combo box或者data grid)的工作。同时,你还可以使用各种方式来将这些组件与数据联系起来,如使用数组、收集对象、数据模型、以及外部

XML数据资源,等等。

Flex应用程序是如何编译和发布的:

所有的元素都被编译或连接到你的Flex应用程序中,就象下图所示:

Flex应用程序被编译成一个SWF文件,然后在Flash Player下运行。当一个源代码被编译时,它就被转换成ActionScript类(译者注:这正是Flex精髓的地方之一,即提供从MXML到ActionScript的转换),并与图形和其它资源合并到SWF文件里。在运行时,SWF文件与所需的外部库、服务和数据源进行交互。

一般的Flex应用程序并不需要服务器端所提供的支持。因此,你可以在你的本地计算机上编译它们,然后在Web服务的HTML页面中发布给你的用户。

当然,你还可以将Flex与Adobe? Flex Data Services 2、Cold Fusion Flash Remoting Service、或者其它Java和J2EE Service服务器技术结合起来,进行B/S结构的网络应用程序的开发。

MXML:一切开始的地方

你可以在MXML中使用Flex所提供的组件来定义用户界面。这里有一个主MXML程序文件的例子:

如果你对XML已经很熟悉了,就能一眼识别出这个例子的格式。MXML代码的头两行包含了版本号、编码、以及命名空间的信息,文档的主体包含的是程序的具体内容。

Flex应用程序所有的具体内容都被放在标签对中。同时,你还可以在父标签对中嵌套其它的子标签对(译者注:反正标签是成对出现的,这点一定要记住)。

该例子创建了一个简单的程序,它在屏幕上显示“Say hello to Flex!”的文字。在该程序中,声明了TextArea和Button组件,并设置了它们相应的text和label属性。

备注:在MXML文件中的每个标签都有前缀mx,它是Flex的设计命名空间。

程序被编译后运行,如下图所示:

第二节 连接数据

请记住,在Flex应用程序中对数据的操作最重要的事情是:Flex应用程序并不直接与一个数据库进行连接。因此,Adobe? Flex Builder 2没有提供直接连接数据的工具。你可以通过使用MXML和ActionScript代码来操作和管理数据。

在Flex中,你可以使用几种方法去操纵和管理数据,它们大多数相关的内容已经超出了在这里进行简要介绍的范围(更多的信息,请查看后面的章节)。不管怎样,请想象一种可以连接外部数据的方法,随后的例子将演示与XML结构的数据进行连接。

数据的生成

因为Flex应用程序并不直接与一个数据库进行连接,所以你需要使用某种类型的服务来支持对数据的使用。在随后的例子中,将使用HTTPService组件从PHP所产生的一个XML文件中获取数据。

连接数据库的第一步是生成将在Flex程序中使用到的数据。在与PHP的应用中,你将采用如下的步骤:

1. 创建一个数据库(如MySQL)。

2. 编写一个PHP脚本连接MySQL数据库并生成XML格式的数据。

这些步骤同样适合于在其它工作平台上生成的数据(如ASP.NET、 JSP等)。

连接外部数据源

对于PHP所生成的XML格式数据,你可以使用HTTPService组件来请求获取数据,就象这样:

url=\/> ...

HTTPService组件定义了一个请求ID,你将使用这个ID来控制提供数据的URL或者服务器与数据之间的绑定。

外部数据与数据驱动控制的绑定 通过数据与数据驱动控制(data-driven control) 的绑定,你就可以处理HTTPService的结果(XML数据),就象这样:

数据绑定的语法显示在数据控制的dataProvider属性中(在波浪形的括号里),它包含了HTTPService请求ID、lastResult方法、以及XML文件的数据结构。在这个例子中,XML数据源的数据结构看起来就象这样:

Mobile Phone $199

Car Charger $34 ...

9ytkf9pruq6ksx798r4r
领取福利

微信扫码领取福利

微信扫码分享