ASP .NET(C#) based HTTPService accessed from a Flex Application using the Data Centric Development (DCD) in Flash Builder 4October 8, 2009 at 2:45 pm | Posted in Data Centric Development(DCD), Flash Builder 4, Flex and .NET | 5 Comments
This tutorial is also aimed at .NET developers who would like a Richer User Experience on their client sides by making use of Adobe Flex. In my previous post I talked about a particular database that stores a list of Centers of a Courier company. We will use the same database here. Now suppose there was a .NET based HTTPservice that returned this data in standard XML format. We shall take a look at what the possibilities are in Flash Builder 4 to access this HTTPService and use the Data Centric Development(DCD) feature to represent the data returned by this HTTPService in the User Interface. As we shall see this consists of three phases
- Importing the Service to Flash builder.
- Configuring the return type.
- Binding the data to the UI component.
However, we shall first take a look at the database and the backend service provider before doing that. As is usually the case with DCD, I shall show you how to do all the development on the flex side without writing any code.
This Web Service accesses a MySQL database table called Centre which has the following schema.
The database is simple to create using a MySQL command line client.
The language used for coding is C#. There are three files here
- 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 Odbc classes and retrieves the list of Centre tuples.
- CentreXml.aspx – This is the aspx page that returns the XML file containing the required data.
Click on the files to view the source. Essentially what CentreXML.aspx returns is an XML file which can be viewed as an equivalent of an array of Centre Classes.
Importing the HTTP Service to Flex
We can now turn our attention to Flex.
1.If you don’t already have Flash Builder, download and install Flash Builder 4 from this URL http://labs.adobe.com/technologies/flashbuilder4/.
2.First create a new Project
Go to File->New -> Flex Project.
3.In the Screen that appears, enter an appropriate Project name and click Finish.
4.Make sure that the perspective is Flash Perspective. In this perspective, there is a tab called Data/Services (shown in the image below). In the Data/Services window, choose Connect to Data/Service.(Click to view larger version of the image)
5.In the Connect to Data/Services Menu, click on HTTP and then next as shown below
6.The Connect to Http Service menu looks like this(shown below)
The first option of “Do you want to use a base URL as a prefix for all operation URLs?” can be selected if all the operations come under the same URL. If the URL changes in this case the updation of the address has only to be done once. This is convenient if there are a lot of operations. However in our case we only have one operation and we will not specify a base URL.
As shown above, there is an Operations table. Under the Operation Name column, you can fill the name with which the operation will be known as on the flex side. Under the method column, choose GET. Under the URL column, give the path of your .aspx page. Then give a valid service name under Service details. For our example, I have chosen the name CentreService.
(Click on image to see full image)
If you notice, the data type returned by the GetCentres function is a generic type object. Now wouldn’t it be nice if you had the same data custom data type returned on flex as you had on your backend. This is possible now and we shall look into that in the next section.
Configuring the return type
As said in the last point we can make a class equivalent that we had on the .NET side on the flex side. DCD now lets you automatically generate Value Objects(VOs). Lets see how this is done. For this, right click on the GetCentres():Object function highlighted in the previous picture and click Configure Return Type. The following is the menu you will end up with.
Select Auto-detect the return type as this is the first time the data is going to be introspected. If the destination is authenticated, then choose authentication required and it will prompt for username and password. The “Use an existing data type” (second option) can be selected in two cases
1. A Built in data type
2. A custom data type which has already been configured before.
Click on Next and you get the menu shown below.
There are two ways you can make the Value Object(VO) which is the equivalent Actionscript class. The first way involves Flash Builder communicating with the back end and doing introspection. If it’s a service that requires parameters, there are two ways.
1. Entering into the table. This is the first option shown in the image above.
2. Entering the URL (query string) which contains the parameters. This is more convenient if you don’t want to enter the values in the table
The Second method is resorted to if your backend has not been developed fully (but you know the XML format that is returned) or if the server is down. In both these cases flash builder cannot introspect the back end directly. For that, choose the “Enter a sample XML/JSON response” option. Here you can enter the format of the data that is returned.
In our example there are no parameters required. Hence directly click Next and the menu below is got.
What we get from the back end is an array of Centre Classes. Hence, we are interested in the Centre data. Go to the Select root Combo box and choose “Centre” like shown below
You will get the following screen after selection
Click on finish and you will now see how the Data/Services tab has changed(Click to view a larger image).
Under the components menu (highlighted in red in the image below), choose Controls-> DataGrid. Click the image to view a larger image.
Choose DataGrid and drag and drop it into the design view. Right click on the Data Grid and click Bind to data. You will get a menu that looks like the image below.
Enter the name of the service as CentreService and the function as GetCentres() as shown in the image above. Click Ok.
The above image shows what the datagrid will look like. The columns have automatically named according to the name of the members of the Custom type Centre. All you need to do now is run the program (CTRL + F11) and you will see how the data from the database is completely populated in the Datagrid.
No code written again
We managed to connect to a .NET based HTTP service from the Data/Services menu. We were able to configure the returned XML to a strong data type through automatically generated VOs. We ultimately connected the data returned from the backend to a Visual component (Data Grid). This is my second post on DCD. All the flex coding yet again was done without writing a single line of code. The workflow is very smooth and user friendly. Please feel free to post any queries after you have tried it.
More articles on using Flash Builder 4 can be found at http://sujitreddyg.wordpress.com/flash-builder-4/