Spring / BlazeDS Integration Test Drive

Christophe Coenraets, January 26th 2009

In this Test Drive, you run a series of short sample applications that demonstrate the key features of the Spring BlazeDS Integration.

This Test Drive is still work in progress. Please send your feedback to ccoenrae@adobe.com.

Samples

Source code:

If you want to open the source code in Flex Builder, read these instructions to set up your Flex Builder projects.


Spring BlazeDS Integration 101

Run the sample:

  1. Click here to run the application
  2. Click "Get Data": The DataGrid is populated with data returned by the findAll() method of the ProductDAO Java class.

Code walkthrough:

Open main.mxml in the spring-flex-testdrive/projects/flex/spring-blazeds-101/src directory to look at the source code of the application.

Open the following files in a text editor to look at the source code for the server side of the application:

Note that in this first sample, we use a simplistic DAO implementation with low level JDBC code and no real abstraction. This was done intentionally to provide a bare-bones example that focuses exclusively on the Spring/BlazeDS Integration plumbing. In all the other examples of this Test Drive, we use the JdbcTemplate abstraction of the Spring framework to build the data access objects.

Using RemoteObject, you can directly invoke methods of Java objects deployed in your application server, and consume the return value. The return value can be a value of a primitive data type, an object, a collection of objects, an object graph, etc.

Using the Spring BlazeDS integration, Spring beans are exposed using the typical Spring remoting exporter configuration. See the "product" bean definition in web-application-config.xml.

Java objects returned by server-side methods are deserialized into either dynamic or typed ActionScript objects. In this example, we don't have an explicit ActionScript version of the Product Java class. Product objects are therefore deserialized into dynamic objects. In InSync03 below, we start working with strongly typed model objects.

 


InSync01: Searching Contacts

Run the sample:

  1. Click here to run the application
  2. Click the Search button to retrieve all the contacts in the database
  3. Enter a few characters in the Search input field before clicking the Search button in order to search by name

Code walkthrough:

Open insync01.mxml in the spring-flex-testdrive/projects/flex/insync01/src directory to look at the source code of the application.

Open the following files in a text editor to look at the source code for the server side of the application:


InSync02: Using the RemoteObject Events

Run the sample:

Click here to run the application

Code walkthrough:

Open insync02.mxml in the spring-flex-testdrive/projects/flex/insync02/src directory to look at the source code of the application.

This version is similar to InSync01, but demonstrates how to use the ResultEvent and FaultEvent to have a finer control over RemoteObject calls.


InSync03: Strong Typing

Run the sample:

  1. Click here to run the application
  2. Click the Search button to retrieve all the contacts in the database
  3. Enter a few characters in the Search input field before clicking the Search button to search by name
  4. Select a contact in the DataGrid
  5. Edit the contact in the Contact form and click "Save" to persist your changes

Code walkthrough:

Open insync03.mxml, Contact.as, and ContactForm.mxml in the spring-flex-testdrive/projects/flex/insync03/src directory to look at the source code of the application.

In this version, we work with strongly typed contact objects. The Contact.as class is the ActionScript representation of spring.flex.samples.contact.Contact.java. The [RemoteClass(alias="flex.spring.samples.contact.Contact")] annotation in Contact.as is used to indicate that instances of Contact.as sent to the server should be deserialized as instances of flex.spring.samples.contact.Contact at the server side, and that similarly, instances of flex.spring.samples.contact.Contact retrieved from the server should be deserialized as instances of Contact.as.


InSync04: Opening Multiple Contacts

Run the sample:

  1. Click here to run the application
  2. Click the Search button to retrieve all the contacts in the database
  3. Enter a few characters in the Search input field before clicking the Search button to search by name
  4. Double-click a contact in the DataGrid to open it in a separate Tab
  5. Edit the contact in the Contact form and click "Save" to persist your changes

Code walkthrough:

Open insync04.mxml in the spring-flex-testdrive/projects/flex/insync04/src directory to look at the source code of the application.


InSync05: Adding New Contacts

Run the sample:

  1. Click here to run the application
  2. Click the Search button to retrieve all the contacts in the database
  3. Click the New Contact button
  4. Edit the new contact in the Contact form and click "Save" to create the contact

Code walkthrough:

Open insync05.mxml and ContactForm.mxml in the spring-flex-testdrive/projects/flex/insync05/src directory to look at the source code of the application.

This version enables the user of the application to add contacts. In ContactForm, we remotely invoke the create() method of ContactDAO when dealing with a new contact, and the update() method when updating an existing contact.


InSync06: Adding Event Notification for "Loosely Coupled" UI Synchronization

Run the sample:

  1. Click here to run the application
  2. Click the Search button to retrieve all the contacts in the database
  3. Enter a few characters in the Search input field before clicking the Search button to search by name
  4. Double-click a contact in the DataGrid to open it in a separate Tab
  5. Modify the first name or last name of the contact and click "Save". Notice that the DataGrid is updated to reflect your changes.
  6. Add a new contact and click "Save" to create the contact. Notice that the contact appears in the DataGrid.
  7. Delete a contact and notice that the contact is removed from the DataGrid.

Code walkthrough:

Open insync06.mxml, ContactForm.mxml, and ContactEvent.as in the spring-flex-testdrive/projects/flex/insync06/src directory to look at the source code of the application.

In this version, ContactForm dispatches events when a contact has been created, updated, or deleted. Other components of the application can register as listeners to these events to perform a specific task when a contact is created, updated or deleted. In this case, the main application registers as a listener to these events and refreshes the contact DataGrid to make sure it reflects the changes made in ContactForm.


InSync07: Styling the Application

Run the sample:

  1. Click here to run the application
  2. Click the Search button to retrieve all the contacts in the database
  3. Enter a few characters in the Search input field before clicking the Search button to search by name

Code walkthrough:

Open insync07.mxml and styles.css in the spring-flex-testdrive/projects/flex/insync07/src directory to look at the source code of the application.


inSync AIR: Desktop Version and the Client-Side Channel API

Run the sample:

  1. Click here to install the application
  2. Click the Search button to retrieve all the contacts in the database
  3. Enter a few characters in the Search input field before clicking the Search button to search by name

Code walkthrough:

Open main.mxml in the spring-flex-testdrive/projects/flex/insync-air-spring/src directory to look at the source code of the application.

In this version we also use the client-side Channel API to programmatically provide the endpoint of the AMF channel. By default, the endpoint is read from services-config.xml at compile time. This means that the compiled application includes a hardcoded value for the AMF endpoint URL, which is not appropriate for real life applications. The client-side Channel API allows you to provide the endpoint URL at runtime. In this version, the URL is now hardcoded in the client code which is not a good solution either. The key, in a real life application, is to obtain that URL dynamically. One approach is to read a configuration file using the HTTPService.


Company Manager

Run the sample:

  1. Click here to run the application
  2. Click the Search button to retrieve all the contacts in the database
  3. Enter a few characters in the Search input field before clicking the Search button to search by name

Code walkthrough:

Open companymgr.mxml, Company.as, Industry.as, and CompanyForm.mxml in the spring-flex-testdrive/projects/flex/companymgr/src directory to look at the source code of the application.

Open the following files in a text editor to look at the source code for the server side of the application:

This application is similar to inSync, but demonstrates object associations: the Company class has a property of type Industry.