SVGOpen 2008 abstract proposal

Offline SQLiteSVG database applications with Firefox

Introduction

As of planning Firefox 2 the Mozilla team searched for ways to "provide a unified interface for storing and searching through data for all Mozilla components and extensions" [1]. This should also eliminate multiple file formats that have been in use for Mozilla profiles and settings and "provide Mozilla core components and extension authors with tools to enable richer interaction with user data" (ibid). The solution they came up with was mozStorage [2], a database API for C++ and Javascript with SQLite, an "in-process library that implements a self-contained, serverless, zero-configuration, transactional SQL database engine" [3] on the backend side. Browsing your Mozilla profile directory will reveal these .sqlite files that take care of history, bookmarks, cookies, form or search history, download manager bits and the like.

This paper will show how to make us of mozStorage to create offline clientside, database driven applications with Javascript, SVG and SQLite. It's targeted at SVG developers with a sorrow knowledge of scripting and beginning to intermediate knowledge of relational databases, respectively the use of SQL.

A first example

As this example demonstrates clientside database storage it must be run locally. Please download hello.tar.gz, unpack it and open hello.svg with Firefox 2 or 3. To demonstrate the basics of clientside database usage let's start with a simple "Hello SQLite world" application that accomplishes the following tasks:

Create the database
Once you've downloaded the prebuilt SQLite binaries for your platform [4] the process of creating the database with a table and populating some column with text is straight forward (see hello.sh). If you prefer a GUI to perform these steps you may also install and use the Firefox SQLiteManager extension [5].
Build a Javascript library that uses mozStorage
hello.js contains two functions that allow to connect to a database and execute statements. As mozStorage operates on local files, security restrictions apply and prior to connecting or executing the script has to be given appropriate permissions by setting netscape.security.PrivilegeManager.enablePrivilege("UniversalXPConnect"). This will prompt the user to grant the required permissions. Be sure to check "remember decision" as this will prevent you from being prompted whenever you execute statements.
Build an SVG file that communicates with the database
hello.svg consists of a script element that contains calls to the previously built Javascript library and adds an onclick eventListener to a text-element that is used to display the current database content. This text is set onload to the value of column msg in table hello. Clicking it prompts for a new string that is to be written to the msg column instead.

Advanced usage

Extending the concept of our simple Hello SQLite World example, it is possible to build more complex applications like the one being presented in the "Tasmania SQLiteSVG workshop proposal". It shows how to create a map for Tasmania with geometry layers, configurable annotation and queryable thematic data coming solely from SQLite (see screenshot).

What's next?

The concept of clientside database storage as chosen by Mozilla way back when they designed Firefox 2 is by no means unique. Goggle gears provides a similar mechanism [6] and even more important than that, the WHATWG working group has added a "Clientside database storage" section to the HTML5 specification draft [7]. This will standardize the API and help to harmonize different approaches for solving the same task in the future. Let us explore these new possibilities!

SVGOpen 2008 abstract proposal

Offline SQLiteSVG database applications with Firefox

Introduction

A first example

Create the database

Build a Javascript library that uses mozStorage

Build an SVG file that communicates with the database

Advanced usage

What's next?

Links