Flex中文帮助 第一章

转载自AIRIA.cn

第一章 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 version="1.0" encoding="utf-8"?> 
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" layout="absolute"> 
<mx:Panel> 
<mx:TextArea text="Say hello to Flex!" /> 
<mx:Button label="Close" /> 
</mx:Panel> 
</mx:Application>

如果你对 XML已经很熟悉了，就能一眼识别出这个例子的格式。 MXML代码的头两行包含了版本号、编码、以及命名空间的信息，文档的主体包含的是程序的具体内容。 Flex应用程序所有的具体内容都被放在 <mx:Application>标签对中。同时，你还可以在父标签对中嵌套其它的子标签对（译者注：反正标签是成对出现的，这点一定要记住）。该例子创建了一个简单的程序，它在屏幕上显示“ 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组件来请求获取数据，就象这样：

<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" layout="absolute">
<mx:HTTPService id="productsRequest" url="http://www.airia.cn/products.php" />
...

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

外部数据与数据驱动控制的绑定

通过数据与数据驱动控制（data-driven control）的绑定，你就可以处理 HTTPService的结果（ XML数据），就象这样：

<mx:DataGrid x="20" y="80" id="productGrid" width="400" dataProvider="{productRequest.lastResult.products.items}" >
<mx:columns>
<mx:DataGridColumn headerText="Name" dataField="name" />
<mx:DataGridColumn headerText="Price" dataField="price" />
</mx:columns> </mx:DataGrid>

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

<XML>
<products>
<item>
<name>Mobile Phone</name>
<price>$199</price>
</item>
<item>
<name>Car Charger</name>
<price>$34</price>
</item> ...

通过设置 dataField属性，项目数据（ name和 price）作为数据栅格中每一列的数据。

在运行时加载数据

你还可以在 Flex程序开始运行时加载数据，就象随后所示，在 HTTPService中向某个特定的 URL发送一个请求：

<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" layout="absolute" creationComplete="productsRequest.send()" >

当你将 creationComplete方法添加到应用程序标签里后，数据会在运行时进行加载并交于数据驱动控制（在这个例子中是数据栅格）。

你还可以将 HTTPService请求添加到一个控制事件上而不是程序里的标签中，就象如下所示：

<mx:Button x="50" y="8" label="Get Data" click="productsRequest.send();" />

Flex提供许多方法去连接、管理、格式化、以及校验数据。你可以通过使用远程程序调用、数据服务、或者其它企业级技术来操纵和管理数据。

第三节 关于 Flash Player安全性方面的问题

出于安全方面的考虑，在客户端的 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应用程序设计界面布局

让我们来详细分析一下前面那个 “Say Hello to Flex“的简单例子，你可以通过设置组件的属性值来控制 Flex应用程序的界面布局，就象如下所示：

<?xml version="1.0" encoding="utf-8"?> 
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" layout="absolute"> 
<mx:Panel layout="absolute" width="80%" height="80%"> 
<mx:TextArea text="Say hello to Flex!" top="10" bottom="70" left="10" right="30"/> 
<mx:Button label="Close" right="30" bottom="40"/> 
</mx:Panel> 
</mx:Application>

许多容器组件都允许以绝对坐标的方式创建布局，这就意义着你可以使用精确的 x和 y的坐标来放置组件。你还可以对应其父容器的相对位置来放置组件并约束它们，使它们在应用程序的界面放大或缩小时仍然保持其彼此的位置。



在这个例子中，面板 /Panel组件的布局属性被设置为绝对值方式，同时所有容器的大小都被设置为应用程序的百分之八十。两个组件（ TextArea和 Button）被放置到距离面板容器边界的特定象素位置上。

使用风格和主题增强视觉方面的设计

如果样式 /style的属性值没有被指定，它们将由整个程序中运行的主题 /theme来进行控制。在默认情况下， Flex应用程序使用 Halo主题（就象上面那个例子那样）。当然，你可以修改默认的主题或者干脆自己创建一个。你还可以简单地指定新的样式定义来改变默认的主题样式，就象这样：

<?xml version="1.0" encoding="utf-8"?> 
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" layout="absolute">
<mx:Style>
TextArea {
font-size: 36px;
font-weight: bold;
}
</mx:Style>
<mx:Panel layout="absolute" width="80%" height="80%" x="122" y="24"> <mx:TextArea text="Say hello to Flex!" top="10" bottom="70" left="10" right="30"/>
<mx:Button label="Close" right="30" bottom="40"/> 
</mx:Panel> 
</mx:Application>

通过明确地为 TextArea组件定义一个样式，应用程序现在看起来就会象这样了：



在这个例子中，一种新样式在 MXML文件中的 <mx:Style>标签里进行了定义。如同我们前面所提到过的，你还可以通过修改主题或应用新主题、使用一个外部 CSS文件、或者设置单独的样式属性来达到设置新样式的目的。

