Google Gears, Prototype, and YUI

Recently I have had the chance to monkey around with Google Gears, Prototype, and YUI together. I created a nice data dashboard application which uses the local database in Gears to store data relevant to the user.

For example, when working within your corporate intranet, you can enable your users to enter in data chunks that pertain to the work they perform such as common account numbers, logins, or other information, perhaps a geo location.

The user can then associate this chunk to a location within the database. Specifying which fields and tables are associated with the chunk they wish to create a dashboard widget for. Using prototype you can build a data class that can access the local database or perform updates with Ajax. 

At this point I decided not to store the results back into the local database, but it could be possible to store that json and retrieve it if the user wanted to save off reports they have run.

A simplified/psuedocode version of the prototype class might look like:

var $args = {
   label: 'Label',
   db_table: 'myTable',
   db_col: 'myCol',
   fields: '*'
   assoc: 'myOtherTable.myOtherCol'
}

var DataChunk = Class.create({
   initialize: function($args){
      this.args = { .. deafults .. };
      Object.extend(this.args, $args || {});
   },
   get_params: function(){ .. return this.args  toQueryParams ... }
   // Other Methods
});

var DataManager = Class.create({
   initialize: function($local_db, $table){
      // Gears db init code here


      // Object properties
      this.ajax = '/url'
      this.db = $local_db;
      this.table = $table
   },

   get_chunk: function($label){
      return this.db.execute('select * from ' + this.table);
   },

   load_chunk_data: function($chunk){
      try {
         var load_chunk = new Ajax.Request(this.url, {
            method: 'get', 
            parameters: $chunk.get_params(), 
            onSuccess: this.got_chunk
                  .bindAsEventListener(this);
         });
      } catch ($err) { ... }
   },

   got_chunk: function($response) { ... }

});

Or, the coder could also strap the load_chunk_data to a YUI DataSource and DataTable, or Prototype Ajax.Updater for recurring updates.

Overall, as with most Google products, I am very impressed with the capabilities Gears gives me in creating exciting web applications.

Blogged with the Flock Browser