Integrating Flex And Spring
Adobe Flex has strong ties to Java, which include an Eclipse-based
IDE and BlazeDS, its open source server-based Java remoting and
web messaging technology.
By default BlazeDS creates instances of server-side Java objects and
uses them to fulfill remote object requests. This approach doesn’t work
with Spring, as the framework is built around injecting the service beans
through the Spring container. The Spring integration with BlazeDS
allows you to configure Spring beans as BlazeDS destinations for use as
remote objects in Flex.
You will initially need:
1) An Eclipse 3.5 Distribution. Either You may choose either the standard Eclipse 3.5 (Galileo) for Java EE Developers (On Mac use the Eclipse Carbon version): http://www.eclipse.org/downloads/
For enhanced Spring support you can use the SpringSource Tool Suite:
http://www.springsource.com/products/springsource-tool-suite-download/
2)
Flash Builder 4 (60 day T rial) installed as a plug-in for the Java EE Eclipse
http://www.adobe.com/go/try_flashbuilder
3) Tomcat 6: http://tomcat.apache.org/
4) BlazeDS 4 (Binary Distribution):
http://opensource.adobe.com/wiki/display/blazeds/BlazeDS/
5) Spring Framework 3.0.2 (vanilla r elease):
http://www.springsource.org/download
6) Spring BlazeDS Integration 1.0.3 (vanilla r elease):
http://www.springsource.org/spring-flex
7) AOP Alliance 1.0:
http://sourceforge.net/projects/aopalliance/files/
8) backport-util-concurrent 3.1 for the Java version you’r e using:
http://sourceforge.net/projects/backport-jsr166/files/backport-jsr166/
9) cglib 2.2
http://sourceforge.net/projects/cglib/files/
10) asm 3.2
http://forge.ow2.org/projects/asm/
I think now we are ready with initial elements lets start with server setup
First install your chosen Eclipse and then install Flash Builder 4 as a plug-in to the Eclipse distribution you just installed. Also extract the ZIP files for the other dependencies specified above. When you’ve completed these steps, run Eclipse. In Eclipse create a server that will run the application:
1. Choose File > New > Other
2. Select Server > Server
3. Click Next
4. Select Apache > Tomcat v6.0 Server
5. Click Next
6. Specify the location where Tomcat is installed and select the JRE(version 5 or higher) to use
7. Click Finish
Set up the server-side Java web project in Eclipse by creating a web application from the blazeds.war file
(found inside the BlazeDS zip file).
In Eclipse, import the blazeds.war file to create the project:
1. Choose File > Import
2. Select the WAR file option. Specify the location of the blazeds.war file.
For the name of the web project, type samplepring
3. Click Finish
First remove the xalan.jar file from the WebContent/WEB-INF/lib folder. Next, go into the project properties. One way to get there is by right-clicking on the project and selecting Properties. In the project properties, select Java Build Path and then click the Source tab. Set the Default Output Folder samplepring/WebContent/WEB-INF/classes
This causes all Java classes that are created in the project to be deployed in the web application.
In the WebContent/WEB-INF/flex folder update the services-config.xml file with the following contents:
<?xml version=”1.0” encoding=”UTF-8”?>
<services-config>
<channels>
<channel-definition id=”my-amf” class=”mx.messaging.channels.AMFChannel”>
<endpoint url=”http://{server.name}:{server.port}/{context.root}/messagebroker/amf” class=”flex.messaging.endpoints.AMFEndpoint”/>
</channel-definition>
<channel-definition id=”my-streaming-amf” class=”mx.messaging.channels.StreamingAMFChannel”>
<endpoint url=”http://{server.name}:{server.port}/{context.root}/messagebroker/streamingamf” class=”flex.messaging.endpoints.StreamingAMFEndpoint”/>
</channel-definition>
<channel-definition id=”my-polling-amf” class=”mx.messaging.channels.AMFChannel”>
<endpoint url=”http://{server.name}:{server.port}/{context.root}/messagebroker/amfpolling” class=”flex.messaging.endpoints.AMFEndpoint”/>
</channel-definition>
</channels>
</services-config>
Now select the Servers tab in Eclipse. If the tab is not visible you can make it visible by choosing Windows > Show View > Servers. Right-click the Tomcat Server and select Add and Remove. To add the samplepring web application to the server, select it in the Available list and then click Add. Finally, click Finish.
Next, you need to add the required dependencies to the samplepring web application. Copy all of the Spring Framework libraries / JAR files (located in the dist folder) to the WebContent/WEB-INF/lib folder. Also copy the Spring BlazeDS Integration library (located in the dist folder) to the lib folder. Do the same for aopalliance.jar, backport-util-concurrent.jar, cglib-2.2.jar, asm-3.2.jar.
Simple Flex Remoting
To configure the server for simple Flex Remoting first edit the web.xml file in the WebContent/WEB-INF folder. Replace its contents with:
<?xml version=”1.0” encoding=”UTF-8”?>
<web-app xmlns=”http://java.sun.com/xml/ns/javaee” xmlns:xsi=”http://www.w3.org/2001/XMLSchema-instance”
xmlns:web=”http://java.sun.com/xml/ns/javaee/web-app_2_5.xsd”
xsi:schemaLocation=”
http://java.sun.com/xml/ns/javaee
http://java.sun.com/xml/ns/javaee/web-app_2_5.xsd”
version=”2.5”>
<listener>
<listener-class>
org.springframework.web.context.ContextLoaderListener
</listener-class>
</listener>
<listener>
<listener-class>flex.messaging.HttpFlexSession</listener-class>
</listener>
<servlet>
<servlet-name>samplespring</servlet-name>
<servlet-class>
org.springframework.web.servlet.DispatcherServlet
</servlet-class>
<init-param>
<param-name>contextConfigLocation</param-name>
<param-value></param-value>
</init-param>
<load-on-startup>1</load-on-startup>
</servlet>
<servlet-mapping>
<servlet-name>samplespring</servlet-name>
<url-pattern>/messagebroker/*</url-pattern>
</servlet-mapping>
</web-app>
Eclipse may try to change the web-app version to 2.4 instead of 2.5. If this happens just manually change it back to 2.5.Spring will now handle requests to the /messagebroker/url.
Now configure Spring by creating an applicationContext.xml file in the WebContent/WEB-INF folder with the following contents:
<?xml version=”1.0” encoding=”UTF-8”?>
<beans xmlns=”http://www.springframework.org/schema/beans”
xmlns:flex=”http://www.springframework.org/schema/flex”
xmlns:xsi=”http://www.w3.org/2001/XMLSchema-instance”
xmlns:context=”http://www.springframework.org/schema/context”
xsi:schemaLocation=”http://www.springframework.org/schema/beans
http://www.springframework.org/schema/beans/spring-beans-3.0.xsd
http://www.springframework.org/schema/flex
http://www.springframework.org/schema/flex/spring-flex-1.0.xsd
http://www.springframework.org/schema/context
http://www.springframework.org/schema/context/spring-context-3.0.xsd”>
<flex:message-broker>
<flex:remoting-service default-channels=”my-amf”/>
</flex:message-broker>
<context:component-scan base-package=”flex” />
</beans>
Now create a simple Java class that will be exposed through the AMF channel to a Flex application. In the src folder create a new Java Class in the flex package with the name “HelloWorldService”. Set the contents of the HelloWorldService.java file to:
package flex;
import org.springframework.flex.remoting.RemotingDestination;
import org.springframework.flex.remoting.RemotingInclude;
import org.springframework.stereotype.Service;
@Service
@RemotingDestination
public class HelloWorldService {
@RemotingInclude
public String sayHello(String name) {
return “howdy, “ + name;
}
}
The @Service annotation tells Spring that the class is a Service and the @RemotingDestination annotation exposes the class as a remoting endpoint for Flex. This class also contains a single method named sayHello, which simply takes a string and returns a slightly modified version of the string. By default all public methods on a class are available for remoting. You can keep a public method from being exposed as a remoting endpoint by using the @RemotingExclude annotation.
Create the Flex Application
Now you can create a Flex application that will call the sayHello method on HelloWorldService. To begin building the Flex application, simply create a new Flex Project in Eclipse. In the New Flex Project wizard, type sayHello as the name, select Web as the Application type, and set the Flex SDK Version to Flex 4.0 (usually the default). Also select J2EE as the Application Server Type, enable Use Remote Object Access Service, and select BlazeDS. Ensure that the Create Combined Java/Flex Project Using WTP option is not checked and then click Next. Now enter the information for your samplespring project. The Root folder is the WebContent folder in your samplespring project. The Root URL should be http://localhost:8080/samplespring/. The Context root should be /samplespring.
Click Finish to create the project. You should now see the template code for the application. Replace the code with the following:
<?xml version=”1.0” encoding=”utf-8”?>
<s:Application xmlns:fx=”http://ns.adobe.com/mxml/2009”
xmlns:s=”library://ns.adobe.com/flex/spark”
xmlns:mx=”library://ns.adobe.com/flex/mx”>
<fx:Declarations>
<s:RemoteObject id=”ro” destination=”helloWorldService”
endpoint=”http://localhost:8080/samplespring/messagebroker/amf”/>
</fx:Declarations>
<s:layout><s:VerticalLayout/></s:layout>
<s:TextInput id=”t”/>
<s:Button label=”sayHello” click=”ro.sayHello(t.text)”/>
<s:Label text=”{ro.sayHello.lastResult}”/>
</s:Application>
When you save the file it should automatically compile. When it is compiled it should automatically be deployed in your web application.You are now ready to start the server and test the application. Go to
the Servers View in Eclipse and start the Tomcat server. Watch the console and make sure that there are no startup errors.Now run the sayHello application (one way is to right-click the sayHello.mxml file, select Run As, and then select Web Application). Your browser should open the sayHello.html file that then downloads and runs the Flex application. Type your name in the TextInput box and click the sayHello button. This will initiate a Flex Remoting request to the Tomcat server calling the Spring DispatcherServlet, which then will
look up the service based on the destination helloWorldService. This destination is automatically mapped to the HelloWorldService Spring Bean. Then the sayHello method will be invoked on the bean, passing
in the String that was specified in the RemoteObject call on the client. The method returns a new String, which is then serialized into AMF, inserted into the HTTP Response body, and sent back to the client. On
the client side the Flex application will parse the AMF and then set the ro.sayHello.lastResult property to what was returned from the server.Data binding in the Label will note the property change and refresh its
view of the data.
