Google Gears Presentation

I presented on Gears, which is a set a tools available to Web Developers to build more compelling application through expanded capabilities in the browser. I gave this presentation at the Central New York ColdFusion User Group meeting in July to provide a basic introduction to the main modules of Gears and to highlight some of the potential it provides ColdFusion developers, and all web developers.

You may be asking yourself: Gears, that’s all about offline, right?

Well — kinda.

Gears exposes new modules and capabilities that provide general purpose building blocks for web applications to unlock the capabilities of the local machine in a safe manner.

Here’s some code

For the presentation, I put together a quick sample that shows how the offline Database module works, which stores information into a local Sqlite database on the client. The sample is pretty simple and easy, which goes to show how accessible Gears is to every web developer out there.

To start off with, a simple init() function is called on window load:

^?View Code JAVASCRIPT

function init(){
  db = google.gears.factory.create('beta.database');
  db.open('database-test');
  db.execute('create table if not exists Users' + ' (id INTEGER PRIMARY KEY AUTOINCREMENT, firstname varchar(100), lastname varchar(100), Description text, Timestamp int)');
  list();
}

The init() function creates a table Users, and specifies the table schema, then calls the init() function, which populates a div with a simple table:

^?View Code JAVASCRIPT

function list(){
  $('tablecontainer').innerHTML = '';
  var html = '&lt;table&gt;&lt;tr&gt;&lt;th&gt;First name&lt;/th&gt;&lt;th&gt;Last name&lt;/th&gt;&lt;th&gt;Description&lt;/th&gt;&lt;th&gt;Actions&lt;/th&gt;&lt;/tr&gt;'
  rs = db.execute('select * from Users order by Timestamp desc');
  while (rs.isValidRow()) {
    html += '&lt;tr&gt;&lt;td&gt;'+rs.fieldByName('firstname')+'&lt;/td&gt;&lt;td&gt;'+rs.fieldByName('lastname')+'&lt;/td&gt;&lt;td&gt;'+rs.fieldByName('Description')+'&lt;/td&gt;&lt;td&gt;&lt;a href="javascript:del('+rs.fieldByName('id')+');"&gt;Delete&lt;/a&gt;&lt;/td&gt;&lt;/tr&gt;';
    rs.next();
  }
  rs.close();
  html += '&lt;/table&gt;'
  $('tablecontainer').innerHTML = html;
}

The list function executes a DB call to select the data from the local Sqlite table we created in the init() function. Then using the record set object that is returned from the execute() method, we call it’s isValidRow() method. This lets us know if the current record is indeed a record, and we keep going to the next record until it returns false. Lastly, we close the record set object, and write out the html to browser.

For inserting a record into the table, its pretty easy (notice, I am also using the Prototype.js library here, which seems to work just fine with Gears):

^?View Code JAVASCRIPT

function create(){
  db.execute('insert into Users (firstname, lastname, Description, Timestamp) values (?, ?, ?, ?)', [$F('firstname'), $F('lastname'), $F('Description'), new Date().getTime()]);
  lastid = db.lastInsertRowId;
  list();
}

The create() function shows how you use bind parameters (?), which you should use whenever the user’s input is being executed against the SQL database to prevent SQL injection attacks. This function also shows how you can easily obtain the last row id, which is helpful when using a auto_increment primary key.

Creating a desktop shortcut

The second quick demo during the presentation showed how easy it is to create a custom desktop shortcut using Gears, here’s the code:

^?View Code JAVASCRIPT

function createShortcut(){
  var desktop = google.gears.factory.create('beta.desktop');
  desktop.createShortcut("CFUG Gears Demo",
    "http://brianflove.dev/CFUGCNY/Gears/",
    {"128x128": "http://brianflove.dev/CFUGCNY/Gears/icon_128.png",
     "48x48": "http://brianflove.dev/CFUGCNY/Gears/icon_48.png",
     "32x32": "http://brianflove.dev/CFUGCNY/Gears/icon_32.png",
     "16x16": "http://brianflove.dev/CFUGCNY/Gears/icon_16.png"},
    "CFUG - Gears Demo Application http://brianflove.dev/CFUGCNY/Gears/");
}

Web Biz