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