Adobe
登录 我的货物 我的支持

作者 Trilemetry

Trilemetry

Content

已修改

22 March 2010

页面工具

Tags

必备知识

要成功完成本教程，请务必按照 ColdFusion 和 Flash Builder 4 beta 入门中所述设置并测试您的环境：

  1. 设置范例数据库和 ColdFusion 数据源。
  2. 设置 Flash Builder 数据服务项目。
  3. 创建一个 Flash Builder 数据服务，以连接到 CFC。

如果已成功完成“ColdFusion 和 Flash Builder 4 beta 入门”教程或本系列中的任何其他教程，您可以跳过上述步骤。

本教程适用于：

  • 经验丰富、但不具备 Adobe Flex 框架或 Adobe Flash Builder 4 经验的 ColdFusion 开发人员。
  • 熟悉 ColdFusion 组件的 ColdFusion 开发人员。

用户级别

全部

必需产品

Adobe Flash Builder 4 提供一个 Data Management 向导，它使您能够将 ColdFusion 服务器端创建、检索、更新和删除 (CRUD) 业务逻辑轻松映射到数据服务调用，然后将它们应用到 UI 控件。

在本教程中，您将为 CFC 创建一个数据服务，然后通过为 UI 控件创建 ActionScript 事件处理函数，使用 Flash Builder Data Management 向导映射应用程序与服务器之间的 CRUD 操作。

如果已成功完成“ColdFusion 和 Flash Builder 4 beta 入门”教程或本系列中的任何其他教程，您可以跳过上述步骤。

本教程适用于：

  • 经验丰富、但不具备 Adobe Flex 框架或 Adobe Flash Builder 4 经验的 ColdFusion 开发人员。
  • 熟悉 ColdFusion 组件的 ColdFusion 开发人员。

配置数据返回类型

正如介绍部分提到的那样，本教程使用的开发环境与 ColdFusion 和 Flash Builder 4 beta 入门教程以及本系列中的其他教程相同。

  1. 在 Flash Builder 4 beta 中找到“Data/Services”视图。您应当看到图 1 中所示的 F4CF_Getting_Started_Service 服务。
验证是否已定义 EmployeeSalesData 数据类型。
图 1.验证是否已定义 EmployeeSalesData 数据类型。
  1. 展开“Data Types”类别。如果列出 EmployeeSalesData 数据类型（如图 1 所示），您可以跳过下一部分将服务调用映射到 CRUD 功能。

如果未列出该数据类型，请按照以下步骤操作，将您的数据类型名称指定到对 CFC 方法的 getAllData 服务调用中检索到的返回数据。

  1. 右键单击“Data/Services”视图的“F4CF_Getting_Started_Service”选项中的“getAllData ”函数，并选择“Configure Return Type”（请参阅图 2）。
配置 getAllData() 函数的返回类型。
图 2.配置 getAllData() 函数的返回类型。

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

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

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

  1. 在“Configure Operation Return Type”对话框中，新建一个名为 EmployeeSalesData 的自定义数据类型（请参阅图 3）。
新建一个自定义数据类型。
图 3.新建一个自定义数据类型。
  1. 单击“Next”。
  2. 单击“Yes”单选按钮，指定操作需要远程凭据。
  3. 在“Remote Service Authentication”窗口中输入您的用户名和密码（请参阅图 4）。
输入 getAllData() CFC 函数的远程凭据。
图 4.输入 getAllData() CFC 函数的远程凭据。
  1. 单击“Next”。
  2. 在“Modify Properties of Return Type”对话框中，单击“Finish”。

您将看到“Data/Services”视图的“Data Types”类别中列出了 EmployeeSalesData 数据类型（请参阅图 5）。请注意，数据类型的属性是 CFC 方法返回的查询列。

数据类型及其属性。
图 5.数据类型及其属性。

将服务调用映射到 CRUD 功能

在这一部分中，您将使用 Data Management 向导将 CRUD 功能映射到相应的服务调用，从而添加、更新和删除数据库中的记录。

  1. 在“Data/Services”视图中，右键单击“EmployeeSalesData”数据类型并选择“Enable Data Management”。
  2. 在“Select Unique Identifier for the Data Type”对话框中，单击“SALESTARGETID”旁的复选框（请参阅图 6）。
