Flexism

This tutorial is aimed at .NET developers who would like a Richer User Experience on their client sides using Adobe Flex. Consider a .NET web service that is deployed locally. There is a MySQL database which contains the list of Centres that are used by a Courier company. The Web service is based around this data base. The web service contains operations that can be used by Flex. First we shall describe the web service provider on the back end and the database. Then, we shall take a look at how these web services can be consumed from flex using the Data Centric Development (DCD) feature of Flash Builder 4. This consists of two phases: -

1. Importing the Service to the Flex Client Side
2. Binding the services to UI components.

All the development on the Flex side will be done without writing a single line of code.

Database

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

The database was created using the MySQL command line client and the Odbc classes of .NET were used to connect to the database as shown in the code (refer next section for code).

Backend

The language used for coding on the back end is C#. For those who are not familiar with how to implement Web Services on .NET here is a tutorial

http://msdn.microsoft.com/en-us/library/87h5xz7x%28VS.80%29.aspx

These are the files that you will need for reference.

1. Service.asmx
2. Service.cs
3. Centre.cs

There are two functions called getCentres() and getCentreNames() in Service.cs. The first function retrieves all the tuples in the database and returns them as an Array of Centre Objects. The second function retrieves the list of CentreName attributes alone and returns them as an array of strings.

WSDL

Now, how does one access the two functions talked about above from the flex client by means of Web services? One way of doing that is using a WSDL.  WSDL (Web Service Description Language) is a standard XML based language used to describe or model web services. For more information, go to the wikipedia link.

For all Web Services created in Visual Studio, the WSDL is automatically generated. If the Web Service is deployed on a server, then the path of the WSDL is usually (unless specified otherwise by the user)

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

This fact is to be borne in mind. The above path will be referred as WSDL path henceforth.

Importing the Web Services 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.

5. In the Connect to Data/Service Window, select Web Service and click next.

6. The next menu is a screen which prompts for the Specific WSDL to introspect. Remember the WSDL path that we defined in the previous section. Enter this in the box marked in Red below.  The Service name, service package and Data type package are filled in automatically by Flash Builder. Since the name of the .asmx file is Service, the Service name has the same value by default. Let us rename the service to CentreService so that the name sounds more specific.

7. In the next screen, the web services are introspected and it is possible to see the list of web service operations available. Check on the two function names.

8. Click on Finish and in the same Data/services tab we talked about in step 3, one can view the different operations that were imported.

Hence, in these simple steps, we have imported the operations from a .NET Based Web Service to a flex front end.

DCD Data Binding

For an example of how easy Data Centric Development has made things consider this.

-> Switch to design view (Ctrl+Shift+`).

-> Choose the component’s tab from the left(as higlighted in red in the image below- Click to see full image)

-> Drag and drop the list to the design view and resize it to on the basis of the number of values in the database.

-> Right click on the List and click Bind To Data

-> Since this is being done for the first time, in the Bind to Data Menu that appears, the Radio Button for New Service Call is checked. Here choose CentreService the Combo box titled Service and for Operation choose getCentreNames():String[].

-> That’s it. Flash builder has generated all the code that’s required. All you need to do is run the program(Ctrl + F11) and you can see how all the elements from the database are populated in the list.

-> Not had enough? Here is more. The same way a list was drag and dropped into the Design View, drag and drop a DataGrid into the design view and repeat the same process.

-> Instead of the getCentreNames():String[] option in under operations, choose getCentres():Centre[].

-> Run the program again and you can see that the table is shown exactly how it was in the database except for the fact that it is flex and looks way better.

-> The Value Object (VO) for the corresponding Class Centre in C# was automatically generated by Flash Builder. Here, a VO is essentially the C# class written in ActionScript. This can be reused for any other purpose as a strong type.

Amazing Workflow

If we consider that the back end work was already done, we managed to connect the web service to the UI components on the Flex Client side in a matter of no time. And all this without writing a single line of code in the Flash Builder.  Now isn’t that simply awesome. Flash Builder + DCD rocks!!

For more articles on Flash Builder 4, visit

http://sujitreddyg.wordpress.com/flash-builder-4/