生成表单

Adobe Flash Builder 4 之前称为 Flex Builder，您可以使用它的表单向导快速创建填充了数据的表单。您可以使用它轻松创建出用于操纵数据的界面。

在本教程的稍后部分中，您将使用 Flash Builder 控件创建一个简单的员工搜索工具。然后，使用自定义数据类型生成一个表单。最后，使用搜索工具返回的员工销售数据填充表单。

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

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

2. 展开“Data Types”类别。最多可能列出两个数据类型，这取决于您在本系列中完成的教程。请注意，EmployeeSalesData 数据类型是否存在。

按照以下步骤操作，将您自己的数据类型名称指定到返回数据（在对 CFC 方法的 getItem() 服务调用中检索到该数据）：

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

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

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

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

2. 如果 EmployeeSalesData 数据类型不存在，请在“Configure Operation Return Type”对话框中新建一个名为 EmployeeSalesData 的自定义数据类型。如果 EmployeeSalesData 数据类型已存在，请单击“Use an existing ActionScript or custom data type”旁的单选按钮，并从弹出列表中选择“EmployeeSalesData[]”（请参阅图 3）。并选中“Update selected custom data type”复选框。

3. 单击“Next”。
4. 在“Create New Data Type”对话框中，在“Enter Value”字段中输入 100001（请参阅图 4）。

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

7. 单击“OK”。
8. 单击“Next”。

注意：如果您已经完成“使用 Adobe Flash Builder 4 beta 管理数据”教程并且删除了数据库中的第一个员工 (Allen Sman)，将显示一条错误消息“The operation returned a response of the type 'Object'”。如果这样，请使用其他值，如 100002 或 100003，这是另一个员工的主密钥。

9. 在“Modify Properties of Return Type”对话框中，单击“Finish”。

您将看到 getItem() 服务操作后列出 EmployeeSalesData() 数据类型（请参阅图 6）。请注意，数据类型的属性是 CFC 方法返回的查询列。

在这一部分中，您将创建一个员工搜索工具，它将根据员工姓氏检索数据记录：

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

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

5. 单击“Editor”选项卡下方的“Design”按钮，为 F4CF_Generating_Forms.mxml 文件切换到“Design”模式（请参阅图 7）。

6. 找到“Components”视图。

   注意：选择“Window”>“Components”可打开“Components”视图。

7. 从“Components”视图的“Controls”文件夹中，将一个 TextInput 控件拖放到“Design”区域中（请参阅图 8）。

这个 TextInput 控件将作为搜索工具的输入字段。您将把 TextInput 控件中输入的文本作为参数传递给 getItem() 函数，从而返回员工的数据。

TextInput 控件的 ID 属性是 SWF 应用程序的控件的唯一标识符名称。以下步骤说明了如何设置 TextInput 控件的 ID 属性。

8. 找到“Properties”视图。
9. 将 TextInput 控件的 ID 指定为 employeeSearch 并按 Enter 键（请参阅图 9）。

注意：按下 Enter 键可以确保属性值被保留下来。

创建搜索功能

接着，您将使用 Search Button 控件运行 getItem() 服务操作，该操作将向此应用程序返回一条员工销售记录。当用户单击 Button 控件时，您将 TextInput 控件中输入的值作为 getItem() 操作的参数进行传递：

1. 将“Components”视图的“Controls”文件夹中的一个 Button 控件拖放到“Design”区域中的 TextInput 控件右侧（请参阅图 10）。

2. 双击 Button 控件，将它的标签更改为 Search。
3. 将 getItem() CFC 函数从“Data/Services”视图拖放到“Design”区域的 Search 按钮上（请参阅图 11）。

Flash Builder 将切换到“Source”模式并突出显示 getItem() 服务调用中的 SALESTARGETID 参数，该调用现在与这个 Button 控件关联在一起。