“Select Unique Identifier for the Data Type”对话框。
图 6.“Select Unique Identifier for the Data Type”对话框。

您必须选择“SALESTARGETID”作为 EmployeeSalesData 数据类型的唯一标识符，因为它是数据库的主密钥。

  1. 单击“Next”。

    在“Map Data Management Operations”对话框中，您必须为各个字段选择适当的服务调用。

  2. 从弹出菜单中为“Create (Add)”操作选择 createItem() 服务操作。
  3. 为“Get Item”操作选择 getItem()。
  4. 为“Update Item”操作选择 updateItem()。
  5. 为“Delete Item”操作选择 deleteItem()。

    图 7 显示此时“Map Data Management Operations”对话框的外观。

“Map Data Management Operations”对话框。
图 7.“Map Data Management Operations”对话框。

您在之前部分中了解到 Flash Builder Data Service 向导会通过 CFC 检查各个服务的参数。对于 add 和 update 操作，您将一个复杂对象传递到 CFC，本例中这个复杂对象是 EmployeeSalesData 数据类型。getItem() 和 deleteItem() 操作只需要传递主密钥 SALESTARGETID 进行处理。

  1. 单击“Finish”。

    您应该看到数据管理图标（首尾相连、围成圆形的两个绿色箭头）此时已应用到 EmployeeSalesData 数据类型（请参阅图 8）。并且 SALESTARGETID 数据对象旁现在显示一个钥匙图标，表明它是受管数据的主密钥。

启用数据管理的 EmployeeSalesData 数据类型。
图 8.启用数据管理的 EmployeeSalesData 数据类型。

检索数据用于显示

在这一部分中，您将使用员工销售信息填充 DataGrid 控件。

  1. 在 F4CF_Getting_Started 项目中，关闭所有打开的 MXML 文件。
  2. 从菜单中选择“File”>“New”>“MXML Application”新建一个应用程序文件。
  3. 将这个文件命名为 F4CF_Managing_Data.mxml 并将“Layout”弹出列表设置为“None”。
  4. 单击“Finish”。

    注意：实际使用中，您的 Flash Builder 项目中通常只有一个主应用程序文件。使用本系列进行操作时，您将为每个教程新建一个主应用程序文件，以避免创建其他 Flash Builder 项目。

  5. 选择“Design”模式并找到“Components”视图。
  6. 选择 DataGrid 控件并将它拖到“Design”区域中（请参阅图 9）。
使用“Design”模式创建 DataGrid 控件。
图 9.使用“Design”模式创建 DataGrid 控件。
  1. 使用“Properties”视图，为 DataGrid 控件的“ID”属性输入 employeeDataGrid（请参阅图 10）。
使用“Properties”视图设置 DataGrid 控件的“ID”属性。
图 10.使用“Properties”视图设置 DataGrid 控件的“ID”属性。
  1. 在“Data/Services”视图中，将 getAllData() 函数拖放到 DataGrid 控件上（请参阅图 11）。

    DataGrid 控件将使用数据库中的列填充列标题。

使用 getAllData() 服务调用填充 DataGrid 控件。
图 11.使用 getAllData() 服务调用填充 DataGrid 控件。
  1. 保存文件，单击工具栏中的“Play”（绿色圆形）按钮运行应用程序（请参阅图 12）。也可以选择“Run”>“F4CF_Managing_Data”。
Flash Builder“Run”按钮
图 12.Flash Builder“Run”按钮

您将看到 DataGrid 控件填充了数据库的所有数据（请参阅图 13）。请注意，您可以编辑 DataGrid 控件中的所有单元格，但主密钥值除外。

填充了员工销售数据的 DataGrid 控件。
图 13.填充了员工销售数据的 DataGrid 控件。

应用和处理 Button 控件上的数据服务调用

在这一部分中，您将为显示添加 Button 控件，用户单击显示即可添加、删除或保存员工销售数据。然后，由 Flash Builder 为 Button 控件单击处理函数生成骨架代码。最后，编写一些简单的 ActionScript 逻辑，将数据发送回服务器。

将 Button 控件添加到界面

