ColdFusion 和 Flash Builder 4 beta 入门

Adobe Flash Builder 4 之前称为 Flex Builder，它简化了 Adobe ColdFusion 与 Adobe Flex 框架的集成，可用于创建 SWF 应用程序。您现在可以使用简单的向导将 ColdFusion 组件 (CFC) 导入项目，并通过对 CFC 函数的服务调用访问数据。通过单击数据对象并将它拖到控件上，您还可以使用返回数据轻松填充 Flex UI 控件。

在本教程中，您将学会如何设置 ColdFusion 数据源和 Flash Builder 项目，使用 Flash Builder Data Services 向导为范例应用程序 Fictitious Sales Planner 导入 CFC。然后，您将访问某个 CFC 操作，将数据返回 SWF 应用程序并填充 Flex 框架 DataGrid 控件。

所需时间：15 分钟。

Flex 和 ColdFusion 迷你学习中心的许多教程使用同一范例数据库，其中包含 Fictitious Sales Planner 的员工销售信息。在这一部分中，您将设置 HSQLDB 数据库引擎和范例数据库，并创建 ColdFusion 数据源。

注意：以下设置说明假设您在本地安装了开发人员单机版 ColdFusion 8 Professional

设置 HSQLDB 数据库引擎

以下步骤说明了如何设置开放轻型源代码 HyperSQL Database HSQLDB 引擎。

我们选用 HSQLDB 是因为它经过简单设置即可用于本地 ColdFusion 环境，并且除了本教程随附的学生文件，不需要下载其他内容：

1. 下载 f4cf_getting_started_db_hsqldb.zip 范例文件（如果您还未这样做）。
2. 将文件解压缩到您的计算机并查看 hsqldb_license.txt 文件。
3. 停止 ColdFusion 服务器（如果它处于运行状态）。
4. 将文件 hsqldb.jar 移至 \wwwroot\WEB-INF\lib 目录。

文件 HSQLDB.jar 是数据库引擎，启动 ColdFusion 服务器时会自动加载它。

设置范例数据库

在这一部分中，您将设置 HSQLDB 引擎中的 F4CF_FictitiousSalesPlanner 数据库实例。这个数据库包含范例应用程序 Fictitious Sales Planner 的员工销售数据，Flex 和 ColdFusion 迷你学习中心的其他教程也使用它：

1. 下载 f4cf_getting_started_db_fictitious.zip 范例文件（如果您还未这样做）。
2. 将文件解压缩到 \wwwroot\WEB-INF 目录并查看内容：
   • \wwwroot\WEB-INF 文件夹包含一个名为 db 的文件夹。这个文件夹可以帮助您管理 HSQLDB 数据库实例文件。
   • db 文件夹包含一个名为 F4CF_FictitiousSalesPlanner 的子文件夹。这个子文件夹包含这个数据库实例的文件，它还可以帮助您管理文件。
   • F4CF_FictitiousSalesPlanner 文件夹包含两个文件，文件名分别为 F4CF_FictitiousSalesPlanner.script 和 F4CF_FictitiousSalesPlanner.properties。当 ColdFusion 服务器启动时，HSQLDB 引擎会读取这两个文件。.properties 文件包含数据库配置属性，而 .script 文件则包含生成数据库表格和数据的 SQL 脚本语句。数据存储在 ColdFusion 服务器内存中，对数据所做的更改会定期写入一个日志文件中。
3. 启动 ColdFusion 服务器。

将初始化 HSQLDB 引擎，并在 ColdFusion 服务器的内存中新建 F4CF_FictitiousSalesPlanner 数据库实例。

配置 ColdFusion 数据源

在这一部分中，您将使用 ColdFusion Administrator 为 HSQLDB 数据库实例创建数据源：

1. 登录 ColdFusion Administrator，并新建一个名为 F4CF_FictitiousSalesPlanner、“Driver”类型为“other”的数据源（请参阅图 1）。

2. 单击“添加”按钮。
3. 在“JDBC URL”框中，输入 jdbc:hsqldb:file:yourlocalpath，其中 yourlocalpath 是系统中 F4CF_FictitiousPlanner.properties 文件的完整路径。文件名后不需要 .properties 扩展名（请参阅图 2）。

   例如，对于 PC 单机版 ColdFusion 安装，请复制并粘贴以下值：

   jdbc:hsqldb:file:C:\ColdFusion8\wwwroot\WEB-INF\db\F4CF_FictitiousSalesPlanner\F4CF_FictitiousSalesPlanner

   对于 Mac 单机版 ColdFusion 安装，请使用以下值：

   jdbc:hsqldb:file:/Applications/ColdFusion8/wwwroot/WEB-INF/db/F4CF_FictitiousSalesPlanner/F4CF_FictitiousSalesPlanner

   图 2 显示 Windows XP 上默认的单机 ColdFusion 安装的设置。