将一个样式单导入到 MXML文件中，你需要添加如下的代码： <mx:Style source="styles.css" />

第五节 事件和行为的使用

HTML应用程序的原理是由客户端发出请求，并从服务器端得到反应。与之不相同的是，Flex应用程序是基于事件的 /event-based。举个例子，当用户单击一个按钮时，便会触发一个事件。应用程序本身，不是指服务器，包含了识别事件的逻辑并采取相应的行动。

当事件被触发时修改组件的属性

对某个组件以编程方式进行操作时，为了对某个事件作出反应，必须首先要引用它，这时你就需要赋予它一个 ID值，如下所示：

<mx:Panel id="myPanel" layout="absolute" width="80%" height="80%" x="122" y="24">

随后你就可以将行为 /behavior添加到应用程序上，当某个事件被触发时改变组件的属性值，就象这样：

<mx:Button label="Close" right="30" bottom="40" click="myPanel.visible=false"/>

当按钮被单击时，面板的可见属性值被设置为 false。

使用 ActionScript功能函数你也可以通过编写 ActionScript功能函数，并在事件中调用它来达到相同的目的，在这种情况下，按钮组件的单击事件如下所示：

<?xml version="1.0" encoding="utf-8"?> 
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" layout="absolute"> 
<mx:Style source="styles.css" />
<mx:Script>
<![CDATA[ public function close() : void { myPanel.visible = false; }
]]> 
</mx:Script>
<mx:Panel id="myPanel" layout="absolute" width="80%" height="80%" x="122" y="24"> 
<mx:TextArea text="Say hello to Flex!" top="10" bottom="70" left="10" right="30" /> 
<mx:Button label="Close" right="30" bottom="40" click="close();" />
</mx:Panel> 
</mx:Application>

ActionScript功能函数是在 MXML文件里的 <mx:Script>块中进行定义的，然后引用到按钮的单击事件上。

单独的 ActionScript代码

为了从 MXML文件中更好地分离出 ActionScript代码，你可以将它们放到单独的 ActionScript文件中而不是作为函数，然后再将它们导入到 MXML文件里，如下所示： <mx:Script source="myFunctions.as" />

运用行为和变换增强丰富的视觉互动性 Flex应用程序是事件驱动的，这就意味着你可以在程序运行时使用事件去添加丰富的视觉互动性。为了实现它，你使用了一个事件触发器，用其来描述一个行为。

在前面的例子中，面板组件的 visible属性值被设置为 false因而不可见。你还可以通过使用行为来制造出更强的视觉效果。

下面的例子创建了一个行为，该行为首先创建好一种效果，然后把它绑定到组件的 hideEffect属性上（触发器）：

<mx:Fade id="myFade"/>
<mx:Panel id="myPanel" layout="absolute" width="80%" height="80%" hideEffect="{myFade}" >

当关闭按钮被单击时，面板组件淡出而不是消失。

触发器和效果还可以组合到更为复杂的行为中，其被称之为变换 /transitions。

第六节 在应用程序中添加多态页面

有几种方法在一个 Flex应用程序中创建多态页面。你可以使用 ViewStack组件、创建单独的 MXML文件、或者使用视图状态。视图状态可以被看作是一个组件或组件群构成的预定义的用户界面布局。你可以使用视图状态为程序表现出不同的视觉效果。每一种视图状态都是基于一种基础的状态，并进行继承和扩展。

在随后的例子中，当用户在组件上滚动鼠标时，基础状态发生变化。



当一个视图状态被调用时（通过用户的鼠标在组件上滚动时产生的事件），一种效果（或一种变换）改变了用户界面的外观。

使用视图状态方式、 ViewStack方式还是 MXML文件方式，取决于你想从一个页面到另一个页面进行变化的范围、用户界面的复杂性、以及实现 Flex程序的构架。



第七节 开始使用 Flex

现在，想必你对 Flex的概念有了一个基础的认识，让我们开始创建 Flex应用程序吧。

使用 Flex Builder

通过使用新项目向导 /New Flex Project Wizard创建一个 Flex项目（ File > New > Flex Project）。设计，编译，以及调试 Flex应用程序所需的所有工具，都被包括在 Flex Builder中了。

使用 Flex SDK

创建一个文件名后缀为 MXML的文本文件，在其中添加 MXML文件的基本元素（上述例子中的头两行代码），然后使用文档资料（特别是 Adobe Flex2 Language Reference）去研究各种组件的用法。编译和调试工具是以命令行的方法提供的。

转载自AIRIA.cn

评论

2 楼 jkfzero 2008-12-21  

这么大字没看到……尴尬……

1 楼 jkfzero 2008-12-21  

lz自己翻译的么？翻译一章大概要多久？