在以下步骤中，您将 Button 控件添加到应用程序显示，用户可以通过它触发添加、删除和保持功能。

  1. 从“Components”视图的“Controls”文件夹中，将三个 Button 控件拖放到“Design”区域中（请参阅图 14）。
DataGrid 组件下方的三个 Button 控件
图 14.DataGrid 组件下方的三个 Button 控件
  1. 双击各个 Button，将按钮标签分别更改为 Create、Delete 和 Save All。

处理 Create 按钮事件

在以下步骤中，您将为 Create Button 控件创建一个单击处理函数，它会将记录添加到 DataGrid 控件。

  1. 右键单击 Create Button 控件并选择“Generate Click Handler”。

    Flash Builder 4 将生成一个自定义 ActionScript 单击处理函数功能并切换到“Source”模式，以便您将业务逻辑添加到其中。

  2. 将 button1_clickHandler 函数重命名为 createButton_clickHandler 。

    注意：ActionScript 支持许多事件类型。event 参数的 MouseEvent 数据类型声明这一代码是为用户鼠标交互编写的。有关 ActionScript 事件的更多信息，请参阅一周学会 Flex 应用开发视频培训系列中的处理用户事件和事件对象介绍视频。

  3. 将 //TODO Auto-generated method stub 注释替换为使用 var 关键字新建的 ActionScript 变量。将它命名为 employee 并将数据类型指定为 EmployeeSalesData。将变量设置为 EmployeeSalesData 的一个新实例。
protected function createButton_clickHandler(event:MouseEvent):void { var employee:EmployeeSalesData = new EmployeeSalesData(); }

这一代码创建了您之前定义的 EmployeeSalesData 数据类型的一个新实例。记住，getAllData() 服务操作中收到的各个记录是 EmployeeSalesData 的一个实例，它包含 SALESTARGETID、FIRSTNAME、LASTNAME 以及数据库中所有其他属性的值。如果您剪切并粘贴这一代码，Flash Builder 不会添加 import 语句。现在，将它手动添加到另一个 import 语句上方。

  1. 请注意，当您键入 new EmployeeSalesData() 语句时，Flash Builder 会将以下 import 语句自动添加到 Script 区块开头，允许您在 ActionScript 代码中使用这个类。
import valueObjects.EmployeeSalesData;
  1. 在变量声明下方，定义 SALESTARGETID、FIRSTNAME、LASTNAME、PHONE、EMAIL、REGION、EMPIMAGE、YTD 和 Q1GOAL 属性：
protected function createButton_clickHandler(event:MouseEvent):void { var employee:EmployeeSalesData = new EmployeeSalesData(); employee.SALESTARGETID = "100039"; employee.FIRSTNAME = "New"; employee.LASTNAME = "New"; employee.PHONE = "000-000-0000"; employee.EMAIL = "New"; employee.REGION = "New"; employee.EMPIMAGE = "New"; employee.Q1GOAL = 0; employee.YTD = 0; }

您刚使用新数据填充了 EmployeeSalesData 对象的新实例。

注意：在本例中，您将对 SALESTARGETID 属性进行硬编码。

  1. 在 createButton_clickHandler() 函数的员工属性声明下方，将新建的员工信息附加到 DataGrid 控件的 dataProvider 属性后。
protected function createButton_clickHandler(event:MouseEvent):void { ... employee.YTD = 0; employeeDataGrid.dataProvider.addItem(employee); }

DataGrid 控件的 dataProvider 属性包含一个复杂对象，该对象包含所有记录的全部 EmployeeSalesData 实例。DataGrid 控件的 addItem() 方法将指定项（本例中为员工）添加到数据末尾。

  1. 将 DataGrid 控件的 verticalScrollPosition 属性设置为根据添加到控件的新行做出调整。
protected function createButton_clickHandler(event:MouseEvent):void { ... employeeDataGrid.dataProvider.addItem(employee); employeeDataGrid.verticalScrollPosition = employeeDataGrid.dataProvider.length - 1; }

