| Article Index |
|---|
| webOS HTML5 Database Storage Tutorial |
| The Constructor Function |
| Prototyping in webOS |
| Finishing up |
| All Pages |
Here we're setting up a few variables that will help us manage the database during the use of our application:
var captured = null; var highestZ = 0; var highestId = 0;
The Constructor
function Note()
{
var self = this;
var note = document.createElement('div');
note.className = 'note';
note.addEventListener('mousedown', function(e) { return self.onMouseDown(e) }, false);
note.addEventListener('click', function() { return self.onNoteClick() }, false);
this.note = note;
var close = document.createElement('div');
close.className = 'closebutton';
close.addEventListener('click', function(event) { return self.close(event) }, false);
note.appendChild(close);
var edit = document.createElement('div');
edit.className = 'edit';
edit.setAttribute('contenteditable', true);
edit.addEventListener('keyup', function() { return self.onKeyUp() }, false);
note.appendChild(edit);
this.editField = edit;
var ts = document.createElement('div');
ts.className = 'timestamp';
ts.addEventListener('mousedown', function(e) { return self.onMouseDown(e) }, false);
note.appendChild(ts);
this.lastModified = ts;
document.body.appendChild(note);
return this;
}
This is the constructor function for a Note object. (For information on Javascript constructors, check out this article.) This function sets up an actual note object by creating each of the elements that make up a note and hooking up the various interactions that a user might make with each element. Let's take a closer look.
var self = this;
This sets the variable self to refer to this particular instance of the Note object, identified by the this keyword. For more info on the this keyword, check out this great article.
var note = document.createElement('div');
note.className = 'note';
note.addEventListener('mousedown', function(e) { return self.onMouseDown(e) }, false);
note.addEventListener('click', function() { return self.onNoteClick() }, false);
this.note = note;
These lines create the note div element and gives it the CSS class note, which was defined earlier. It then adds event listener functions for two mouse events: mousedown and click, which call functions onMouseDown and onNoteClick, respectively. We'll see what these functions do a bit later.
var close = document.createElement('div');
close.className = 'closebutton';
close.addEventListener('click', function(event) { return self.close(event) }, false);
note.appendChild(close);
This section sets up the close element and adds a click event listener that calls the function close(). It assigns it a css class (closebutton) and then appends the close element as a child of the Note object instance.
var edit = document.createElement('div');
edit.className = 'edit';
edit.setAttribute('contenteditable', true);
edit.addEventListener('keyup', function() { return self.onKeyUp() }, false);
note.appendChild(edit);
this.editField = edit;
This section sets up the edit object. The HTML5 contenteditable attribute is set on this div so that the user can type into the div to change its contents. An event listener is added onKeyUp, probably to save the contents of the note in real-time (i.e. each time a key is pressed). We'll see later.
var ts = document.createElement('div');
ts.className = 'timestamp';
ts.addEventListener('mousedown', function(e) { return self.onMouseDown(e) }, false);
note.appendChild(ts);
this.lastModified = ts;
This section sets up the timestamp object (shortened to ts). This function sets up the timestamp that is displayed at the bottom of the note.
The next section defines additional methods for Note objects through the use of prototyping. Prototyping is an important concept in the Javascript world because it allows us to add additional methods to objects that have already been defined (in our case, the Note object). Let's see how this is done.
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