Client Side Data Management using Flash Builder 4

Updated for Flash Builder 4 release version 🙂

Flash Builder 4 has Client side Data Management feature which lets you do the following

  1. Track changes to the local data
  2. Undo operations on the local data
  3. Automate common CRUD, instead of hand coding
  4. Automatically/Manually commit all local changes to server
  5. and more ……

We saw how we can point Flash Builder 4 to a Remoting destination and build Flex UI to it by just few clicks here https://sujitreddyg.wordpress.com/2009/06/01/building-flex-application-for-blazeds-remoting-service-using-flash-builder-4/

In this article we will see how we can enable client side Data Management for a Remoting destination. Client side Data Management is not specific to BlazeDS, it will work with any type of service including HTTP Service.

In this sample we will expose SimpleCustomerService.Java as Remoting destination. SimpleCustomerService communicates with database and returns SimpleCustomer objects.

To know how to expose Java classes as Remoting destination visit this URL https://sujitreddyg.wordpress.com/2008/01/14/invoking-java-methods-from-adobe-flex/

Setting up BlazeDS RDSDispatchServlet

After setting up BlazeDS, you have to enable RDSDisptachServlet, which is used by Flash Builder 4 to get destination details. This is disabled by default. It’s very simple all you have to do is to un-comment/add the Servlet mapping in the web.xml.

Copy the Servlet URL mapping and declaration for the RDSDispatchServlet from the web.xml in the blazeds.war file and add to your web application web.xml file. Else copy it from below

<servlet>
<servlet-name>RDSDispatchServlet</servlet-name>
<display-name>RDSDispatchServlet</display-name>
<servlet-class>flex.rds.server.servlet.FrontEndServlet</servlet-class>
<init-param>
<param-name>useAppserverSecurity</param-name>
<param-value>false</param-value>
</init-param>
<load-on-startup>10</load-on-startup>
</servlet>
<servlet-mapping id=”RDS_DISPATCH_MAPPING”>
<servlet-name>RDSDispatchServlet</servlet-name>
<url-pattern>/CFIDE/main/ide.cfm</url-pattern>
</servlet-mapping>

To use Client side data management, we need to create functions/methods on the server which will perform the CRUD operations on the server. Function/Method signatures on the server side should be as follows

  1. Add item – accepts entity type object and returns either ID of the added item or added entity object “public int addCustomer(SimpleCustomer customer) or public Customer addCustomer(Customer customer)
  2. Update item – accepts entity type object and returns nothing “public void updateCustomer(SimpleCustomer customer)
  3. Delete item – accepts either ID of the item or the entity object to delete and returns Boolean or nothing “public void deleteCustomer(int customerId) or public void deleteCustomer(SimpleCustomer customer)
  4. Get item – accepts ID of the item and returns entity object “public SimpleCustomer getCustomer(int customerId)

Now that we have our server side code ready, we will use Flash Builder to generate AS3 code to consume the Remoting service and enable data management on the client.

Install Flash Builder 4

Download and install Flash Builder 4 from this URL http://www.adobe.com/products/flashbuilder/

Create new Flex project

Enter project details

In this screen:

  1. Enter project name
  2. Set “Web (runs in Adobe Flash Player)” as the application type
  3. Use default Flex SDK (Flex 4.0)
  4. Set the application server type to J2EE
  5. Select BlazeDS
  6. Click on Next

Configure J2EE server settings

In this screen:

  1. Set the Root folder to the root folder of your web application with BlazeDS configured. In this sample its C:\Program Files\Apache Software Foundation\Tomcat 6.0\webapps\demo
  2. Enter the URL to your web application in Root URL
  3. Set the context root to context root of your web application
  4. Leave the output folder to default value
  5. Click on validate configuration button, you can see validation message on top of the screen
  6. Click finish to continue

Using DCD to generate code to consume service


  1. Select the Data/Services window shown in the image above. If this is not visible, select it from Window -> Data/Services
  2. Click on “Connect to Data/Service” (highlighted in the image) in the Data/Services window
  3. Window as shown in the image below will be launched

Creating new service


In this sample we are consuming a BlazeDS Remoting service so select BlazeDS and click on Next.

Flash Builder will display a window asking for RDS credentials. Since we turned off security for our RDSServlet by setting the “useAppserverSecurity” parameter to “false” in the web.xml, select “No password required” and click on OK to continue.

Selecting Remoting destination

