译者声明
1. 请大家在转载和使用时保持本文的完整性。
2. 本文所有资料均来自 Flex 官方文档，其英文版权归 Adobe 公司所有。
3. 文中某些内容根据译者的理解稍作改动，因此与原版英文在文字上不完全一
致。同时，由于译者水平有限，翻译不妥之处请大家多多见谅。
重庆大坪 刘刚
第四章 Flex编程入门教程
本章节将提供一系列的课程教授你如何开发 Flex 应用程序。
第一节 创建你的第一个应用程序
本节将向你展示如何使用 Adobe Flex Builder 编译和运行一个简单的 Flex 应用程序。其
中涉及的重点内容包括 Flex Builder 项目的概念。在 Flex Builder 中，所有的程序都被包含
在项目/projects 里。
创建一个项目
在 Flex Builder 中创建一个 Flex 应用程序之前，你必须首先要创建一个项目。当创建好
项目文件时，主 MXML 程序文件就已经准备好。然后你就可以在项目中添加各种资源，如
MXML 组件文件、ActionScript 文件等等。其主要操作步骤有：
1. 启动 Flex Builder 并从主菜单中选择 File > New > Flex Project，出现新项目向导/New
Flex Project wizard。
2. 在打开的屏幕中，选择基础数据选项/Basic data option 并点下一步/Next。接下来会询
问你指定保存项目文件的目录。
3. 在项目名称栏中输入 Lessons。在项目内容区域，确保使用默认目录选项/Use Default
Location option 被选定。默认的目录是 C:\Documents and Settings\your_user_name\My
Documents\Flex Builder 2。Flex Builder 将在该目录下创建 Lessons 文件夹。
4. 点击完成/Finish。 Flex Builder 创建好新的项目并在导航视图中进行显示。
新建项目向导将自动生成项目配置文件，存放被编译 SWF 文件的输出目录，以及主程
序文件 Lessons.mxml。
5. 确定自动构造选项/automatic build option 是打开的，选择 Select Project > Build
Automatically。
创建并运行应用程序
1. 如果 Lessons.mxml 文件没有被打开，请在导航视图中找到并双击来打开它。
2. 切换到 MXML 编辑器。
Flex Builder 将在 Lessons.mxml 文件中插入随后代码：
<?xml version="1.0" encoding="utf-8"?>
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" layout="absolute">
</mx:Application>
3. 在<mx:Application>组标签之间输入随后的代码来添加一个面板容器。
<mx:Panel title="My Application" width="200" height="300">
</mx:Panel>
面板容器是 Flex 布局的基本部件。
4. 在<mx:Panel>组标签之间输入随后的代码来添加一个 Label 控件。
<mx:Label text="Welcome to Flex!" mouseDownEffect="WipeRight" />
你可以点击设计按钮/Design button 是预览布局的效果。
5. 保存文件
每当你保存文件时，Flex Builder 就会自动地构造应用程序。
构造完成后，请点击运行/Run 按钮来执行程序。
一个浏览器打开并运行应用程序。
在这一节中，你学习了在 Flex Builder 中如何创建一个项目，以及如何编译和运用一个
Flex 应用程序。
第二节 获取并显示数据
为了在应用程序中使用数据，Adobe Flex 包括了与 HTTP servers，web services 或 remote
object services（Java objects）进行交互的组件，这些组件被称之为远程过程调用（RPC）服
务组件。
与 Adobe ColdFusion，PHP 或类似的服务器技术不同，Flex 应用程序并不直接连接数据
库。举个例子，你可以在一个 Flex 文件中插入 HTTP service 来实现与 ColdFusion 文件的交
互，以获取 MySQL 数据库中的数据，转换成 XML，然后返馈给 Flex 应用程序。
在本节中，你将学习创建一个简单的 blog 阅读器。你使用了被称之为 HTTPService 的
RPC service 组件从 RSS 中获取数据，然后将数据绑定到 Label、DataGrid、TextArea 和
LinkButton 控件上。
为了完成这个项目，执行的步骤如下：
1. 设置项目
2. 检查要访问的远程数据源
出于安全的原因，在客户端计算机上 Flash Player 中运行的应用程序，只有在满足如下
条件之一的情况下，才能访问远程的数据：
a. 应用程序的 SWF 文件与远程数据源位于同一个域中。
b. 使用代理，同时 SWF 文件与代理位于同一个服务器中。
c. 在数据源的宿主 web 服务器上安装 crossdomain.xml（跨域策略）文件。
本节中例子使用的是第三种方法。
插入并配置 blog 阅读器
在本小节，你将学习创建一个 blog 阅读器。
1. 在导航视图中选择 Lessons 项目，选择 File > New > MXML Application 并创建一个
叫 BlogReader.mxml 的文件。
2. 将 BlogReader.mxml 设置为被编译的默认文件。
3. 在 MXML 编辑器的设计模式下，从组件视图中拖拉出一个面板容器，并设置它的相
应属性值：
Title: Blog Reader
Width: 475
Height: 400
X: 10
Y: 10
4. 在设计模式下，从组件视图中拖拉出如下组件到面板容器里：
DataGrid
TextArea
LinkButton
5. 使用鼠标将控件布置成垂直排列的、左对齐的列。
6. 选择 DataGrid 控件并设置相应属性：
Id: dgPosts
X: 20
Y: 20
Width: 400
7. 选择 TextArea 控件并设置相应属性：
X: 20
Y: 175
Width: 400
8. 选择 LinkButton 控件并设置相应属性：
Label: Read Full Post
X: 20
Y: 225
评论0