Help

Built with Seam

You can find the full source code for this website in the Seam package in the directory /examples/wiki. It is licensed under the LGPL.

Flamingo: Gluing Flex to Seam

If you are interested in using Flex with Seam, you should definitely check out Flamingo from Exadel. It's a build tool very similar to seam-gen, except that it can build out a Maven 2-based project (lots of necks just cracked) configured to use Flex or Java FX as the front end. It includes an extension to Seam remoting that uses the Hessian binary remoting protocol to pass Seam components over the wire to the client. Here's the brief overview of Flamingo that was posted on the forums:

Exadel Flamingo provides a set of commands that help a developer to generate initial code. To bootstrap a project, a developer answers a few questions in a wizard. Based on these questions, a standard project is generated. Flamingo is based on Maven, therefore the new application is generated according to Maven conventions, making it easy for people familiar with Maven to navigate through the project.

The generated code provides all the necessary plumbing and connectivity from Flex to Seam. A developer only needs to focus on business functionality; Flamingo takes care of the rest. All communications between the user interface and Seam components are taken care of by Exadel Flamingo.

Exadel Flamingo also provides a set of Flex components that make it extremely convenient to support specific features of Seam on the client side.

Version 1.5.0 of Exadel Flamingo, released under the LGPL, includes support for conversations, JavaFX, and other new features such as dynamic finders and updaters.

Tutorial: Integrating Seam and Flex with FlamingoDS

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.

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
  • (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