you know webOS

Markus Leutwyler

www.thinmachine.ch

www.twitter.com/twtomcat

tomcat@inorbit.com

do you know HTML?

do you know CSS?

do you know Javascript?

you can develop for webOS!

what is webOS?

embedded linux

http://opensource.palm.com

what is webOS?

V8

what is webOS?

WebKit

where is webOS used?

how to write apps for webOS?

SDK: HTML

  • HTML, CSS, Javascript
  • HTML5 Standard (Canvas,CSS3,Storage,...)
  • Mojo and Prototype Framework

PDK: Plugin Development Kit

Linux Tools

ipkggzip
awkgrep
stracegdb
oprofilevmstat
iostattop

Homebrew

back to programming please?

App Anatomy: Stages & Scenes

Stage

App Anatomy: Stages & Scenes

Scene

  • Scenes are pushed onto the stage
  • can have many but must have one
  • contains ui widgets
  • scene assistant contains javascript
  • Analogy: pages on a website

Mojo Framework

  • GUI Widgets
  • Javascript APIs
  • follows the MVC-Pattern
    • View: HTML
    • Model/Controller: Javascript

HTML Example

<div id="text-field" x-mojo-element="TextField"></div>

Javascript Example

var attributes= { focusMode: Mojo.Widget.focusSelectMode, maxLength: 30 };

this.model = {
original: 'Please enter something',
disabled: false };

this.controller.setupWidget("text-field",attributes,this.model);

Service API

Service API

Example

this.controller.serviceRequest('palm://com.palm.connectionmanager',
{ method: 'getstatus',
 parameters: { subscribe:true},
onSuccess: this.handleOKResponse,
onFailure: this.handleErrResponse
});

how to develop for webOS?

how to develop for webOS?

webOS Emulator

Jailbreak, Rooting?

Enable Developer Mode

webos20090606

Jailbreak, Rooting?

Palm Ares

Palm Ares

your first app

palm-generate helloWorld

appinfo.json

{
	"id": "com.yourdomain.helloworld",
	"version": "1.0.0",
	"vendor": "My Company",
	"type": "web",
	"main": "index.html",
	"title": "helloWorld",
	"icon": "icon.png"
}

index.html

<!DOCTYPE html>
<html>
<head>
    <title>Hello World</title>
    <script src = "/usr/palm/frameworks/mojo/mojo.js" 
     x-mojo-version="1"></script> 
    <link href="/stylesheets/helloworld.css" media="screen" rel="stylesheet" type="text/css">
</head>
</html>

Package & Install

palm-package helloWorld

palm-install com.yourdomain.helloworld_1.0.0_all.ipk

Add a Scene

palm-generate -t new_scene -p "name=first" helloWorld

HTML

app/views/first-scene.html

<div id="main" class="palm-hasheader">  
    <div class="palm-header">First Scene</div>  
    <div class="palm-text">Welcome to my World</div>  
    <div x-mojo-element="Button" id="button1"></div>
<div>

Javascript

Pushing the first scene

StageAssistant.prototype.setup = function() {
	/* this function is for setup tasks that have to happen when the stage is first created */
	Mojo.Controller.stageController.pushScene("first");
};

Setting up the first scene

app/assistants/first-assistant.js

this.controller.setupWidget("button1",  
        this.attributes = {},  
        this.model = {  
            label : "OK",  
            disabled: false  
        }  
    );

Adding handlers

this.handleButton1=this.handleButtonPress1.bindAsEventListener(this);
  
Mojo.Event.listen(this.controller.get("button1"), Mojo.Event.tap, this.handleButton1);

FirstAssistant.prototype.handleButtonPress1 = function(event){  
	Mojo.Controller.stageController.pushScene("second");  
}

helloWorld

App Catalog

Ressources

Questions?