创建主/详细表单

Adobe Flash Builder 4 提供一个表单向导，它允许您使用服务器端数据快速构建一个主/详细界面并且几乎不用编写代码。首先定义 UI 控件，它将显示待编辑用户的主列表，然后生成一个用于显示和编辑详细信息的表单。

在本教程中，您将使用员工数据列表填充一个 ComboBox 控件，并自定义显示。然后，您将生成一个表单，它将显示选定员工的可编辑信息。最后，您通过实施一个按钮更新数据库中的员工记录。

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

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

2. 展开“Data Types”类别。如果列出 EmployeeSalesData 数据类型（如图 1 所示），您可以跳过下一部分创建主控件。

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

1. 在“Data/Services”视图中，右键单击 getAllData 函数，并选择“Configure Return Type”（请参阅图 2）。

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

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

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

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

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

6. 单击“OK”，然后单击“Next”。
7. 在“Modify Properties of Return Type”对话框中，将所有属性保持选中状态并单击“Finish”。
8. 单击“Finish”。

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

在这一部分中，您将学会如何使用员工销售数据填充 ComboBox 控件，从而创建主控件。

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

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

5. 切换到“Design”模式。
6. 找到“Components”面板（选择“Window”>“Components”）。

   ComboBox 控件将用于主用户界面图素。也可以使用 List 控件、DataGrid 控件或任何其他基于列表的控件。

7. 将一个 ComboBox 控件拖放到“Design”区域中（请参阅图 6）。

使用数据填充主控件

现在，您将使用 getAllData() CFC 函数显示 ComboBox 控件中的员工姓氏。

1. 将 F4CF_Getting_Started_Service 的 getAllData() 函数拖放到 ComboBox 控件上（请参阅图 7）

2. 在显示的“Bind To Data”对话框中，从“Bind to field”弹出菜单中选择“LASTNAME”（请参阅图 8）。

3. 单击“OK”。

   注意：此时，ComboBox 控件应包含一个图标，表明它绑定到数据（请参阅图 9）。

4. 保存文件，单击工具栏中虫子按钮左侧的“Play”（绿色圆形）按钮运行应用程序（请参阅图 10）。（也可以选择“Run”>“F4CF_Master_Detail”。）

5. 单击 ComboBox 控件以更改选定员工信息（请参阅图 11）。

默认情况下，“Bind To Data”对话框只允许您将数据库中的一个字段绑定到 ComboBox 显示。对于员工姓名的情况，它会出问题，因为可能有多个员工名字或姓氏相同。

在这一部分中，您将学会如何通过实施一个 ActionScript 函数，显示每个员工的名字和姓氏，从而跳过这个默认行为。

1. 在 Flash Builder 中，选择“Design”区域中的 ComboBox 控件，然后切换到“Source”模式。

   注意：您在一个模式中选定的代码或控件在切换到另一个模式时依然保持选定状态。

   请注意，ComboBox 代码定义了许多属性，其中包括控件的 x 和 y 位置。creationComplete 属性实际是一个事件，它指示应用程序从 getAllData() 操作检索数据（您之前从“Data/Services”视图将该操作映射到 CFC）。dataProvider 属性获得该服务调用的结果，并将它绑定到 ComboBox 控件。尽管只显示一个字段，该属性依然将数据库的所有数据列绑定并存储到 ComboBox 控件。dataProvider 属性值两侧的花括号向应用程序表明该值是动态的。

   LabelField 属性声明 ComboBox 控件中显示的变量。如果您从“Bind To Data”对话框中选择“LASTNAME”，向导会将“LASTNAME”字段添加到 LabelField 属性，指示 ComboBox 控件显示该值。

   在以下步骤中，您将使用 LabelFunction 属性调用您编写的一个自定义函数，它用于将 LASTNAME 和 FIRSTNAME 变量合并到 ComboBox 控件显示中。

2. 找到 <fx:Script> 标签区块。
3. 在填充 ComboBox 控件的函数下方，使用以下语法创建一个名为 displayFullName 的专用函数：

4. 该函数将一个字符串返回给 ComboBox 控件，字符串包含员工的名字和姓氏，所以请在函数声明末尾添加一个冒号和单词 String：

