24 May 2010
Some experience with web programming using the .NET platform, as well as the ability to set up and use databases with SQL Server and ASP.NET is required. Prior experience with Flex will be helpful.
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):
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:
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:
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.
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:
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.
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:
<?xml version="1.0" encoding="UTF-8"?> <Centres> <Centre> <name>One</name> <longitude>29.777770000</longitude> <latitude>23.455666000</latitude> </Centre> <Centre> <name>Two</name> <longitude>54.777770000</longitude> <latitude>8.999999000</latitude> </Centre> </Centres>
Flash Builder 4 will call the operation and introspect the response, which in this case is an array of Centre objects (see Figure 7).
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.
GetCentres()(see Figure 11).
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.
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.