Tutorial: Integrating Seam and Flex with FlamingoDS
Hello,
here is my tutorial to combine Seam and Flex. I will use Seam 2.1, Flex SDK 3.3 and FlamingoDS 1.7. See the following post to learn why I'm using FlamingoDS and not GraniteDS or BlazeDS: http://seamframework.org/Community/DirectSeamSupportForFlex
1) requirements:
Seam:
- basic Seam 2.*-project
(- e.g. created with seam-gen)
Flex:
- install Flex SDK 3.3
- set FLEX_HOME
- configure IDE
- configure compilation (e.g.: flexTasks with ant)
(- config AS-generation with GraniteDS, if needed)
2) configure FlamingoDS
2.1) download
- download: http://www.exadel.com/web/portal/flamingo
- (version 1.7. is used here, version 1.8 is available since 01.06.09)
2.2) Java libraries
- add these libraries into classpath: amf-serializer-1.7.1.jar, flamingo-service-1.7.1.jar
2.3.) Flex libraries
To use flamingo seam components, the compiler needs to know the flamingo-flex-1.7.1.swc(/WEB-INF/lib/flex/) library; e.g. via ant:
<target name="compileFlex">
<mxmlc file="${war.src.flex.dir}/main.mxml"
...
<compiler.include-libraries dir="${war.lib.dir}/flex">
<include name="flamingo-flex-1.7.1.swc" />
</compiler.include-libraries>
</mxmlc>
</target>
2.4) configure AMF-Servlet
FlamingoDS allows us to acces Seam components as RemoteObjects. For that reason, AMF(Action Message Format)-protocol is used to transform Java objects into AS objects and vice versa. Flamingo provides a Servlet to manage the communication between frontend and backend. It's registered in the web.xml:
<servlet>
<servlet-name>AMF Remote Servlet</servlet-name>
<servlet-class>com.exadel.flamingo.service.seam.AMFToSeamServlet</servlet-class>
</servlet>
<servlet-mapping>
<servlet-name>AMF Remote Servlet</servlet-name>
<url-pattern>/flamingo/amf/*</url-pattern>
</servlet-mapping>
The associated AMF-Channel needs to be configured in the services-config.xml (WEB-INF/flex):
<channel-definition id="seam-amf" class="mx.messaging.channels.AMFChannel">
<endpoint uri="http://{server.name}:{server.port}/CONTEXT-ROOT/flamingo/amf/"
class="flex.messaging.endpoints.AMFEndpoint" />
</channel-definition>
Replace CONTEXT-ROOT with the current application name.
3) Example
3.1) Seam component
For the example I use a simple POJO as Seam component:
@Name("helloWorld")
public class HelloWorld {
@Begin
public void start() {
System.out.println("starting....");
}
@End
public void stop() {
System.out.println("stopping....");
}
}
3.2) Declaration of Seam component
Seam components are declared in services-config.xml. We extract the declaration for overview issue:
<services>
<service-include file-path="seam-remoting-config.xml" />
</services>
seam-remoting-config.xml:
<?xml version="1.0" encoding="UTF-8"?>
<service id="seam-remoting-service" class="flex.messaging.services.RemotingService">
<default-channels>
<channel ref="seam-amf"/>
</default-channels>
<destination id="helloWorld" />
</service>
The name in "destination" equals the name of the Seam component.
3.3) Access from MXML
The SeamRemoteObject is one of the client-components Flamingo provides to control conversations. Simply assign the Seam component as remote object and it is available within Flex mxml source-file. There is no need for further initializations:
<mx:Application name="testHelloWorldUpdate"
xmlns:mx="http://www.adobe.com/2006/mxml"
xmlns:flamingo="com.exadel.flamingo.flex.components.flamingo.*">
...
<flamingo:SeamRemoteObject id="ro" destination="helloWorld"/>
...
<mx:Button label="Start" click="ro.start()"/>
<mx:Button label="Stop" click="ro.stop()"/>
</mx:Application>
The buttons invoke the helloWorld-methods to begin and end a conversation.
That's it. (-:
Feedback welcome.
Michael
here is my tutorial to combine Seam and Flex. I will use Seam 2.1, Flex SDK 3.3 and FlamingoDS 1.7. See the following post to learn why I'm using FlamingoDS and not GraniteDS or BlazeDS: http://seamframework.org/Community/DirectSeamSupportForFlex
1) requirements:
Seam:
- basic Seam 2.*-project
(- e.g. created with seam-gen)
Flex:
- install Flex SDK 3.3
- set FLEX_HOME
- configure IDE
- configure compilation (e.g.: flexTasks with ant)
(- config AS-generation with GraniteDS, if needed)
2) configure FlamingoDS
2.1) download
- download: http://www.exadel.com/web/portal/flamingo
- (version 1.7. is used here, version 1.8 is available since 01.06.09)
2.2) Java libraries
- add these libraries into classpath: amf-serializer-1.7.1.jar, flamingo-service-1.7.1.jar
2.3.) Flex libraries
To use flamingo seam components, the compiler needs to know the flamingo-flex-1.7.1.swc(/WEB-INF/lib/flex/) library; e.g. via ant:
<target name="compileFlex">
<mxmlc file="${war.src.flex.dir}/main.mxml"
...
<compiler.include-libraries dir="${war.lib.dir}/flex">
<include name="flamingo-flex-1.7.1.swc" />
</compiler.include-libraries>
</mxmlc>
</target>
2.4) configure AMF-Servlet
FlamingoDS allows us to acces Seam components as RemoteObjects. For that reason, AMF(Action Message Format)-protocol is used to transform Java objects into AS objects and vice versa. Flamingo provides a Servlet to manage the communication between frontend and backend. It's registered in the web.xml:
<servlet>
<servlet-name>AMF Remote Servlet</servlet-name>
<servlet-class>com.exadel.flamingo.service.seam.AMFToSeamServlet</servlet-class>
</servlet>
<servlet-mapping>
<servlet-name>AMF Remote Servlet</servlet-name>
<url-pattern>/flamingo/amf/*</url-pattern>
</servlet-mapping>
The associated AMF-Channel needs to be configured in the services-config.xml (WEB-INF/flex):
<channel-definition id="seam-amf" class="mx.messaging.channels.AMFChannel">
<endpoint uri="http://{server.name}:{server.port}/CONTEXT-ROOT/flamingo/amf/"
class="flex.messaging.endpoints.AMFEndpoint" />
</channel-definition>
Replace CONTEXT-ROOT with the current application name.
3) Example
3.1) Seam component
For the example I use a simple POJO as Seam component:
@Name("helloWorld")
public class HelloWorld {
@Begin
public void start() {
System.out.println("starting....");
}
@End
public void stop() {
System.out.println("stopping....");
}
}
3.2) Declaration of Seam component
Seam components are declared in services-config.xml. We extract the declaration for overview issue:
<services>
<service-include file-path="seam-remoting-config.xml" />
</services>
seam-remoting-config.xml:
<?xml version="1.0" encoding="UTF-8"?>
<service id="seam-remoting-service" class="flex.messaging.services.RemotingService">
<default-channels>
<channel ref="seam-amf"/>
</default-channels>
<destination id="helloWorld" />
</service>
The name in "destination" equals the name of the Seam component.
3.3) Access from MXML
The SeamRemoteObject is one of the client-components Flamingo provides to control conversations. Simply assign the Seam component as remote object and it is available within Flex mxml source-file. There is no need for further initializations:
<mx:Application name="testHelloWorldUpdate"
xmlns:mx="http://www.adobe.com/2006/mxml"
xmlns:flamingo="com.exadel.flamingo.flex.components.flamingo.*">
...
<flamingo:SeamRemoteObject id="ro" destination="helloWorld"/>
...
<mx:Button label="Start" click="ro.start()"/>
<mx:Button label="Stop" click="ro.stop()"/>
</mx:Application>
The buttons invoke the helloWorld-methods to begin and end a conversation.
That's it. (-:
Feedback welcome.
Michael
