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 http://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 http://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

Using Flash Builder 4 for earlier BlazeDS builds

Updated for Flash Builder 4 release version

Flash Builder 4 has added Data-Centric Development features which will help you develop Flex applications for BlazeDS Remoting destinations very easily. You can create Flex front end for the Remoting destinations in just couple of clicks.

Flash Builder 4 uses the flex-rds-server.jar file which is added in BlazeDS 4. This jar file is used by Flash Builder 4 to retrieve details of the destinations exposed as Remoting services using BlazeDS. If you are using earlier builds of BlazeDS, you can still use new features in Flash Builder 4 by just copying the required jar file from BlazeDS 4 build.

Just follow the following simple steps to use Data-Centric Development features in Flash Builder 4

1. Download BlazeDS 4 binary distribution from this URL Download (4MB)
2. Extract the downloaded zip file to a folder
3. You will find blazeds.war file inside the extracted folder
4. Extract the content from blazeds.war file so that we can use  the flex-rds-server.jar file
5. Copy the flex-rds-server.jar file which will be found under WEB-INF/lib folder in blazeds.war to your web applications WEB-INF/lib folder
6. Copy the Servlet URL mapping and declaration for the RDSDispatchServlet from the web.xml in the blazeds.war file and add to your web application web.xml file. Else copy it from below

<servlet>
<servlet-name>RDSDispatchServlet</servlet-name>
<display-name>RDSDispatchServlet</display-name>
<servlet-class>flex.rds.server.servlet.FrontEndServlet</servlet-class>
<init-param>
<param-name>useAppserverSecurity</param-name>
<param-value>false</param-value>
</init-param>
<load-on-startup>10</load-on-startup>
</servlet>
<servlet-mapping id=”RDS_DISPATCH_MAPPING”>
<servlet-name>RDSDispatchServlet</servlet-name>
<url-pattern>/CFIDE/main/ide.cfm</url-pattern>
</servlet-mapping>

Restart your server and start using Flash Builder 4 for your BlazeDS projects as explained in this URL http://sujitreddyg.wordpress.com/2009/06/01/building-flex-application-for-blazeds-remoting-service-using-flash-builder-4/

More articles on how to use Flash Builder 4 – http://sujitreddyg.wordpress.com/flash-builder-4/

Flash Builder 4 is awesome

Building Flex application for BlazeDS Remoting destinations using Flash Builder 4

Updated for Flash Builder 4 release version

Data Centric Development (DCD) in Flash Builder 4 allows developers to build Flex front end for Remoting destinations with just couple of clicks. Continue reading to see how Flash Builder is increasing J2EE developer productivity.

Set up BlazeDS

Download BlazeDS binary distribution from this URL Download (4MB) and follow instructions at this URL to setup BlazeDS http://sujitreddyg.wordpress.com/2009/04/07/setting-up-blazeds/

Once BlazeDS is setup you need to expose the Java class as Remoting destination, visit this URL to know how to expose a Java class as Remoting destination http://sujitreddyg.wordpress.com/2008/01/14/invoking-java-methods-from-adobe-flex/

Once your Java class is exposed as Remoting destination using BlazeDS, follow steps below to build Flex application using Flash Builder 4.

In this sample we will expose SimpleCustomerService.Java as Remoting destination. SimpleCustomerService communicates with database and returns SimpleCustomer objects.

Setting up BlazeDS RDSDispatchServlet

After setting up BlazeDS, you have to enable RDSDisptachServlet, which is used by Flash Builder 4 to get destination details. This is disabled by default. It’s very simple all you have to do is to un-comment/add the Servlet mapping in the web.xml.

Copy the Servlet URL mapping and declaration for the RDSDispatchServlet from the web.xml in the blazeds.war file and add to your web application web.xml file. If you copy the Servlet mapping from web.xml in blazeds.war file, don’t forget to change the useAppserverSecuirty param value to false as highlighted below. Alternatively copy the Servlet mapping from below

<servlet>
<servlet-name>RDSDispatchServlet</servlet-name>
<display-name>RDSDispatchServlet</display-name>
<servlet-class>flex.rds.server.servlet.FrontEndServlet</servlet-class>
<init-param>
<param-name>useAppserverSecurity</param-name>
<param-value>false</param-value>
</init-param>
<load-on-startup>10</load-on-startup>
</servlet>
<servlet-mapping id=”RDS_DISPATCH_MAPPING”>
<servlet-name>RDSDispatchServlet</servlet-name>
<url-pattern>/CFIDE/main/ide.cfm</url-pattern>
</servlet-mapping>

Install Flash Builder 4

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

Creating new Flex project with BlazeDS server configurations

Create new Flex project

Create new Flex project from the File menu as shown in the image above.

Enter project details

In this screen:

1. Enter project name
2. set “Web (runs in Adobe Flash Player)” as the application type
3. Use default Flex SDK (Flex 4.0)
4. Set the application server type to J2EE
5. Select BlazeDS
6. Click on Next to continue

Configure J2EE server settings

In this screen:

1. Set the Root folder to the root folder of your web application with BlazeDS configured. Its C:\Program Files\Apache Software Foundation\Tomcat 6.0\webapps\demo in this sample
2. Set the Root URL to root URL of your BlazeDS enabled web application
3. Set the Context root to context root of your BlazeDS enabled web application
4. Leave the output folder to default value
5. Click on validate configuration button
6. Click finish to continue

Using DCD feature to connect to consume Remoting Service

DCD or Data-Centric Development is one of the advancements to the Flash Builder 4. Let’s see how this is making developers productive. In this sample we will see how to create a Flex application which consumes BlazeDS Remoting service. Same steps can be followed for LCDS Remoting services also.

Creating Service using DCD

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 above) in the Data/Services window
3. Window as shown in the image below will be launched

Select BlazeDS and click on Next. Flash Builder will display a window asking for RDS credentials. Since we turned off security for our RDSServlet by setting the “useAppserverSecurity” parameter to “false” in the web.xml, select “No password required” and click on OK to continue.

Selecting Remoting destination

You can see that Flash Builder listed all destinations exposed in the screen below.

In this screen we are selecting the destination the newly created service should use. All destinations available will be displayed. Select a destination (SimpleCustomerServiceDestination in this sample) and click on Finish to continue.

Code for invoking the Remoting service will be generated, you can see the service and its operations (methods exposed by the Java class) being displayed in the “Data/Services” window and in the package explorer.

Flash Builder 4 introspects return types for the Java class methods and creates AS3 classes for any custom Java classes.

Binding data/service to UI controls

Switch design view and drag and drop a DataGrid component as shown in the image below.

In this screen:

1. Switch to design view
2. Change the Application layout to “vertical” 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%

Select the DataGrid. 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 “SimpleCustomerServiceDestination”
3. Select “getAllCustomers():SimpleCustomer[]” from the operations list
4. Selct “SimpleCustomer[]” as Data provider
5. Click OK

You can see the DataGrid with columns for added for properties of the SimpleCustomer class in the design view as shown in the image below.

Configuring DataGrid columns

Select the DataGrid. Right click on the DataGrid and select “Configure Columns …” as shown in the image below.

A window with options to configure the columns for the DataGrid will be launched as shown in the image below.

In this screen:

1. Arrange columns using the “up” and “down” button
2. Click on OK
3. Save and run the application

You can see application with data retrieved from the server and displayed in the DataGrid as shown in the image below.

More articles on how to use Flash Builder 4 – http://sujitreddyg.wordpress.com/flash-builder-4/

That’s it we have a Flex front end build for an existing Java class in just few minutes. Flash Builder 4 rocks