In this screen we are selecting the destination the newly created service should use. All destinations available will be displayed, select the destination which points to the SimpleCustomerService.java. In this sample SimpleCustomerService is exposed as Remoting destination service with id – SimpleCustomerServiceDestination.

Code for invoking the Remoting service will be generated. You can also see the service and its operations (methods exposed by the Java class) being displayed in the “Data/Services” window and in the package explorer.

Configuring Client Side Data Management

Right click on the getAllCustomers() operation and select “Enable Data Mangement” as shown in the image below.

A window as shown in the image below will be launched.

Data Management needs unique identifier to manage the objects. In this screen, we should select the unique identifier for the data type, which is usually the primary key. Select the unique key (customerId in this sample) and click on next.

We need to map the Data Management operations to functions/methods from your service class to use for performing CRUD operations. Select appropriate operations as show in the image above. Operations should have signatures as explained in this article.

In this screen:

  1. Select the operations which have to be invoked for respective data management operations
  2. Click finish to continue.

Binding data to UI controls

Switch to design view as shown in the image below.

In this screen:

  1. Change the Application layout to spark.layouts.VerticalLayout
  2. Drag and drop a DataGrid on to the design view
  3. Set the editable property of the DataGrid to true
  4. Set the width property of the DataGrid to 100%
  5. Select the DataGrid
  6. Right click on the DataGrid and select “Bind to Data”
  7. You will see a window with options to bind to a service as shown in the image below

In this screen:

  1. Select “New service call”, because we want to create a new service call
  2. Select “SimpleCustomerService” from services
  3. Select “getAllCustomers()” operation from the list
  4. Set the Data provider to “SimpleCustomer[]”
  5. Click on OK to continue

We will add a button which will commit all changes to the server. Add a Button control as shown in the image below.

In this screen:

  1. Add a Button control below DataGrid
  2. Set the label of the Button to “Commit”

Let’s generate a click handler for the button.

In this screen:

  1. Select the button and right click on the button
  2. Select “Generate click handler”
  3. Flash Builder will shift to the code view so that you can add code to the generated click handler as shown in the image below

In this screen, we will be invoking commit() function on the SimpleCustomerServiceDestination service so that any changes made to the data on the client will be saved on the server when the commit button is clicked.

Add “simpleCustomerServiceDestination.commit();” to the generated button click handler function as shown in the image above.

Save and run the application. Application will be launched in the browser as shown in the image below. Make changes to the data in the DataGrid and click on “commit” button. You will see all changes made to the data will be saved on the server.

Based on the changes to the data on the client, respective operations will be invoked. For example if you modified an entry, then the update operation will be invoked and on the server your class will have logic to update the same in the database.

You can perform all CRUD operations with just one line of code. Check the attached sample code to see how to add/delete an item. Please download MXML file with CRUD functionality implemented at this URL http://sujitreddyg.com/fb4articles/release/DMSample.mxml.txt

More article on Flash Builder 4 at this URL https://sujitreddyg.wordpress.com/flash-builder-4/

Flash Builder 4 rocks🙂

12 Responses to Client Side Data Management using Flash Builder 4

  1. Tomulus says:

    Hi, some special things in the UnCheckedException class ?

  2. Adobe Consultant says:

    Hi Sujit,
    Could not figure out a way to send you an email. When you get some time, please send me an email so that I can continue to discuss?

    Thanks,

  3. Tomulus says:

    Some problems with blazeds :
    – introspection don’t work with extended class, stop to the first level.
    – introspection stop if the service class is a singleton

    Some ideas?

  4. Hi Tomulus,

    What is the problem u r facing with UnCheckedException class???

    regarding Java class introspection https://sujitreddyg.wordpress.com/2009/06/04/connecting-to-http-services-with-the-data-centric-development-dcd-feature-in-flash-builder-4/#comment-24467

    BlazeDS requires a default no argument constructor to be present to expose a class as Remoting destination.

    Hope this helps.

  5. Tomulus says:

    Hi, try to create class A with pattern singleton (without parameters), i expose A in remoting destination and it’s don’t work i don’t see in flashbuilder. i have reported this bug on adobe jira.

  6. ricky says:

    woooooowwwwwwwww…. good.. thanks for info brother

  7. Henry Ho says:

    Any conflict resolution built in with FB4 client-side data management like in LCDS? Thx

  8. kan says:

    Can i control if i want to send mutiple grid data to server and commit all the data in one transaction?

  9. Hi Kan,

    I don’t think that is possible as of now🙂

  10. eseza says:

    thank you….really helpful

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s

%d bloggers like this: