oreilly.comSafari Books Online.Conferences.


The Power of Google Gears (Part 2)
Pages: 1, 2, 3

Batching Up Data with Gears

My first pass at using Gears to store up the data for later posting is going to be really simple. I'll take the serialized versions of the post and store them in a very rudimentary SQLite database within Gears. Then, when the user hits a button, I'll dump that database into an array of items to post and, one by one, I will use the Ajax.Updater class to send that data to the server.

The code for this second version of the data entry form is shown in Listing 4.

Listing 4. form2.html
<script src="prototype.js"></script>
<script src="gears_init.js"></script>
function () {
  if (! || !google.gears)
  try {
    db = google.gears.factory.create('beta.database', '1.0');
  } catch (ex) {
    alert('Could not create database: ' + ex.message);
  if (db) {'addresses');
    db.execute('create table if not exists datablobs ( data text )');
function showQueued()
  var rs = db.execute( 'select count(*) from datablobs' );
  while( rs.isValidRow() ) {
    $('result').innerHTML = rs.field(0)+' records queued';;
function addData()
  var rs = db.execute( 'insert into datablobs values ( ? )',
   [ $('addform').serialize() ] );
var blobs = [];
function startPosting()
  var rs = db.execute( 'select data from datablobs' );
  while ( rs.isValidRow() ) {
    blobs.push( rs.field(0) );;
  rs = db.execute( 'delete from datablobs' );
function postData( )
  if ( blobs.length == 0 ) return;
  new Ajax.Updater( 'result', 'add.php', {
    method: 'post', parameters: blobs.pop(),
    onSuccess: function() { window.setTimeout( postData, 10 ); }
  } );
<body onload="initializedb()">
<form id="addform">
<button onclick="addData()">Add</button>
<button onclick="startPosting()">Post to server</button><br/><br/>
<div id="result"></div>

Right at the top of the page I include the gears_init.js file, which is part of the Google Gears download. This is used to provide access to the different Gears subsystems including the SQLite database.

The initializedb JavaScript function called on the load of the page. It makes sure that Gears is installed and opens a connection to the database. It then creates a database called addresses and a single table called datablobs that will hold the serialized versions of the form postings. This SQLite table is really simple; it just has a single field called data which is of type text.

The next important function is addData, which adds a record to the datablobs table with the current text of the first, last, and email fields. It also calls the showQueued function, which updates the <div> tag with the id of results to the count of queued records.

Finally, when the user presses the Post to Server button the startPosting function is called. This function dumps the database into a local array and calls the postData function to post the first element from the blobs array to the server. The postData function then calls itself when the Ajax request is complete. This will post each item until there is no data left.

To give it a try, I launch the browser and go to the form2.html page, as seen in Figure 3.

The Gears-enabled page with the new Post to Server button
Figure 3. The Gears-enabled page with the new Post to Server button

I then add some data to the first, last, and email fields and hit the Add button. This is shown in Listing 4. (See Figure 4.)

The page after having added a record to the Gears queue
Figure 4. The page after having added a record to the Gears queue

So, now there is one item in the queue. At this point I could close the browser and come back tomorrow and still see that one item is in the queue. Why? Because that SQLite database is persistent between sessions, browser relaunches, heck, even restarting the system.

To get the data to the server I hit the Post to Server button and I see something like Figure 5.

The page after having hit the Post to Server button
Figure 5. The page after having hit the Post to Server button

I wanted to show a solution like this because it's very generic and simple. With the addition of the Gears code, you can take any standard data entry form that currently uses Ajax and make it offline-capable using this technique.

But I also want to show a more elaborate use of the SQLite database.

Pages: 1, 2, 3

Next Pagearrow

Sponsored by: