ASP .NET(C#) based HTTPService accessed from a Flex Application using the Data Centric Development (DCD) in Flash Builder 4

October 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

  1. Importing the Service to Flash builder.
  2. Configuring the return type.
  3. 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.

Database

This Web Service accesses a MySQL database table called Centre which has the following schema.schema

The database is simple to create using a MySQL command line client.

Backend

The language used for coding is C#. There are three files here

  1. Centre.cs – This C# class represents a data tuple from the Centre table of the database.
  2. 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.
  3. 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)

step-2-pic-1

5.In the Connect to Data/Services Menu, click on HTTP and  then next as shown below

connectmenu

6.The Connect to Http Service menu looks like this(shown below)

httpconnect

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 Finish.

7.If you now take a look at the Data/Services Tab, this is what you this is what you will see (image below).dataservicestabbefore

(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.

configurereturntype

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.
autodetectreturn

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.
preconfiguring

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

selectingcentre

You will get the following screen after selection

selectedcentre

Click on finish and you will now see how the Data/Services tab has changed(Click to view a larger image).

dataservicestabafter

Data Binding

Under the components menu (highlighted in red in the image below), choose Controls-> DataGrid. Click the image to view a larger image.

components

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.

bindtodata

Enter the name of the service as CentreService and the function as GetCentres() as shown in the image above. Click Ok.

Datagrid

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/

<!–[if gte mso 9]> Normal 0 false false false EN-US X-NONE X-NONE <![endif]–><!–[if gte mso 9]> <![endif]–> <!–[endif]–>

 

About these ads

5 Comments »

RSS feed for comments on this post. TrackBack URI

  1. Nice article, It was more helpful Thanks !!!

  2. Nice article. The only issue is that transfer of data in XML will not be feasible for large amounts of data. Thats where AMF comes in. Is there any thing similar to integrate Flex and .NET using AMF.

    • Hi Kshitij,

      Thank you. Sorry about the delay in reply. If you haven’t heard about weborb yet, here is a small write up by Serge about it.
      http://www.webkitchen.be/2008/03/14/weborb-for-net-is-now-free/
      It is the generally used solution for .NET integration with flex when AMF and RTMP are required. Let me know if that helps.

      Nishad

      • the issue with weborb is that is not really free isn’t it, so the solution for amf is actually fluorinefx


Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s

Create a free website or blog at WordPress.com. | The Pool Theme.
Entries and comments feeds.

Follow

Get every new post delivered to your Inbox.

%d bloggers like this: