在Flash Builder 4中生成表单
Content
创建日期
1 November 2010
要求
必备知识
开发Flex应用程序的一定经验将对学习本教程有帮助。
用户级别
初级
必需产品
- Flash Builder 4 (Download trial)
Flash Builder 4中一种新的以数据为中心的开发功能是表单生成，它将使Flex开发人员的开发工作更加轻松。现在，您可以为数据类型或服务调用自动生成表单代码，将控件与所需数据类型的属性绑定，所有这些只需单击几次鼠标即可完成。
本教程将介绍3种使用示例服务生成表单的不同方式。
入门
在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服务
为数据类型生成表单
作为第一个例子，您可以生成一个表单来输入具有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。
More Like This
- Flex中的本地化 – 第2部分：在运行时装载资源
- 使用Flash Builder 4构建Flex应用程序，以利用在C#中的基于.NET的Web服务
- 使用Flex4容器若干技巧
- 在Flash Builder4 beta中使用网络监测器跟踪网络流量
- Working with Doctrine 2, Zend AMF, Flex, and Flash Builder
- Data paging with Flex and PHP using Flash Builder 4
- Tool-based approaches for data-centric RIA development
- Flash Builder 4 and PHP – Part 1: Data-centric development
- Flash Builder 4 and PHP – Part 2: Zend AMF and Flash Remoting
- Flash Builder 4 and PHP – Part 3: Implicit paging and data management