第一章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="www.adobe/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布局数据的生成
因为Flex应用程序并不直接与一个数据库进行连接，所以你需要使用某种类型的服务来支持对数据的使用。在随后的例子中，将使用HTTPService组件从PHP所产生的一个XML 文件中获取数据。
连接数据库的第一步是生成将在Flex程序中使用到的数据。在与PHP的应用中，你将采用如下的步骤：
1. 创建一个数据库（如MySQL）。
2. 编写一个PHP脚本连接MySQL数据库并生成XML格式的数据。
这些步骤同样适合于在其它工作平台上生成的数据（如ASP.NET、 JSP等）。
连接外部数据源
对于PHP所生成的XML格式数据，你可以使用HTTPService组件来请求获取数据，
就象这样：
<mx:Application xmlns:mx="www.adobe/2006/mxml" layout="absolute">
<mx:HTTPService
id="productsRequest"
url="www.somesite/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="www.adobe/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. 安装l （跨域策略/cross-domain policy）文件在数据源的宿主Web服
务器上。l文件允许位于其它域中的SWF文件对数据源的访问。
第四节为Flex应用程序设计界面布局
让我们来详细分析一下前面那个“Say Hello to Flex“的简单例子，你可以通过设置组件
的属性值来控制Flex应用程序的界面布局，就象如下所示：
<?xml version="1.0" encoding="utf-8"?>
<mx:Application xmlns:mx="www.adobe/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>

版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。