(July 14, 2006) - Some people take the dog for a walk, others go play a round of golf. Not Christophe Coenraets. His idea of a good time is to illustrate Flex 2 / JMS integration by extending a simple "realtime feed" application that he built a while back! Web Developer's & Designer's Journal is proud to bring you each month two of the month's best tips from Adobe's intrepid Flex Hero.

Flex and JMS: Real Time Market Data Application
The Message Service at the core of the Flex Data Services (http://labs.adobe.com/technologies/flexdata_services2/) is one of the important new features in Flex 2. (see Figure 1)

Unlike JMS, the Flex Message Service provides an actual implementation of a publish/subscribe messaging system, not just an API. It might be all you need for simple, self contained use cases where you just want to exchange messages between Flex clients. In Enterprise integration scenarios, the Flex message service integrates with, and extends existing messaging systems to allow thin clients to publish and subscribe to topics these systems manage. Flex integrates with existing messaging systems through an adapter architecture. Using the JMS adapter available out-of-the box, you can map Flex destinations to JMS topics. For example, the snippet below (added to flex-message-service.xml) defines a destination called "stock-feed", and maps it to a JMS topic called "FlexTopic".

<destination id="stock-feed">
   <properties>
     <server>
     <durable>false</durable>
       <durable-store-manager>flex.messaging.durability.FileStoreManager</durable-store-manager>
     </server>
     <jms>
       <destination-type>Topic</destination-type>
       <message-type>javax.jms.TextMessage</message-type>
       <connection-factory>jms/flex/TopicConnectionFactory</connection-factory>
       <destination-jndi-name>jms/topic/flex/simpletopic</destination-jndi-name>
       <destination-name>FlexTopic</destination-name>
       <durable-consumers>false</durable-consumers>
       <delivery-mode>NON_PERSISTENT</delivery-mode>
       <message-priority>DEFAULT_PRIORITY</message-priority>
       <acknowledge-mode>AUTO_ACKNOWLEDGE</acknowledge-mode>
       <transacted-sessions>false</transacted-sessions>
     </jms>
   </properties>
   <channels>
     <channel ref="my-rtmp"/>
   </channels>
   <adapter ref="jms"/>
</destination>

This mapping allows Flex clients to publish and subscribe to the JMS topic. For example, the following line of code is all you need in your Flex client to subscribe to the "stock-feed" destination:

<mx:Consumer id="consumer" destination="stock-feed" message="messageHandler(event)"/>

To illustrate the Flex and JMS integration, I recently spent some time extending the simple "realtime feed" application that I built a while back as a sample shipping with the Flex Data Services. This new version looks more like a real trading application: A Java application publishes simulated real time market data to a JMS topic. The Flex client subscribes to that topic and displays the data in a DataGrid and in a Line Chart that are updated in real time.

Action Points

• Run the application*: http http://coenraets.com/apps/portfolio/portfolio.html

  (NOTE: Since my host doesn't provide JMS hosting, this version simulates data at the client-side).

  *This application requires Flash Player 8.5 beta 3 available from http://labs.adobe.com/.

• Download the full JMS version of the application (Flex code + Java code):
  http://coenraets.com/apps/portfolio/portfoliojms.zip
• Read more about the Message Service and the Flex Data Services in my FDS overview on Adobe Labs:
  http://labs.adobe.com/wiki/index.php/Flex_Enterprise_Services:overview

Flex and AJAX: Google Maps Collaboration
As an example of AJAX/Flex integration, I built a simple collaboration module that you could add on top of any AJAX (or Flex) application. In this example, I chose to add it on top of Google Maps. (see Figure 2)

The Flex module adds the following collaboration features to Google Maps:

1. Map sharing: Maps are kept in sync (in real time) between users involved in a collaboration session.
2. Videoconferencing (Webcam sharing and VOIP): You can share your Webcam and microphone to add video and audio to your collaboration session.
3. Whiteboarding: Collaborating users can draw on the map. For example you could draw potential directions, etc. The users' whiteboards are kept in sync in real time.
4. Cursor sharing: When you move your mouse, other users see the movements of your mouse and what you are pointing at.

The Flex features used in this example include:

1. Publish/subscribe messaging and support for real-time communication
2. Drawing API
3. Support for Webcam/voice capture and streaming (Flash Media Server is required for streaming).

Action Points

• Run a simplified* version of the application**: http://coenraets.com/apps/flexmaps/flexmaps.html

  *Real time messaging (used for map sharing and whiteboard synchronization) has been disabled in this version.

  **This application requires Flash Player 8.5 beta 2 available from http://labs.adobe.com/.

• Download the full version of the application: http://coenraets.com/apps/flexmaps/flexmaps.html

This application requires the Flex Data Services for pub/sub messaging, and the Flash Media Server for media streaming.