Transcript Quick guide on Integrating Flex 2, LiveCycle Data

QUICK GUIDE ON INTEGRATING
FLEX 2, LIVECYCLE DATA
SERVICES AND SPRING
Prepared 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}\WEBINF\classes\flex\samples\factories.
STEP 4
Register the Spring factory in {context-root}\WEBINF\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}\WEBINF\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 7
Map Spring bean definition into the Flex remoting config file.
Copy/Paste the code below in {context root}\web\WEBINF\flex\remoting-config.xml
(excluding line numbers)
1]
2]
3]
4]
5]
6]
<destination id=“contactService">
<properties>
<factory>spring</factory>
<source>contactService</source>
</properties>
</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.mx
ml
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
