Flex Article

Collaborative data entry with Flex and BlazeDS

After Yahoo! Maps collaboration, here is another example of enabling collaboration in a Flex application using the publish/subscribe messaging infrastructure of BlazeDS.

This example demonstrates "collaborative forms" (or "collaborative data entry"). Users in different locations can fill in forms "together" in a real-time and in-context collaboration session: changes made by one user are automatically reflected in the other user's application.

Figure 1. My mortgage application

Testing the hosted version

1. Access http://coenraets.org/collabforms/collabforms.html on two different machines or in two browser windows on the same machine.
2. Click Create Session (bottom left) in one browser — a collaboration session is created with a unique collaboration session ID.
3. Enter this collaboration session ID in the other browser and click Join Session.
4. Change the selected Accordion tab in one browser and notice that the Accordion in the other browser is automatically synchronized.
5. Enter data in one browser and notice that the information is automatically synchronized in the other browser.
6. 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.

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

Notes:

1. The way a collaboration session is actually started may vary depending on the application. In this example, one user creates a collaboration session, and shares the collaboration session ID (via e-mail, IM, etc.) with people he or she wants to collaborate with. In other use cases, the collaboration session could start automatically. For example, in a call center scenario, a user might click a Live Help button which would result in the creation of a support ticket appearing in the Support Reps application. A support rep could then take ownership of the ticket and enter a collaboration session using, for example, the ticket ID as the collaboration session ID. See the call center version of this example.
2. In this example, the synchronization is performed using pub/sub messaging. You could also use the Data Management Service available with LiveCycle Data Services to automatically keep data in sync between multiple clients.
3. The hosted version of the application first tries to connect to the server using RTMP (available only as part of LiveCycle Data Services), and falls back to "long AMF polling" or regular AMF polling if the RTMP connection fails.

Local installation instructions:

1. Install BlazeDS. You can download the BlazeDS turnkey server (a version of Tomcat with BlazeDS preinstalled).

2. If you don't already have a channel called "my-longpolling-amf", 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="mortgage">
           <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 Mortgage Application.

6. Create a Flex Builder project for the Flex application (collabforms).

   Make sure you configure your Flex Builder project to work with BlazeDS. 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 http://localhost:8400/samples/fb-project-setup.htm

7. Compile the application.
8. 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").

About the author