将数据绑定到 UI 组件

Adobe Flash Builder 4 beta 之前称为 Flex Builder，它可以通过一个十分简单的界面将服务器端数据绑定到 Flex 框架用户界面控件。可以使用“Design”模式拖放组件，从而创建布局并绑定数据。您可以在短短几分钟内创建一个动态填充的应用程序，无需编写任何代码。

在本教程中，您将学会如何使用 DataGrid 和 PieChart 控件，将它们绑定到 ColdFusion Component (CFC) 函数返回的数据。还将了解到如何同步两个控件中的数据。

本教程适用于：

• 正在浏览 Flex 和 ColdFusion 迷你学习中心教程的开发人员，这些教程以 Fictitious Sales Planner 示例为基础
• 经验丰富、但不具备 Adobe Flex 框架或 Adobe Flash Builder 4 beta 经验的 ColdFusion 开发人员
• 熟悉 ColdFusion 组件的 ColdFusion 开发人员

正如介绍部分提到的那样，本教程使用的开发环境与 Getting started with ColdFusion and Flash Builder 4 入门以及本系列中的其他教程相同。在这一部分中，您将再命名一个数据类型，与另一个服务调用一起用于 CFC 函数：

1. 在 Flash Builder 4 beta 中找到“Data/Services”视图。您应当看到图 1 中所示的 F4CF_Getting_Started_Service 服务。

2. 在“Data/Services”视图中，右键单击 F4CF_Getting_Started_Service 服务的 getEmployeeDataByRegion() 函数，并选择“Configure Return Type”（请参阅图 2）。

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

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

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

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

   注意：这个数据类型不同于 ColdFusion 和 Flash Builder 4 beta 入门教程中定义的 EmployeeSalesData 数据类型，因为它要求您提供一个名为 region 的参数，用于限制数据返回给特定地区的员工。它从数据库返回的数据列也更少。

4. 单击“Next”。
5. 在“Create New Data type”对话框的“Enter Value”列中，键入 Central（请参阅图 4）。

必须输入参数值 Central 才能返回查询结果。这只是证明查询可以正确运行的一种方法，以便您为它定义返回类型名称。在后续步骤中，您将通过更改代码，真正传递应用程序中的参数值。

6. 单击“Yes”选项，指定操作需要远程凭据。
7. 在“Remote Service Authentication”窗口中输入您的用户名和密码（请参阅图 5）。

8. 单击“OK”。
9. 单击“Next”。
10. 检查“Modify Properties of Return Type”对话框，并单击“Finish”。

您将看到“Data/Services”视图的“Data Types”类别中列出了 EmployeeSalesDataByRegion 数据类型，如图 6 所示。请注意，数据类型的属性是 CFC 方法返回的查询列。

CFC 返回的数据包含与地区相关的员工信息：Northwest、Southwest、Central、Northeast 和 Southeast。请参阅使用 ColdFusion URL 变量部署 Flex 应用程序进一步了解如何将动态数据传递给应用程序。在本教程中，您将对地区值进行硬编码。

在这一部分中，您将 EmployeeDataByRegion 数据绑定到 Flex 框架 DataGrid 控件。要做到这一点，您无需编写任何代码，使用 Flash Builder 内建向导即可生成所有代码。

将 DataGrid 控件加入布局中

您将使用 Flash Builder“Design”模式中的拖放功能添加 DataGrid 组件：

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

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

5. 切换到“Design”模式。
6. 在“Components”视图中，将一个 DataGrid 控件拖到“Design”区域（请参阅图 7）。

将数据与 DataGrid 控件关联在一起

此时，将“Data/Services”视图中的函数拖放到 DataGrid 控件上，以绑定返回数据：

1. 在“Data/Services”视图中选择 getEmployeeDataByRegion() 函数。
2. 将函数拖放到“Design”区域的 DataGrid 控件上。

   此时将切换到“Source”模式，并将突出显示代码中的 region 变量，用于创建 DataGrid 控件（请参阅图 8）。

3. 将 region 变量替换为字符串值 Central：

注意：如上所述，您将把 getEmployeeDataByRegion 函数的属性 region 设置为一个硬编码值。请参阅使用 ColdFusion URL 变量部署 Flex 应用程序进一步了解如何将动态数据传递给应用程序。

4. 切换回“Design”模式。

   您应当看到 DataGrid 控件列标题反映出已绑定数据（请参阅图 9）。

5. 保存文件，然后单击圆形的绿色“Run”按钮运行应用程序（请参阅图 10），也可以从菜单中选择“Run”>“Run F4CF_Binding_Data”。