对于 ComboBox 控件显示的每条员工记录，它都会运行您刚才创建的这个函数。记住，dataProvider 包含每个员工的所有数据并且 ComboBox 控件不清楚您要显示的内容，所以它需要将所有数据传递给您，供您选择所需内容。

应用程序将数据传递到一个包含名称/值对的复杂对象中的函数。您可以为这个对象随意命名，通常将它命名为 item。将它的数据类型指定为普通 ActionScript Object 实例。

5. 在 displayFullName() 函数的括号之间，添加 item 参数并将它的数据类型指定为“Object”类：

现在，您可以一种简单的字符串连接合并数据库中列出的各个员工的名字和姓氏。记住，数据库中有两列为 FIRSTNAME 和 LASTNAME，可以通过传递给函数的 item 对象进行引用它们。

6. 使用 return 关键字将 FIRSTNAME 和 LASTNAME 字段返回 ComboBox 显示；请务必在两个字段之间添加一个空格，按惯例显示它们。

7. 找到 ComboBox 控件 MXML 代码。
8. 删除属性 labelField="LASTNAME"。
9. 将属性 labelFunction 添加到 ComboBox 控件标签中，将其值设置为 displayFullName。

   您的 ComboBox 控件 MXML 代码应当如下：

不要对属性 labelFunction 中的函数使用括号。您只是为 ComboBox 控件提供函数名称，而不是直接调用该方法。

10. 保存文件并运行应用程序。

    现在将显示员工的全名（请参阅图 12）。

在这一部分中，您将使用 Flash Builder Form Generation 向导创建一个详细表单，它将主控件（本例中为 ComboBox 控件）用作自己的数据提供程序。

1. 切换到“Design”模式并选择 ComboBox 控件。
2. 右键单击 ComboBox 控件并选择“Generate Details Form”（请参阅图 13）。

3. 在“Choose source”对话框中，保留默认设置不变并单击“Next”（请参阅图 14）。

4. 在“Property control mapping”对话框中，保留选定值（请参阅图 15）。

5. 单击“Finish”。
6. 将详细表单放在 ComboBox 控件右侧。
7. 保存文件并运行应用程序。此时表单中已填入 ComboBox 控件中第一个员工的相关信息。
8. 从 ComboBox 控件中选择一个员工。

此时表单应填入选定员工的员工销售数据（请参阅图 16）。

在这一部分中，您将一个 Button 控件添加到界面，它允许用户更新服务器上的员工信息。

1. 从“Components”视图中，将一个 Button 控件拖放到详细表单下方的“Design”区域中。

   如果放下 Button 控件时并未显示它，请单击“Design”模式按钮右侧的刷新按钮。

2. 双击 Button 控件，将它的标签更改为 Update（请参阅图 17）。

3. 找到 F4CF_Getting_Started_Service 数据服务的 updateItem() 函数。
4. 将 updateItem() 函数拖放到“Update”按钮上（请参阅图 18）。它将 updateItem() 服务操作与“Update”按钮关联在一起。

如果视图未自动切换，请单击“Source”按钮切换到“Source”模式。

当您将 updateItem() 函数放到 Button 控件上时，Flash Builder 会生成一个自定义 ActionScript 单击处理函数功能。

Flash Builder 应当已经选中 updateItem() 服务调用的括号之间的单词“item”：

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

此处使用单词 item 纯属巧合，它正好与 ComboBox 控件中的对象名称相同。记住，CFC 将 updateItem() 方法的期望参数名称定义为 item。

您要传递给 updateItem() 操作的服务对象包含传递的所有个别员工相关数据。这些信息存储在您之前命名的 EmployeeSalesData 数据类型中。

5. 将服务调用中的项引用更改为 employeeSalesData：

它将 employeeSalesData 对象以及从表单所做的全部更改传递回服务器，从而更新数据库。

6. 保存文件并运行应用程序。
7. 从 ComboBox 控件中选择一个员工。
8. 更改员工信息并单击“Update”按钮（请参阅图 19）。

9. 刷新浏览器，并选择您编辑过的员工记录。

员工信息此时应包含您指定的新值。

后续工作

在本教程中，您学会了如何使用 Flash Builder 创建主/详细界面并且几乎不用编写代码。您还学会了如何自定义 ComboBox 控件中显示的数据。您还可以通过使用 Adobe Flash Builder 4 beta 生成表单教程进一步了解返回数据和数据类型。