图 3 显示 Mac OS X 上默认的单机 ColdFusion 安装的设置。

4. 将“Driver Class”设置为 org.hsqldb.jdbcDriver。
5. 为“Driver Name”键入 JDBC Driver。
6. 为“User name”键入 sa。
7. 单击“Submit”。

如图 4 所示，屏幕顶部将显示消息 data source updated successfully 并且表格中显示 OK 状态。

在本教程的稍后部分中，您将测试 F4CF_FictitiousSalesPlanner 数据源的安装情况。

调试 HSQLDB 数据源

如果 ColdFusion Administrator 报告连接到数据库时出错，您可能需要重新启动 ColdFusion 服务器以刷新内存中的 HSQLDB 引擎和数据库，然后尝试再次设置数据源。

在应用程序开发过程中，切记 HSQLDB 引擎和数据库存储在 ColdFusion 服务器内存中。如果更改了 .script 或 .properties 文件，您可能需要重新启动服务器。

并且，如果出错（如图 5 所示，找不到表明数据库表格），可考虑 HSQLDB 数据源路径可能配置不正确。如果数据源路径指向错误的位置并且 HSQLDB 未找到所需的 .properties 文件，它将创建一个包含空数据库的 .properties 文件。数据源将进行验证，但表格、列和数据不存在。

注意：如果您正在 Flex 和 ColdFusion 迷你学习中心的入门部分，请继续。如果您从另一个面向 ColdFusion 开发人员的 Flex 教程转到本部分，请返回该教程继续执行您的后续任务。

所需时间：5 分钟。

在这一部分中，您将使用 ColdFusion 设置一个 Flash Builder 数据服务项目，用于 Fictitious Sales Planner 范例应用程序。

创建一个 Flash Builder 项目

Flash Builder 项目类似于 Dreamweaver 站点。您将创建一个项目，用于存储和管理代码文件。按照以下步骤操作，创建一个 Flash Builder 项目：

1. 打开 Flash Builder 4 beta。

   注意：假设您使用的是单机（而不是插件）版 Flash Builder 4 beta。如果已将 Eclipse 用于编程环境，您可以安装插件版。但是以下步骤会略有不同。我们还假设您在本地安装了单机版 ColdFusion。您可能需要根据自定义安装更改路径。

2. 如图 6 所示，选择“File”>“New”>“Flex Project”。

将显示“New Flex Project”对话框。如图 7 所示，设置新项目：

• 将项目命名为 F4CF_Getting_Started。
• 务必为本例使用默认位置。
• 在对话框的“Server technology”部分，从“Application server type”下拉菜单中选择“ColdFusion”。（请注意，当您选择服务器技术时，默认情况下会选中“Use remote object access service”。）
• 选择“ColdFusion Flash Remoting”选项。

3. 单击“Next”。

连接到 ColdFusion 服务器

按照以下步骤操作，将 Flash Builder 项目配置为与 ColdFusion 服务器一起使用：

1. 在“Configure ColdFusion Server”对话框中，为“ColdFusion installation type”选择对应项。图 8 显示在 PC 上使用单机模式的 ColdFusion 默认安装时的设置。

注意：如果您曾在 Mac OS X 计算机上使用单机模式的 ColdFusion 默认安装，ColdFusion 设置如下：

• ColdFusion 根文件夹： /Applications/ColdFusion8
• 内建 ColdFusion Web 服务器 Web 根目录： /Applications/ColdFusion8/wwwroot
• 内建 ColdFusion Web 服务器根 URL： http://localhost:8500

2. 单击“Validate Configuration”按钮以确保设置正确。

   请注意，“Output”文件夹在 ColdFusion 服务器 Web 根目录中。

   Flash Builder 会根据项目名称自动创建文件夹名称并附加 –debug。在这种情况下，Flash Builder 会将编译后的 Flash SWF 和 HTML 打包程序文件放入 F4CF_Getting_Started-debug 文件夹。

   注意：如果在 Mac OS X 计算机上使用单机模式的 ColdFusion 默认安装，“Output”文件夹设置如下： /Applications/ColdFusion8/wwwroot/F4CF_Getting_Started-debug。

   记住，Flash 源文件不同于 ColdFusion 源文件，前者不会部署到 Web 服务器。而是将源代码编译到 HTML 打包程序文件中引用的一个 SWF 文件中。SWF 和 HTML 文件将上载到服务器。

