Productive Enterprise Web Development with ExtJS and Clear Data Builder

It’s not likely that you’ll start developing an enterprise HTML5 applications without using one of the JavaScript frameworks. One of the most feature-complete frameworks is ExtJS from Sencha, but its learning curve is a bit steep. Our company, Farata Systems, has developed an open source software Clear Toolkit for ExtJS. Clear Toolkit includes an Eclipse plugin called Clear Data Builder (CDB). This is a productivity tool – a code generator – that can create a CRUD application for you in no time. This application will have HTML/JavaScript/ExtJS client and Java-based server. In this article you will learn how jump start development of such Web applications.

Part One: ExtJS MVC Application Scaffolding

In part one I’ll cover the following topics:

  • What is Clear Toolkit for ExtJS
  • How to create ExtJS MVC application for Java-based project
  • How deploy and run your first ExtJS+Java application on Apache Tomcat server

Clear Toolkit for ExtJS contains of following parts:

  • Clear Data Builder – Eclipse plugin that supports code generation ExtJS MVC artifacts based on Java code. CDB comes with wizards to start new project with plain Java or with popular frameworks like Hibernate, Spring, MyBatis.
  • Clear JS – set of JavaScript components that extends ExtJS standard components. E.g. Clear JS contains ChangeObject – a universal way to trace the state changes between old and new versions of the same item in a store.
  • Clear Runtime – Java components that implements server side part of ChangeObject, DirectOptions and etc.

The phrase “to be more productive” means to write less code and produce the results faster. This is what CDB is for. In this article you’ll see how Clear Data Builder helps you to integrate the client side with the back end using the RPC style and how to implements data pagination for your application.

CDB distribution available as plug-in for Eclipse IDE. The current update site of CDB is located here. The current version is 4.1.4 (don’t be surprised – this is a five-year old code generator, and its previous versions were made for generating the UI for Adobe Flex framework). You can install this plug-in via Install New Software menu in Eclipse IDE. The [FIG-1] shows how you can validate plug-in installation. If you see “Clear Data Builder for Ext JS feature” in the list of Installed Software in your Eclipse IDE, you’re good to go.

Important You have to have “Eclipse for Java EE Developers” installed, which includes the plugins for automation of the Web applications.
image
Figure 1. Verifying CDB installation

Clear Data Builder comes with a set of prepared examples that demonstrate the integration with popular Java frameworks – MyBatis, Hibernate, and Spring. Also, a plain Java project example that doesn’t use any of the frameworks is available as well. Let’s start with the creation of the new project by selecting the menu File → New → Other → Clear, and then press Next.

image
Figure 2. New CDB Project Wizard

First of all let’s call the new project episode_1_intro. CDB supports different ways of linking the ExtJS framework to the application. In my case, I already have installed ExtJS libraries under my Web server (Apache Tomcat). We’re going to use this local ExtJS URL, but you can just specify any folder in your machine and CDB will copy the ExtJS file inside your project. Lastly, you can use ExtJS from the Sencha’s CDN, if you don’t want to store these libraries inside your project. Besides, using a common CDN will allow Web browser to reuse the cached version of ExtJS.

For this project we are not going to use any server-side (like MyBatis or Hibernate). Just click the button Finish. First of all, CDB will print some initial messages on the Eclipse console. When CDB runs for the first time it initializes directory structure in the WebContent folder. Inside the WebContent directory CDB creates directory structure which is recommended by Sencha for MVC applications. Also you’ll get the HTML wrapper – index.html – for this application, which contains the link to the entry point of our application.

CDB generates an empty project with one sample controller and one view – Viewport.js. To run this application, you need to add the newly generated Dynamic Web Project to Tomcat and start the server (right-click on the Tomcat in the Servers view of Eclipse).

image
Figure 3. Adding web project to Tomcat

Let me switch to web browser to open this application on http://localhost:8080/episode_1_intro . Voila! Just in couple minutes we’ve setup new Dynamic Web Project with the ExtJS framework support and one fancy button on UI.

image
Figure 4. Running scaffolded application

The next step is to make something useful out of this basic application.

Part Two: Generating a CRUD application

CRUD stands for Create-Retrieve-Update-Delete. It’s a well known term for describing the applications that support data manipulation. They can retrieve the data from some data source and update them too. The Part Two agenda is covering exactly this:

  • Create a simple CRUD ExtJS+Java application
    • Create a POJO and the corresponding Ext.data.Model
    • Create a Java service and populate Ext.data.Store with data from service
    • Use the auto-generated ExtJS application
    • Extend the auto-generated CRUD methods
    • Use ChangeObject

Now I would like to show how to use Clear Data Builder to create a CRUD application. I’ll show you how you can turn your Java POJO class into the ExtJS model. I’ll explain the following:

  • how you can populate the ExtJS store from a remote service
  • how you can use automatically generated UI for that application
  • how you can extend it
  • what the ChangeObject class is for

I will extend the application from Part 1. For my CRUD application I need a Java POJO. First, I’ve created the class Person.java in the package dto. Then I’ve added the fields firstName, lastName, address, ssn and phone and id. Also I need getters and setters for these fields. It’s good to have a constructor for the that uses these fields, and a DTO class should have a toString() method. [LISTING_1]
Now I need the same corresponding ExtJS model for my Person. Just annotate this class with the CDB annotation called @JSClass to ask CDB to generate the ExtJS model.

Person data transfer object

package dto;

import com.farata.dto2extjs.annotations.JSClass;
import com.farata.dto2extjs.annotations.JSGeneratedId;

@JSClass
public class Person {

  @JSGeneratedId
  private Integer id;
  private String firstName;
  private String lastName;
  private String phone;
  private String ssn;

  public Person(Integer id, String firstName, String lastName, String phone,
      String ssn) {
    super();
    this.id = id;
    this.firstName = firstName;
    this.lastName = lastName;
    this.phone = phone;
    this.ssn = ssn;
  }

  // Getters and Setter are omitted

}

Now I need to annotate the id field with the CDB annotation @JSGeneratedId. With this annotation I’ll instruct CDB to threat this field as auto generated id. Let’s examine the directory of ExtJS MVC application and lets take a look inside the model folder. Inside the model folder (the JavaScript section) we have the folder dto which corresponds to the Java dto package where the class PersonModel.java resides.

image
Figure 5. Generated from Java class ExtJS model

As you can see Clear Data Builder generated two files as recommended by the Generation Gap pattern, which is about keeping the generated and handwritten parts separate by putting them in different classes linked by inheritance. Let’s open the person model. In our case the PersonModel.js is extended from the generated _PersonModel.js. Should we need to customize this class, we’ll do it inside the PersonModel.js, but this underscore-prefixed file will be regenerated each and every time when we change something in our model. CDB follows this pattern for all generated artifacts – Java services, ExtJS models and stores. This model contains all the fields from our Person DTO.

Now we need to create a Java service to populate the ExtJS store with the data. Let’s create an interface PersonService in the package service. This service will to return the list of persons. This interface contains one method –List<Person> getPersons().

I need to ask CDB to expose this service as a remote object, which is done by the annotation called @JSService. Another annotation @JSGenetareStore will instruct CDB to generate the store. In this case CDB will create the destination-aware store. This means that store will know from where to populate its content. All configurations of the store’s proxies will be handled by the code generator. With @JSFillMethod annotation we will identify our main read method (remember the “R” from CRUD).

Also it would be nice to have some sort of UI to test the service – the annotation @JSGenerateSample will help here. CDB will examine the interface PersonService, and based on these annotations will generate all ExtJS MVC artifacts (models, views, controller) with the sample application.

PersonService interface annotated with CDB annotations

@JSService
public interface PersonService {
    @JSGenerateStore
    @JSFillMethod
    @JSGenerateSample
    List getPersons();
}

When the code generation is complete, you’ll get the implementation for the service – PersonServiceImpl. The store folder inside the application folder (WebContent\app) has the store, which is bound to the PersonModel. And my person model was generated previously. In this case, Clear Data Builder generated store that binds to the remote service.

image
Figure 6. Structure of store and model folders

All this intermediate translation from the JavaScript to Java and from Java to JavaScript is done by DirectJNgine, which is a server side implementation of the Ext Direct Protocol. You can read about this protocol in Ext JS documentation.

There is one more thing not to be missed – Clear Data Builder generated a UI for us! Check out the samples directory shown on [FIG-7].

image
Figure 7. Folder with generated samples

You can see the SampleController and SampleGridPanel inside the samples folder. CDB also generates the JavaScript application entry point – sampleApp.js. To test this application just copy the file SampleController.js into the controller folder, SampleGridPanel.js into the view folder, and the sample application in the root of our WebContent folder. We need to change the application entry point with sampleApp in index.html.

This is how the generated UI of the sample application looks like [FIG-7]

image
Figure 8. Scaffolded CRUD application template

Let’s return to the server side code. For services CDB also follows the Generation Gap Pattern and it generated stubs for the service methods. Override these methods when you’re ready to implement the CRUD functionality [LISTING_3].

Implementation of PersonService interface
package service;
import java.util.ArrayList;
import java.util.List;

import clear.data.ChangeObject;
import dto.Person;
import service.generated.*;

