webOSThe Platform You Already Know
Eric Marthinsen and Gary SmithAgile Commerce
Agenda
Terminology
Technologies
Similarities
Differences
What next?
Terminology
Palm Pre
webOS
Mojo
Technologies
HTML
CSS
JavaScript
Similarities
StructureModel View Controller (MVC) paradigmVery close in style and form to Ruby on Rails
PhilosophyHelper tools, similar to Ruby on RailsConvention over configuration
CodingHTML, CSS, and JavaScript – follows typical web paradigms
Structure
Ruby on Rails
appcontrollers
models views
public images stylesheets
Mojo
appassistantsmodelsviews
imagesstylesheets
Mojo applications are MVC applications.
Philosophy
Mojo follows closely to many core concepts in Ruby on Rails.
Convention over configuration ruby script/generate versus palm-generate
Code: HTML
HTML
<div style=”background: red”>This is some text
</div>
webOS
<div style=”background: red”>This is some text
</div>
Code: Finding an Element
HTMLdocument.findElementById(“id”)
$('id')
webOSdocument.findElementById(“id”)
$('id')
this.controller.get('id')
Code: Wiring up an Event Handler
HTML
elem.onclick = this.handler
Event.observe('elemName', 'click', this.handler)
webOS
Mojo.Event.listen(element, Mojo.Event.tap, this.handler)
Code: Ajax
A typical AJAX call: var url = "http://api.example.com";
new Ajax.Request(url, { method: 'get', onSuccess: function(transport) { console.log("SUCCESS!!!"); }, onFailure: function() { console.log("FAILURE"); }});
Code: Ajax
Accessing the GPS System Service in Mojo: var url = "palm://com.palm.location"; this.controller.serviceRequest(url, { method:"startTracking", parameters:{ subscribe: true }, onSuccess: function(result){ console.log("GOT A NEW LOCATION"); }, onFailure: function(result){ console.log("FAILURE"); }});
Code: Widgets
SWFobject
<div id="myContent"></div>
swfobject.embedSWF("myContent.swf","myContent","300","120","9.0.0"
);
Code: Widgets
Simple slider widget in jQuery
<div id="slider"></div>
$("#slider").slider();
Code: Widgets
TextField in Mojo
<div id="searchString" x-mojo-element="TextField"></div>
this.controller.setupWidget("searchString",{
hintText: 'enter search criteria',multiline: false
},this.searchModel = {
value: “”}
);
Differences: JavaScript
It is not like Java or a scripting language More like Self or Scheme It has objects, but no classes Functions can have properties
(which can be functions themselves) “this” isn't always that
Differences: Mojo API
Any platform has a set of APIs, Mojo is no exception
What Next? Learn JavaScript
JavaScript: The Good Parts
Douglas Crockford
What Next? Get Mitch's Book
Palm webOS
Mitch Allen
Available through O'Reilly
One Last Resource
Top Related