如图 11 所示，您将看到 DataGrid 控件填充了来自 ColdFusion 数据源的数据。

在这一部分中，您将数据绑定到 Flex 框架 PieChart 控件。与 DataGrid 控件相同，您无需编写任何代码就可以做到这一点。

将 PieChart 控件加入布局中

这里依然使用 Flash Builder“Design”模式中的拖放功能将 PieChart 控件加入应用程序布局中：

1. 确保处于“Design”模式中。
2. 从“Components”视图的“Charts”文件夹，将一个 PieChart 控件拖放到 DataGrid 控件下的屏幕中。

   您应当看到图 12 所示的“Create Chart”对话框。请注意，“Series elements”区域预填充了一个名为“Series 1”的图素。

   不需要显示附加到 UI 控件的所有数据。PieChart 控件的“series”属性允许您定义要显示在图表中的具体数据字段。您可以在图表中标出多组数据字段，但在本例中只使用一个。

3. 将“ID”属性从“piechart1”更改为“YTDPieChart”（请参阅图 12）。

4. 将文本框中的“Series 1”更改为“YTDSeries”。
5. 单击“OK”，将 PieChart 控件加入显示中。

注意：您可能需要单击“Design”模式按钮右侧的“Refresh”按钮，才能显示图表。您也可以双击包含 MXML 文件名的“Editor”选项卡，展开或折叠“Design”区域。如果“Design”模式左上角显示图例，将它拖放到 PieChart 控件旁。

将数据与 Pie Chart 关联在一起

在这一部分中，您将数据绑定到 PieChart 控件：

1. 在“Data/Services”视图中，将您绑定到 DataGrid 控件的同一个 getEmployeeDataByRegion() 函数拖放到 PieChart 控件上。

   请注意，将 getEmployeeDataByRegion() 函数调用的新实例拖到 PieChart 控件，您实际上在这个应用程序中对这个函数调用了两次：一次针对 DataGrid 控件，另一次针对 PieChart 控件。

   您将看到“Bind To Data”对话框（请参阅图 13）。“Configure chart”标题下有一个表格，它包含两列：Series 和 Field。

2. 单击“Field”列中的单元格。您将看到一个下拉列表，其中包含拖到 PieChart 控件上的函数的所有属性。
3. 从下拉列表中选择“YTD”（请参阅图 13）。

4. 单击“OK”。

   此时将切换到“Source”模式，并在 PieChart 控件的 getEmployeeDataByRegion() 函数调用中突出显示 region 属性（请参阅图 14）。

5. 将变量 region 替换为字符串值 Central。

   注意：记住我们在本教程中将把这个值硬编码。

6. 保存文件并运行应用程序，可以看到 PieChart 控件的 YTD 切片会完成动态填充（请参阅图 15）。

注意：如果系统中没有得到许可的 Flex Builder 3，PieChart 控件上会显示一个水印。

7. 更改 DataGrid 控件中任何一行的 YTD 值。

请注意，PieChart 控件数据没有变化。记住，您对服务分别发出了两个调用，并分别检索到返回数据的两个实例。

在这一部分中，您将 PieChart 控件绑定到与 DataGrid 控件的绑定操作相同的数据：

1. 返回“Design”模式。
2. 选择 PieChart 控件。请注意图 16 中控件左上角的互锁环图标。这个图标表示数据绑定。

3. 双击数据绑定图标。

   您应当看到图 17 所示的“Bind Operation”对话框和消息。

4. 单击“OK”。
5. 在“Bind To Data”对话框中，从“Existing call result”弹出列表中选择“getEmployeeDataByRegionResult”（请参阅图 18）。

请注意，“getEmployeeDataByRegionResult”是绑定到 DataGrid 控件的服务调用的结果数据，而“getEmployeeDataByRegionResult2”是绑定到 PieChart 控件的服务调用的结果数据。

6. 单击“OK”。
7. 保存并运行该应用程序。
8. 如图 19 所示，运行应用程序并更改任何行的 YTD 值。请注意，PieChart 控件中的切片会调整大小以反映 DataGrid 控件值的变化。

后续工作

在本教程中，您学会了如何使用 Flash Builder 将服务器数据轻松绑定到 Flex 框架组件，以及该操作如何可以实现组件的交互性。要进一步了解服务调用、返回数据以及数据类型，请参阅生成表单教程。

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

• 创建主/详细表单
• 管理数据
• 使用 ColdFusion URL 变量部署 Flex 应用程序