This tutorial is for HTML, CSS and Javascript gurus. We're starting to get to the level at which people stop writing "tutorials", so parts of this tutorial will look more like a reference manual. But you're used to looking at reference manuals by now, no? ;)
As mentioned in the basic tutorials, although the webOS SDK hasn't yet been released,Palm has statedthat the Mojo application framework is "based on the HTML5, CSS and JavaScript standards that web developers already know and love". By maximizing our skills with these technologies, we can hit the ground running when the webOS SDK is released.
HTML 5
There's probably not much you need to know about HTML that you don't already know at this point. But it's interesting that Palm said that Mojo would be based on HTML 5, which hasn't even been finalized yet.
So what can we learn about HTML 5? What's new? This document is a good place to start:
There are a few technical differences in syntax, character encoding, doctype, etc. But what you really want to get out of this article is the new language elements and attributes. These include interesting elements such as:
section represents a generic document or application section. It can be used together with h1-h6 to indicate the document structure.
article represents an independent piece of content of a document, such as a blog entry or newspaper article.
aside represents a piece of content that is only slightly related to the rest of the page.
header represents the header of a section.
footer represents a footer for a section and can contain information about the author, copyright information, et cetera.
nav represents a section of the document intended for navigation.
dialog can be used to mark up a conversation like this:
<dialog>
<dt> Costello
<dd> Look, you gotta first baseman?
<dt> Abbott
<dd> Certainly.
<dt> Costello
<dd> Who's playing first?
<dt> Abbott
<dd> That's right.
<dt> Costello
<dd> When you pay off the first baseman every month, who gets the money?
<dt> Abbott
<dd> Every dollar of it.
</dialog>
figure can be used to associate a caption together with some embedded content, such as a graphic or video:
audio and video for multimedia content. Both provide an API so application authors can script their own user interface, but there is also a way to trigger a user interface provided by the user agent. source elements are used together with these elements if there are multiple streams available of different types.
embed is used for plugin content.
mark represents a run of marked text.
meter represents a measurement, such as disk usage.
time represents a date and/or time.
canvas is used for rendering dynamic bitmap graphics on the fly, such as graphs, games, et cetera.
command represents a command the user can invoke.
datagrid represents an interactive representation of a tree list or tabular data.
details represents additional information or controls which the user can obtain on demand.
datalist together with the a new list attribute for input is used to make comboboxes:
The datatemplate, rule and nest elements provide a templating mechanism for HTML.
event-source is used to "catch" server sent events.
output represents some type of output, such as from a calculation done through scripting.
progress represents a completion of a task, such as downloading or when performing a series of expensive operations.
The ruby, rt and rb elements allow for marking up ruby annotations.
The input element's type attribute now has the following new values:
datetime
datetime-local
date
month
week
time
number
range
email
url
The idea of these new types is that the user agent can provide the user interface, such as a calendar date picker or integration with the user's address book and submit a defined format to the server. It gives the user a better experience as his input is checked before sending it to the server meaning there is less time to wait for feedback.
HTML 5 also includes new attributes that you'll want to check out (for brevity, I won't reproduce them here). Some elements also have changed meanings and some have been deleted entirely. Check out the Changed Elements and Absent Elements sections for details.
The Palm developer page also emphasizes the persistent storage capabilities of HTML5 for making data available when users are offline. That's only touched upon in the above document, but this document goes into more detail:
Palm also said that Mojo would be based on HTML 5, CSS and JavaScript standards. This means that they may include elements and attributes that are webOS-specific. As soon as that information is available, we'll post it here!
CSS
We haven't found anything more advanced than what's currently in our intermediate tutorial that's worth mentioning. If you've got a suggestion, put it into a comment and we'll link it in here!
Javascript
You've written function libraries and can mangle the DOM in any which way blindfolded. Have a look at prototyping, which will probably be a necessary component of any advanced webOS application:
Mojo is also said to provide access to custom Javascript APIs for things like gesture-based navigation transitions, scrolling and animation. While we don't yet know what these will look like, they may be similar to other Javascript APIs such as those provided by the MooTools or Scriptaculous Javascript frameworks. If you haven't worked with frameworks like these before, check out these tutorials:
The Palm Developer page also mentions the use of a "JSON-based message bus to tap into a wide range of device services including contacts, calendars and location". To learn about JSON, check out this tutorial:
It seems that the folks over at Palmwebosblog have discovered that the webOS Mojo SDK will actually be based on the Dojo Toolkit! Here are a few Dojo tutorials and resources that you can go through to experience what will likely be very similar to developing Mojo-based applications for webOS.
And for those of you that like to see the details, the actual Dojo API reference manual: http://dojotoolkit.org/api
Update: Feb. 6
It looks like the idea that Palm's Mojo was based on the Dojo toolkit was the result of an unfortunate series of coincidences. But if you're new to working with Javascript APIs it couldn't hurt to try a few things with the Dojo toolkit anyway.
If you've gone through the beginner, intermediate and advanced tutorials, you're ready to jump in to building webOS applications with the Mojo framework. Check back often for new developments in the webOS world!
If you have any comments or other ideas for this tutorial, please post a comment.
0 Comments