使用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服务：

选择File > New > Flex Project创建一个新项目。

键入项目名称（比如DotNetWebService）。

对于Application Type，选择Web (Runs In Flash Player)。

对于Application Server Type，选择None/Other。

单击Finish。

选择Window > Data/Services打开Data/Services视图。

在Data/Services视图中，单击Connect To Data/Service。

在Select Service Type对话框中，选择Web Service（参见图2）。



图2. 连接到Web服务

在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提供了相同的值。

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



图3. 输入WSDL URI

单击Next。

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

确保选择了两个函数getCentres()和getCentreNames()。

单击Finish。

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



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

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

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

在Flash Builder 4中，切换到Design视图。

从Components视图中拖出一个列表控件并放在主设计区域中。您可能需要从原始大小扩展该列表控件，以容纳您数据库中的数据。

右键单击该列表控件并选择Bind To Data。

在Bind To Data对话框中，保持New Service Call选中，选择CentreService作为Service，以及选择getCentreNames():String[]作为操作（参见图5）。

单击OK。



图5. Bind To Data对话框

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

运行应用程序，您将在列表中看到来自数据库的元素。当然，您可能希望看到的不仅仅是Centre名称。

从Components视图中拖出一个DataGrid控件并放在主设计区域中。

这一次从Data/Services视图中拖出getCentres():Centre[]操作并放在DataGrid控件上。（这是选择该控件，右键单击并选择Bind To Data的替代方法。）

单击Bind To Data对话框中的OK。

再次运行应用程序，您将看到显示了整个表。

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

延伸阅读

现在您已经看到，从Flex应用程序调用基于.NET的Web服务是多么简单，您可以使用此方法来丰富Web应用程序的功能。使用以数据为中心的开发，您甚至可以迅速有效地将传统的Web应用程序转换为富Internet应用程序。关于以数据为中心的开发的更多信息，请参阅文章使用Flash Builder 4进行以数据为中心的开发。
可以通过多种方式扩展此应用程序。例如，您可以使用从数据库获取的数据在地图上确定办事处（或者甚至包裹）的位置。您可以在我的博客上阅读更多关于我如何使用Google Maps开发类似应用程序的信息。