本文由ADC中文站推荐

Flash Builder 4中一种新的以数据为中心的开发功能是表单生成，它将使Flex开发人员的开发工作更加轻松。现在，您可以为数据类型或服务调用自动生成表单代码，将控件与所需数据类型的属性绑定，所有这些只需单击几次鼠标即可完成。本教程将介绍3种使用示例服务生成表单的不同方式。

要求

需要的产品

Flash Builder 4

• 下载简体中文正式版

预备知识

开发Flex应用程序的一定经验将对学习本教程有帮助。

入门

在Flash Builder中，您可以为以下内容生成表单：

• 数据类型，可以自动生成与一种数据类型的每个属性绑定的控件。
• 服务调用，可以为服务调用的输入参数或返回类型生成表单。
• master detail view，当有一个显示一种数据类型实例的控件（例如一个List或ComboBox）时，可以生成一个表单来在控件中显示所选向的详细信息。

本教程中的示例使用了一项名为Population的服务，可以在此处获得*。

执行以下步骤在Flash Builder 4中连接到该Web服务：

• 选择File > New > Flex Project
• 键入PopulationApp作为项目名称，选择None/Other作为应用程序服务器类型，单击Finish（参见图1）。

图1.创建新项目

• 在Flash Builder中找到Data/Services视图。如果该视图未打开，选择Window > Data/Services（参见图2）。

图2.Data/Services视图

• 单击Connect To Service。
• 在Select Service Type对话框中，选择Web Service（参见图3）并单击Next。

图3.选择Web Service作为服务类型

• 对于WSDL URI，键入http://www.abundanttech.com/WebServices/Population/population.asmx?WSDL。

• 对于服务名称，键入Population（参见图4）。
• 单击Next。

图4.连接到Web服务

• 在Flash Builder内省该服务之后，选择PopulationWSSoap作为端口（参见图5）。
• 单击Finish

图5.配置代码生成

现在可在Data/Services视图中看到该服务了（参见图6）。

图6.Data/Services视图中的Population服务

关于设置步骤的更详细说明，请参见我的博客文章Connecting to WebServices using the Data Centric Development (DCD) feature in Flash Builder 4*。

为数据类型生成表单

作为第一个例子，您可以生成一个表单来输入具有Population_type类型的对象的详细信息：

• 在Data/Services视图中，右键单击Population_type并选择Generate Form（参见图7）。

图7.从上下文菜单选择Generate Form

• 在Generate Form对话框中，保留默认设置（参见图8）并单击Finish。

图8.在Generate Form对话框中指定表单生成详细信息

• 切换到Design视图查看生成的表单（参见图9）。
• 将表单标签从_Date更改为Date，使它看起来不那么奇怪。

图9.Design视图中生成的表单

• 选择Run > Run PopulationApp运行应用程序。您将看到包含该数据类型的每个属性的可编辑表单（参见图10）。

图10.可编辑的表单

您然后可以编辑Submit按钮的单击处理函数，为表单提供一种特定功能。

为服务调用生成表单

接下来介绍如何生成表单来显示从服务调用getWorldPopulation()返回的数据。

• 在Data/Services视图中，右键单击getWorldPopulation()服务调用并选择Generate Form（参见图11）。

图11.从上下文菜单选择Generate Form

• 在Generate Form对话框中，确保为PopulationService的getWorldPopulation()操作选择了New Service Call。
• 因为该表单显示从getWorldPopulation()操作返回的对象，所以选择Form For Return Type，取消选择Make Result Form Editable，然后单击Configure Return Type。

图12.Generate Form对话框

• 选择Auto-detect The Return Type From Sample Data并单击Next（参见图13）。

图13.Configure Return Type对话框

• 选择Use An Existing Data Type，然后选择Population_type（参见图14）。
• 单击Finish。

图14.选择检测到的返回类型

• 再次单击Generate Form对话框中的Finish（参见图15）。

图15.配置了返回类型之后的Generate Form对话框

• 当Flash Builder生成表单之后，您可以将它拖到Design视图中的新位置并像上一个示例中一样更改表单标签。
• 运行应用程序，查看生成的表单如何显示从getWorldPopulation()操作返回的值（参见图16）。

图16.生成的表单显示了服务调用返回的世界人口

生成MASTER DETAIL视图

接下来将介绍如何创建master detail视图。在本示例中，一个ComboBox服务将充当master控件，显示数据类型的实例。表单显示在master控件中所选项的详细信息。
执行以下步骤查看它的工作原理：

• 在Design视图中，将一个ComboBox拖到应用程序上。这个ComboBox是您的master控件，它将显示一个国家列表。
• 右键单击该ComboBox并选择Bind To Data（参见图17）。

图17.从上下文菜单选择Bind To Data

• 在Bind To Data对话框中，选择希望将ComboBox绑定到的服务和操作。在本例中，选择New Service Call，然后单击getCountries()操作（参见图18）。
• 单击OK。

图18.将ComboBox绑定到数据
您已成功将master控件与它的数据绑定。

• 运行应用程序并单击ComboBox控件，应该会看到一个国家列表（参见图19）。

图19.ComboBox显示了所有国家的列表

• 要生成详细信息表单，邮件单击Design视图中的ComboBox，选择Generate Details Form（参见图20）。

图20.从上下文菜单选择Generate Details Form

• 在Generate Form对话框中，保持将Master-Detail选择为要生成的表单，确保取消选择了Make Form Editable，因为本例中不需要可编辑的表单。

在本例中，Population服务具有一个名为getPopulation(String)的操作，它接受国家的名称作为参数并返回该国家的详细信息。

• 所以选择Call A Service To Get The Detail Data When The Master Selection Changes。
• 确保选择了该服务和getPopulation()操作（参见图21）。
• 单击Finish。

图21.生成master detail表单

Flash Builder将切换到源视图和突出ComboBox的变化处理。你会看到下面的代码：

protected  function comboBox_changeHandler(event:IndexChangeEvent):void
   {
   getPopulationResult.token =  population.getPopulation(/*Enter value(s) for */ strCountry);
   }

• 将getPopulation(String)操作的参数更改为comboBox.selectedItem.toString()。

生成的代码应该类似于：

protected  function comboBox_changeHandler(event:IndexChangeEvent):void
   {
   getPopulationResult.token =  population.getPopulation(comboBox.selectedItem.toString());
   }

• 返回到Design视图，可以更改详细信息表单的标签和调整它的位置。
• 运行应用程序（参见图22）。

图22.生成的master detail视图

未来步骤

您刚才看到了使用Flash Builder中以数据为中心的开发功能为数据类型、服务调用和master detail视图创建表单是多么容易。要了解关于Flash Builder 4和以数据为中心的开发的更多信息，请参见Data-centric development with Flash Builder 4*。

关于作者

Adobe

ADC中文站原文地址： http://www.adobe.com/cn/devnet/flex/articles/flashbuilder_form_generation.html