dataProvider 属性有一个长度值，它包含 DataProvider 控件中的记录数。ActionScript 从零开始计数，所以必须从长度中减去 1 才能获得最后一个记录的索引。通过为 verticalScrollPosition 属性设置这种计算方法，您强制 DataGrid 控件的滚动条在您添加新记录时移到底部。

  1. 切换到“Design”模式。
  2. 选择“Create”按钮。
  3. 使用“Properties”视图将 On Click 属性的值更改为 createButton_clickHandler(event)（请参阅图 15）。
设置“Create”按钮的 On Click 属性。
图 15.设置“Create”按钮的 On Click 属性。
  1. 保存文件并运行应用程序。
  2. 单击“Create”按钮。

DataGrid 控件底部将添加一个条目（请参阅图 16）。但是请注意，您只是将数据添加到 DataGrid 控件。您并未将新记录添加到服务器。

向 DataGrid 控件添加新记录。
图 16.向 DataGrid 控件添加新记录。

处理 Save All 按钮事件

在以下步骤中，您将创建一个单击处理函数，它将对 DataGrid 控件的所有更改提交给服务器。

  1. 返回“Design”模式。
  2. 右键单击 Save All Button 控件并选择“Generate Click Handler”。

    注意：Flash Builder 将生成一个事件处理函数功能并切换到“Source”视图。

  3. 将生成的函数重命名为 saveAllButton_clickHandler()。
  4. 将 //TODO Auto-generated method stub 注释替换为对 F4CF_ManagingData_Service 的 commit() 函数的调用，如以下代码片段所示：
protected function saveAllButton_clickHandler(event:MouseEvent):void { f4CF_Getting_Started_Service.commit(); }

记住，您之前创建过一个名为 F4CF_Managing_Data_Service 的数据服务。Flash Builder 已生成可以使这个数据服务正常使用所需的全部代码。您在 ActionScript 中使用相同名称引用该服务作为数据服务，不同之处在于首字母小写。这是实例命名的常见做法。

commit() 函数是数据服务的内建函数，它将运行您在 Data Management 向导中定义为更新操作的服务。在本例中，它将为 DataGrid 控件中的各个记录运行一次 updateItem() 函数。

  1. 切换到“Design”模式。
  2. 选择“Save All”按钮。
  3. 使用“Properties”视图将 On Click 属性的值更改为 saveAllButton_clickHandler(event)。
  4. 保存文件并运行应用程序。
  5. 单击 Create Button 控件并添加一个新记录。
  6. 单击 Save All Button 控件，将更改发送到服务器。
  7. 刷新浏览器以刷新应用程序。

此时可以看到新记录已添加到数据库中。

处理 Delete 按钮事件

在以下步骤中，您将为 Delete Button 控件创建一个单击处理函数，可以使用它删除 DataGrid 控件中的记录。

  1. 返回“Design”模式。
  2. 右键单击 Delete Button 控件并选择“Generate Click Handler”。

    注意：Flash Builder 将生成一个单击处理函数功能并切换到“Source”视图。

  3. 将生成的函数重命名为 deleteButton_clickHandler。
  4. 在 deleteButton_clickHandler() 函数中，使用 deleteItem() 服务操作从使用主密钥 SALESTARGETID 的 DataGrid 控件 employeeDataGrid 中删除选定行：
protected function deleteButton_clickHandler(event:MouseEvent):void { f4CF_Getting_Started_Service.deleteItem(employeeDataGrid.selectedItem.SALESTARGETID); }
  1. 返回“Design”视图。
  2. 选择 Delete Button 控件并找到“Properties”视图。
  3. 将“On Click”属性更改为“deleteButton_clickHandler event ”。
  4. 保存，然后运行该文件。
  5. 选择您刚才创建的记录，单击“Delete”按钮。

刷新浏览器时，可以看到已经从数据库中删除该记录。

后续工作

在本教程中，您学会了如何使用 Flash Builder Data Services 和 Data Management 向导创建客户端到服务器 CRUD 功能。要进一步了解如何配合使用 Flex 和 ColdFusion，请参阅以下教程：

More Like This

产品

解决方案

行业

帮助

学习

购买方式

下载

公司

选择您的地区

Copyright © 2012 Adobe Systems Incorporated。保留所有权利。

使用本网站表明您同意使用条款和在线隐私政策（2009 年 7 月 14 日更新）。

京 ICP 备 10217899 号 京公网安备 110105010404