Welcome!

Adobe Flex Authors: Liz McMillan, RealWire News Distribution, Maureen O'Gara, Yakov Fain, Keith Swenson

Related Topics: Adobe Flex, Java, ColdFusion, AJAX & REA

Adobe Flex: Article

Real-World Adobe Flex Tips, Tricks and Techniques

Tips, Tricks and Techniques From Adobe's Intrepid Senior Evangelist For Rich Internet Applications

(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

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 PointsThis application requires the Flex Data Services for pub/sub messaging, and the Flash Media Server for media streaming.

More Stories By Christophe Coenraets

Christophe Coenraets currently works as a Senior Technical Evangelist at Adobe. Before joining Adobe, Christophe was an evangelist at Macromedia, focusing on Rich Internet Applications and Enterprise integration. Prior to Macromedia, Christophe was the head of Java and J2EE Technical Evangelism at Sybase, where he started working on Java Enterprise projects in 1996. Before joining Sybase in the US, Christophe held different positions at Powersoft in Belgium, including Principal Consultant for PowerBuilder, and Manager of the Professional Services organization. Before joining Powersoft, Christophe worked as a developer and architect on several retail and BPM projects. Christophe has been a regular speaker at conferences worldwide for the last 10 years.

Comments (5) View Comments

Share your thoughts on this story.

Add your comment
You must be signed in to add a comment. Sign-in | Register

In accordance with our Comment Policy, we encourage comments that are on topic, relevant and to-the-point. We will remove comments that include profanity, personal attacks, racial slurs, threats of violence, or other inappropriate material that violates our Terms and Conditions, and will block users who make repeated violations. We ask all readers to expect diversity of opinion and to treat one another with dignity and respect.


Most Recent Comments
Roelof 09/05/07 10:43:48 AM EDT

Nice post, but could you please fix the examples. Both links give a 404 error!

Cheers

Anupam 08/16/07 02:50:32 AM EDT

I got an 404 error while clicking on the link :(

Please update it!

Cheers!
Anupam

Abhishek 08/07/07 09:22:24 AM EDT

The links for the examples(both JMS and Maps) are not accessible ....

Web Developer's & Designer's Journal 07/20/06 01:52:04 PM EDT

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.

Web Developer's & Designer's Journal 07/17/06 10:45:42 AM EDT

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.