| Article Index |
|---|
| webOS HTML5 Database Storage Tutorial |
| The Constructor Function |
| Prototyping in webOS |
| Finishing up |
| All Pages |
webOS skill level: Beginner
Technologies covered: HTML5, SQL, Javascript
Prerequisite knowledge: Intermediate-level HTML, CSS, and Javascript
With the release of Chapter 1 of Palm webOS by O'Reilly, Palm has confirmed that local storage will indeed be handled by HTML5's new local storage functionality.
If you haven't been able to find any tutorials on HTML5's storage capability, you're not alone. After looking around, we realized that the HTML5 spec is still at such an early revision that there are few resources out there that describe how it should be used. But with a little digging, we found this excellent little HTML5 database application over at webkit.org. We eagerly grabbed the source code, deconstructed it, and we're proud to bring you the first webOS / HTML5 database storage tutorial!
While we (obviously) haven't tested this application on an actual webOS device, we feel that there's a good chance it would work as-is in the Pre's web browser, as the Pre's browser is webkit-based (although whether the drag & drop functionality would work without modification is unclear at this point). Check out the end of this article for notes on how we might turn this web-based application into a native application that you could launch from the Pre's launcher screen.
Let's start from the top, shall we? First of all, if you haven't seen the application yet, try it out here. Get a good feel for how it behaves, then come back here and dive into the code.
<!doctype html>
<html manifest="DatabaseExample.manifest">
<head>
<title>WebKit HTML 5 SQL Storage Notes Demo</title>
<style>
Right off the bat we find a new HTML5 attribute in the html tag. The html manifest attribute gives the address of the document's application cache manifest. There's a very technical explanation of an application cache here, but I'm going to surmise that it's basically a set of cached resources associated with a particular application, and the manifest describes the contents of that application. Next comes:
body {
font-family: 'Lucida Grande', 'Helvetica', sans-serif;
}
.note {
background-color: rgb(255, 240, 70);
height: 250px;
padding: 10px;
position: absolute;
width: 200px;
-webkit-box-shadow: 0px 5px 10px rgba(0, 0, 0, 0.5);
}
.note:hover .closebutton {
display: block;
}
.closebutton {
display: none;
background-image: url(deleteButton.png);
height: 30px;
position: absolute;
left: -15px;
top: -15px;
width: 30px;
}
.closebutton:active {
background-image: url(deleteButtonPressed.png);
}
.edit {
outline: none;
}
.timestamp {
position: absolute;
left: 0px;
right: 0px;
bottom: 0px;
font-size: 9px;
background-color: #db0;
color: white;
border-top: 1px solid #a80;
padding: 2px 4px;
text-align: right;
}
Nothing particularly new here; some styles that get applied to elements of the document, including a webkit-specific style declaration -webkit-box-shadow that will theoretically work on the Pre because it uses a webkit-based browser. Now to the interesting stuff:
var db;
try {
if (window.openDatabase) {
db = openDatabase("NoteTest", "1.0", "HTML5 Database API example", 200000);
if (!db)
alert("Failed to open the database on disk. This is probably because the version was bad or there is not enough space left in this domain's quota");
} else
alert("Couldn't open the database. Please try with a WebKit nightly with this feature enabled");
} catch(err) { }
Let's break this down even further and look at what each line is doing:
try {
if (window.openDatabase) {
...
} else
alert("Couldn't open the database. Please try with a WebKit nightly with this feature enabled");
} catch(err) { }
These enclosing statements are attempting to determine whether the window object of the current browser (or, in our case, version of webOS) supports the the HTML5 openDatabase method. The try statement will catch an error if the any of the statements enclosed cause the interpreter to throw an error.
If you're developing for the Pre or another webOS device, you may decide to leave checks like these out to minimize the size of your application, but they can also provide valuable debugging information if your application is not behaving as you expect.
db = openDatabase("NoteTest", "1.0", "HTML5 Database API example", 200000);
if (!db)
alert("Failed to open the database on disk. This is probably because the version was bad or there is not enough space left in this domain's quota");
Here we're calling a new HTML5 window method openDatabase. This method returns a database object, which we are assigning to the variable "db". The openDatabase method takes 4 arguments:
- database name
- database version
- display name
- estimated size, in bytes of the data that will be stored in the database
In this case, the database name is NoteTest, the version is 1.0, the database display name is HTML5 Database API example and the size of the data is 200kb (approximately; 1kb=1024bytes). The database name parameter specifies the name you will use to reference the database in the code, and the display name is probably how the database will be displayed in some sort of database browser that might be bundled with HTML5 compatible browsers.
Next, we get into the fun stuff!
Friday, 19 June 2009
Thursday, 25 June 2009
Thursday, 02 July 2009
The above comments are clearly the product of uneducated users. If they understood HTML5 db's and the webOS they would know that javascript (that so called "unrelated code") does everything as far as the database interaction and user interaction goes and therefore is, not only related, but necessary to make proper use of the database structure and apply it to both the webOS platform and the web in general.
Kudos to Mr. Ken Young for a great tutorial, I have learned many new things from this article and appreciate the time he took to write it. Also, I apologize for the aforementioned flaming of users, though quite rude I deemed it necessary in order to maintain my sanity and vent some frustration...
Wednesday, 08 July 2009
Friday, 10 July 2009
Friday, 24 July 2009
is there any import files such as jar or any files for using html5 Palm WebOS. ?
where will use the above code
var db;
try {
if (window.openDatabase) {
db = openDatabase("NoteTest", "1.0", "HTML5 Database API example", 200000);
if (!db)
alert("Failed to open the database on disk. This is probably because the version was bad or there is not enough space left in this domain's quota");
} else
alert("Couldn't open the database. Please try with a WebKit nightly with this feature enabled");
} catch(err) { }
html file or js file..?
how to call and access database connection ..?
is there any sample application plz send me some samples...
Tuesday, 08 September 2009
Wednesday, 13 January 2010
is possible to access the temporally database and copy to other place?
thanks
Friday, 05 February 2010
you left out just a couple of lines that a beginner might not see that you left out. By the way the code at the beginner was placed it was not clear that you need this between the styles and the javascript at the beginning:
and also left this out at the end before the paragraph:
plus 2 more lines:
I would like to know what the tx is that is being passed in this part:
db.transaction(function(tx) {
it is not clear from the tutorial.
also explain what this line means:
if (!("_saveTimer" in this))
it looks for a method called _saveTimer attached to self ( or this )
everything else made sense. And what does this mean:
++highestZ;
I would guess that it does the same as highestZ++; I just never knew you could reverse it.
Thanks for the great lesson on html5!
Friday, 05 February 2010
I really liked this tutorial. It helped me understand how to make a database work. I have a couple recomendations for the author:
you left out just a couple of lines that a beginner might not see that you left out. By the way the code at the beginner was placed it was not clear that you need this between the styles and the javascript at the beginning:
and also left this out at the end before the paragraph:
plus 2 more lines:
I would like to know what the tx is that is being passed in this part:
db.transaction(function(tx) {
it is not clear from the tutorial.
also explain what this line means:
if (!("_saveTimer" in this))
it looks for a method called _saveTimer attached to self ( or this )
everything else made sense. And what does this mean:
++highestZ;
I would guess that it does the same as highestZ++; I just never knew you could reverse it.
Thanks for the great lesson on html5!
Friday, 05 February 2010
I really liked this tutorial. It helped me understand how to make a database work. I have a couple recomendations for the author:
you left out just a couple of lines that a beginner might not see that you left out. By the way the code at the beginner was placed it was not clear that you need this between the styles and the javascript at the beginning:
and also left this out at the end before the paragraph:
plus 2 more lines:
I would like to know what the tx is that is being passed in this part:
db.transaction(function(tx) {
it is not clear from the tutorial.
Friday, 05 February 2010
I really liked this tutorial. It helped me understand how to make a database work. I have a couple recomendations for the author:
you left out just a couple of lines that a beginner might not see that you left out. By the way the code at the beginner was placed it was not clear that you need this between the styles and the javascript at the beginning:
end style tag (no angle bracket because the synax is not allowed here in comments)
script tag
and also left this out at the end before the paragraph:
script tag
end head tag
body tag
plus 2 more lines at the very end of code:
end body tag
end html tag
I would like to know what the tx is that is being passed in this part:
db.transaction(function(tx) {
it is not clear from the tutorial.
Friday, 05 February 2010
also explain what this line means:
if (!("_saveTimer" in this))
it looks for a method called _saveTimer attached to self ( or this )
everything else made sense. And what does this mean:
++highestZ;
I would guess that it does the same as highestZ++; I just never knew you could reverse it.
Thanks for the great lesson on html5!
Monday, 08 February 2010
I've been way behind updating the site because of other things going on (e.g. getting a job that pays the bills!), but I'm hoping to get back to it soon!
Tuesday, 11 May 2010
Friday, 23 July 2010
Lately I've felt as if I am closing in on the center, slowly but surely. Your tutorial has given me a hefty nudge in that direction and the broad brush was exactly what I needed.
You cleared up a number of those 'I think I know, sorta, kinda...' things that have been bugging me.
Sincerely,
Michael
Wednesday, 02 February 2011
Friday, 27 May 2011