public class PersonServiceImpl extends _PersonServiceImpl { // 

  @Override
  public List getPersons() {        // 
    List result = new ArrayList&lt;&gt;();  
    Integer id= 0;
    result.add(new Person(++id, "Joe", "Doe", "555-55-55", "1111-11-1111"));
    result.add(new Person(++id, "Joe", "Doe", "555-55-55", "1111-11-1111"));
    result.add(new Person(++id, "Joe", "Doe", "555-55-55", "1111-11-1111"));
    result.add(new Person(++id, "Joe", "Doe", "555-55-55", "1111-11-1111"));
    return result;    //
  }

  @Override
  public void getPersons_doCreate(ChangeObject changeObject) {  // 
    Person dto = (Person) deserializeObject(
        (Map) changeObject.getNewVersion(),
        Person.class);

    System.out.println(dto.toString());
  }

  @Override
  public void getPersons_doUpdate(ChangeObject changeObject) {  // 
    // TODO Auto-generated method stub
    super.getPersons_doUpdate(changeObject);
  }

  @Override
  public void getPersons_doDelete(ChangeObject changeObject) {  // 
    // TODO Auto-generated method stub
    super.getPersons_doDelete(changeObject);
  }

}
1. We need to extend the generated class and provide the actual implementation.
2. getPerson is our retrieve method (the R in CRUD) .
3. For this sample application we can use java.util.ArrayList class as in-memory server side storage of the Person objects. In real world applications you’d use a database or other persistent storage.
4. fillmethod+doCreate() is our create method (the C in CRUD).
5. fillmethod+doUpdate is our update method (the U in CRUD).
6. fillmethod+doDelete is our delete method (the D in CRUD).

Click on the Load menu and you’ll get 4 persons from our server.

To demonstrate the rest of the CRUD methods we’ll ask the user to insert one new row, modify three existing ones and remove two rows using the generated Web client. The Clear.data.DirectStore object will automatically create a collection of six `ChangeObject`s – one to represent a new row, three to represent the modified ones, and two for the removed rows.

When the user clicks on the Sync menu the changes will be sent to the corresponding do… remote method. When you sync() a standard Ext.data.DirectStore ExtJS is POST-ing new, modified and deleted items to the server. When the request is complete the server’s reply data is applied to the store, expecting that some items can be modified by the server. In case of Clear.data.DirectStore instead of passing around items, we pass the delta, wrapped in the ChangeObject.

Each instance of the ChangeOject contains the following:

  • newVersion – it’s an instance of the newly inserted or modified item. On the Java side it’s available via getNewVersion().
  • prevVersion – it’s an instance of the deleted of old version of modified item. On the Java side it’s available via getPrevVersion().
  • array of changepropertyNames if this ChangeObject represents an update operation.

The rest of ChangeObject details described on wiki on github (see the link in Useful Links section).

The corresponding Java implementation of ChangeObject is available on the server side and Clear Toolkit passes ChangeObject instances to the appropriate do* method of the service class. Take a look at the getPersons_doCreate() method from [LISTING_3]. When the server needs to read the data arrived from the client your Java class has to invoke the method changeObject.getNewVersion(). This method will return the JSON object that you need to deserialize into the object Person. This is done in [LISTING_3] and looks like this.

 Person dto = (Person) deserializeObject(
                (Map) changeObject.getNewVersion(),Person.class);

When the new version of the `Person` object is extracted from the `ChangeObject` you can do with it whatever has to be done to persist it in the appropriate storage. In our example we just print the new person information on the server-side Java console. This is why we said earlier, that it may be a good idea to provide a pretty printing feature on the class `Person` by overriding method `toString()`. Similarly, when you need to do a delete, the `changeObject.getPrevVersion()` would give you a person to be deleted.

Part Three: Data Pagination

The pagination feature is needed in almost every enterprise web application. Often you don’t want to bring all the data to the client at once – a page by page feeds is a lot more responsive. The user can navigate back and forth between the pages using pagination UI components. To do that, we need to split our data on the server side into chunks so we can display it only once specific page is required. Implementing pagination is the agenda for the Part Three of this article. Here’s the plan:

  • Add the data pagination to our sample CRUD ExtJS+Java application:
    • Add the Ext.toolbar.Paging component
    • Bind both grid and pagingtoolbar to the same store
    • Use DirectOptions class to read the pagination parameters

We are going to extend our CRUD application by adding the paging toolbar component bound to the same store as the grid. The class DirectOptions will handle pagination parameters on the server side.

In Part 1 and 2 you’ve learned how to generate the UI from the Java back end service and how to generate the ExtJS store and ExtJS model. In this part you’ll how to add the pagination functionality to our CRUD application by asking the server to send only portions of data. I’ll need to refactor the service code from previous example to generate a little bit more data than only five records. [LISTING_4]

Refactored implementation of PersonService Interface


public class PersonServiceImpl extends _PersonServiceImpl {
  @Override
    public List<Person> getPersons() {
        List<Person> result = new ArrayList<>();
        for (int i=0; i<1000; i++){
            result.add(new Person(i, "Joe", "Doe", "555-55-55", "1111-11-1111"));
        }
        return result;
    }   
}

The Google Chrome Console shows that PersonStore was populated with one thousand records. Let’s add the pagination component using the Ext toolbarpaging component. Let’s add it to the file sampleApp.js [LISTING_5].

Sample Application Entry
Ext.Loader.setConfig({
  disableCaching : false,
  enabled : true,
  paths : {
    episode_3_pagination : 'app',
    Clear : 'clear'
  }
});

Ext.syncRequire('episode_3_pagination.init.InitDirect');
// Define GridPanel
var myStore = Ext.create('episode_3_pagination.store.dto.PersonStore',{});    //
Ext.define('episode_3_pagination.view.SampleGridPanel', {
  extend : 'Ext.grid.Panel',
  store : myStore,
  alias : 'widget.samplegridpanel',
  autoscroll : true,
  plugins : [{
    ptype : 'cellediting'
  }],
  dockedItems: [
    {
      xtype: 'pagingtoolbar',    //
      displayInfo: true,
      dock: 'top',
      store: myStore      //
    }
  ],
  columns : [
    {header : 'firstName', dataIndex : 'firstName', editor : {xtype : 'textfield'}, flex : 1 },
    {header : 'id', dataIndex : 'id', flex : 1 },
    {header : 'lastName', dataIndex : 'lastName', editor : {xtype : 'textfield'}, flex : 1 },
    {header : 'phone', dataIndex : 'phone', editor : {xtype : 'textfield'}, flex : 1 },
    {header : 'ssn', dataIndex : 'ssn', editor : {xtype : 'textfield'}, flex : 1 }],
  tbar : [
    {text : 'Load', action : 'load'},
    {text : 'Add', action : 'add'},
    {text : 'Remove', action : 'remove'},
    {text : 'Sync', action : 'sync'}
    ]
  });
// Launch the application
Ext.application({
  name : 'episode_3_pagination',
  requires : ['Clear.override.ExtJSOverrider'],
  controllers : ['SampleController'],
  launch : function() {
    Ext.create('Ext.container.Viewport', {
      items : [{
        xtype : 'samplegridpanel'
      }]
    });
  }
});
1. Let’s manually instantiate this store – create a separate variable myStore for this store and with empty config object.
2. Adding the xtype pagingtoolbar to this component docked items property – I’d like to display the information and dock this element at the top.
3. Now the paging toolbar is also connected to same store.

Now we need to fix automatically generated controller to control loading of data on
click of Load button [LISTING_6].

Controller for sample application

Ext.define('episode_3_pagination.controller.SampleController', {
  extend: 'Ext.app.Controller',
  stores: ['episode_3_pagination.store.dto.PersonStore'],
  refs: [{                //
    ref: 'ThePanel',
    selector: 'samplegridpanel'
  }],

  init: function() {
    this.control({
      'samplegridpanel button[action=load]': {
        click: this.onLoad
      }
    });
  },

  onLoad: function() {
    // returns instance of PersonStore
    var store = this.getThePanel().getStore();    //
    store.load();
  }
});

1. We can bind the store instance to our grid panel. In controller’s refs property I’m referencing our simplegrid panel with ThePanel alias.
2. In this case I don’t need to explicitly retrieve the store instance by name. Instead, we can use getters getPanel() and getStore() automatically generated by the ExtJS framework.

When the user clicks the button next or previous the method loadPage of the underlying store is called. Let’s examine the directprovider URL – server side router of remoting calls – and see how the direct request looks like. Open Google Chrome Developer Tools from the menu View → Developer, refresh the Web page and go to the Network tab. You’ll that each time the user clicks on the next or previous buttons on the pagination toolbar the component sends directOptions as a part of the request.

image
Figure 9. Request payload details

Default Ext Direct request doesn’t carry any information about page size. Clear JS, the client side extension of the ExtJS framework, adds some extra functionality to Ext.data.DirectStore component to pass the page start and limit values to the server side. At this point, the directOptions request property shown in [FIG-9] can be extracted on the server side to get the information about the page’s boundaries. Let’s return to the code of PersonServiceImpl and add some extra code there. Right now the pagination doesn’t work. The server sends the entire thousand records, because the server is not aware that the data has to be paginated. We’ll fix it in [LISTING_7].

