From the press release:

Adobe Systems Incorporated today announced that it is working with SpringSource to simplify the development and deployment of rich enterprise Java(TM) applications through a collaboration that will provide integration between the Adobe(R) Flash(R) and SpringSource platforms. This collaboration will make it easy for Java developers to create enterprise-class rich Internet applications (RIAs) using Adobe Flex(R) software, a cornerstone of the Adobe Flash Platform, and Spring, the de facto standard for enterprise Java.

With support from Adobe, SpringSource is introducing Spring BlazeDS Integration, a new open source project to provide tight integration between Spring and BlazeDS, Adobe’s open source server-based Java remoting and Web messaging technology. A beta version of the Spring BlazeDS Integration will be available from SpringSource in mid-December.
Also in development for early next year is the SpringSource Adapter for Adobe(R) LiveCycle(R) Data Services ES(TM) which will provide integration with Adobe LiveCycle Data Services ES, enabling the creation of server push-based applications based on Adobe Flex for real-time and near real-time solutions.

Read the press release here or here

I updated my Salesbuilder sample application to leverage the AIR 1.5 capabilities. Salesbuilder 1.5 leverages the new database encryption feature to allow you to secure your local database.

The first time you start Salesbuilder, the application will generate the encrypted database on your local file system. Salesbuilder implements the key generation approach described in the section Using encryption with SQL databases in the manual Developing Adobe AIR Applications. The encryption key is based on a password provided by you and a SALT generated by the system.

You can install the new version and download the source code here.

A basic script explaining how to use the application is available here.

Testing the hosted version

Disclaimer: I’m currently hosting the application on the server I use to host this blog (basic PHP and Tomcat hosting plan). I don’t know much about the characteristics of my server, but I’m probably sharing it with a few dozens of other domains and the resources allocated to me are obviously limited in that shared environment. This is clearly not the ideal environment to host a potentially large scale real time application and I’m investigating other hosting solutions. In the meantime, if you experience difficulties running the app, you can install it locally using the instructions provided below (in “Local installation instructions”). The hosted version tries to connect using RTMP by default (available only as part of LCDS) and falls back to “long AMF polling” or regular AMF polling if the RTMP connection fails.

1. Access http://coenraets.org/apps/gmaprooms/gmaprooms.html on two different machines or in two browser windows on the same machine.
2. Make sure you logon with two different user names and the same room name.
3. Move the map in one browser and notice that the position of the map is synchronized in the other browser.
4. You can also search an address in one browser and the resulting map position will appear in the two browsers.
5. The zoom level and the map type are also synchronized between users.
6. Click the “Whiteboard” button in one browser, pick a color to draw on the map (upper left corner), and start drawing.

Note: you can right-click the application and select View Source or click here to see the source code of the application.

Local installation instructions:

1. Install BlazeDS. You can download the BlazeDS turnkey server (a version of Tomcat with BlazeDS preinstalled) here.
2. Open {blazeds-install-dir}/tomcat/webapps/samples/WEB-INF/flex/services-config.xml and add an AMF long polling channel defined as follows:

   <channel-definition id="my-longpolling-amf" class="mx.messaging.channels.AMFChannel">
   	<endpoint url="http://{server.name}:{server.port}/{context.root}/messagebroker/amflongpolling" class="flex.messaging.endpoints.AMFEndpoint"/>
   	<properties>
   		<polling-enabled>true</polling-enabled>
   		<polling-interval-seconds>5</polling-interval-seconds>
   		<wait-interval-millis>60000</wait-interval-millis>
   		<client-wait-interval-millis>1</client-wait-interval-millis>
   		<max-waiting-poll-requests>200</max-waiting-poll-requests>
   	</properties>
   </channel-definition>
   

3. Open WEB-INF/messaging-config.xml and add the following destination:

   <destination id="gmaprooms">
   	<properties>
   		<server>
   			<allow-subtopics>true</allow-subtopics>
   			<subtopic-separator>.</subtopic-separator>
   		</server>
   	</properties>
   	<channels>
   		<channel ref="my-longpolling-amf"/>
   		<channel ref="my-polling-amf"/>
   	</channels>
   </destination>
   

4. (Re)start the BlazeDS turnkey server.
5. Download the source code of the Google Maps Application here.
6. Create a Flex Builder project for the Flex application (gmaprooms). Make sure you configure your Flex Builder project to work with BlazeDS. To read instructions on how to set up a Flex Builder project that works with BlazeDS, make sure your BlazeDS turnkey server is started, and click here.
7. Download the Google Maps ActionScript 3 API here, and add the swc file in the libs folder of your project.
8. Get a Google Maps API key and assign it to map.key in the initMap() function in MapArea.mxml.
9. Compile the application.
10. Open the Flex application in two browser windows (to simulate two users in different locations) and test the application as described above (in “Testing the hosted version”).

Installation instructions

1. Install BlazeDS or LCDS.
2. Download the client-side of the application. The end-user application is mortgageapp.mxml, and the support representative application is callcenter.mxml.
3. Download and deploy the server-side of the application.
4. Add the following destination in WEB-INF/flex/remoting-config.xml.

   <destination id="ticket-service">
       <properties>
           <source>flex.samples.livehelp.TicketService</source>
           <scope>application</scope>
       </properties>
       <channels>
           <channel ref="my-rtmp"/>
           <channel ref="my-amf"/>
       </channels>
   </destination>
   

   NOTE: If you are using BlazeDS, remove the line that defines the “my-rtmp” channel.

5. Add the following destination in WEB-INF/flex/messaging-config.xml.

   <destination id="callcenter">
       <properties>
           <server>
               <allow-subtopics>true</allow-subtopics>
               <subtopic-separator>.</subtopic-separator>
           </server>
       </properties>
       <channels>
           <channel ref="my-rtmp"/>
           <channel ref="my-longpolling-amf"/>
       </channels>
   </destination>
   

   NOTE: If you are using BlazeDS, remove the line that defines the “my-rtmp” channel in the above destination, and add the following channel definition in WEB-INF/flex/services-config.xml:

   <channel-definition id="my-longpolling-amf" class="mx.messaging.channels.AMFChannel">
   	<endpoint url="http://{server.name}:{server.port}/{context.root}/messagebroker/amflongpolling" class="flex.messaging.endpoints.AMFEndpoint"/>
   	<properties>
   		<polling-enabled>true</polling-enabled>
   		<polling-interval-seconds>3</polling-interval-seconds>
   		<wait-interval-millis>60000</wait-interval-millis>
   		<client-wait-interval-millis>1</client-wait-interval-millis>
   		<max-waiting-poll-requests>200</max-waiting-poll-requests>
   	</properties>
   </channel-definition>
   

6. Follow the instructions in my original post to experience the application.

I recently posted a number of examples (Yahoo Maps Collaboration and Collaborative Data Entry) showing how to use the BlazeDS / LCDS Message Service to build collaborative applications. In this post, I’m extending the Collaborative Forms application to provide an example of a more complete and real life “Live Help / Call Center” application.

The use case goes like this: a customer tries to complete a task (in this case: apply for a mortgage) on a web site, gets in trouble, and starts a “Live Help” session with a support representative. Among other things, the support representative can remotely drive the customer’s application, enter data collaboratively with the customer, chat with the customer using a text-based and/or a video-chat session, close the support ticket, etc.

To make it easier for you to experience the application, I’m hosting it on my server. You can test it using the instructions below.

Testing the application:

1. Open a browser and access http://coenraets.org/apps/livehelp/customer.html. Enter your email address and click Start.

   Note: Your email address is used as a unique identifier to allow you to test the application in your own sandbox: your experiments are isolated from the experiments of other users testing the application.

2. Open another browser window (on the same computer or on a different computer) and access http://coenraets.org/apps/livehelp/callcenter.html. Enter your email address and click “Start”. Make sure you use the same email address you used in the customer application.

3. In the customer application, enter some data in different tabs.

4. Click “Start session” to initiate a Live Help session with a support rep.

5. Notice that a new ticket appears in the call center application.

6. In the call center application select the new ticket, and click “Handle Ticket” (upper right corner). A message should appear in the chat window of the customer application. Notice that the data you typed in the customer application automatically appears in the support rep application.

7. Type a chat message in the support rep app: the message appears in the customer app.

8. The support rep can remotely drive the customer application: in the support rep application, change the selected Accordion tab, and notice that the customer application’s user interface is automatically synchronized. This works in both directions: you can change the Accordion tab in the customer app and the support rep’s user interface will be automatically synchronized as well.

9. The application supports collaborative data entry (collaborative form filling): Enter some data in the support rep application: notice that the data automatically appears in the customer application. This works in both directions as well.

10. On the Employment History tab, add a few companies (including start date, end date, and salary) and notice that the employment history list is automatically synchronized in the other browser.

11. If you have a webcam attached to your system, click the “Start webcam” button in one of the applications.

    Note: Live video streaming is powered by Flash Media Server. Since I don’t have access to a hosted instance of Flash Media Server, live video streaming is not enabled in this hosted version.

I will post the source code in the coming days.

Two years ago, I wrote a simple Google Maps collaboration example. The Flex application listened to Google Maps events to synchronize maps between different users. It also added nice collaboration features such as videoconferencing and a collaborative whiteboard overlaid on top of the map. In addition to demonstrating the real-time messaging capabilities of Flex, this application also illustrated Flex/Ajax integration using External Interface.

Two recent events prompted me to revisit this sample:

1. Yahoo recently released an ActionScript 3 API for Yahoo Maps.
2. Adobe recently released the Remoting and Messaging features of LiveCycle Data Services as an Open Source project named BlazeDS.

So, I updated the sample to work with the Yahoo Maps ActionScript API and BlazeDS (or LCDS). No need to communicate between Ajax and Flex in this version since the rendering of the map is entirely done within the Flex application.

Testing the hosted version

Disclaimer: I’m currently hosting the application on the server I use to host this blog (basic PHP and Tomcat hosting plan). I don’t know much about the characteristics of my server, but I’m probably sharing it with a few dozens of other domains and the resources allocated to me are obviously limited in that shared environment. This is clearly not the ideal environment to host a potentially large scale real time application and I’m investigating other hosting solutions. In the meantime, if you experience difficulties running the app, you can install it locally using the instructions provided below (in “Local installation instructions”). The hosted version tries to connect using RTMP by default (available only as part of LCDS) and falls back to “long AMF polling” or regular AMF polling if the RTMP connection fails.

1. Access http://coenraets.org/maprooms/maprooms.html on two different machines or in two browser windows on the same machine.
2. Make sure you logon with two different user names and the same room name.
3. Move the map in one browser and notice that the position of the map is synchronized in the other browser.
4. You can also search an address in one browser and the resulting map position will appear in the two browsers.
5. The zoom level and the map type are also synchronized between users.
6. Click the Map Sharing button in one browser, pick a color to draw on the map (upper left corner), and start drawing.

Note: you can right-click the application and select View Source or click here to see the source code of the application.

Local installation instructions:

1. Install BlazeDS. You can download the BlazeDS turnkey server (a version of Tomcat with BlazeDS preinstalled) here.
2. Open {blazeds-install-dir}/tomcat/webapps/samples/WEB-INF/flex/services-config.xml and add an AMF long polling channel defined as follows:

   <channel-definition id="my-longpolling-amf" class="mx.messaging.channels.AMFChannel">
   	<endpoint url="http://{server.name}:{server.port}/{context.root}/messagebroker/amflongpolling" class="flex.messaging.endpoints.AMFEndpoint"/>
   	<properties>
   		<polling-enabled>true</polling-enabled>
   		<polling-interval-seconds>5</polling-interval-seconds>
   		<wait-interval-millis>60000</wait-interval-millis>
   		<client-wait-interval-millis>1</client-wait-interval-millis>
   		<max-waiting-poll-requests>200</max-waiting-poll-requests>
   	</properties>
   </channel-definition>
   

3. Open WEB-INF/messaging-config.xml and add the following destination:

   <destination id="flexmaps">
   	<properties>
   		<server>
   			<allow-subtopics>true</allow-subtopics>
   			<subtopic-separator>.</subtopic-separator>
   		</server>
   	</properties>
   	<channels>
   		<channel ref="my-longpolling-amf"/>
   		<channel ref="my-polling-amf"/>
   	</channels>
   </destination>
   

4. (Re)start the BlazeDS turnkey server.
5. Download the source code of the Yahoo Maps Application here.
6. Create a Flex Builder project for the Flex application (maprooms). Make sure you configure your Flex Builder project to work with BlazeDS. To read instructions on how to set up a Flex Builder project that works with BlazeDS, make sure your BlazeDS turnkey server is started, and click here.
7. Download the Yahoo Maps ActionScript 3 API here, and add YahooMap.swc in the libs folder of your project.
8. Get a Yahoo API key here and assign it to the appid variable in MapArea.mxml.
9. Compile the application.
10. Open the Flex application in two browser windows (to simulate two users in different locations) and test the application as described above (in “Testing the hosted version”).

The Test Drive Server includes:

1. An updated version of my 30 minutes Test drive for Java developers
2. A brand new Flex Data Management Services tutorial
3. Flex/Spring integration samples running “out-of-the-box”
4. Flex/Hibernate integration samples running “out-of-the-box”
5. Flex/JMS integration samples (JMS powered by ActiveMQ) running “out-of-the-box”
6. A new version of my Real Time Market Data application with advanced messaging features: Java API (no JMS in this version), subtopics, etc.
7. Collaboration Dashboard

Installation Instructions

1. Proceed to the Test Drive Server download page
2. Expand fds-tomcat.zip

   NOTE: The instructions in the documentation assume that you expand fds-tomcat in your root directory. You can expand fds-tomcat anywhere else. Just make sure you adjust the path in the samples and tutorial instructions accordingly.

3. Open install.htm in the fds-tomcat directory for information on running the Test Drive Server.

Disclaimer: The Test Drive Server is currently not an officially supported product. I’ll of course do my best to answer your questions, and your feedback is very much appreciated. It is intended to allow Java Developers to quickly evaluate or/and get started with Flex in a Java environment.

ERRATA: On page 4 in the tutorial PDF: “On the Java Settings page, specify fdms-tomcat/classes as the Default output folder, and click Finish”. The name of the folder is incorrect: it should read: Specify “fds-tomcat/classes” as the Default output folder (The screen shot is correct).

More Info

The Flex Test Drive Server includes the following products, frameworks, and libraries (All these products are configured to work together “out-of-the-box” when you install the Test Drive Server) :

• Tomcat 5.5.20
• Flex Data Services (FDS 2.0.1)
• JOTM (JTA implementation)

  The Flex Data Management Services leverage the Java Transaction API (JTA). Because
  Tomcat doesn’t provide a JTA implementation, the Test Drive Server includes JOTM (an open source implementation of the Java Transaction API). You don’t need JOTM if your application server implements the full Java EE stack.

• ActiveMQ (JMS implementation)

  The Flex Data Services integrate with JMS (see integration examples in the Test Drive Server). Because Tomcat doesn’t provide a JMS implementation, we use ActiveMQ (an open-source JMS provider) as part of this Test Drive Server. You don’t need ActiveMQ if your application server implements the full Java EE stack, or if your application doesn’t use JMS.

