4 Replies Latest reply on Sep 6, 2010 3:15 AM by Jürgen Brüder

    Tutorial: Integrating Seam and Flex with FlamingoDS

    Michael Schuetz Novice
      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