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.

The news is probably all over the blogs, but I thought I would summarize the key points:

• The Remoting and Messaging technology previously available only as part of LiveCycle Data Services will now be available for free as a new Open Source product called BlazeDS (under LGPL v3 license).
• The public beta of BlazeDS is available for download here (the GA version is scheduled for early 2008).
• As part of this announcement, the Action Message Format (AMF) protocol specification is also being published. The spec is available here.
• The JIRA bugbase is available here.

Additional Information:

• BlazeDS includes a new HTTP Streaming channel for real time applications that require very low latency. The sample applications packaged with BlazeDS provide examples of real time market data streaming and collaborative applications built with BlazeDS and using the new HTTP Streaming channel (the RTMP protocol is not included in BlazeDS).
• In addition to the BlazeDS war file, the BlazeDS download includes a version of Tomcat (6.0.14) with a series of web applications fully configured with BlazeDS (including blazeds-sample).

Getting Started:

1. Download the BlazeDS beta 1 zip file here
2. Expand it on your local file system (for example in a /blazeds directory)
3. Start Tomcat (startup.bat or startup.sh in /blazeds/tomcat/bin)
4. Open a browser and access the samples home page: http://localhost:8400/blazeds-samples/
5. Take the test drive!

Background Information on Messaging:

The Message Service provides a complete publish/subscribe infrastructure allowing Flex clients and the server to exchange messages in real time. The Message Service is made of two key components: a message service running in the application server, and a client-side API. The message service manages a set of destinations. The client-side API allows Flex clients to publish and subscribe to these destinations.

The Message Service enables data push, and collaborative applications to be delivered in the browser in a reliable and scalable manner while preserving the benefits of the traditional web deployment model.

The Message Service can integrate with existing messaging systems through an adapter architecture. A JMS adapter is available out-of-the-box. Using the JMS adapter, you can map BlazeDS messaging destinations to JMS topics, allowing Flex clients to publish and subscribe to JMS topics.

Background Information on Remoting:

Remoting allows a Flex applications to directly invoke methods of Java objects deployed in your application server. The benefits of Remoting include performance and the straightforward programming model.

Additional Offerings:

• Adobe will also offer “Adobe LiveCycle Data Services, Community Edition”, a subscription offering that includes certified builds of BlazeDS, enterprise support, etc.
• LiveCycle Data Services ES (the commercial product) will continue to exist and will focus on higher level APIs: such as Data Management Services, Portal Integration, Offline Synchronization, etc.

Click here to start the sample application.

I extracted this example from my Salesbuilder sample. The application is a simple sales pipeline. The X axis is a time axis, the Y axis represents the probability of closing deals (in percent), and the bubbles represent deals: the bigger the bubble, the bigger the deal.

The bubble chart features many “direct manipulation” options:

1. Grab the background of the chart with your mouse and scroll it left and write to navigate along the time axis.
2. Grab a vertical grid line, and move it left and right to zoom-out/zoom-in.
3. To modify your pipeline, grab a bubble with your mouse and move it up and down or left and right to adjust the probability and the expected closing date respectively

Flex to JavaScript:
When you move bubbles, the Flex application invokes a JavaScript method to update the Projected Revenue which is displayed in plain HTML on the page.

JavaScript to Flex:
You can also add opportunities (deals) using the HTML form at the bottom of the page.
For example, specify “Adobe” as the account, “Big Deal” as the project name, 500000 as the expected revenue, “50” as the days to close, and “70” as the probability.
When you click “Add Opportunity”, we use JavaScript to invoke the addOpportunity() method in the Flex application.

In this example, I use ExternalInterface to communicate between Flex and JavaScript. You can also use the Flex Ajax bridge which provides a higher level API and which is now integrated in FlexBuilder (version 3).

Click here to download the source code.

No rocket science here… just another example of a hybrid application.

I experimented with the 3D charts components which definitely provide a good example of the expressiveness of the Flex platform. Looking at the sample code, it looks like you can’t simply enable the 3D mouse interactivity (click and drag to rotate, mouse wheel to zoom in / zoom out) by setting a component property: you actually have to write some code, capture mouse events, etc… In my own experimentation, I isolated that code in a reusable Chart3DControl component that makes it easy to provide this kind of mouse interactivity in any component in your application.

Click here to launch my simple test application… an AdvancedDataGrid (providing row grouping) and a 3D ColumnChart: Click an item in the AdvancedDataGrid to visual drill-down using the 3D column chart. This application works with just 35 lines of code:

<?xml version="1.0" encoding="utf-8"?>
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" xmlns:local="*" xmlns:ilog="http://www.ilog.com/2007/ilog/flex"
	creationComplete="srv.send()">

	<mx:HTTPService id="srv" url="catalog.xml" result="gc.refresh()"/>

	<mx:AdvancedDataGrid id="dg" width="100%" height="40%">
                <mx:dataProvider>
                        <mx:GroupingCollection id="gc" source="{srv.lastResult.catalog.product}">
                             <mx:Grouping>
                                  <mx:GroupingField name="series"/>
                             </mx:Grouping>
                        </mx:GroupingCollection>
                </mx:dataProvider>
                <mx:columns>
			<mx:AdvancedDataGridColumn dataField="name"/>
			<mx:AdvancedDataGridColumn dataField="price"/>
		</mx:columns>
	</mx:AdvancedDataGrid>

	<local:Chart3DControl chart="{chart}"/>

	<ilog:ColumnChart3D id="chart" width="100%" height="60%"
		dataProvider="{dg.selectedItem.revenue}">
		<ilog:horizontalAxis>
			<mx:CategoryAxis categoryField="month"/>
		</ilog:horizontalAxis>
		<ilog:series>
			<ilog:ColumnSeries3D yField="europe"/>
			<ilog:ColumnSeries3D yField="na"/>
			<ilog:ColumnSeries3D yField="asia"/>
		</ilog:series>
    </ilog:ColumnChart3D>

</mx:Application>

Click here to download the source code.

I’m also thinking about integrating the Org Chart component into Salesbuilder.

Click here to install the application.

Click here to download the source code.

Follow this script for a guide tour of the application.