使用Flash Builder 4构建Flex应用程序，以利用在C#中的基于.NET的Web服务

公司: Adobe

需求

预备知识

需要使用.NET平台和C#进行Web编程的一定经验，以及能够通过SQL Server安装和使用数据库。拥有Flex经验将有所帮助。

用户水平

初级

需要的产品

• Flash Builder 4（下载试用版）

示例文件

• flashbuilder_webservice_dotnet.zip

本文介绍如何使用Flash Builder 4以数据为中心的开发功能构建一个Flex应用程序，它能够通过基于.NET的Web服务访问在Microsoft Visual Studio中创建的SQL数据库。Web服务常常用作一种在Internet上传送数据的机制，.NET平台被广泛用于实现Web服务。通过执行本教程中的步骤，您将看到在Flex应用程序中从Web服务获取数据是多么简单，这无需编写任何代码。

通过基于.NET的Web服务公开数据库

本教程的示例数据库适用于一个虚构的快递公司，其中以具有以下列和数据类型的表（名为Centre）的形式存储该公司的办事处地址（参见图1）：

• Name - nchar(10)
• Longitude - numeric(9,6)
• Latitude - numeric(9,6)

图1. Centre数据库表的架构

创建Web服务

要访问Centre表中的数据，可以使用本教程中包含的示例文件，它们使用C#实现了一个简单的Web服务。代码包含3个文件：

• Centre.cs – 这个类用于表示数据库的Centre表的每个三元组。
• Service.cs – 这个文件实现System.Web.Services.WebService类并提供一组服务（以两个函数调用的形式），可以从Flex调用这些服务。getCentres()函数检索数据库中的所有三元组，以Centre对象数组的形式返回它们。getCentreNames()函数检索CentreName属性列表并以字符串数组的形式返回它们。这两个函数使用System.Data.SqlClient名称空间连接到数据库。
• Service.asmx – 这是公开的Web页面，它将在服务器上运行。代码中仅包含对Web服务类Service.cs的引用。您调用此页面来访问服务。

使用WSDL公开Web服务

在开始从Flex客户端使用Web服务功能之前，您需要了解Web服务描述语言（WSDL）的一些知识。WSDL是一种基于标准XML的语言，用于描述或建模Web服务。

当您在Visual Studio中创建Web服务时，会自动生成WSDL。如果将Web服务部署到服务器上，那么WSDL的路径具有以下格式，除非用户指定了其他格式：

http://{serverpath}/{context of the web application}/{Name of the services file- for example, services.asmx}?WSDL

在Visual Studio中调试时，项目CentreServices中Service.asmx的默认WSDL路径为：

http://localhost:4682/CentreServices/Service.asmx?WSDL

此WSDL路径将在Flash Builder 4中用于连接到服务。

您可以将Database.mdf文件（包含在本教程的示例文件中）用作SQL Server数据库。

Service.cs中的代码包含两个您将需要更改的路径引用。在文件中搜索AttachDbFilename=/*ENTER PATH OF THE DB HERE*/并针对您的配置根据需要编辑这两个实例。参见文件中的注释正确格式化路径。

在Flash Builder 4中定义Web服务

在您的本地服务器上设置了Web服务代码和数据库之后，启动Flash Builder 4并执行以下步骤来定义Web服务：

1. 选择File > New > Flex Project创建一个新项目。
2. 键入项目名称（比如DotNetWebService）。
3. 对于Application Type，选择Web (Runs In Flash Player)。
4. 对于Application Server Type，选择None/Other。
5. 单击Finish。
6. 选择Window > Data/Services打开Data/Services视图。
7. 在Data/Services视图中，单击Connect To Data/Service。
8. 在Select Service Type对话框中，选择Web Service（参见图2）。



图2. 连接到Web服务

9. 在Specify A WSDL URL To Introspect对话框中，在WSDL URI文本框中键入WSDL路径（参见图3）。

Flash Builder 4会自动填写Service Name、Service Package和Data Type Package。ASMX文件的名称为Service.asmx，因为Flash Builder 4默认已为Service Name提供了相同的值。

10. 键入CentreService作为Service Name，为您的服务提供一个更加描述性的名称。



图3. 输入WSDL URI

11. 单击Next。

Flash Builder 4将内省WSDL文件并提供一个服务、端口和服务所支持操作的列表。

12. 确保选择了两个函数getCentres()和getCentreNames()。
13. 单击Finish。

在Data/Services视图中，您将看到为该服务所识别的不同操作和数据类型的列表（参见图4）。

图4. Data/Services视图

通过一些简单步骤，您定义了基于.NET的Web服务。Flash Builder 4内省了该服务，自动生成了值对象，并向该服务的操作分配了正确的返回类型。

使用以数据为中心的开发将数据绑定到UI

现在您已在Flash Builder 4中设置了服务，接下来可以将它连接到您的Flex应用程序的用户界面了：

1. 在Flash Builder 4中，切换到Design视图。
2. 从Components视图中拖出一个列表控件并放在主设计区域中。您可能需要从原始大小扩展该列表控件，以容纳您数据库中的数据。
3. 右键单击该列表控件并选择Bind To Data。
4. 在Bind To Data对话框中，保持New Service Call选中，选择CentreService作为Service，以及选择getCentreNames():String[]作为操作（参见图5）。
5. 单击OK。



图5. Bind To Data对话框

就这么简单。Flash Builder 4已经生成了在列表控件中显示服务调用结果所需的所有代码。

6. 运行应用程序，您将在列表中看到来自数据库的元素。当然，您可能希望看到的不仅仅是Centre名称。
7. 从Components视图中拖出一个DataGrid控件并放在主设计区域中。
8. 这一次从Data/Services视图中拖出getCentres():Centre[]操作并放在DataGrid控件上。（这是选择该控件，右键单击并选择Bind To Data的替代方法。）
9. 单击Bind To Data对话框中的OK。
10. 再次运行应用程序，您将看到显示了整个表。

Flash Builder 4自动生成了使用C#编写的相应Centre类的值对象。在这里，值对象在本质上与使用ActionScript编写的类相同。要查看生成的代码，在包资源管理器中展开valueObjects包并打开Centre.as文件。可以将此ActionScript作为一个强类型类重用于其他用途。

延伸阅读

现在您已经看到，从Flex应用程序调用基于.NET的Web服务是多么简单，您可以使用此方法来丰富Web应用程序的功能。使用以数据为中心的开发，您甚至可以迅速有效地将传统的Web应用程序转换为富Internet应用程序。关于以数据为中心的开发的更多信息，请参阅文章使用Flash Builder 4进行以数据为中心的开发。

可以通过多种方式扩展此应用程序。例如，您可以使用从数据库获取的数据在地图上确定办事处（或者甚至包裹）的位置。您可以在我的博客上阅读更多关于我如何使用Google Maps开发类似应用程序的信息。