Both the apk file and the source code are available for download on the project page.

Follow @ccoenraets

I updated my Test Drive for the M2 build of the Spring / BlazeDS integration project.

The Test Drive now includes a sample demonstrating the integration with Spring Security (the key new feature in M2). The Spring configuration file has also been updated to use the new simplified XML-namespace-based configuration.

Installation Instructions:

1. Download the Spring / Flex TestDrive here: http://coenraets.org/downloads/spring-flex-testdrive-M2.zip
2. Unzip it in your root directory
3. Navigate to /spring-flex-testdrive/tomcat/bin and start Tomcat (for instance: catalina run)
4. Open a browser and access http://localhost:8080
5. Follow the instructions

As always, I’d love to hear your feedback and your ideas to improve this Test Drive.

Christophe

Follow @ccoenraets

Follow @ccoenraets

Read the press release here.

I wrote about the initial implementation of the LCDS backend back in 2007. This write-up is now a little dated but still provides a high level overview of how LCDS is being used.

Start the Adobe Tour Tracker.

Follow @ccoenraets

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.

Follow @ccoenraets

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

Follow @ccoenraets

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.

Follow @ccoenraets

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.

Follow @ccoenraets

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.

Follow @ccoenraets

This application will also be packaged as a sample in the next version of LiveCycle Data Services currently in private beta.

Here is a quick look at the destinations and associations used in the application:

<destination id="account">
    <adapter ref="java-dao" />
    <properties>
        <source>com.salesbuilder.assembler.AccountAssembler</source>
        <scope>application</scope>
        <metadata>
            <identity property="accountId" undefined-value="0"/>
            <many-to-one property="salesRep" destination="sales-rep" lazy="true"/>
            <many-to-one property="industry" destination="industry" lazy="true"/>
            <many-to-one property="category" destination="account-category" lazy="true"/>
            <many-to-one property="state" destination="state" lazy="true"/>
        </metadata>
    </properties>
</destination>

<destination id="contact">
    <adapter ref="java-dao" />
    <properties>
        <source>com.salesbuilder.assembler.ContactAssembler</source>
        <scope>application</scope>
        <metadata>
            <identity property="contactId" undefined-value="0"/>
            <many-to-one property="account" destination="account" lazy="true"/>
            <many-to-one property="manager" destination="contact" lazy="true"/>
            <many-to-one property="salesRep" destination="sales-rep" lazy="true"/>
        </metadata>
    </properties>
</destination>

<destination id="opportunity">
    <adapter ref="java-dao" />
    <properties>
        <source>com.salesbuilder.assembler.OpportunityAssembler</source>
        <scope>application</scope>
        <metadata>
            <identity property="opportunityId" undefined-value="0"/>
            <many-to-one property="account" destination="account" lazy="true"/>
            <many-to-one property="salesRep" destination="sales-rep" lazy="true"/>
        </metadata>
    </properties>
</destination>

<destination id="industry">
    <adapter ref="java-dao" />
    <properties>
        <source>com.salesbuilder.assembler.IndustryAssembler</source>
        <scope>application</scope>
        <metadata>
            <identity property="industryId" undefined-value="0"/>
        </metadata>
    </properties>
</destination>

<destination id="sales-rep">
    <adapter ref="java-dao" />
    <properties>
        <source>com.salesbuilder.assembler.SalesRepAssembler</source>
        <scope>application</scope>
        <metadata>
            <identity property="salesRepId" undefined-value="0"/>
        </metadata>
    </properties>
</destination>

<destination id="account-category">
    <adapter ref="java-dao" />
    <properties>
        <source>com.salesbuilder.assembler.AccountCategoryAssembler</source>
        <scope>application</scope>
        <metadata>
            <identity property="categoryId" undefined-value="0"/>
        </metadata>
    </properties>
</destination>

<destination id="state">
    <adapter ref="java-dao" />
    <properties>
        <source>com.salesbuilder.assembler.StateAssembler</source>
        <scope>application</scope>
        <metadata>
            <identity property="stateId"/>
        </metadata>
    </properties>
</destination>

Installation instructions:

Prerequisite: You need to have LiveCycle Data Services installed on your system before executing the steps below.

1. Download salesbuilderlcds.zip
2. Unzip salesbuilderlcds.zip in /salesbuilderlcds

3. Copy the content /salesbuilderlcds/webapp/WEB-INF/classes to the WEB-INF/classes directory of your web application
4. Add the destinations defined in /salesbuilderlcds/webapp/WEB-INF/flex/data-management-config.xml to the data-management-config.xml file of your web application
5. Start the salesbuilder database
1. Open a command prompt and go to /salesbuilderlcds/db
2. Run startdb.bat (Windows) or startdb.sh (Unix-based systems)
6. Start your application server
7. Double-click /salesbuilderlcds/salesbuilderlcds.air to install the air application
8. Run the application

Configuration Note:

By default, the application tries to connect to the localhost server using the RTMP protocol on port 2037. If your server configuration is different, edit config.xml in the salesbuilder installation directory (“Program Files\Salesbuilder LCDS” on Windows).

If you are not familiar with the Salesbuilder application, here is a quick walkthrough:

Sales Pipeline
The sales pipeline 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 directly, 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. The projected revenue is automatically updated in the chart title. When you release the mouse button, the opportunity is automatically updated (probability and close date) in the database.
4. You can also double click a bubble to open a details view for the opportunity.

Search and Summary Screens

1. Type a few letters in the search box (upper right corner): matching accounts, contacts, and opportunities appear.
2. Use the arrow keys to navigate in the search results popup.
3. Use the Enter key to open the selected item.
4. Alternatively, you can also open the summary screens (“Accounts”, “Contacts”, and “Opportunities” buttons in the menu bar), and open individual items from there.

Working with Data

1. Open the “Alpha Corp” account.
2. Make some changes to the Alpha Corp data (for example, change the phone number), and click “Save””.
3. In the Contacts view of the Alpha Corp tab, you can grab an org chart item with your mouse and move the org chart around.
4. To open the details view for a contact, either double-click an org chart item or click the Grid button (lower left corner) and double-click a contact in the datagrid.
5. Add a contact by clicking “Quick Contact”. Make sure you select a manager, click save and notice that the org chart is updated automatically.
6. Continue to add and modify accounts, contacts, and opportunities. The data is persisted using the Data Management Service.

Native drag-and-drop

1. Click the “Opportunities” menu button.
2. Drag the dashboard title on the desktop: the chart is saved as a JPG on the desktop. Note: it can take a few seconds before you actually see the drag icon.
3. Open a Word document, drag the dashboard title again, and, this time, drop it directly in the Word document.
4. Select some rows in the datagrid, and, without releasing the mouse button, drag the selected rows and drop them on the desktop. The rows are saved as an Excel document on the desktop.
5. Double-click the Excel document to open the spreadsheet.
6. Drag some rows from the Datagrid again, and, this time, drop them directly somewhere in the Excel spreadsheet.

Follow @ccoenraets