Building Flex applications for Java based HTTP Services using Flash Builder 4

Updated for Flash Builder 4 release version🙂

Have a J2EE application and want to create Adobe Flex front end?  With Data Centric Development feature in Flash Builder 4 it’s very simple. This article explains communicating with Java classes on the server using HTTP Service.  Since its HTTP Service you will create a JSP/Sevlet which will invoke the required Java class and returns the data as either XML or JSON.

You can also invoke methods in Java classes on the server from Flex application and get objects as response instead of invoking a JSP/Servlet which returns XML/JSON. Please find more details on invoking Java methods from Flex application at this URL https://sujitreddyg.wordpress.com/2009/06/01/building-flex-application-for-blazeds-remoting-service-using-flash-builder-4/

In this article we will be using getallcustomers.jsp file which will invoke SimpleCustomerService.java class and returns the entries in the database in XML format. We will use Flash Builder DCD to create a Flex application which will consume the XML data returned by the server.

Install Flash Builder 4

Download and install Flash Builder 4 from this URL http://www.adobe.com/products/flashbuilder/

Create a new Flex project

Create a new Flex project from File -> New -> Flex Project and enter project properties as shown in the image above and explained below.

In this screen:

  1. Set the project name to “SampleHTTPJavaProject”
  2. Set the Application type to “web (run in Adobe Flash Player)”
  3. Use default Flex SDK (Flex 4.0)
  4. Click on finish to continue

Using DCD to consume data returned by the server

Data-Centric Development (DCD) is one of the advancements to the Flash Builder 4. Let’s see how DCD is making developers productive. We will use Flash Builder DCD to consume the data from the Java server.

Creating a service

  1. Select the Data/Services window shown in the image above. If this is not visible, select it from Window -> Data/Services
  2. Click on “Connect to Data/Service” (highlighted in the image) in the Data/Services window
  3. Window as shown in the image below will be launched

Selecting service type

Since we are using HTTP Service to communicate with the server, select HTTP Service from the options and click on next button to continue.

Setting service properties

A service can have any number of operations. Each service will be a class and each operation of a service will be a function inside the class. Each operation has an URL associated with it, when the operation is invoked a HTTP request is sent to the corresponding URL. We will create a service and an operation to consume the data from the getallcustomers.jsp.

In this screen:

  1. Change the operation name to “getAllCustomers”
  2. Set the URL of the operation to http://<server-name&gt;:<server-port>/<webapp-context>/getallcustomers.jsp in this sample it is http://localhost:9191/demo/getallcustomers.jsp
  3. Since we are not expecting any parameters in the JSP file we will skip the parameters section
  4. Set the service name to “CustomerService”
  5. Click on finish button to create the service

Service will be created and listed in the services explorer as shown in the image below.

Configuring return type

We will configure service to create an AS3 VO class based on nodes in the XML data returned by the JSP file. The VO class will be the return type for the operation. This will make coding easier, since it is easier to deal with strong typed objects than parsing the XML data.

Right click on the “getAllCustomers” operation and select “Configure return type” as shown in the image below.

A window as shown in the image below will be launched with options to configure the return type. You can chose an existing data type or let the Flash Builder generate VO classes based on the response from the server. Let’s leave it to the Flash Builder to generate required VO classes based on the server response as shown in the image below.

Entering parameters required by the server

Our JSP file is not expecting any parameters, so we don’t have to pass any parameters in this step.

Flash Builder also allows you to give sample response rather than sending a request to the server to get the data. This will be useful when the server side code is not ready but you want to continue creating the Flex application without waiting for the server. Since we have the server ready in our case, let’s send a request to the server and configure return type. Click on next to continue.

Flash Builder parses the XML data returned by the server and displays the same as shown in the image below. You can select the XML node based on which you want the return type AS3 class to be generated. In this step, you can choose to create a new data type or merge the properties to existing AS3 class.

In this screen:

  1. Select the “customer” node
  2. Click on finish to continue

You can see the return type of the operation in the “data/services” panel changed as shown in the image below. When we invoke the “getAllCustomers” operation, response will be object of the type “Customer” will be created based on the response from the server and returned.

Binding data/service to UI controls

We usually write code to display the response from the service in a DataGrid or any other control. Flash Builder 4 has an awesome option which allows you to just bind a service response to a control.

In this screen:

  1. Switch to design view
  2. Change the Application layout to “spark.layouts.VerticalLayout” using the properties panel
  3. Drag and drop a “DataGrid” from the “components” panel on to the design area
  4. Set the width and height properties of the “DataGrid” to 100%

Right click on the DataGrid and select “Bind to Data …” as shown in the image below

A window as shown in the image below will be launched.

In this screen:

  1. We select a “New service call” because there are no existing services in the current application.
  2. Select the “CustomerService”
  3. Select “getAllCustomers():Customer[]” from the operations list
  4. Set the Data provider to Customer[]
  5. Click OK

You can see the DataGrid in the design updated with properties of the Customer object as shown in the image below.

Save and run the application, you can see the data retrieved from the HTTP service and displayed in the DataGrid as shown in the image below.

More article on using Flash Builder 4 https://sujitreddyg.wordpress.com/flash-builder-4/

That’s it we created a Flex UI for a JSP file using DCD features in Flash Builder. Flash Builder 4 rocks🙂

11 Responses to Building Flex applications for Java based HTTP Services using Flash Builder 4

  1. Tony Powell says:

    Great looking Blog! Found it through Bing. Just as an FYI, it didnt display right when I opened it in the Opera Interet Browser.

  2. phil says:

    Instead of binding the data to a control, is it possible to access the data directly or store the xml values as variables?

  3. Eloy Woodend says:

    Hi cheers for an incisive post, I really found your blog by mistake while looking on Goole for something else closely related, in any event before i ramble on too much i would just like to say how much I enjoyed your post, I have bookmarked your site and also taken your RSS feed, Once Again thanks for the blog post keep up the great work.

  4. I remember reading about this way back like 2007 or so…

  5. Suzan says:

    http://localhost:9191/demo/getallcustomers.jsp

    this URL is not available.. so I couldn’t continue with the tutorial😦

  6. Beppino says:

    All my best compliments to you. Very useful tutorials and infos.
    But I’ve a question: how can I do a PUT/DELETE operation to a Rest service to modify/delete an entity on a DB? I’ve to create the XML version of the AS object, but the wizard only do the reverse operation (XML to AS).
    My Rest data services understand only XML (I/O)
    I’ve tried to produce manually the XML from the AS object, but in the XML to AS conversion, the information if a property was an attribute or element it’s lost!
    Can you please help me?

  7. Quyen Nguyen says:

    YOU ARE AWESOME!

    I have spent the last 7 hours on tutorials that have not helped me at all (or maybe I’m just dumb). But yours solved my problem. Long story.

    So thank you.

  8. Praveena says:

    Hi Sujit,

    I have a project which i have work on Struts 1.2 with Flex 4 and Blaze DS. Can you please help me with some sample application or if you can provide me a sample where i can go thru the steps and can work.

  9. naresh.v.v says:

    hi it is good but i am using flex 3 and i am new to flex technology i want to know how a flex application is communicating with java application so i request u to please full fill my requirement.

    My requirement is a simple login page developed in flex with perefect validation and while entering the details it will communicate with java application
    in java application database access code will be generated so the flex application is communicating with database in java application and if details matched it will navigating to welcome page otherwise a message will be displayed on flex login page. thanx in advance

  10. Tiago Zis says:

    God article tanks. This article help me.

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

%d bloggers like this: