Flex-Java Application using Blaze DS

Pre-requisites

1. JDK 1.5 or higher installed.

2. Eclipse 3.4.1 (Ganymede) is recommended and installed.

3. Install the Eclipse plug-in for Flex 3. This would give options to create Flex projects using Eclipse. This comes as 60 day trial. (Get Plug-in)

4. Download open source version of LiveCycle Data Services called “Blaze DS” which is Adobe’s server side remoting and messaging technology. (Get Blaze DS)

5. Follow the instructions below to create a Flex UI using Java Remote Object Services

Let’s follow below mentioned procedure to create a Flex and Java Application.

1. Creating Flex Project in Eclipse Ganymede

• Follow Eclipse menu File -> New -> Other and select Flex Project as shown.

2. Configure Flex and Java Project – Select J2EE Server as we need a Java Back-end.

3. Configure J2EE Server

4. Configure J2EE Server (Cont…) – Select the Target Runtime. In this case it is BEA WLS 9.2 App server.

• Flex War File – Select the “blazeds.war” that is downloaded as part of Pre-requisite #4 above.

• Note: You have to unzip the downloaded “blazeds.zip” and extract the war file.

5. Click Finish and switch to the flex development perspective.

6. Create Flex User Interface

• For this example application we will use two controls mentioned below

• Button – Named as “Get Data”

• DataGrid Component – Used to render the Data provided by Java Backend component.

7. Building Service in Java

• Right click “src” and create a new Java Class.

8. Building a Java Service Layer for this Example

• We will create a simple DataProviderService for this example.

• Create a class named DataProviderService.

• Create a method with signature public Set getEmployeeData().

• Create a Java Bean named Employee with some attributes. For this examples let us consider we created Employee.java with three attributes

• First Name, Last Name and Dept.

• getEmployeeData Implementation

• Populate the set with some dummy Employee objects and return the set.

9. Configuration of Flex app to invoke DataProviderService

• Open the “remoting-config.xml” located in folder {ProjectRoot}\WebContent\WEB-INF\flex.

10. Destination configuration in remoting-config.xml

Add the following block to the XML file.

com.amit.DataProviderService

11. Configuring Flex application to work on local server

• Modify value of “serverContextRoot” in “.flexProperties” file in the {ProjectRoot}. I.e. In this example this shall be “myflex”.

Sample .flexProperties file as below

serverContextRoot=”/myflex” serverRoot=”C:/Amit/FlexProject/WebContent” serverRootURL=”http://localhost:7001/myflex” toolCompile=”true” useServerFlexSDK=”false” version=”1″/>

12. Configuring DataGrid in “myflex.mxml”



The Source for MXML file

<mx:Application xmlns:mx=”http://www.adobe.com/2006/mxml&#8221; layout=”absolute”>

<mx:RemoteObject id=”dataprovider” destination=”dataproviderservices” />

<mx:Button click=”dataprovider.getEmployeeData()” x=”44″ y=”40″

label=”Get Data”/>

<mx:DataGrid dataProvider=”{dataprovider.getEmployeeData.lastResult}”

x=”44″ y=”101″ width=”411″ height=”141″>

<!–mx:DataGrid>

<!–mx:Application>

• Add the Remote Object to be referred for getting data from DataProvider. Destination attribute matches to the destination defined in “remoting-config.xml”

• When button is clicked “getEmployeeData()” service shall be called.

• dataProvider attribute of DataGrid tells that the results of getEmployeeData() are to be used for populating the DataGrid.

13. Add the flex application to the deployment profile.

14. Start the BEA Weblogic server. You can do this from Eclipse itself using the Server view.

15. Run the Flex UI from browser window. Hit the URL http://localhost:7001/myflex/myflex.html and flex application should run successfully.

Well, thats it . You got your Flex and Java Application running.

If you face any problems try to debug them using Flex debugger. I hope one should be fine with the above mentioned procedure.