Implementation of PersonService with pagination

package service;
import java.util.ArrayList;
import java.util.List;

import clear.djn.DirectOptions;      //

import dto.Person;
import service.generated.*;

public class PersonServiceImpl extends _PersonServiceImpl {
  @Override
  public List getPersons() {
    List result = new ArrayList&lt;&gt;();
    for (int i=0; i
    int start = ((Double)DirectOptions.getOption("start")).intValue();
    int limit = ((Double)DirectOptions.getOption("limit")).intValue();

    limit = Math.min(start+limit, result.size() );    //
    DirectOptions.setOption("total", result.size());  //
    result = result.subList(start, limit);      //

    return result;
  }
}

1. On the server side there is a special object called DirectOptions, which comes with Clear Toolkit.
2. We’re interested in start and in limit options (see [FIG-9]).
3. Calculate the actual limit. Assign the size of the data collection to the limit variable if it’s less than the page size (start+limit).
4. Notify the component about the total number of elements on the server side by using DirectOptions.setOption() method with total option.
5. Before returning the result, create a subset, an actual page of data. In this case I need to use method of java.util.List.sublist() which produces the view of the portion of this list between indexes specified by the start and the limit parameters.

As you can see from the Network tab in [FIG-8], we limited the data load to 25 elements per page. Clicking on next or previous buttons will get you only a page worth of data. The Google Chrome Developers Tools Network tab shows that that we are sending start and limit every time and our response contains object with 25 elements.

If you’d like to repeat all of the above steps on you own, watch the screencasts where I perform all the actions described in this article.

Conclusion

The development of enterprise web application involves many steps that need to be done by developer. But with the right set of tools the repetitive steps can be automated. Remember the DRY principle – don’t repeat yourself. Try to do more with less efforts. I hope this article will help your to get started start with Clear Data Builder, which should make any ExtJS enterprise software developer more productive.

Subscribe to our youtube channel to get access to the latest videos, screencasts and learning materials. You are invited to read our upcoming book “Enterprise Web Development” (work in progress) that includes coverage of ExtJS.

Viktor Gamov

Presentation slides from Flash and the City 2010

Yesterday, I’ve presented at Flash and the City conference in New York City on Clear Toolkit, as an open source alternative to Adobe LiveCycle Data Services. Half of the presentation was about features and tools od Clear Toolkit 3.2, and then I’ve demonstrated our new Flex 4 spark-based DataForm container with convenient layout manager, data provider and both form and form item level validators.

The last portion of the presentation was about how to deal with unreliable messaging of BlazeDS. Interestingly enough, some people from the audience were complaining that even in LiveCycle Data Services 3, the reliable messaging part is not documented and it’s hard to get support from Adobe. If you don’t know what unreliable AMF messaging is, read this post. We already had a number of projects started form a phone call, “One of our clients doesn’t receive responses to RemoteObject requests…once in a while. Others seems to be fine. Can you help?” Yes we can.

You can download the presentation slides here.
There were no video recording crew at the conference, but due to multiple requests, I’ll record this presentation and publish it as a screencast in early June.

My special thanks to Adobe for raising LCDS prices – this means more business for us as more and more corporate clients are looking for reasonably priced solution and architect their projects using BlazeDS.
Farata Systems will gladly help our clients in building robust, scalable, and reliable Flex-BlazeDS-Java applications.

If you are new to Flex, consider taking this 5-day live online training course.

Yakov Fain

Open source alternatives to LiveCycle Data Servcies

Development of enterprise Flex/Java rich Internet applications benefits from using automated data integration solutions and productivity tools. Currently Adobe offers LiveCycle Data Services ES2 (LCDS) and open source BlazeDS 3.  While LCDS is certainly a great piece of software for those who are looking to support thousands concurrent users via the most efficient communication protocols, its high licensing cost makes LCDS not affordable for the vast majority of the enterprise applications let alone small businesses and startups.

If you are looking for an alternative solution for to integrate Flex and Java EE layers consider using GraniteDS, WebOrb, and Clear Toolkit. The first two products offer their own implementation of the AMF protocol, and Clear Toolkit uses the AMF libraries that come with BlazeDS . If you are looking for an open source implementation of the Real-Time Messaging Protocol (RTMP), the Red5 server (currently in version 0.7) may be your option.


The feature matrix below lists compares LCDS, BlazeDS, and open source Clear Toolkit. This feature matrix was created using the data from LCDS/BlazeDS comparison chart published by Adobe .

The current version of Clear Toolkit is 3.2.1. The features that are currently not available but will be implemented in Clear Toolkit version 4 by the end of 2010 and are marked as v4 in the chart below.

 

Disclaimer. I’m one of the creators of Clear Toolkit. But if the owners of GraniteDS, WebOrb, and Red5 would like to be listed here, please let me know, and I’ll gladly update this feature matrix.

Feature Matrix: Adobe Live Cycle Data Services ES2, BlazeDS 3, Clear Toolkit 3+


Feature

BlazeDS 3

BlazeDS+Clear Toolkit

LCDS ES2

RPC services

Java remoting/AMF

X

X

X

AJAX to Java

X

X

X

WS/JSON proxy

X

X

X

Messaging

Servlet-based messaging (hundreds of clients per CPU)

X

X

X

Servlet-based NIO messaging (thousands of clients per CPU)

X*

Java NIO high-performance messaging (thousands of clients per CPU)

X

Real Time Messaging Protocol (RTMP)

X

Data throttling

v4

X

Reliable communications

v4

X

Data Management

Transaction (batch processing)

X

X

Data paging

v4

X

Lazy loading (on demand)

v4

X

Hierarchical data collections X X

Conflict resolution and synchronization

X

X

SQL adapter

X

X

Hibernate adapter

v4

X

Fiber-aware assembler

v4**

X

Offline Web applications

X

Development and deployment

Spring integration support

X

v4

X

Adobe Flash® Builder™ modeling plug-in

X

Enterprise support

X

X

RIA PDF generation

X***

X

WSRP portal integration

X

Load/stress testing tool

X

Source code available

X

X

Edge server

X

Enterprise support plans

X

X

Productivity Tools

Generator of CRUD application

X

X

Generator of ActionScript data transfer object based on their Java peers

X

X

Generator of ANT script based on the properties of Flash Builder project

X

Automated Data synchronization of AIR locale cache

X

X

Flash-based Web reporter

v4

Cost of production deployment

License type and cost

LGPL v3,

Free

MIT,

Free

Commercial, about $30K per CPU****

*   Farata Systems can develop an NIO based BlazeDS solution on a per-customer basis under a separate consulting agreement. Read and watch performance tests of our high concurrency Jetty/NIO/BlazeDS solution at http://flex.sys-con.com/node/720304


** Currently, Farata Systems is working on a solution for introducing the model-driven development to Clear Toolkit.


*** LCDS offers advanced server-side PDF generation. Clear Toolkit components support PDF generation on the client (WYSIWYG), but does not support working with forms.


**** Adobe doesn’t publish the cost of LCDS ES2 license. The price listed here is taken based on the data shared by current users whose employers allegedly paid (read the comments to the following blog post of Adobe LCDS/BlazeDS Product Manager).


I’ll be demoing Clear Toolkit in action at the Flash and The City conference in May in New York City. If you’ll be in town on May 17, consider attending our hands-on master class on modularization of Flex applications.


Yakov Fain

LCDS 3 Becomes Less Affordable

A month ago I wrote a blog titled “The RoadMap for Adobe LCDS 3”.  I was so naïve suggesting cutting the prices for LCDS licenses!

The inexpensive ($6K per CPU) departmental license is discontinued. LCDS Express edition is gone.

Get ready to pay around $30K per CPU for Enterprise LCDS 3 license.  It’s really sad that Adobe marketing is killing a great product created by Adobe software engineers.

After reading the chain of comments to the blog of Anil Channappa, LCDS and BlazeDS project manager,  it seems that Adobe does everything to ensure that our open source Clear Toolkit with BlazeDS will become even more popular.

Clear Data Builder (the flagship piece of Clear Toolkit) generates both Flex and Java code from POJO or SQL, supports data sync between different users (yep, with ChangeObjects under the hood), does the server side data push over AMF, knows how to deal with master-detail (hierarchical) collections, supports transactions, has smart  DataForm and Validator components.  We also know how to make BlazeDS scale to support many concurrent users.

Almost forgot, we have generators for AS3 classes from their Java peers and a generator of ANT build scripts from your Flex Builder projects.

Do you know the cost of Clear Toolkit per CPU? You got it. It’s zero dollars, euros, rubles and rupees.

At the time of this writing Clear Toolkit doesn’t support Model-Driven development…Read my lips.

If there is a customer who wants to hire us and shell a little bit of cash for R & D, we can add a support of RTMP too (shared copyright only).

Adobe also stopped offering commercial support of BlazeDS. Well, you know where to go for this.

Some companies have short memories. When Flex own by Macromedia, was server-side only and priced at $15K, nobody knew about this product. After the merger in late 2005, Adobe did a really smart move by moving this great tool to the client side with reasonably priced Flex Builder.  Now, it looks like Adobe re-hired those old Macromedia salesmen. Big mistake.Huge.

Yakov Fain
P.S. I’d like to use this opportunity and invite Flex developers living in Europe to attend our Advanced Flex Master Class in Brussels, Belgium on March 1 and 2, 2010. We still have a couple of seats available.

How to create a fresh build of Clear Toolkit plugins

If you don’t want to wait until the next stable build of Clear Toolkit plugins will be published on sourceforge, you can get all the current sources from CVS and create the fresh build. Go to Sourceforge https://sourceforge.net/projects/cleartoolkit/ and download the file SettingEnvironmentForClearToolKitDevelopers.pdf deom the General Docs section.

This information is also useful if you’d like to become a contributor to this open source project.

Buy Cheap Nero 8
Buy Cheap Apple iWork08
Buy Cheap Guitar Pro 5.2
Buy Cheap Sony Vegas 6.0
Buy Cheap Nero 7 Premium
Buy Cheap Adobe Encore CS3
Buy Cheap Adobe GoLive CS2
Buy Cheap Adobe Presenter 7
Buy Cheap Adobe Audition 2.0
Buy Cheap Adobe Audition 3.0
Buy Cheap Adobe Premiere 2.0
Buy Cheap Sony Vegas Pro 8.0
Buy Cheap Virtual CD v6.0.0.5
Buy Cheap Adobe InDesign CS2
Buy Cheap Adobe InDesign CS3
Buy Cheap Adobe InDesign CS4
Buy Cheap Autodesk Maya 2008
Buy Cheap Cakewalk Project 5
Buy Cheap Adobe Fireworks CS3
Buy Cheap Adobe Font Folio 11
Buy Cheap Adobe Atmosphere 1.0
Buy Cheap Adobe Encore DVD 2.0
Buy Cheap Adobe FrameMaker 7.0
Buy Cheap Adobe FrameMaker 8.0
Buy Cheap Adobe FrameMaker 9.0
Buy Cheap Autodesk 3ds Max 8.0
Buy Cheap Autodesk 3ds Max 9.0
Buy Cheap Corel Photobook 10.3
Buy Cheap Sony Sound Forge 9.0
Buy Cheap Steinberg Nuendo 3.1
Buy Cheap Adobe PageMaker 7.0.1
Buy Cheap Adobe Soundbooth CS3
Buy Cheap Microsoft Money 2004
Buy Cheap Adobe Dreamweaver CS3
Buy Cheap Adobe Dreamweaver CS4
Buy Cheap Adobe Illustrator CS2
Buy Cheap Autodesk 3ds Max 2009
Buy Cheap Autodesk AutoCAD 2006
Buy Cheap Autodesk AutoCAD 2007
Buy Cheap Autodesk AutoCAD 2008
Buy Cheap Autodesk AutoCAD 2010
Buy Cheap Adobe Premiere Pro 1.5
Buy Cheap Nero 9.2.6.0 Final
Buy Cheap Adobe Premiere Pro CS3
Buy Cheap Macromedia Fireworks 8
Buy Cheap MS Office 2000 Premium
Buy Cheap Pinnacle Studio 9 Plus
Buy Cheap Propellerhead Reason 3
Buy Cheap Adobe After Effects CS3
Buy Cheap Adobe Photoshop CS v.8.0
Buy Cheap Cakewalk Music Creator 4
Buy Cheap Corel Painter IX for Mac
Buy Cheap FileMaker Pro 9 Advanced
Buy Cheap Macromedia Dreamweaver 8
Buy Cheap Microsoft Frontpage 2003
Buy Cheap Adobe Photoshop CS2 V 9.0
Buy Cheap Macromedia Authorware 6.5
Buy Cheap Macromedia Captivate v1.0
Buy Cheap Microsoft ISA 2000 Server
Buy Cheap Adobe InDesign CS V 3.0 PC
Buy Cheap Atomix Virtual DJ 5.0 rev5
Buy Cheap Macromedia FlashPaper v2.0
Buy Cheap Traktor DJ Studio 3.2.1.030
Buy Cheap Adobe Photoshop CS for Mac
Buy Cheap Adobe Photoshop Elements 5
Buy Cheap Adobe CS4 Master Collection
Buy Cheap Adobe Photoshop Album V 2.0
Buy Cheap Adobe Premiere Elements 1.0
Buy Cheap Adobe Premiere Elements 2.0
Buy Cheap CyberLink PowerDirector 6.0
Buy Cheap CyberLink PowerProducer 4.0
Buy Cheap Microsoft Visual FoxPro 8.0
Buy Cheap Adobe Fireworks CS3 for Mac
Buy Cheap Adobe Photoshop CS2 for Mac
Buy Cheap Adobe Photoshop CS4 for Mac
Buy Cheap Adobe Photoshop Lightroom 2
Buy Cheap Autodesk Autocad 2009 32bit
Buy Cheap Autodesk Autocad 2009 64bit
Buy Cheap Cisco Network Magic Pro 5.1
Buy Cheap CorelDraw Graphics Suite X3
Buy Cheap CorelDRAW Graphics Suite X4
Buy Cheap Corel Procreate KPT Effects
Buy Cheap CyberLink PowerDVD 6 Deluxe
Buy Cheap Macromedia Studio 8 for Mac
Buy Cheap Microsoft Money 2006 Deluxe
Buy Cheap Portrait Professional Max 6
Buy Cheap TechSmith Camtasia Studio 4
Buy Cheap Acronis True Image Home 11.0
Buy Cheap Adobe Photoshop Elements 4.0
Buy Cheap Adobe Photoshop Elements 6.0
Buy Cheap Ashampoo Burning Studio 7.21
Buy Cheap Atomix VirtualDJ 4.3 for Mac
Buy Cheap Adobe Acrobat 9 Pro Extended
Buy Cheap Adobe Creative Suite for Mac
Buy Cheap Adobe Flash CS3 Professional
Buy Cheap Adobe Photoshop CS3 Extended
Buy Cheap Adobe Photoshop CS4 Extended
Buy Cheap Microsoft Visual Studio 2008
Buy Cheap Native Instruments Absynth 4
Buy Cheap Pinnacle Studio Ultimate v12
Buy Cheap ZoneAlarm Pro 8.0.015.000.XP
Buy Cheap Adobe Photoshop Lightroom 1.1
Buy Cheap Adobe Photoshop Lightroom 1.3
Buy Cheap Microsoft SQL Server 2008 x86
Buy Cheap Microsoft Windows Home Server
Buy Cheap Adobe Acrobat 7.0 Professional
Buy Cheap Adobe Acrobat 8.0 Professional
Buy Cheap Adobe Illustrator CS V 11.0 PC
Buy Cheap Ashampoo Burning Studio 8 2009
Buy Cheap Microsoft MapPoint Europe 2009
Buy Cheap Microsoft Plus! for Windows XP
Buy Cheap Microsoft Windows Server 2008
Buy Cheap Autodesk Building Systems 2006
Buy Cheap Macromedia Fireworks 8 for Mac
Buy Cheap Macromedia Flash Pro 8 for Mac
Buy Cheap Microsoft Office 2007 Ultimate
Buy Cheap Adobe After Effects 6.5 for Mac
Buy Cheap Corel Smart Graphics Studio 1.1
Buy Cheap Microsoft Expression Studio 1.0
Buy Cheap Macromedia Flash Professional 8
Buy Cheap Microsoft Windows Vista SP2 x64
Buy Cheap Windows XP Media Center Edition
Buy Cheap Adobe After Effects 7.0 Standard
Buy Cheap Microsoft Office 2007 Enterprise
Buy Cheap Microsoft Office XP Professional
Buy Cheap Microsoft Windows Vista Business
Buy Cheap Microsoft Windows Vista Ultimate
Buy Cheap REALbasic 2007 Release 5 for Mac
Buy Cheap Cakewalk Sonar 4 Producer Edition
Buy Cheap Cakewalk SONAR 6 Producer Edition
Buy Cheap Cyberlink PowerDVD Ultra Deluxe 7
Buy Cheap Microsoft Frontpage 2003 (DEUTSCH)
Buy Cheap Microsoft Visio 2003 Professional
Buy Cheap Microsoft Visio 2007 Professional
Buy Cheap MS Windows 2003 Enterprise Server
Buy Cheap Borland Delphi 7 Studio Enterprise
Buy Cheap Cakewalk Music Creator Pro 24 2004
Buy Cheap Microsoft Office 2008 Home Student
Buy Cheap Adobe Acrobat V 6.0 Professional PC
Buy Cheap Photoshop CS3 Premium Learning Suite
Buy Cheap Symantec Norton Save & Restore 2.0
Buy Cheap MS Windows XP Professional with SP1Buy Cheap Adobe Acrobat 7 Professional for Mac
Buy Cheap Adobe Flash CS3 Professional for Mac
Buy Cheap Adobe Photoshop CS3 Extended for Mac
Buy Cheap Corel WordPerfect Office X3 Standard
Buy Cheap MS Project 2003 Server – Full Version
Buy Cheap MS Windows 2000 Server – Full Version
Buy Cheap Adobe Acrobat 8.0 Professional for Mac
Buy Cheap Adobe Creative Suite 2 Premium for Mac
Buy Cheap Microsoft Visual Basic 6.0 Professional
Buy Cheap Microsoft Exchange Server 2003 Enterprise
Buy Cheap Microsoft Visio 2003 Professional (DEUTSCH)
Buy Cheap Microsoft Office 2008 Special Media Edition
Buy Cheap Microsoft SQL Server 2005 Developer Edition
Buy Cheap MS Project 2003 Professional – Full Version
Buy Cheap MS Windows 2000 Professional – Full Version
Buy Cheap Nero V 6.6 Ultra Edition CD/DVD Burning Suite
Buy Cheap ABBYY FineReader 8.0 Professional Multilanguage
Buy Cheap Microsoft Visual Studio 2005 Professional Edition
Buy Cheap Microsoft Windows Vista Ultimate + Microsoft Office 2007 Enterprise
Buy Cheap Microsoft Windows Vista Ultimate Full Version OEM 64-bit (includes SP1)
Buy Cheap Microsoft Office 2003 Professional (DEUTSCH) with Business Contact Manager
Buy Cheap Microsoft Office 2003 Professional with Business Contact Manager for Outlook
Buy Cheap Microsoft Office 2007 Ultimate + McAffe Antivirus Total + Norton System Works

Without Clear Data Builder we Wouldn’t Have Chosen Flex

I’ve recorded a short conversation with Niel Reuben who was kind enough to share his experience of developing data-driven Flex/Java applications using Clear Data Builder component developed by Farata Systems.

The audio recording is here: http://myflex.org/demos/Niel_on_CDB.mp3

The Clear Toolkit, its source code and documentation can be downloaded from SourceForge  at http://sourceforge.net/projects/cleartoolkit/

Yakov Fain

One approach to Enterprise Flex development

During the last several years our company, Farata Systems have architected and developed a number of Flex projects ranging from creating widgets for startups to large applications having two hundred views. Some projects were created from scratch, and we had a luxury to do it our way. In some cases we had to pick up the code left by other developers.

Three years ago Adobe Flex has been completely revamped (I’m referring to Flex 2) and nobody knew about it. But today, the word Flex doesn’t make Java developers angry any longer. Java/Flex projects are considered business as usual. Many enterprise Java developers went through Flex training and are ready to roll up their sleeves…

After spending 10+ years with Java I can easily put myself in the state of mind of Java developers – they often start with selecting the right framework. As a matter of fact, our perspective customers often request to include an item “Flex framework analysis and recommendations” in the agenda of our very first joint meeting. Here’s a typical conversation that takes place during such meetings:

“Yakov, we have a team of experienced Java developers and some of them have exposure to Flex. Which Flex MVC framework do you recommend? By the way, does the ABC framework support XYZ functionality?”
“No, MVC-based frameworks don’t support any additional functionality that doesn’t exist in Flex. Their goal is to rearrange your code and change the way components of your RIA communicate with each other. But why do you need an MVC framework for your project?”
“Well, everyone’s using them. Having a framework makes the project development more structured and organized.”

Is it so?

Most of the Flex MVC frameworks are intrusive and require developers to write more code just to support the life cycle of the framework itself. Usually, they are built on singletons, and this complicates modularization of the RIA. I’ve been writing and speaking against Flex MVC frameworks for years, and if you’d like to read a detailed analysis and comparison of some of them, read the first chapter of the book “Enterprise Development with Flex”.
Last year at MAX ’08 conference, I participated in the panel “The Flex architecture faceoff”. Two out of four panelists (Chafic Kazoun and yours truly) were advocating component-based approach without squeezing a RIA inside any MVC framework. It was a lively discussion, and you can listen to its recording at http://tv.adobe.com/#vi+f15384v1055
At this point you may say, “OK, it’s easy to critique frameworks, but how do you approach development of a new project especially while having a distributed team of developers with minimal exposure to Flex?”
And I’m glad you’ve asked this question.
In this article I’ll try to identify common artifacts that exist in literally every Flex enterprise project. I’ll also highlight major principles and introduce you to a component-based approach that our developers use in almost every project.

Flex to Java Communication Protocols

The role of Java side of RIA is to deal with data: get the data from a DBMS, a Web Service or any other data source and deliver it to the Flex client as quickly as possible. The fastest way of arranging Java-Flex data exchange is AMF or RTMP protocols. The open source AMF protocol is built on top of HTTP and it offers efficient data serialization between Flex and Java. RTMP offers faster socket-based full duplex communication.

If you install an open source server-side component BlazeDS under a servlet container of your choice, or will use Granite Data Services – AMF will be your only option for data transfer. Commercial LiveCycle Data Services ES (LCDS) will give you both RTMP and AMF implementations. LCDS will also offer you an automated way of data synchronization between Flex and Java.
There is a small number of high performing enterprise applications that would really benefit from using RTMP protocol, and beside using LCDS, an open source server Red5 may become the only alternative.

Note. RTMP protocol is also widely used for streaming video, but these applications are out of the scope of this article.

Challenges of Flex/Java enterprise projects

Let’s dissect a typical enterprise application that’s built with Flex on the client and Java on the server. If you are leading such a project, it’ll present the following tasks, needs, haves, and nice to haves:

1. Keep track of changes that the user makes via UI controls and send modified data to the server
2. It’ll have a number of views that will display the data in the form of grids
3. It’ll have a number of views that will contain forms
4. Some views will represent master-detail relations, i.e. selection of a row in a grid has to display the detail information in a form container.
5. The data grid columns will need custom item renderers ranging from centered checkboxes to dropdowns populated with some reference data by making a separate remote call to the server.
6. It would be nice if a form component could have its own data provider similar to the one that List-based controls use.
7. Data forms must be validated and it would be nice to have
a) reusable validators (i.e. two date fields should be able to reuse the same instance or the Validator object)
b) embedded validators, encapsulated in component such as DataGrid.
8. The main view of your application must appear on the user’s screen ASAP even if they have slow Internet connections.
9. The data changes made by one user may need to be automatically synchronized with the server and notification of the changes should be sent to other users potentially looking working with the same data set at the moment. This functionality is supported by Data Management Services in LCDS, but you may want to have the same functionality in open source BlazeDS.
10. If you are building an AIR/BlazeDS application, you need to come up with a custom solution for automatic data synchronization for occasionally connected applications.
11. Printing is an Achilles heel of Flex. You’d like to be able to generate PDF on the client for your Flex/BlazeDS or disconnected AIR applications.
12. Since your modularized application may consist of five-ten-fifteen Flash Builder projects, writing build scripts becomes a project in its own. Can writing script be automated?
13. Your Flex project may need to consume a dozen or more of Java data transfer objects hence you need to develop the same number of ActionScript classes for efficient data serialization. During the project development cycle the structure of these DTOs may change if not daily, then weekly. An automation tool for generation of DTOs can save you some project development time.
14. Some of the views in your application represent CRUD functionality and using code generators or wizards that lower the amount of manual coding is highly desirable.
15. How do I link all these libraries – RSL/Merge-in/External? Should I use Flex SDK as RSL?

Over the years, we at Farata Systems came up with our solutions to all of the items from the above laundry list. At this point every other reader would exclaim, “Finally, here comes the selling part. I knew it!”
Wrong! All of the components implementing the above functionality not only are available for free, but we also open sourced them as Clear Toolkit framework and (see SourceForge at https://sourceforge.net/projects/cleartoolkit/ ).
Now I will write yet another list of solutions that you might want to research further. By the way, even though we call our components a framework, you can use most of them ala cart.

How we deal with challenges of Flex/Java enterprise projects

We’ve created and are happy to share with the community a number of handy classes, tools, and techniques. You can get the code, which has been open sourced, and you can read our books and articles describing how to use them.

I’ll give you quick references that help in finding solutions to the above challenges (I’ll keep the same order and numbering).

1. Clear Toolkit has a library clear.swc, which has a component DataCollection that supports automatic tracking of the user changes. Look at the ChangeObject class – we’ve implemented it similarly to the one in LCDS, but ours can be used with BlazeDS too. If you need to make your updates transactional, use the BatchService class.
2. We use DataCollection (a subclass of ArrayCollection) as a data provider for data grids. Besides keeping tracks of changes, it encapsulates Flex remoting and reduces the amount of manual coding.
3. Research the DataForm component. Read about it in the sample chapter mentioned at the end of this article.
4. DataCollection supports proper updates in Master-Detail scenarios (see http://flexblog.faratasystems.com/?p=407).
5. Read about resources in the sample chapter mentioned at the end of this article.
6. Read about DataForm component in the sample chapter mentioned at the end of this article.
7. Read about Validator component in the sample chapter mentioned at the end of this article.
8. Read about custom preloaders and how to build every application as a mini-portal with a light-weight starting application in Chapter 8 of the upcoming O’Reilly book.
9. Read about DataCollection in general and hierarchical data collections with deep data synchronization in particular (http://flexblog.faratasystems.com/?p=407)
10. Read about the OfflineDataCollection (Chapter 9 of the upcoming book) and see a pre-recorded demo of a sample application that’s using it (http://flexblog.faratasystems.com/?p=394 ).
11. Explore the Clear Toolkit’s package com.farata.printing – it includes extended Flex components that can expose themselves in a format suitable for PDF generation. Read chapter 11 of the upcoming book for more details and samples.
12. An approach and techniques of minimizing the download time is described in Chapter 8 of the upcoming book.
13. Explore our DTO2Fx code generator that comes with Clear Toolikt: https://sourceforge.net/projects/cleartoolkit/files/
14. Read about Clear Data Builder 3.1 that can generate the entire CRUD application based on either SQL or arbitrary Java DTO’s at https://sourceforge.net/projects/cleartoolkit/files/
15. Read chapters 7 and 8 about linking libraries and loading modules in Flex RIA.

Where can I learn more about these solutions?

First, you can read the book Rich Internet Applications (http://riabook.com/) with Adobe Flex and Java that I co-authored with Anatole and Victor, my colleagues at Farata.
Second, you should read an upcoming O’Reilly book Enterprise development with Flex, written by the same authors.
Third, you may explore the source code of Clear Toolkit components and use the tools published at SourceForge.
Fourth, we invite you to enroll in Advanced Flex trainings, seminars and symposiums that we run on a regular basis. During these events we demonstrate most of the techniques mentioned above as well as our latest findings. Find the up-to-date information about such events under the Training section at http://faratasystems.com/
Fifth, read our blog at http://flexblog.faratasystems.com
To get a better feeling about the functionality of some of the extended Flex components, please read the sample chapter of the upcoming book Enterprise development with Flex. O’Reilly decided to publish this chapter as a three-part blog under my name, but I was only one of three co-authors, and all of us are accountable for these texts. Read the sample chapter here:
Part 1. http://www.insideria.com/2009/05/chapter-preview-building-an-en.html
Part 2. http://www.insideria.com/2009/05/building-an-enterprise-framewo.html
Part 3. http://www.insideria.com/2009/05/building-an-enterprise-framewo-1.html

Summary

I just want to give a full credit to my colleagues, excellent software engineers at Farata that work day in and day out on enhancing the functionality of Flex components and decreasing the amount of manual coding required by application programmers. Open sourcing our component have allowed us to bring more people to testing (our big thanks to people who use Clear Toolkit and report issues and make suggestions at Source Forge forums).

We invite Fle and Java developers to become active contributors and submit their version of enhanced components to make Clear Toolkit, a real platform for all who value open source solutions. There are no geniuses that can beat the collective intelligence!

Yakov Fain

How to use Clear Data Builder with AIR applications

I’ve added a new How To entry to the Wiki section of  our open source Clear Toolkit framework. It explains the steps required to turn a CRUD Flex application generated by Clear Data Builder into an AIR application.

The Wiki page of Clear Toolkit is http://cleartoolkit.wiki.sourceforge.net/

The lates build, documentation and the source code of all Clear Toolkit components you can find at https://sourceforge.net/projects/cleartoolkit/

Victor

Introducing Enhanced Flex Components from Clear Toolkit Framework

The goal of this article is to give you a brief overview of some of the objects from clear.swc, which is a part of the open source Clear Toolkit framework available at https://sourceforge.net/projects/cleartoolkit.
Component library clear.swc includes a number of enhanced Flex components that software engineers of Farata Systems have been developing and using during the last three years in many enterprise projects. To better understand brief explanations given in this document, we strongly recommend to check out the source code from Sourceforge CVS repository and examine the source code of the classes mentioned below.
The ChangeObject Class

If you are familiar with LCDS, you know that Data Managemet Services use  ChangeObject, which is a special DTO that is used to propagate the changes between the server and the client.  Our component also includes such object but it can be used not only with LCDS but with BlazeDS too.

The class ChangeObject lives on the client side  – it is just a simple storage container for original and new versions of the record that is undergoing some changes:

package  com.farata.remoting {
[RemoteClass(alias=”com.farata.remoting.ChangeObjectImpl”)]
public class ChangeObject {

public var state:int;
public var newVersion:Object = null;
public var previousVersion:Object = null;
public var error:String = “”;
public var changedPropertyNames:Array= null;

public static const UPDATE:int=2;
public static const DELETE:int=3;
public static const CREATE:int=1;

public function ChangeObject(state:int=0,
newVersion:Object=null, previousVersion:Object = null) {
this.state = state;
this.newVersion = newVersion;
this.previousVersion = previousVersion;
}

public function isCreate():Boolean {
return state==ChangeObject.CREATE;
}
public function isUpdate():Boolean {
return state==ChangeObject.UPDATE;
}
public function isDelete():Boolean {
return state==ChangeObject.DELETE;
}
}

Every changed record can be in DELETE, UPDATE or CREATE state. The original version of the object is stored in the previousVersion property and current one is in the newVersion. That turns the ChangeObject into a lightweight implementation of the Assembler pattern, which offers a simple API to process all the data changes in a standard way similar to what’s done in Data Management Services that come with LCDS.

The DataCollection class that will be described below automatically keeps track of all the changes made by the use in the UI and sends a collection of the corresponding ChangeObject instances to the server.

On the server side, you can you need to separate a task into DAO and Assembler layers by introducing  external interfaces – the methods with  fill (retrieve) and sync (update) functionality (note the suffixes _fill and _sync in the Java code below).  Iterate through the collection of ChangeObject instances and call appropriate persistence functions:

/* Generated by ClearDB Utility (Dao.xsl) */
package com.farata.datasource;
import java.sql.*;
import java.util.*;
import flex.data.*;
import javax.naming.Context;
import javax.naming.InitialContext;
import javax.transaction.*;
import com.farata.daoflex.*;

public final class EmployeeDAO extends Employee {
public final List /*com.farata.datasource.dto.EmployeeDTO[]*/ fill{
return getEmployees_fill();
}

public final List getEmployees_sync(List items)    {
Coonection conn = null;
try  {
conn = JDBCConnection.getConnection(“jdbc/test”);
ChangeObject co = null;
for (int state=3;  state > 0; state–) { //DELETE, UPDATE, CREATE
Iterator iterator = items.iterator();
while (iterator.hasNext()) {   // Proceed to all updates next
co = (ChangeObject)iterator.next();
if(co.state == state && co.isUpdate())
doUpdate_getEmployees(conn, co);
if(co.state == state && co.isDelete())
doDelete_getEmployees(conn, co);
if(co.state == state && co.isCreate())
doCreate_getEmployees(conn, co);
}
}
} catch(DataSyncException dse) {
dse.printStackTrace();
throw dse;
} catch(Throwable te) {
te.printStackTrace();
throw new DAOException(te.getMessage(), te);
} finally {
JDBCConnection.releaseConnection(conn);
}
return items;
}
DataCollection class

This object keeps track of the changes on the client. For example, a user modifies the data in a DataGrid that has a collection of some objects used as a data provider. We’ve made a standard Flex ArrayCollection a little smarter so it’ll create a collection of ChangeObject instances for every modified, new, and deleted row. The class DataCollection will do exactly this.
Generate a sample CRUD application with Clear Data Builder and review the code of the generated sample Flex clients.  The code to populate DataCollection will look similar to this one:

[Bindable]
public var collection:DataCollection ;

collection = new DataCollection();
collection.destination=”myEmployeeDestination”;
collection.method=”getEmployees”;

collection.addEventListener( CollectionEvent.COLLECTION_CHANGE, logEvent);
collection.addEventListener(“fault”, logEvent);
collection.fill();
When the user is ready to submit the changes to the server, the following line will send a collection of ChangeObject instances to the server:
collection.sync();

Below are some relevant fragments from the class DataCollection. It offers an API for manipulating collection’s state. You can query the collection to find out if this particular object is new, updated or removed:

public function isItemNew(item:Object):Boolean {
var co: ChangeObject = modified[item] as ChangeObject;
return (co!=null && co.isCreate());
}
public function setItemNew(item:Object):void {
var co:com.farata.remoting.ChangeObject = modified[item] as ChangeObject;
if (co!=null){
co.state = ChangeObject.CREATE;
}
}
public function isItemModified(item:Object):Boolean {
var co: ChangeObject = modified[item] as ChangeObject;
return (co!=null && !co.isCreate());
}
public function setItemNotModified(item:Object):void {
var co: ChangeObject = modified[item] as ChangeObject;
if (co!=null) {
delete modified[item];
modifiedCount–;
}
}

private var _deletedCount : int = 0;
public function get deletedCount():uint {
return _deletedCount;
}

public function set deletedCount(val:uint):void {
var oldValue :uint = _deletedCount ;
_deletedCount = val;
commitRequired = (_modifiedCount>0 || deletedCount>0);
dispatchEvent(PropertyChangeEvent.createUpdateEvent(this, “deletedCount”, oldValue, _deletedCount));
}

private var _modifiedCount : int = 0;
public function get modifiedCount():uint {
return _modifiedCount;
}
public function set modifiedCount(val:uint ) : void{
var oldValue :uint = _modifiedCount ;
_modifiedCount = val;
commitRequired = (_modifiedCount>0 || deletedCount>0);
dispatchEvent(PropertyChangeEvent.createUpdateEvent(this, “modifiedCount”, oldValue, _modifiedCount));
}

private var _commitRequired:Boolean = false;
public function set commitRequired(val :Boolean) :void {
if (val!==_commitRequired) {
_commitRequired = val;
dispatchEvent(PropertyChangeEvent.createUpdateEvent(this, “commitRequired”, !_commitRequired, _commitRequired));
}
}
public function get commitRequired() :Boolean {
return _commitRequired;
}

public function resetState():void {
deleted = new Array();
modified = new Dictionary();
modifiedCount = 0;
deletedCount = 0;
}

All the changes are accessible as the properties deletes, inserts and updates:

public function get changes():Array {
var args:Array = deletes;
for ( var item:Object in modified) {
var co:com.farata.remoting.ChangeObject =
com.farata.remoting.ChangeObject(modified[item]);
co.newVersion = cloneItem(item);
args.push(co);
}
return args;
}

public function get deletes():Array {
var args:Array = [];
for ( var i :int = 0; i < deleted.length; i++) {
args.push(
new ChangeObject(
ChangeObject.DELETE, null,
ObjectUtils.cloneItem(deleted[i])
)
);
}
return args;
}
public function get inserts():Array {
var args:Array = [];
for ( var item:Object in modified) {
var co: ChangeObject = ChangeObject(modified[item]);
if (co.isCreate()) {
co.newVersion = ObjectUtils.cloneItem(item);
args.push( co );
}
}
return args;
}
public function get updates():Array {
var args:Array = [];
for ( var item:Object in modified) {
var co: ChangeObject = ChangeObject(modified[item]);
if (!co.isCreate()) {
// make up to date clone of the item
co.newVersion = ObjectUtils.cloneItem(item);
args.push( co );
}
}
return args;
}

This collection should also take care of the communication with the server and call the fill and sync methods:

public var _method : String = null;
public var syncMethod : String = null;

public function set method (newMethod:String):void {
_method = newMethod;
if (syncMethod==null)
syncMethod = newMethod + “_sync”;
}
public function get method():String {    return _method;        }

protected function createRemoteObject():RemoteObject {
var ro:RemoteObject = null;
if( destination==null || destination.length==0 )
throw new Error(“No destination specified”);

ro = new RemoteObject();
ro.destination    = destination;
ro.concurrency    = “last”;
ro.addEventListener(ResultEvent.RESULT, ro_onResult);
ro.addEventListener(FaultEvent.FAULT,   ro_onFault);
return ro;
}

public function fill(… args): AsyncToken {
var act:AsyncToken = invoke(method, args);
act.method = “fill”;
return act;
}

protected function invoke(method:String, args:Array):AsyncToken {
if( ro==null ) ro = createRemoteObject();
ro.showBusyCursor = true;
var operation:AbstractOperation = ro.getOperation(method);
operation.arguments = args;
var act:AsyncToken = operation.send();
return act;
}

protected function ro_onFault(evt:FaultEvent):void {
CursorManager.removeBusyCursor();
if (evt.token.method == “sync”) {
modified = evt.token.modified;
modifiedCount = evt.token.modifiedCount;
deleted = evt.token.deleted;
}
dispatchEvent(evt);
if( alertOnFault && !evt.isDefaultPrevented() ) {
var dst:String = evt.message.destination;
if( dst==null || (dst!=null && dst.length==0) )
try{ dst = evt.target.destination; } catch(e:*){};

var ue:UnhandledError = UnhandledError.create(null, evt,
DataCollection, this, evt.fault.faultString,
“Error on destination: ” + dst);
ue.report();
}
}

public function sync():AsyncToken {
var act:AsyncToken = invoke(syncMethod, [changes]);
act.method = “sync”;
act.modified = modified;
act.deleted = deleted;
act.modifiedCount=modifiedCount;
if (writeThrough)
resetState();
return act;
}

}
}

Data Styling with Resource Files

Resources are small files that can be attached as a property to a regular UI component as well as DataGrid column.  We call programming with resources data styling.
Again, start with examining the code of a sample project generated by Clear Data Builder. You can find a number of resource files under the folder flex_src\com\farata\resource.
Review the code of  YesNoCheckBoxResource.mxml:

<?xml version=”1.0″ encoding=”utf-8″?>
<fx:CheckBoxResource
xmlns=”com.farata.resources” xmlns:mx=”http://www.adobe.com/2006/mxml”
xmlns:resources=”com.theriabook.resources.*”
offValue = “N”
onValue = “Y”
textAlign=”center”
>

</fx:CheckBoxResource>

Doesn’t it look like a style to you? It can be specific to locale too. It makes it easy to change Y/N as on/off values to Д/Н, which means Да/Нет in Russian and Si/No in Spanish.
We’d like you to think of such resources as of entities that are separate from the application components. Isn’t such functionality similar to what CSS is about?
As a matter of fact, it’s more sophisticated than CSS because this resource is a mix of styles and properties. The next code example is yet another resource called StateComboBoxResource.mxml.  It demonstrates using properties (i.e. dataProvider) in such resource, which we also call  a Business Style Sheet. Such  resource can contain a list of values such as names and abbreviations of states:

<?xml version=”1.0″ encoding=”utf-8″?>
<fx:ComboBoxResource
xmlns=”com.farata.resources” xmlns:mx=”http://www.adobe.com/2006/mxml”
xmlns:resources=”com.theriabook.resources.*”
dropdownWidth=”160″
width=”160″
>
<fx:dataProvider>
<mx:Array>
<mx:Object data=”AL” label=”Alabama” />
<mx:Object data=”AZ” label=”Arizona” />
<mx:Object data=”CA” label=”California” />
<mx:Object data=”CO” label=”Colorado” />
<mx:Object data=”CT” label=”Connecticut” />
<mx:Object data=”DE” label=”Delaware” />
<mx:Object data=”FL” label=”Florida” />
<mx:Object data=”GA” label=”Georgia” />
<mx:Object data=”WY” label=”Wyoming” />
</mx:Array>
</fx:dataProvider>
</fx:ComboBoxResource>

Yet another example of a resource contains a reference to remote destination for automatic retrieval of dynamic data coming from, say  a DBMS:

<?xml version=”1.0″ encoding=”utf-8″?>
<fx:ComboBoxResource
xmlns=”com.farata.resources” xmlns:mx=”http://www.adobe.com/2006/mxml”
xmlns:resources=”com.theriabook.resources.*”
width=”160″
dropdownWidth=”160″
destination=”Employee”
keyField=”DEPT_ID”
labelField=”DEPT_NAME”
autoFill=”true”
method=”getDepartments”
>
</fx:ComboBoxResource>

As a matter of fact, you can’t say from this code if the data is coming from a DBMS or from somewhere else.  That data is cleanly separated from the instances of the ComboBox objects associated with this particular resource and can be cached either globally (if the data needs to be retrieved once) or according to the framework caching specifications. If you are developing a business framework, you may allow, say lookup objects to be loaded once per application or once per view.  This flexibility doesn’t exist in Singleton-based architectural frameworks.

Based on this resource file you can only say that the data comes back from a remote destination called Employee, which either a name of a class or a class factory. You can also see that the method getDepartments() will be returning the data containing DEPT_ID and DEPT_NAME that are going to be used with our enhanced ComboBox described earlier in this chapter.

OK, now we need to come up with a mechanism of attaching such resources to Flex UI components. To teach a Combobox working with resources, add a resource property to it:

private var _resource:Object;
public function get resource():Object
{
return _resource;
}

public function set resource(value:Object):void {
_resource = value;
var objInst:*  = ResourceBase.getResourceInstance(value);
if(objInst)
objInst.apply(this);
}

The resource property allows you to write something like this:

<fx:ComboBox resource=”{DepartmentComboResource}”

Each of the enhanced UI components that’s included in clear.swc includea such property.
Since interfaces don’t allow default implementation of such setter and getter and since ActionScript does not support multiple inheritance, the easiest way to include this implementation of the resource property to each control is by using the language compile-time directive #include, which includes the contents of the external file, say resource.as, into the code of your components:
#include “resource.as”

Check the code of Employee_getEmployee_GridFormTest.mxml generated by Clear Data Builder. You’ll find there several samples of using resources:

<fx:DataGrid dataProvider=”{collection}” doubleClick=”vs.selectedIndex=1″ doubleClickEnabled=”true” editable=”true” height=”100%” horizontalScrollPolicy=”auto” id=”dg” width=”100%”>
<fx:columns>
<fx:DataGridColumn dataField=”emp_id” editable=”false”
headerText=”Emp Id”/>

<fx:DataGridColumn dataField=”dept_id” editable=”false”
headerText=”Department”
resource=”{com.farata.resources.DepartmentComboResource}”/>
<fx:DataGridColumn dataField=”state” editable=”false”
headerText=”State”
resource=”{com.farata.resources.StateComboResource}”/>
<fx:DataGridColumn dataField=”bene_health_ins” editable=”false”
headerText=”Health”
resource=”{com.farata.resources.YesNoCheckBoxResource}”/>
<fx:DataGridColumn dataField=”bene_life_ins” editable=”false”
headerText=”Life”
resource=”{com.farata.resources.YesNoCheckBoxResource}”/>
<fx:DataGridColumn dataField=”bene_day_care” editable=”false”

headerText=”Day Care”
resource=”{com.farata.resources.YesNoCheckBoxResource}”/>
<fx:DataGridColumn dataField=”sex” editable=”false”
headerText=”Sex”
resource=”{com.farata.resources.SexRadioResource}”/>
</fx:columns>
</fx:DataGrid>

Using resources really boosts your productivity.

The DataForm Component

Almost every enterprise application uses forms.  Flex has the Form class that application programmers bind to an object representing data model. But the original Form class does not have means of tracking the data changes.

Since DataCollection is smart enough to automatically tracks the changes to the data on the client side, we found the way of enhancing the Form class so it works similarly to DataGrid/DataCollection duo. Yep, it has the dataProvider too.

Our DataForm control is bound to its model of type a DataCollection and it automatic tracks of all changes compatible with ChangeObject class that is implemented with remote data service.
The second improvement belongs to the domain of data validation. The DataForm can validate not just individual form items, but the form in its entirety too.  Our DataForm stores its validators inside the form rather than in an external global object.  The form becomes a self-contained black box that has everything it needs.

Software developers working on prototypes would appreciate if they should not be required to give definitive answers as to which control to put on the data form.  The first cut of the form may use a TextInput control, but the next version should use a ComboBox instead.
The third improvement should simplify the UI prototyping. We came up with a UI-neutral data form item that will allow not to be specific like, “I’m a TextInput”, or “I’m a ComboBox”. Instead, developers will be able to create prototypes with generic data items with easily attachable resources.

The DataForm is a subclass of a Flex Form, and its code implements two-way binding and includes a new property dataProvider. Its function validateAll()supports data validation. This DataForm component will properly respond to data changes propagating them to its data provider.
Review the code of the class DataForm available in Sourceforge CVS repository. Notice the setter dataProvider that always wraps up the provided data into a collection. This is needed to ensure that our DataForm supports working with remote data services the same way as DataGrid does.  It checks the data type of the value. It wraps an Array into an ArrayCollection, and XML turns into XMLListCollection. If you need to change the backing collection that store the data of a form, just point the collection variable at the new data.

If a single object is given as a dataProvider, turn it into a one-element array and then into a collection object. A good example of such case is an instance of a Model, which is an ObjectProxy  that knows how to dispatch events about changes of its properties.

Once in a while, application developers need to render non-editable forms hence the DataForm class defines the readOnly property.
The changes of the underlying data are propagated to the form in the method collectionChangeHandler().  The data can be modified either in the dataProvider on from the UI and the DataForm ensures that each visible  DataFormItem object (items[i]) knows about it. This is done in the function distributeData().

private function distributeData():void {
if((collection != null) && (collection.length > 0)) {
for (var i:int=0; i<items.length; i++)    {
DataFormItem(items[i]).data = this.collection[0];
}
}
}

Again, we need the data to be wrapped into a collection to support DataCollection or DataService from LCDS.

Technically, a DataForm class is a VBox that lays out its children vertically in two columns and automatically aligns the labels of the form items. But we’d like our DataForm to allow nesting – containing items that are also instances of the DataForm object. A recursive function enumerateChildren() loops through the children of the form, and if it finds a DataFormItem, it just adds it to the array items. But if the child is a container, the function loops through its children and adds them to the same items array. In the end, the property items contains all DataFormItems that have to be populated.

The DataForm has a function validateAll(), which in Flex framework is located in the class Validator. There, the validation functionality was external to   Form elements and you’d need to give an array of validators that were tightly coupled with specific form fields.

Enhancing Validation

It seems that validation in Flex has been designed with an assumption that software developers will mainly use it with forms and each validator class will be dependent only on one field it’s attached to.  Say, you have a form with two email fields. Flex framework forces you to create two instances of the EmailValidator object – one per field.
In the real life though, you may also need to come up with validating conditions based on relationships between multiple fields. You may also need to highlight invalid values in more than one field. For example, set the date validator to a field and check if the entered date falls into the time interval specified in  start and end date fields. If the date is invalid, you may want to highlight all form fields.

In other words, you may need not just to validate an object property, but also have an ability to write a number of validation rules in a function that can be associated not only with the UI control but also with the underlying data, i.e. with a data displayed in a row in a DataGrid.

Yet another issue of Flex Validator is its limitations when it comes to working with view states when the UI controls are created automatically. Everything would be a lot easier if validators could live inside the UI controls, in which case they would be automatically added to view states along with the hosting controls.
Having convenient means of validation on the client is an important part of the enterprise Flex framework.

Let’s consider a RIA for opening new customer accounts in a bank or an insurance company. This business process often starts with filling multiple sections in a mile-long application form. In Flex, such an application may turn into a ViewStack of custom components with, say five forms totaling 50 fields. These custom components and validators are physically stored in separate files. Each section in a paper form can be represented as a content of one section in an Accordion or other navigator. Say you have total of 50 validators, but realistically, you’d like to engage only those validators that are relevant to the open section of the Accordion.
If an application developer decides to move a field from one custom component to another, he needs to make appropriate changes in the code to synchronize the old validators with a relocated field.

What some of the form fields are used with view states? How would you validate these moving targets? If you are adding three fields when the currentState=”Details”, you’d need manually write AddChild statements in the state section Details.
Say 40 out of these 50 validators are permanent, and the other 10 are used once in a while.  But even these 40 you don’t want to use simultaneously hence you need to create, say two arrays having twenty elements each, and keep adding/removing temporary validators to these arrays according to view state changes.
Even though it seems that Flex separates validators and field to validate, this is not a real separation but rather a tight coupling.
During a conversation with a software developer, one manager said, “Don’t give me problems, give me solutions”.  OK, here comes the solution.
We’d like to make it clear – our goal in not to replace existing Flex validation routines, but rather offer you an alternative solution that can be used with forms and list-based controls.

We want to be able to have a ViewStack with five custom components, each of those has one DataForm whose elements have access to the entire set of 50 fields, but each will validate only its own set of 10.  In other words, all five forms will have access to the same 50-field dataProvider.  If during account opening the user entered 65 in the field age on the first form, the fifth form may show fields with options to open a pension plan account, which won’t be visible for young customers.
That’s why each form needs to have access to all data, but when you need to validate only the fields that are visible on the screen at the moment, you should be able to do this on behalf of this particular DataForm.

Clear component library includes the class ValidationRule.  We won’t go into details of this class here, but will rather tease you by showing a code snippet that illustrates how easy it is to embed a validator inside of the DataGridColumn:

<fx:DataGridColumn dataField=”PHONE” headerText=”Phone Number”
formatString=”phone”  >
<fx:validators>
<mx:Array>
<mx:PhoneNumberValidator  wrongLengthError=”Wrong
length, need 10 digit number”/>
</mx:Array>
</fx:validators>
</fx:DataGridColumn>

Needless to say that this is not an original Flex DataGridColumn, but its descendent.

Summary

In this writeup we’ve just touched upon the major players from the Clear component library. In the next article we’ll review the enhanecements made for the small guys like ComboBox or CheckBox.
We are also planning to record and publish a number of screencsasts that illustrate the use of various components of clear.swc. The process of creating enhanced library of Flex components will be described in greater detail in our upcoming O’Reilly book “Enterprise Development with Flex”.

Clear Data Builder: data synchronization in a multi-user environment

Clear Data Builder is a part of the open source Flex framework Clear Toolkit, see https://sourceforge.net/projects/cleartoolkit/. This blog introduces data-sync feature of CDB.

When more than one client works with the same application and the same piece of data, Clear Data Builder offers auto-notification mechanism about data modifications.  TO see how it works, examine the code of the Java class that is used for generation of a sample CRUD application using Java DTO src\com\farata\test\Employee.java:
/*
* @daoflex:java
*   transferType=com.farata.test.EmployeeDTO[]
*   keyColumns=emp_id
*   autoSyncEnabled=true
*/
public List<EmployeeDTO> fill()

The attribute autoSyncEnabled allow possibility to turn on/poff auto-notification of changes.  Set  the attribute autoSyncEnabled to true and then rebuild the project.
Copy the generated sample application \test\rpc\com\farata\test\Employee_fill_GridTest.mxml into the folder flex_src. This file contains the following code (note the line collection.autoSyncEnabled=true):
private function onCreationComplete() : void {
collection = new DataCollection();
collection.destination=”com.farata.test.Employee”;
collection.method=”fill”;
collection.autoSyncEnabled=true;
//fill_sync is the default for collection.syncMethod
log = new ArrayCollection();
collection.addEventListener( CollectionEvent.COLLECTION_CHANGE, logEvent);
collection.addEventListener(“fault”, logEvent);
fill_onClick();
}

Start the server and run the application as per CDB documentation.  When the application runs, open yet another browser instance pointing at the same url.

Modify some data in one browser and press the button Commit. The data grid in another browser window will reflect the latest changes.
This synchronization has been implemented using the data push via streaming AMF channel and has been tested with BlazeDS.