Here are the links:

• Lab instructions PDF (Powering Flex Applications with BlazeDS and Data Services)
• Lab files (including final solutions)

If you didn’t have a chance to attend, you should be able to use this as a BlazeDS/LCDS tutorial as well.

It was great to see all of you at MAX. I hope to see you next year in Los Angeles.

Christophe

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 download the new version here: http://www.adobe.com/devnet/air/flex/articles/salesbuilder_demo.html

Introduction to BlazeDS and LiveCycle Data Services ES
Moscone West 2007
5:00pm to 6:00pm

The title of my Session is “Liberate your Data with AIR, BlazeDS and LCDS”. I will be showing some of the new and exciting features in Flex Builder 4 and LCDS “Next” to build data-driven applications. Hope to see you there!

The Data Management Service provides a set of low level APIs on top of which you can build your own higher level / higher productivity framework. The Hibernate assembler provides an example of a “generic assembler”, but you can also create your own. When used in this fashion, the Data Management Service can provide, by far, the most productive way to build data-driven applications.

To illustrate this point, I have been showing a demo at a few conferences this year, and I finally decided to package it. The demo combines a generic assembler and the runtime configuration feature of LCDS to provide a zero (server-side) code, zero configuration strategy to build data-driven applications. The demo goes like this:

1. Create a table in MySQL Query Browser… just to show that I was starting from scratch.
2. Add a few rows in the new table (still in MySQL Query Browser)
3. Create a new project in Flex Builder, and with the help of a DynamicDataService class, build a data maintenance application in literally three lines of code.

The key point of the demo was that I didn’t have to write any server-side code, or even configure anything (no XML) at the server-side… a table was all I needed.

Here is a quick and rough version of the demo:

Follow the instruction below to try it on your system:

1. Download flex-dynamic-data.zip and unzip it on your local file system.

2. Copy bin/flex-dynamic-data.jar in /tomcat/webapps/lcds-samples/WEB-INF/lib.

   flex-dynamic-data.jar includes two classes: DestinationService and DynamicJDBCAssembler. DestinationService creates data management destinations on the fly. Each destination created by DestinationService uses an instance of DynamicJDBCAssembler to dynamically generate the appropriate SQL statements for the fill, getItem, createItem, updateItem and deleteItem operations. You never have to directly work with or configure these two classes: they are automatically invoked by the client-side DynamicDataService component. The source code is available in /flex-dynamic-data/src/java.

3. Open remoting-config.xml in lcds-samples\WEB-INF\flex and add the following destination:

       <destination id="destination-factory">
           <properties>
               <source>flex.dynamic.data.DestinationService</source>
           </properties>
       </destination>
   

4. Copy flex-dynamic-data.properties in /tomcat/webapps/lcds-samples/WEB-INF/classes.

   Open the file. Notice that the default database is set to the HSQLDB sample database (flexdemodb) shipping with the product.

5. Create a new Flex Builder project. Specify J2EE as the application server type, check the “Use remote object access service” checkbox, uncheck the “Create a combined Java/Flex project using WTP” checkbox, and point to the lcds-samples web application:

   • Root folder: c:\lcds26\tomcat\webapps\lcds-samples
   • Root URL: http://localhost:8400/lcds-samples
   • Context root: /lcds-samples

6. Add flex_dynamic_data.swc to your build path.

   flex_dynamic_data.swc includes the DynamicDataService class. The source code is available in /flex-dynamic-data/src/as.

7. Code the application as follows.

   <?xml version="1.0" encoding="utf-8"?>
   <mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" xmlns:data="flex.dynamic.data.*">
   
   	<mx:ArrayCollection id="items"/>
   
   	<data:DynamicDataService id="ds" destination="dynamic.company"
   		ready="ds.fill(items)" />
   
   	<mx:DataGrid dataProvider="{items}" width="100%" height="100%" editable="true"/>
   
   </mx:Application>

8. Run the application.
9. Modify data (not the primary key)
10. Click the refresh button and notice that the data has been persisted.
11. Open a second browser and access the same URL. Modify data in one browser and notice that changes are automatically being pushed to the other browser.

Disclaimer: The mini framework provided with this sample is for demo purpose only. The goal is not to provide a production quality solution: I took many shortcuts and although it may be good for rapid prototyping, the specific strategy implemented here has serious limitations (single table, no support for associations, etc.). The goal is to illustrate what’s possible when building generic assemblers and runtime configuration, and hopefully generate a few ideas.

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”).

LCDS 2.6 allows you to build AIR applications with automatic offline data synchronization. This feature leverages the SQLite relational database system embedded in the AIR runtime, but the advantage is that the data synchronization process is entirely automatic: you don’t have to write SQL statements or synchronization logic to keep your local database in sync with your central database.

I have been getting a number of questions related to this feature, so I decided to build a sample application that demonstrates how it works.

In this application the synchronization process is implicit. When you are online, the cache (a SQLite database) is automatically updated along with the server database to make sure the user can go offline with the latest data without explicitly triggering a synchronization process. When you are offline, the changes are saved in the local cache. If the network becomes available while working in the application, the application will detect the network status change and automatically synchronize data (send your offline changes to the server, and get changes made by other users while you were offline).

Installation Instructions

1. If you haven’t already done so, install LCDS 2.6.
2. Unzip insync.zip
3. Copy the content of the sampledb folder in the sampledb folder of your existing LCDS directory
4. Copy the content of the tomcat folder in the tomcat folder of your existing LCDS directory
5. Add the following destination to data-management-config.xml

   <destination id="insync">
       <adapter ref="java-dao" />
       <properties>
           <source>lcds.samples.contact.ContactAssembler</source>
           <scope>application</scope>
           <metadata>
               <identity property="contactId" undefined-value="0"/>
           </metadata>
       </properties>
   </destination>

6. Restart the sample database: run sampledb.bat (Windows) or sampledb.sh (Unix) in the sampledb directory
7. Restart your application server

Quick Tour

1. Install and run the AIR application. Notice the green light in the status bar indicating that the application is in online mode.
   Please upgrade your Flash Player This is the content that would be shown if the user does not have Flash Player 9.0.115 or higher installed.

2. Double click a contact to view the contact details.
3. Modify the data in a few fields and click Save. Your server console indicates that the contact has been updated.
4. Click the + button in the application title bar. Enter a first name, last name, etc and click Save. Your server console indicates that the contact has been updated.
5. Shut down the server
6. Notice that the green light turns grey to indicate that the application is now working in offline mode.
7. Repeat steps 2 to 4 above: changes are saved locally. Notice that the offline status (not modified, created, or updated is displayed in the contact form (bottom left corner)
8. Restart the server.
9. The green light appears in that status bar as soon as the server is up and running. Notice that LCDS automatically detects the offline changes and sends them to the server.

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.