McDaniel Consulting LLC

Since my last post, when I demostrated a way to integrate Ext and Seam using the SeamRemotingProxy and SeamRemotingJsonReader, I've decided that the solution needed a little simplification. One that abstracts away some of the implementation complexity from the users. So, looking to Ext for some inspiration, I found Ext.data.JsonStore. The main idea here is to reduce the code required by clients when setting up Ext.data.Stores. This simplification is realized by creating a custom store that internally constructs the collaborators that it needs to carry out its responsibilities. The obvious two collaborators in this case are the JsonReader and HttpProxy.

Taking this idea to the Seam Remoting solution from before doesn't take a whole lot of imagination. Create an SeamRemotingJsonStore class that constructs the SeamRemotingProxy and SeamRemotingJsonReader internally. So without further ado I here is the source for SeamRemotingJsonStore:

/**
 * @class Ext.data.ux.SeamRemotingJsonStore
 * @extends Ext.data.Store
 * Small helper class to make creating Seam Remoting Stores for JSON data easier. 
 * var store = new Ext.data.ux.SeamRemotingJsonStore({
 *    seamComponent: seamComponentInstance,
 *    remotMethod: seamComponentInstance.remoteMethod,
 *    id: 'id',
 *    root: 'data',
 *    fields: ['id', 'value', {name:'id', type: 'string'}, {name:'value', type:'string}]
 * });
 * This would consume a returned object of the form:
 * {
 *   data: [
 *       {id: 'id1', value: 'value1'},
 *       {id: 'id2', value:'value2}
 *   ]
 *}
 */
Ext.ux.data.SeamRemotingJsonStore = function(config) {
    Ext.ux.data.SeamRemotingJsonStore.superclass.constructor.call(this, Ext.apply(config, {
         reader: new Ext.ux.data.SeamRemotingJsonReader(config, config.fields),
         proxy: new Ext.ux.data.SeamRemotingProxy({
             seamComponent: config.seamComponent,
             remoteMethod: config.remoteMethod,
             requestComponent: config.requestComponent
         })         
    }));
};
Ext.extend(Ext.ux.data.SeamRemotingJsonStore, Ext.data.Store);

And here is a comparison of the usage from before:

    var seamComponent = Seam.Component.getInstance('seamComponentName');
    var proxy = new Ext.ux.data.SeamRemotingProxy({
        remoteMethod: seamComponent.loadJson, 
        seamComponent: seamComponent
    });

    var reader = new Ext.ux.data.SeamRemotingJsonReader({id: 'id', root:'data'}, [
        {name: 'company'},
        {name: 'price', type: 'float'},
        {name: 'change', type: 'float'},
        {name: 'pctChange', type: 'float'},
        {name: 'lastChange', type: 'date', dateFormat: 'n/j h:ia'}         
    ]);

    var ds = new Ext.data.Store({
        proxy: proxy,
        reader: reader
    });

and after:

    var seamComponent = Seam.Component.getInstance('seamComponentName');
    var ds = new Ext.ux.data.SeamRemotingJsonStore({
        seamComponent: seamComponent,
        remoteMethod: seamComponent.loadJson, 
        id: 'id', 
        root:'data',
        fields: [
            {name: 'company'},
            {name: 'price', type: 'float'},
            {name: 'change', type: 'float'},
            {name: 'pctChange', type: 'float'},
            {name: 'lastChange', type: 'date', dateFormat: 'n/j h:ia'}         
        ]
    });

That's mo better!

Click here to download the SeamRemoting.js file.