• Spring 2

  Flex integrates with the Spring framework through the Flex SpringFactory (see integration examples in the Test Drive Server). Spring 2 is part of the Flex Test Drive Server to demonstrate this Flex/Spring integration.

• Hibernate 3.2

  Flex integrates with the Hibernate through the Flex HibernateAssembler(see integration examples in the Test Drive Server). Hibernate is part of the Flex Test Drive Server to demonstrate this Flex/Hibernate integration.

• HSQLDB 1.8

  To allow you to run the tutorial “out-of-the-box” without setting up a database, the Test Drive server
  includes an HSQLDB database. HSQLDB is a lightweight Java RDBMS that is particularly well
  suited to run samples. hsqldb.jar (in [tomcat_root]\webapps\ROOT\WEB-INF\lib) includes both
  the RDBMS engine and the JDBC driver. The HSQLDB database server is automatically started as part of the Tomcat startup process.

I presented a session called “Building Collaborative Applications with Flex Data Services and Flash Media Server” at MAX (the Adobe developer conference) last week. Beyond the basics of the Flex pub/sub messaging infrastructure, the session provided techniques to build real life collaborative applications. I started with a simple chatroom, and then incrementally added features to end up with an IM client supporting presence and videoconferencing.

Many people have asked me to make my code available. So here it is. If you didn’t attend MAX, I added a brief description for each version of the application.

To run these samples, you need to install the Flex Data Services. If you haven’t already done so, you can download the Flex Data Services here, and follow the installation instructions.

Install the samples

1. Download flex-collaboration.zip here and expand it on your local file system
2. Copy the flexchat directory in the context root of your web application
3. Copy the WEB-INF\src and WEB-INF\classes directories in the corresponding directory structure of your web application

Install the flexchat database

Starting with chat3.mxml, you will need a MySQL database.

1. Create a new MySQL database or use an existing one
2. Import the flexchat database using the flexchat.sql script
3. Make sure a MySQL JDBC driver is available to your web application
4. Edit flexchat.properties in WEB-INF\classes, and make sure the connection properties match your configuration

Install Flash Media Server

chat6.mxml requires Flash Media Server to enable videoconferencing.

1. Install the Flash Media Server: you can download a free developer edition here (click free developer edition)
2. In C:\Program Files\Macromedia\Flash Media Server 2\applications, create a directory called flex_videoconference and copy the main.asc file in that directory

Samples Walkthrough

chat1.mxml

chat1.mxml is a minimal chat application showing how to use the pub/sub messaging capabilities of Flex with just a couple of lines of code.

In this version, messages posted to the “chat” destination go to all the clients who subscribed to it. This is appropriate for a multi-user chatroom use case, but not for instant messaging applications where you want private conversations with individual users.

To run this sample, define a “chat” destination in messaging-config.xml as follows:

    <destination id="chat">

        <properties>
            <network>
                <session-timeout>0</session-timeout>
            </network>
            <server>
                <max-cache-size>1000</max-cache-size>
                <message-time-to-live>0</message-time-to-live>
                <durable>false</durable>
            </server>
        </properties>

        <channels>
            <channel ref="my-rtmp"/>
        </channels>

    </destination>

You may need to restart your server after modifying messaging-config.xml.

chat2.mxml

In this version, we use subtopics to enable private conversations between users. If you want to send a message to a user named Joe, you publish your message to the “Joe” subtopic of the chat destination (chat.Joe). Similarly, if Joe only needs to receive the messages that are sent to him, his client application can subscribe to the “Joe” subtopic.

Subtopics don’t need to be declared. All you need to do is configure your destination to support subtopics as shown below (allow-subtopics and subtopic-separator tags):

    <destination id="chat">

        <properties>
            <network>
                <session-timeout>0</session-timeout>
            </network>
            <server>
                <max-cache-size>1000</max-cache-size>
                <message-time-to-live>0</message-time-to-live>
                <durable>false</durable>
                <allow-subtopics>true</allow-subtopics>
                <subtopic-separator>.</subtopic-separator>
            </server>
        </properties>

        <channels>
            <channel ref="my-rtmp"/>
        </channels>

    </destination>

chat3.mxml

In this version, we add a buddy list using a DataService. The buddy list is displayed after the user logs on. You need to install the MySQL database to run this application.

To run this sample, add a “chat-buddies” destination in data-management-config.xml as follows:

    <destination id="chat-buddies">

        <adapter ref="java-dao" />

        <properties>
            <source>flex.samples.chat.BuddyAssembler</source>
	    <scope>application</scope>

            <metadata>
                <identity property="userId"/>
                <identity property="buddyId"/>
            </metadata>

            <network>
                <session-timeout>20</session-timeout>
                <paging enabled="false" pageSize="10" />
                <throttle-inbound policy="ERROR" max-frequency="500"/>
                <throttle-outbound policy="REPLACE" max-frequency="500"/>
            </network>
        </properties>

    </destination>

chat4.mxml

In chat4.mxml, we add a custom adapter (ChatAdapter.java) to the chat destination to support basic presence information. ChatAdapter implements the FlexSessionListener interface and uses the sessionCreated and sessionDestroyed callback methods to keep track of when users connect and disconnect, and notify interested parties.

The client application uses separate consumers to subscribe to a “status” subtopic for each buddy in the buddy list (chat.status.jane, chat.status.eric, chat.status.susan, etc.). See the dsBuddiesResult() method for the implementation details.

To run this sample, add our simple ChatAdapter in the list of configured adapters in messaging-config.xml. Th list of configured adapters should look like this:

    <adapters>
        <adapter-definition id="actionscript" class="flex.messaging.services.messaging.adapters.ActionScriptAdapter" default="true" />
        <adapter-definition id="jms" class="flex.messaging.services.messaging.adapters.JMSAdapter"/>
        <adapter-definition id="chat" class="flex.samples.chat.ChatAdapter"/>
    </adapters>

Next, specify that you want to use the chat adapter in the chat destination by adding the adapter reference as follows:

    <destination id="chat">

        <properties>
            <network>
                <session-timeout>0</session-timeout>
            </network>
            <server>
                <max-cache-size>1000</max-cache-size>
                <message-time-to-live>0</message-time-to-live>
                <durable>false</durable>
                <allow-subtopics>true</allow-subtopics>
                <subtopic-separator>.</subtopic-separator>
            </server>
        </properties>

        <channels>
            <channel ref="my-rtmp"/>
        </channels>

        <adapter ref="chat"/>

    </destination>

The unresolved issue in this version is that when you log on, you still don’t know which of your buddies are *already* online, and what their status is.

chat5.mxml

In this version, we use a DataService (“chat-sessions”) to keep track of the active user sessions along with presence information. Just like we did in ChatAdaper, the UserSessionAssembler class implements the FlexSessionListener interface and uses the sessionCreated and sessionDestroyed callback methods to create and remove user sessions. Using a DataService to keep track of presence information is convenient because changes (i.e. status information) are automatically pushed to all interested clients.

To run this sample, add a “chat-sessions” destination in data-management-config.xml as follows:

    <destination id="chat-sessions">

        <adapter ref="java-dao" />

        <properties>
            <source>flex.samples.chat.UserSessionAssembler</source>
	        <scope>application</scope>

            <metadata>
                <identity property="userId"/>
            </metadata>

            <network>
                <session-timeout>20</session-timeout>
                <paging enabled="false" pageSize="10" />
                <throttle-inbound policy="ERROR" max-frequency="500"/>
                <throttle-outbound policy="REPLACE" max-frequency="500"/>
            </network>

        </properties>

    </destination>

chat6.mxml

This version is the same as chat5.mxml with the addition of videoconferencing features enabled by Flash Media Server. Start your webcam in one session. in the buddy list of another session, click the name of the user who is broadcasting to see the video feed.