当您将 getItem() 函数放到 Button 控件上时，Flash Builder 使用 F4CF_Getting_Started_Service 的 getItem() 函数填充 Button 控件的单击事件。将突出显示 getItem() 函数的参数。它默认为 SALESTARGETID，因为 SALESTARGETID 是 CFC 中指定的参数名，当 Data Service 向导对 CFC 求值并将它添加到“Data/Services”视图时会检查它。

但是，您希望使用 TextInput 控件中作为参数输入的员工 SALESTARGETID。记住，您为 TextInput 控件指定了唯一标识符 employeeSearch。您通过该控件的 text 属性访问输入 TextInput 控件的文本值。

注意：您也可以将 getItem() 函数所需的参数定义为 SalesTargets 数据表的任意列。只需相应地更新您的 CFC 函数。

4. 替换 f4CF_Getting_Started_Service 的括号之间的 SALESTARGETID 参数。getItem() 函数和 employeeSearch.text 属性，如以下代码片段所示：

5. 保存此文件。

在这一部分中，您将使用 Flash Builder Form Generation 向导创建一个绑定到员工销售数据的表单。您将使用这个表单显示搜索工具请求的个别员工数据。

1. 切换到“Design”模式。
2. 在“Data/Services”面板中，右键单击“EmployeeSalesData”数据类型并选择“Generate Form”（请参阅图 12）。

3. 如图 13 所示，保留“Choose source”对话框中“Data type”的默认设置，并单击“Next”。

4. 在“Property control mapping”对话框中，取消选中 SALESTARGETID、EMPIMAGE、YTD、Q1GOAL 和 REGION 值（请参阅图 14）。

5. 将 FIRSTNAME、LASTNAME、PHONE 和 EMAIL 属性的 Control 字段更改为 Text（请参阅图 15）。

6. 单击“Finish”。
7. 将表单重新放在 TextInput 控件下方（请参阅图 16）。

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

9. 在 TextInput 控件中输入 100001，单击 Search 按钮。

输入员工的 SALESTARGETID 时，不会填充表单（请参阅图 18）。我们将在下一部分中修复这个问题。

在这一部分中，您将根据搜索查询结果填充表单：

1. 切换到“Source”模式。
2. 找到 <fx:Declarations> 标签区块。

   <fx:Declarations> 标签区块包含您将服务操作拖到 UI 控件时 Flash Builder 生成的代码。当时创建的代码包含 CallResponder 组件和数据类型组件。CallResponder 组件负责处理返回数据。您将为它添加一个 ActionScript 结果处理函数，该函数将填充表单。

3. 找到 getItemResult CallResponder 组件，并将 result 事件添加到 CallResponder 组件：

您使用 Form Generation 向导创建的表单基于 employeeSalesData 数据类型实例，因此您希望使用服务调用返回的数据填充这个实例。

4. 在 getItemResult CallResponder 组件的结果事件中，添加 employeeSalesData =（如下所示）：

请注意，CallResponder 实例的名称为 getItemResult。返回数据存储在 getItemResult 数据的 lastResult 对象中。

5. 在结果事件的等号右侧，添加 getItemResult.lastResult：

只返回一条记录，所以您需要引用第一个图素。请记住，ActionScript 是一种零索引语言，所以请使用零。

6. 在 getItemResult.lastResult 值后添加 [0]：

ActionScript 要求赋值两侧的数据类型匹配，所以您必须将结果数据作为 EmployeeSalesData 数据类型进行转换。

7. 在 [0] 索引后，使用 as 运算符将值转换为 EmployeeSalesData 数据类型：

8. 保存文件并运行应用程序。
9. 在 TextInput 控件中输入值 100001，单击 Search 按钮。

注意：您将看到表单填充了虚构员工 Allen Sman 的信息（请参阅图 19）。

后续工作

在本教程中，您学会了如何使用 Adobe Flash Builder Form Generation 向导创建搜索界面。如果您希望了解如何将 SWF 应用程序集成到 ColdFusion 网页并将 URL 变量传递给它，请阅读使用 ColdFusion URL 变量部署 Flex 应用程序。