3. 单击“Finish”创建 Flash Builder 项目。

您将看到图 9 中的 Package Explorer 所示的 F4CF_Getting_Started 项目。同时请注意，将创建一个同名的 MXML 应用程序文件并打开它供您编辑。请注意，图 9 显示的是“Design”模式中的“MXML Editor”选项卡。单击选项卡下方的“Source”按钮可以看到“Code”视图中的编辑器。

Flex 框架提供两种编程语言：ActionScript（一种完全面向对象的语言）以及 MXML（一种基于 XML 的语言，语法类似于 CFML）。

注意：如果您正在 Flex 和 ColdFusion 迷你学习中心的入门部分，请继续。如果您从另一个面向 ColdFusion 开发人员的 Flex 教程转到本部分，请返回该教程继续执行您的后续任务。

所需时间：5 分钟。

现在已设置好数据库、数据源和 Flash Builder 项目，您马上可以体验到从 CFC 方法检索数据并将它绑定到 Flex 用户界面图素有多简单。

检查 ColdFusion 组件

ColdFusion 组件是一种将业务逻辑整理为可重用代码的方式。ColdFusion MX 中引入了这些组件，它们取代了内联数据库查询结构。换言之，您不必在 CFML 页面顶部放置 cfquery 标签，而是调用放入 CFC 方法中的查询，根据需要传入参数。

注意：有关 CFC 的更多信息，请参阅文章理解 CFC 在 Flex 应用程序开发中的角色。

1. 下载提供的 f4cf_getting_started_tutorial.zip 文件并将它解压缩到本地磁盘中（如果您还未这样做）。
2. 将文件 SalesTarget.cfc 移至 \wwwroot\F4CF_Getting_Started-debug 目录。

   当您配置 Flash Builder 项目时，将自动引用并创建一个项目特定的调试文件夹，将它作为编译后 SWF 和相关 HTML 打包程序文件的输出位置。因为这是一个 ColdFusion 数据服务项目，所以调试文件夹在 ColdFusion 服务器的 Web 根目录中。图 10 表明 CFC 与 SWF 及 HTML 打包程序文件在同一目录中。

   注意：有关 SWF 和 HTML 打包程序文件的更多信息，请参阅部署资源。默认 Flash Builder 编译设置将配置为每当保存源文件时立即创建这些文件。

3. 在代码编辑器或浏览器中打开 SalesTarget.cfc 文件。

您会发现使用 cffunction 标签定义了许多 CFC 方法。每个方法包含 Fictitious Sales Planner 应用程序的内嵌式业务逻辑。在本教程中，您将使用 getAllData 操作检索数据库中的所有员工。

注意：每个方法都将 access 属性设置为 remote，它使得方法可以与 SWF 应用程序一起使用。

使用范例数据源测试 CFC

现在，您将使用提供的测试文件确保 Fictitious 员工数据源设置正确：

1. 下载提供的 f4cf_getting_started _db_test.zip 文件并将它解压缩到本地磁盘（如果您还未这样做）。
2. 将文件 SalesTargetTest.cfm 移至 \\wwwroot\F4CF_Getting_Started-debug 目录。
3. 打开浏览器并运行 SalesTargetTest.cfm 页面。

   cfdump 屏幕中将显示所有数据库记录（请参阅图 11）。

使用 Data Services 向导导入 CFC

接着，使用 Flash Builder 中的“Data/Services”视图将 CFC 导入项目：

1. 在 Flash Builder 中找到图 12 中的“Data/Services”视图。

   （如果未打开此视图，请选择“Window”>“Data/Services”。）

2. 单击“Connect to Data/Service”链接以运行 Data Services 向导。

   注意：选择“Data”>“Connect to Data/Service”也可以打开 Data Services 向导。

3. 为服务类型选择“ColdFusion”（请参阅图 13）。

4. 单击“Next”。
5. 将服务命名为 F4CF_Getting_Started_Service 并如图 14 所示配置它。

   注意：服务名是任意的。您可以对它随意命名；但它与 CFC 相关，所以它的命名往往很相似。在本例中，可以将它命名为 SalesTarget_Service。我们选择命名服务时与本教程保持一致。

   • 确保选中“Import CFC”选项。
   • 指定 CFC 位置：单击“CFC Location”字段旁的“Browse”按钮，导航到 \wwwroot\F4CF_Getting_Started-debug\ 目录，选择 SalesTarget.cfc 文件并单击“Open”。

