I have recently been playing around with google gears; Gears is an open source project that enables more powerful web applications, by adding new features to your web browser such as interacting with the desktop, storing local data and running Javascript in the background. Here is a simple link manager I created to test out the LocalDB usage.

In this example I have made a link manager, where you can add/delete links from categories – as well as add/edit/delete existing categories. I have been using JQuery to automate some things, so if you use any of this code at all make sure JQuery is loaded beforehand.

The main part;

function googleInit(){
    var success = false;
    if (window.google && google.gears) {
        try {
            db = google.gears.factory.create('beta.database');
            if (db) {
                db.open('homepage-manager');
                db.execute('create table if not exists Linkers (' +
                'id integer not null primary key autoincrement,' +
                'title varchar(255),' +
                'url varchar(255),' +
                'catid integer,' +
                'description text)');

                db.execute('create table if not exists Cats (' +
                'id integer not null primary key autoincrement,' +
                'title varchar(255))');
                success = true;
                listCats();
            }
        }
        catch (ex) {
            alert('Could not create database: ' + ex.message);
        }
    }
}

Firstly we initialize the database, assign DB variable to use the beta.database from google gears, then we create our table structure. If this fails it will alert an error message.

Now for some functionality;

function fetchLinks(catID){
    $('#content').html(' ');
    var index = 0;
    var rs = db.execute('select * from Linkers where catid=' + catID);
    while (rs.isValidRow()) {
        $('#content').append('<div class="lelement"><div class="link"><a href="' + rs.field(2) + '">' + rs.field(1) + '</a><div class="close"><a href="#" onClick="delLink(' + rs.field(0) + ',' + rs.field(3) + ');">X</a></div></div><div class="desc">' + rs.field(4) + '</div></div>');
        rs.next();
        index++;
    }
    if (index == 0) {
        $('#content').append('<p>There are no links to display in this category</p>');
    }
}

function listCats(){
    var rs = db.execute('select * from Cats order by id');
    var index = 0;
    $('#cats').html(' ');
	$('#content').html(' ');
    while (rs.isValidRow()) {
        $('#cats').append('<div class="cat"><a href="#" onClick="fetchLinks(' + rs.field(0) + ');">' + rs.field(1) + '</a>&nbsp;<a onClick="delCat(' + rs.field(0) + ');" href="#" class="delcat">[ X ]</a></div>');
        rs.next();
        index++;
    }
	if(index == 0) {
		$('#content').append('<p>Please add a category from the Manage tab!</p>');
	}
}

function delCat(catid){
    if (catid) {
        var deltrue = confirm('Really delete this category?');
        if (deltrue) {
			if(!linksInCat(catid)) {
				try {
					db.execute('delete from Cats where id =' + catid);
					listCats();
					fillCatListbox();
				}
				catch (ex) {
					alert(ex.message);
				}
			} else {
				alert('Category not empty!, please delete links in this category before deleting.');
			}

        }
    }
}

function delLink(linkID, catid){
    var deltrue = confirm("Really delete this link?");
    if (deltrue) {
        db.execute('delete from Linkers where id =' + linkID);
        fetchLinks(catid); //Refresh links from that category
    }
}

The functions themselves are pretty self explaining, we have fetchLinks which requires a category ID, listCats which pulls all categories from the database, delCat and delLink which are used to delete a record from the specified table.

Adding new links and categories;

function addCategory(){
    var catName = $('#addcat').val();
    if (catName != '') {
        try {
            db.execute('insert into Cats (title) values ("' + catName + '")');
            $('#addcat').val(" ");
            alert('Category ' + catName + ' has been added.');
            listCats();
            fillCatListbox();
        }
        catch (ex) {
            alert(ex.message);
        }
    }
    else {
        alert('Please enter a category name!');
    }
}

function addLink(){
    var linkname = $('#linkname').val();
    var linkurl = $('#linkurl').val();
    var linkdesc = $('#linkdesc').val();
    var linkcat = $('#catlist').val();

    if (linkname && linkurl && linkdesc && linkcat) {
        try {
            db.execute('insert into Linkers (title, url, catid, description) values ("' + linkname + '","' + linkurl + '",' + linkcat + ',"' + linkdesc + '")');
            $('#linkname').val(' ');
            $('#linkurl').val(' ');
            $('#linkdesc').val(' ');
            alert('Your new link ' + linkname + ' has been added.');
        }
        catch (ex) {
            alert(ex.message);
        }
    }
    else {
        alert('Please fill in all required link information');
    }
}

That’s basically it, along with a set of HTML and styling it does it’s job quite nicely, I have packaged up the example in usable format for anyone wanting to take a look at it working. This can be downloaded from here: Download Here