Rich Internet Applications

Rich Internet Applications

Posts 1-1 of 1
  • Michael Schütz
    Michael Schütz    Premium Member   Group moderator
    The company name is only visible to registered members.
    Tutorial: Integration von Flex und Seam via FlamingoDS
    Hallo,

    Heute gibt's das von mir versprochene Tutorial zur Integration von Seam und Flex mittels FlamingoDS.

    1) Voraussetzung:
    Seam:
    - Standard-Seam 2.*-Projekt
    (- z.B: via seam-gen)

    Flex:
    - Flex SDK 3.3 installieren
    - FLEX_HOME setzen
    - IDE einrichten
    - Kompilieren zB via ant (flexTasks) konfigurieren
    (- AS-Generierung mit GraniteDS konfigurieren, falls gewünscht)


    2) FlamingoDS konfigurieren

    2.1) herunterladen
    - herunterladen: http://www.exadel.com/web/portal/flamingo
    - (die hier verwendete Version ist die 1.7. Seite 01.06.09 gibt es die Version 1.8)

    2.2) Java libraries
    - folgende Bibliotheken in den Classpath: amf-serializer-1.7.1.jar, flamingo-service-1.7.1.jar

    2.3.) Flex libraries
    Zur Verwendung der Flamingo-eigenen Seam-Komponenten muss die flamingo-flex-1.7.1.swc(/WEB-INF/lib/flex/) Bibliothek dem Compiler bekannt gemacht werden, z.B: 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) AMF-Servlet konfigurieren
    FlamingoDS von Exadel bietet die Möglichkeit, Seam-Komponenten via RemoteObjects anzusprechen. Die Grundlage bildet das AMF(Action Message Format)-Protokoll, um Java Objekte in AS-Objekte umzuwandeln (und umgekehrt), um somit den Zugriff von Flex-Seite aus zu ermöglichen. Flamingo bietet dazu ein Servlet über das die Kommunikation zwischen Front- und Backend von statten geht.
    Das Servlet wird in der web.xml registriert:

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

    In der services-config.xml im WEB-INF/flex-Verzeichnis muss der zugehörige AMF-Channel definiert werden

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

    wobei CONTEXT-ROOT durch die entsprechende Angabe der aktuellen Anwendung zu ersetzen ist.


    3) Ein Beispiel

    3.1) Die Seam-Komponente
    Für das Beispiel verwende ich ein einfaches Pojo als Seam-Komponente:

    @Name("helloWorld")
    public class HelloWorld {
    @Begin
    public void start() {
    System.out.println("starting....");
    }

    @End
    public void stop() {
    System.out.println("stopping....");
    }
    }

    3.2) Deklaration der Seam-Komponente
    Die Deklaration der Seam-Komponente, die von Flex-Seite aus angesprochen werden soll, erfolgt in der services-config.xml. Diese kann der Übersicht halber auch in eine extra Datei ausgelagert werden:

    <services>
    <service-include file-path="seam-remoting-config.xml" />
    </services>

    die dann folgendermaßen aussieht:

    <?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>

    Der angegebene Name unter "destination" entspricht dem Namen der Seam-Komponente.

    3.3) Zugriff aus der MXML heraus
    Flamingo bietet zur Unterstützung der Arbeit mit Seam einige Client-Komponenten an. Unter ihnen dient das SeamRemoteObject zur Steuerung der Konversationen.

    Der Aufruf aus der mxml-Datei erfolgt dann durch die Deklaration des Remote Objektes, ohne dass weitere Initialisierungen vorgenommen werden müssen:

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

    Die Buttons greifen auf die Seam-Komponente zu und starten und beenden eine Conversation.

    Das war's. (-:

    Feedback und Fragen sind jederzeit sehr gern willkommen.


    viele Grüße
    Michael
    • 12 Jun 2009, 09:39 am