QUICK GUIDE ON INTEGRATING FLEX 2, LIVECYCLE DATA SERVICES AND SPRINGPrepared by Stephen Olaño

ENVIRONMENT SETUP

Required files:

• Flex LiveCycle Data Services (LCDS)• Flex SDK• Flash 9 Browser Plugin • Apache Tomcat (with existing Spring-based

app)

We will be using Microsoft Windows as the deployment platform for this example.

STEP 1

Unzip LCDS and copy flex.war (base skeleton for a flex web app)

STEP 2

Merge contents of Flex.war with your new or existing web application. Flex.war contains standard Java web application directory structure.

STEP 2 (CONTINUATION)• Beware of overwriting your existing web.xml. Copy and paste

the contents of web.xml to our existing app's web.xml file. • Delete jrun-web.xml since we wont be needing it for Tomcat

server.

STEP 3

Download and integrate Spring Factory. Unzip file and copy SpringFactory.class and SpringFactory$SpringFactoryInstance.class from flex-spring-sdk\bin\flex\samples\factories to {context-root}\WEB-INF\classes\flex\samples\factories.

STEP 4

Register the Spring factory in {context-root}\WEB-INF\flex\services-config.xml :

<factories>  <factory id="spring"

class="flex.samples.factories.SpringFactory"/>

</factories>

At this point, we are now set to connect our Flex 2 UI with Spring backend.

STEP 5

Create our “view” : {context-root}\ ShowContacts.mxml<?xml version="1.0" encoding="utf-8"?>

<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" layout="absolute"

backgroundGradientColors="[#008040, #008040]" width="100%">

<mx:RemoteObject id="contactServ" destination="contactService" fault="faultHandler(event)">

<mx:method name="getContacts" result="resultHandler(event)" />

</mx:RemoteObject>

<mx:Button x="10" y="10" label="Retrieve Contacts" click="retrieveData()"/>

<mx:Panel x="10" y="40" width="717" height="200" layout="absolute">

<mx:DataGrid id="contactList" dataProvider="{contacts}“ width="100%" height="100%" x="0" y="0">

<mx:columns>

<mx:DataGridColumn headerText="Name“ dataField="patientName"/>

<mx:DataGridColumn headerText="Birth Date" dataField="dateOfBirth"/>

<mx:DataGridColumn headerText="Home Phone" dataField="homePhone"/>

</mx:columns>

</mx:DataGrid>

</mx:Panel>

</mx:Application>

STEP 5 (CONTINUATION)

The “view” actionscript <mx:Script> <![CDATA[

import mx.rpc.events.*;

import mx.collections.*;

import mx.controls.*;

// cached empty ArrayCollection

private var emptyResults:ArrayCollection = new ArrayCollection();

[Bindable]

public var contacts:ArrayCollection = emptyResults;

private function resultHandler(event:ResultEvent):void {

contacts = ArrayCollection(event.result);

}

private function faultHandler(event:FaultEvent):void {

Alert.show(event.fault.faultString, "Error");

}

private function retrieveData():void {

contactServ.getContacts();

}

]]></mx:Script>

Insert this snippet in the MXML page (see page 5) before the <RemoteObject> tag.

STEP 5 (CONTINUATION)• Notice that there are at least two UI components, the

“retrieve data” button and the data grid to display the results.

• This example uses RemoteObject component to directly invoke methods of Java objects (or Spring beans) deployed in your application server.

• Note that each “dataField” in the DataGrid component maps to a Value Object getter method. These VOs (Value Object) is inside the list of Value Objects returned by getContacts() method.

• The getContacts() method of contactService is a method in your existing ContactService class exposed by Spring (see Step 6 for reference).

• How does the Actionscript knows what kind of Value Object is contained in the result list? Actionscript supports Weak Typing. You have the option to define the VO in actionscript and map it to the correspondingJava VO (strong typing) or not.

STEP 5 (CONTINUATION)

Screenshot of ShowContacts.mxml

STEP 6

• Make sure you already have your Spring bean definition in your Java application.

For example: Our existing Spring Service definitions is in {context root}\WEB-INF\conf\spring-service.xml:...<bean id=“contactService"            class="com.mycompany.service.impl.ContactServiceImpl“>

</bean>

…

STEP 6 (CONTINUATION)

Sample Java Class of ContactsServiceImpl.java

package com.mycompany.service.impl;

public class ContactsServiceImpl extends Service implements ContactsService {

... public List getContacts() {

List resultList = new ArrayList();

...use your imagination here...

return resultList;}

}

STEP 7Map Spring bean definition into the Flex remoting config file.

Copy/Paste the code below in {context root}\web\WEB-INF\flex\remoting-config.xml

(excluding line numbers)

1] <destination id=“contactService">2] <properties>3] <factory>spring</factory>4] <source>contactService</source>5] </properties>6] </destination>

Line number #1 maps to RemoteObject call (see Step 5)Line number #3 maps to spring factory (see Step 4)Line number #4 maps to the actual Spring bean class (see

Step 6)

STEP 8

Start tomcat and point the browser to http://localhost:8080/appName/ShowContacts.mxml

That’s all folks!

Note: You can pre-compile the mxml page with the compiler included in Flex 2 SDK or let the LCDS compile it for you during runtime by just viewing the page from the browser.

TIPS 

1) During development and debugging, you will need to increase the JVM heap size to avoid getting java.lang.OutOfMemoryError. To do that, add the following values to JAVA_OPTS environment variable before starting Tomcat server (Assuming you still have room left on Physical memory):

-Xms64m -Xmx512m

where -Xms<size> specifies the initial Java heap size and -Xmx<size> the maximum Java heap size.

2) Value Object methods to be accessed from a Flex UI component should have a matching setter and getter methods. Also, each of these methods shouldn't have any dependency to other objects aside from standard data types (think serializable objects). Any text field pre-formatting should be done performed in the service layer. See Value Objects pattern.

3) Important: This demo of simple, straight communication between Flex UI, LCDS and Java is not recommended for a real enterprise application. Adobe recommends the use of Cairngorm microarchitecture. Cairngorm was created for Flex applications as an MVC framework. It enforces best practices and patterns for creating a scalable Flex powered web application. Other frameworks: Servebox Foundry and Guasax.

REFERENCES

Some parts were taken from Christophe Coenraets’ article Using Flex with Spring

Check back at poweribo.wordpress.com for other Flex related stuff