请注意，“Package”设置为 services.f4cf_getting_started_service。完成以下步骤后，您将看到 Package Explorer 中项目的 src 文件夹包含一个 services.f4cf_getting_started_service 包。其中包含 Flash Builder 向导自动生成的 ActionScript 文件。

6. 单击“Next”。
7. 如图 15 所示，在“Remote Service Authentication”对话框中，输入您的 RDS 用户名和密码。

   注意：请务必在 ColdFusion Administrator 中启用 RDS。记住，默认用户名是 admin。

8. 单击“OK”。

   Flash Builder 访问并检查 CFC，返回可用操作的相关信息以及与这些操作关联的数据类型。如图 16 所示，“Service Operations”窗口将显示 CFC 中的各个方法。

9. 单击“Finish”。

   Flash Builder 创建服务。如果您之前未选中“Using Remote Services”对话框左下角的复选框，您可能会看到图 17 所示的指示。

本教程的其余部分将指导您逐步完成这些指示。

10. 单击“OK”关闭“Using Remote Services”对话框。
11. 在“Data/Services”视图中找到图 18 所示的 CFC 操作。

请注意，getAllData() 方法名后面是单词 Object。当 Flash Builder 检查 CFC 并提供方法相关信息时，它将该操作返回的 ColdFusion 查询映射到一个普通 ActionScript Object 数据类型。

所需时间：15 分钟。

现在已经在 Flash Builder 中检查了 CFC 并设置了 Flash Builder 项目，您将使用返回数据创建一个简单的员工数据显示。

配置数据返回类型

在这一部分中，您将自己的数据类型名称指定到 CFC 方法调用中检索的返回数据：

1. 右键单击 F4CF_Getting_Started_Service 中的 getAllData() 操作，并选择“Configure Return Type”（请参阅图 19）。

查询的每条记录将放入 ActionScript 对象中，并在名称/值对中设置每列数据（FIRSTNAME、LASTNAME、EMAIL）。每条记录从零开始编写索引。

注意：不同于 ColdFusion，ActionScript 是一种零索引语言。

向导允许您为数据指定返回类型名称，而不是像往常那样将返回数据作为对象进行引用。接下来您将这样做。

2. 在“Configure Operation Return Type”对话框中，新建一个名为 EmployeeSalesData 的自定义数据类型（请参阅图 20）。

3. 单击“Next”。
4. 在“Create New Data Type”对话框中，单击“Yes”选项以指定操作需要远程凭据。
5. 在“Remote Service Authentication”窗口中输入您的用户名和密码（请参阅图 21）。

6. 单击“OK”，然后单击“Next”。
7. 检查“Modify Properties of Return Type”对话框，并单击“Finish”。

此时展开“Data/Services”视图中的“Data Types”分类可以看到 EmployeeSalesData data 数据类型定义为一个包含 EMAIL、FIRSTNAME 和 LASTNAME 属性的对象（请参阅图 22）。

将数据绑定到 Flex 组件

配置方法返回类型后，您就可以将它轻松绑定到组件。这一部分说明了如何将 EmployeeSalesData 数据类型绑定到 DataGrid 组件：

1. 在 Flash Builder 中单击“Editor”选项卡下方的“Design”按钮，切换到“Design”模式（请参阅图 23）。

2. 在“Components”视图中找到 DataGrid 控件（请参阅图 24）。

3. 如图 25 所示，将 DataGrid 组件拖放到 F4CF_Getting_Started.mxml 文件的“Design”视图中。

4. 将 getAllData() CFC 函数从“Data/Services”视图拖放到 DataGrid 控件上，使用 EmployeeSalesData 数据类型填充它。

   DataGrid 控件现在包含与 EmployeeSalesData 数据类型中的属性匹配的列（请参阅图 26）。

5. 选择“File”>“Save”保存 MXML 文件。
6. 单击“Run”（绿色圆形）按钮测试文件（请参阅图 27）。

图 28 显示使用 CFC 数据填充的 DataGrid 控件。请注意，Flash Builder 已打开 Web 根目录的 F4CF_Getting_Started-debug 文件夹中的 HTML 打包程序文件。

后续工作

在本教程中，您设置了一个 HSQLDB 引擎、一个范例数据库和一个 ColdFusion 数据源。然后，将一个 Flash Builder 项目设置为使用 ColdFusion 服务器技术。最后，您亲身体验到从 CFC 方法检索数据并将它绑定到 Flex 用户界面图素有多简单。

要进一步了解如何配合使用 Flex 和 ColdFusion，请参阅以下教程：

• 将数据绑定到 UI 组件
• 生成表单
• 创建主/详细表单
• 管理数据
• 使用 ColdFusion URL 变量部署 Flex 应用程序