Building a Flex application that accesses an ASP.NET-based HTTP service with Flash Builder 4

Using the data-centric development capabilities of Flash Builder 4 you can easily build Flex applications that retrieve data from HTTP services (including ASP.NET-based services). With Flash Builder 4 you can also automatically generate value objects through introspection of the XML returned from the HTTP Service. These features let you take care of the back-end plumbing with ease (and without much coding), so you can concentrate on the development of the front end.

In this article I describe how to retrieve information from an SQL table via an HTTP service built on the Microsoft .NET framework. After defining the service model via introspection, you will bind a service operation to a Flex component to use the data in the Flex application.

The example database for this tutorial, created using Visual Studio, 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)

To return the data from this table in XML format, you can use the sample files included with this tutorial. The code consists of three files:

• Centre.cs – This C# class represents a data tuple from the Centre table of the database.
• CentreInterface.cs – This C# class contains the method that establishes a connection to the database using the System.Data.SqlClient namespace and retrieves the list of Centre table tuples.
• CentreXml.aspx – This is the ASPX page that returns the XML file containing the required data. Essentially, it returns the list of tuples in the database.

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

The code in CentreInterface.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.

After setting up the code and the database on your local server, you may want to access the ASPX file in your browser to verify that the code can access your data and is generating the XML response properly.

To create a Flex application that consumes the XML formatted data, follow these steps:

1. In Flash Builder 4, Choose File > New > Flex Project.
2. Type a project name (for example, I used DotNetHttpService).
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 HTTP (see Figure 2).

9. In the Configure HTTP Service dialog box, select No for the option that asks if you want to use a base URL as a prefix for all operation URLs (see Figure 3).

If you have a lot of operations in your service, you may want to select Yes for this option. If your base URL changes, then you only have to update the address once for all operations that are accessible via that URL. For this example, however, there is only one operation so there is no need to specify a base URL.

10. Click in the name column of the Operations grid and type GetCentres as the operation name.
11. Select GET in the method column.
12. In the URL column, type the URL to your ASPX page.
13. For the Service Name type a descriptive name for the service; I used CentreService.
14. Click Finish.

After Flash Builder 4 generates the service, you'll see it displayed in the Data/Services view (see Figure 4)

If you look at the GetCentres() function in the Data/Services view, you'll notice that its return type is a generic Object. Wouldn't it be nice if you had the same custom data type in Flex as you used on your back end?

With Flash Builder 4, you can automatically generate value objects, so your class on the Flex side is equivalent to your C# class on the .NET site.

Follow these steps to configure the return type of the operation:

1. Right-click the GetCentres():Object in the Data/Services view and select Configure Return Type.

2. Select Auto-detect The Return Type From Sample Data since this is the first time the data is going to be introspected (see Figure 5).

If your host requires authentication, then you can select Authentication Required and you be will prompted for a username and password.

You'd select the second option—Use An Existing Data Type—to use a built-in data type or to use a custom data type that you had previously configured.

3. Click Next.

There are three options available for automatically detecting the return type. The first two require a functioning server. If the operation you require takes parameters, you can select Enter Parameter Values And Call The Operation, and then enter parameter values in the grid. Alternatively you can select Enter A Complete URL And Parameters And Get It, and then type the URL with a query string that contains the parameters. This is more convenient if you don't want to enter the values in the table and you already have the URL at hand.

If your back end has not been developed fully or the server is down, you can select Enter A Sample XML/JSON Response as long as you know the format of XML that will be returned and can supply a sample.

For example, on this project, you could supply the following XML, which is sample output from CentreXml.aspx:

4. In this example there are no parameters, so simply select the first option and click Next.

Flash Builder 4 will call the operation and introspect the response, which in this case is an array of Centre objects (see Figure 7).

5. Type Centre_type as the data type name, and select Centre as the root (see Figure 8).

6. Click Finish (see Figure 9).

The return type for GetCentres() in theData/Services view will change to Centre_type[] (see Figure 10).

Follow these steps to use the new service and display the information returned by it.

1. In Flash Builder 4, switch to Design view.
2. Drag a DataGrid control from the Components view and drop it in the main design area.
3. Right-click the DataGrid control and select Bind To Data.
4. Verify that the selected Service is CentreService and the Operation is GetCentres() (see Figure 11).
5. Click OK.

The columns of the data grid will change to reflect the names of the properties of the custom type Centre (see Figure 12).

All that's left to do now is run the application.

6. Choose Run > Run DotNetHttpService.

You will see the data grid populated with data from the database.

You have seen how easy it is to connect a .NET HTTP service to your Flex front end using data-centric development. With no coding you configured the return type, automatically generated value objects, and wired up a data grid to display the results. If you are using an HTTP service as your back end, this streamlined workflow makes it easy to provide a rich and interactive application on the front end. For more information on data-centric development refer to the article Data-centric development with Flash Builder 4.

Further development of the application would depend on your business needs. You could, for instance, use the data from the HTTP service to build an application that customers can use to send their packages and track them online. You could add interactive maps and video chatting for customer service. With Flex as your front end, the possibilities are virtually endless.