Multi-dialogue forms on one page
Turning Tables Into Selection Lists
You are here: irt.org | Articles | AJAX | How to do the impossible with Google Gears [ previous ]
Published on: Monday 18th June 2007 By: Martin Webb
What used to be true doesn't always remain true. One of the frequently asked JavaScript questions I used to be asked (so much so that it was added to the JavaScript VFAQ) was: "How can I read and write to a text file?" The response was always: "you can't, the browser won't let you." The longer response was that because JavaScript was running inside the browser, which in turn was running within a sandbox, JavaScript was prevented from accessing resources that were outside the sandbox, e.g. reading and writing to local files stored on the user's hard disc - the only alternative was to store cookies on the user's browser. This still remains true, but with the advent of plug-ins and extensions to the browser (generally installed as an optional extra by the user) the sandbox can be extended, and the browser could ultimately access any resource on the local computer - provided the user allows the plug-in/extension to be installed.
There is a need for allowing disconnected working, i.e. allow the user to carry on browsing the web when disconnected from the web - this may be due to a poor or unreliable Internet service (wireless), or no access at all (working at a customer's premises, or travelling). Allowing the browser to hold an offline store (or cache) of resources (distinct from the browser's cache), where developers can add additional files to the store independently of any actions that the user takes can be very powerful. Imagine being able to work disconnected and still being able to interact with your favourite web sites - and - even being able to submit data, e.g. submit messages, orders etc. If you later become connected then all your pending messages/orders could be synchronised with the web site.
Plug-ins and extensions that attempt to access the local file store surreptitiously, i.e. without the knowledge and consent of the user, would be considered at best a Trojan horse and at worse a virus or security breach. However, several groups of people have realised that the current highly restrictive sandbox is in need of a change - I'm aware of at least three distinct activities to increase the capabilities of the browser without necessarily breaking the sandbox model and hopefully, without doing anything surreptitiously. This posting concentrates on just one: Google Gears. The other two which may be addressed by future posts are:
Google Gears has only just been released as a beta product - it had teething problems with not being easily installed from behind a firewall but it should now work (YMMV). It can easily be used from native JavaScript with a small but spectacularly effective API. There are several simple samples that you can try out for yourself. We show in this posting how to extend two of these simple examples to provide a niffty toggle image solution to be used on any page to download the page plus supporting files.
There are different installations for different platforms - the easiest in my opinion is Firefox on Linux, as it installs as a Firefox plug-in that just requires you to restart Firefox after installing the plug-in to make it available. Windows requires a binary installation separately to the browser. But either way, once installed your sandbox will have been broadened to include an offline store that web sites can now take advantage of to provide much richer client applications.
If you haven't already installed Google Gears then when a page attempts to use the Google Gears API it will prompt you to first install it - see the example dialogue below:
If you haven't already installed Google Gears then I suggest you go ahead install it and then come back to this page and save it for offline viewing. If you have already installed Google Gears, then you should have seen the dialogue box prompting permission to use Google Gears on this page - if you did and you denied permission then reload this page and grant permission - see the example dialogue below:
If you've got Google Gears installed and you've granted this page permission to use it then try clicking the "star" images either at the top or bottom of this page. As soon as you do then Google Gears will asynchronously download and store a copy of this page to an offline resource store along with the supporting files necessary to view and then control this page offline. Go ahead and click the images. To test it actually works disconnect your Internet connection (after storing the page in the offline resource store) and then reload the current page. The page will not be loaded from the browser cache but instead Google Gears will intercept the request to the server and load the page from the offline resource store. To stop Google Gears loading this page from the resource store, click one of the images again to remove the current page from the offline resource store.
Note: we do not remove the supporting files from the offline resource store, as they may be need for other pages on this site that you may have already requested to be held in the Google Gears offline resource store. The script that performs the adding and removal of current page to the store is an extended version of two samples made available by Google Gears:
Our working example uses both a simple ResourceStore class to store the current page based on the current documents URL, and a ManagedResourceStore class to store supporting files using a JSON manifest file.
The contents of the manifest.json file are shown below - it requires six files to be stored in the ManagedResourceStore (two JavaScript files, plus the two image files, plus the site's style sheet and background image):
{
"betaManifestVersion": 1,
"version": "2.0.3",
"entries": [
{ "url": "http://www.irt.org/offline/offline.js"},
{ "url": "http://www.irt.org/offline/gears_init.js"},
{ "url": "http://www.irt.org/offline/star_off.gif"},
{ "url": "http://www.irt.org/offline/star_on.gif"},
{ "url": "http://www.irt.org/utility/main.css"},
{ "url": "http://www.irt.org/images/irt-sm.gif"}
]
}
View the source of the offline.js file
View the source of the gears_init.js file
To install the code on a particular page, then place the following in the head of the document:
<script src="gears_init.js" type="text/javascript"></script> <script src="offline.js" type="text/javascript"></script>
And wherever you want a toggle image to appear in your page, add the following:
<img src="star_off.gif" onclick="toggleUrlFromStore(this, window.location.href)" id="cacheStatus1" title="Click to add current page to offline access" />
Note: if you want more than one image to appear on the page - like there is on this page - then increment the image id attribute each time, e.g.:
<img src="star_off.gif" onclick="toggleUrlFromStore(this, window.location.href)" id="cacheStatus1" title="Click to add current page to offline access" /> <img src="star_off.gif" onclick="toggleUrlFromStore(this, window.location.href)" id="cacheStatus2" title="Click to add current page to offline access" />
Go ahead and click the image below and read this posting no matter if you are online or offline
Multi-dialogue forms on one page
Turning Tables Into Selection Lists