| Article Index |
|---|
| webOS HTML5 Database Storage Tutorial |
| The Constructor Function |
| Prototyping in webOS |
| Finishing up |
| All Pages |
We've almost gone through the entire code of this simple HTML5 note application. Just a few more functions and then we can speculate on how this application might be ported to webOS!
function loaded()
{
db.transaction(function(tx) {
tx.executeSql("SELECT COUNT(*) FROM WebkitStickyNotes", [], function(result) {
loadNotes();
}, function(tx, error) {
tx.executeSql("CREATE TABLE WebKitStickyNotes (id REAL UNIQUE, note TEXT, timestamp REAL, left TEXT, top TEXT, zindex REAL)", [], function(result) {
loadNotes();
});
});
});
}
This function calls db.transaction with two parameters: a function that gets the number of notes in the WebkitStickyNotes table, and a function that creates the WebStickyNotes table. Why would you create the table after you count the number of notes in it? The way the db.transaction function works is that the second parameter is only executed if the first one fails. If the table WebkitStickyNotes doesn't exist, the function will fail, causing the second function, which sets up the table, to be run.
function loadNotes()
{
db.transaction(function(tx) {
tx.executeSql("SELECT id, note, timestamp, left, top, zindex FROM WebKitStickyNotes", [], function(tx, result) {
for (var i = 0; i highestId)
highestId = row['id'];
if (row['zindex'] > highestZ)
highestZ = row['zindex'];
}
if (!result.rows.length)
newNote();
}, function(tx, error) {
alert('Failed to retrieve notes from database - ' + error.message);
return;
});
});
}
This function follows the same structure as the previous one. The first function loads the notes from the database and creates a new note object on screen for each note record that is retrieved. If this function fails, the second function is run, which simply displays an alert to the user along with the error message.
function modifiedString(date)
{
return 'Last Modified: ' + date.getFullYear() + '-' + (date.getMonth() + 1) + '-' + date.getDate() + ' ' + date.getHours() + ':' + date.getMinutes() + ':' + date.getSeconds();
}
This function returns current date and time and is called whenever the user updates the note.
function newNote()
{
var note = new Note();
note.id = ++highestId;
note.timestamp = new Date().getTime();
note.left = Math.round(Math.random() * 400) + 'px';
note.top = Math.round(Math.random() * 500) + 'px';
note.zIndex = ++highestZ;
note.saveAsNew();
}
This function gets called whenever the user clicks the "New Note" button. It sets up a new note by:
- assigning it the next available ID
- setting its timestamp
- setting the left position of the note to a random location between 0 and 400 pixels
- setting the top position of the note to a random location between 0 and 500 pixels
- setting the zIndex of the note so that the note appears on top of existing notes
- creating a new note record by calling saveAsNew().
addEventListener('load', loaded, false);
This adds a listener to the page that executes the loaded() function when the page finishes loading. If you recall, the loaded() function loads existing notes, or creates the WebKitStickyNotes table in the database if it doesn't exist.
<p>This page demonstrates the use of the <a href="http://www.whatwg.org/specs/web-apps/current-work/multipage/section-sql.html">HTML 5 Client-side Database Storage API</a>. Any notes you create will be saved in a database on your local hard drive, and will be reloaded from that database the next time you visit this page. To try it out, use a <a href="http://nightly.webkit.org/">WebKit Nightly Build</a>.</p> <button onClick="newNote()">New Note</button>
And there you have it! A complete, functioning web application that uses the local database functionality built in to HTML5.
Making a true webOS Application
As-is, this is a web application that could potentially be accessed and used through the Pre's built-in web browser. But what if we wanted to turn this into a native Pre application that could be launched just as you would launch the Calendar or Calculator applications?
As of February 22, 2009, Palm has not released enough information to describe exactly how this would be accomplished. But they have provided a few hints in Chapter 1 of Palm webOS from O'Reilly:
- We would need to set up a stage, which is a "declarative HTML structure like a conventional HTML window or browser tab". Perhaps this would simply be the code that currently appears between the and tags of this example. But more likely there will need to be some additional setup required.
- We would also need to set up a scene within the stage, which is a "sub-view" of a stage. We would then need to activate the scene so that it is visible to the user.
- We would have to create a set of files, including:
- an appinfo.json file that provides information webOS needs to install and load the application
- an index.html file
- an icon.png file which will represent the application in the launcher
- an app folder with a directory structure that contains assistants and views
As additional details become available, this section will be updated with explicit instructions on how you would set this application up as a webOS application using the Mojo framework. Stay tuned!
Note: I plan to go back through this tutorial in the near future to provide some additional detail, clarification, and useful references to the HTML5 draft spec and other resources. I'm just a bit swamped at the moment getting everything else up and running. But please leave comments indicating sections where you feel additional clarification would be helpful and I'll be sure to address those first. :)
--Ken
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