Using Flash Builder 4 to build a Flex application that consumes a .NET-based web service written in C#

This article describes how to use the data-centric development features of Flash Builder 4 to build a Flex application that accesses an SQL database created in Microsoft Visual Studio via a .NET-based web service. Web services are commonly used as a mechanism for data delivery on the Internet, and the .NET platform is widely used to implement web services. By following the steps in this tutorial, you will see how easy it is to retrieve data from a web service in a Flex application without writing any code.

Exposing the database through a .NET-based web service

The example database for this tutorial is for an imaginary courier company that has stored the locations of its offices in the form of a table (named Centre) with the following columns and data types (see Figure 1):

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

Creating the web service

To access the data from the Centre table, you can use the sample files included with this tutorial, which implement a simple web service in C#. The code consists of three files:

• Centre.cs – This class is used to represent each tuple of the Centre table of the database.
• Service.cs – This implements the System.Web.Services.WebService class and provides a set services (in the form of two function calls), which can be invoked from Flex. The getCentres() function retrieves all the tuples in the database and returns them as an array of Centre objects. The getCentreNames() function retrieves the list of CentreName attributes alone and returns them as an array of strings. The functions connect to the database using the System.Data.SqlClient namespace.
• Service.asmx – This is the exposed web page that will run on the server. There is nothing in the code but a reference to the web service class Service.cs. You invoke this page to access the services.

Exposing the web service with WSDL

Before you can start using the web service functions from a Flex client, you need to know a little bit about Web Service Description Language (WSDL). WSDL is a standard XML-based language used to describe or model web services.

When you create a web services in Visual Studio, the WSDL is automatically generated. If the web service is deployed on a server, then the path of the WSDL is in the following format unless specified otherwise by the user:

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

While debugging in Visual Studio the default WSDL path for Service.asmx in the project named CentreServices is:

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

This WSDL path will be used in Flash Builder 4 to connect to the service.

You can use the Database.mdf file, which is included among this tutorial’s sample files, as the SQL Server database.

The code in Service.cs includes two path references that you’ll need to change. Search for AttachDbFilename=/*ENTER PATH OF THE DB HERE*/ in the file and edit the two instances as necessary for your configuration. Refer to comments within the file to format the path properly.

Defining the web service in Flash Builder 4

After setting up the web service code and the database on your local server, start Flash Builder 4 and follow these steps to define the web service:

1. Choose File > New > Flex Project to create a new project.
2. Type a project name (for example, DotNetWebService).
3. For the Application Type, select Web (Runs In Flash Player).
4. For the Application Server Type, select None/Other.
5. Click Finish.
6. Choose Window > Data/Services to open the Data/Services view.
7. In the Data/Services view, click Connect To Data/Service.
8. In the Select Service Type dialog box, select Web Service (see Figure 2).

9. In the Specify A WSDL URL To Introspect dialog box, type the WSDL path in the WSDL URI text box (see Figure 3).

   The Service Name, Service Package, and Data Type Package are filled in automatically by Flash Builder 4. Since the name of the ASMX file is Service.asmx, Flash Builder 4 has given the Service Name the same value by default.

10. Type CentreService as the Service Name to give your service a more descriptive name.

11. Click Next.

    Flash Builder 4 will introspect the WSDL file and present a list of services, ports, and operations supported by the service.

12. Make sure the two functions, getCentres() and getCentreNames() are selected.
13. Click Finish.

In the Data/Services view you’ll see a list of the different operations and data types that were identified for the service (see Figure 4).

In just a few simple steps, you defined the .NET-based web service. Flash Builder 4 introspected the service, automatically generated value objects, and assigned the correct return types to the service’s operations.

Binding the data to the UI using data-centric development

Now that you’ve set up the service in Flash Builder 4, you’re ready to connect it to the user interface of your Flex application:

1. In Flash Builder 4, switch to Design view.
2. Drag a List control from the Components view and drop it in the main design area. You may want to expand the List control from its default size to accommodate the data in your database.
3. Right-click the List control and select Bind To Data.
4. In the Bind To Data dialog box, leave New Service Call selected, select CentreService as the Service, and select getCentreNames():String[] as the operation (see Figure 5).
5. Click OK.

That’s it. Flash Builder 4 has generated all the code that’s needed to display the results of the service call in the List control.

6. Run the application and you’ll see elements from the database in the list.Of course you’ll probably want to see more than just the Centre names.
7. Drag a DataGrid control from the Components view and drop it in the main design area.
8. This time drag the getCentres():Centre[] operation from the Data/Services view and drop it on the DataGrid control. (This is an alternative to selecting the control, right-clicking, and selecting Bind To Data.)
9. Click OK in the Bind To Data dialog box.
10. Run the program again and you’ll see that the entire table is shown.

The value object for the corresponding Centre class written in C# was automatically generated by Flash Builder 4. Here, the value object is essentially the same class written in ActionScript. To see the generated code, expand the valueObjects package in Package Explorer and open the Centre.as file. This ActionScript class can be reused for other purposes as a strongly typed class.

Where to go from here

Now that you have seen how easy it is to invoke a .NET-based web service from your Flex applications, you can use this approach to improve the richness of your web applications. With data-centric development you can even convert traditional web applications to Rich Internet Applications quickly and efficiently. For more information on data-centric development see the article Data-centric development with Flash Builder 4.

You could expand on this application in many ways. For example, you could use the data retrieved from the database to plot the location of offices (or even parcels) on a map. You can read more about how I developed a similar application using Google Maps on my blog.