predevcamp san diego slides
DESCRIPTION
TRANSCRIPT
WIFI: Linksys (unprotected)
Welcome to PreDevCamp!
Wifi: linksys (unencrypted)
Introductions
Name/handle3 tags
I can haz Pre?
IDE
(TextMate)
SDK Installed?
webOS experience
HTML/Javascript experience
Javascript FrameworksPROTOTYPE
SCRIPTACULOUS
HTML5 knowledge?
CANVAS interest
GPS interest
Accelerometer interest
Background apps
What’s your app?
• Twitter• Foursquare• Porting iPhone apps• GPS loggers• Productivity/todo app• Exercise logger
Schedule10:00 Doors open10:30 Welcome session10:45 to 12:30 Intro to Pre development12:30 to 1:30 Lunch1:30 to 6:00 Open hacking & more talks6:00 to 6:30 Demo your app & prizes!6:30 Closing remarks7:00 Cleanup8:00 Afterparty
Before we begin…
Who needs the SDK?Got Windows 7 and having trouble?
Ready?
Let’s begin!
Go into dev mode
upupdowndownleftrightleftrightbastart
Got root?
http://tr.im/preRoot
Mac users
Type novaterm at the command line…done!
Specs
320px
480px
Top bar: 50px
Notification bar:20px up to 240px
Shrink screenshots by65%
Resources
• http://webos-internals.org• http://precentral.net• http://developer.palm.com• PreDevCamp IRC!– Irc.freenode.net #predevcamp
Intro to app dev
Hello world!
Generate a project
palm-generate -p "{title:'Hello World', id:com.mystuff.hello, version:'1.0.0'}" HelloWorld
File Structure
• app/• images/• Appinfo.json• Icon.png• Index.html• Sources.json
appinfo.json
{"id": "com.palm.developer","version": "1.0.0","vendor": "My Company","type": "web","main": "index.html","title": "Hello World","icon": "icon.png"
}
sources.json[
{"source": "app\/assistants\/app-assistant.js"},
{"source": "app\/assistants\/stage-assistant.js"},
{"source": "app\/assistants\/main-assistant.js","scenes": "main"}]
Icon.png
• 64x64
Index.html<?xml version="1.0" encoding="UTF-8"?><!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN"
"http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd"><html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en"><head>
<title>Hello World</title><script src="/usr/palm/frameworks/mojo/mojo.js" type="text/javascript" x-mojo-version="1" />
<!-- application stylesheet should come in after the one loaded by the framework --><link href="stylesheets/helloworld.css" media="screen" rel="stylesheet" type="text/css" />
</head><body>
<h2>This text verifies your application is running.</h2><p>To create a fully functional Palm application create a scene and remove this text from index.html. See the documentation on Palm Applications for more information on creating applications and scenes.</p>
</body></html>
App/
• Assistants– Javascript files that govern the html files
• Models– Data sources
• Views– HTML that defines the layout of a screen
Scenes
Any particular view/assistant combination in an app is called a
“scene”
Make a scene!
palm-generate -t new_scene -p "name:First" HelloWorld
First-scene.html
<div id="main" class="palm-hasheader"><div class="palm-header">Header</div><div id="count" class="palm-body-text">0</div><div id="MyButton" name="MyButton1" x-mojo-element="Button"></div>
</div>
Stage-assistant.js
function StageAssistant () { }
StageAssistant.prototype.setup = function() {this.controller.pushScene('first');
}
First-assistant.js
FirstAssistant.prototype.handleButtonPress = function(event){
this.total++;
this.controller.get('count').update(this.total);}
First-assistant.js (cont.)• FirstAssistant.prototype.setup = function() {
// set the initial total and display itthis.total=0;this.controller.get('count').update(this.total);
// a local object for button attributesthis.buttonAttributes = {};
// a local object for button modelthis.buttonModel = {buttonLabel : 'TAP HERE',buttonClass : '',disabled : false};
// set up the buttonthis.controller.setupWidget("MyButton", this.buttonAttributes, this.buttonModel);// bind the button to its handlerMojo.Event.listen(this.controller.get('MyButton'), Mojo.Event.tap, this.handleButtonPress.bind(this));}
Recap
• Theater metaphor– Stage: manages the whole app– View: the layout/structure of a page (HTML)– Assistant: the code/behavior of a page (JS)– Scene: combo of a view and an assistant
Models
• …
Install your app!
palm-launch –d usb|tcp com.example.app
Package for Homebrew Install
palm-package
Services API
GPSAccelerometer
palm-install –l –d usb
GPSthis.controller.serviceRequest('palm://com.palm.location', {
method:“getCurrentPosition",parameters:{}, //accuracy=int,maximumAge=int,responseTime=intonSuccess:{}, //pointer to async functiononFailure:{} //}});
onSuccessFunction = function(heading,hAccur,lat,lon,t,vel,vAccur) { … }
onFailureFunction = function(errorCode) { … }
getReverseLocationthis.controller.serviceRequest('palm://com.palm.location', {
method:"getReverseLocation",parameters:{}, //latitude=double,longitude=doubleonSuccess:{},onFailure:{}}});
onSuccessFunction = function(address,errorCode) { … }
onFailureFunction = function(errorCode) { … }
Continuous trackthis.trackingHandle =
this.controller.serviceRequest('palm://com.palm.location', {method:"startTracking",parameters: {"subscribe":true},onSuccess: this.trackingSuccessResponseHandler.bind(this),onFailure: this.trackingFailedResponseHandler.bind(this)});
this.trackingHandle.cancel();
Accelerometer
Set ability to switch orientationif (this.controller.stageController.setWindowOrientation) {
this.controller.stageController.setWindowOrientation("free");}
Run code when orientation changesthis.controller.listen(document, 'orientationchange',
this.handleOrientation.bindAsEventListener(this));
handleOrientation(event) { … } //.position=[1:5], .roll=float, .pitch=float
Shake!this.controller.listen(document, 'shakestart',
this.handleShaking.bindAsEventListener(this));this.controller.listen(document, 'shaking',
this.handleShaking.bindAsEventListener(this));this.controller.listen(document, 'shakeend',
this.handleShaking.bindAsEventListener(this));
handleShaking(event) = { … } //.magnitude=float (in number of g’s of acceleration)
In the rawthis.controller.listen(document, 'acceleration',
this.handleAcceleration.bindAsEventListener(this));
handleAcceleration(event) = { … } //.accelX=float,.accelY=float,.accelZ=float//.time=time
Debugging
palm-launch -i com.example.app
…then launch Inspector (part of SDK)
HTML5!
Take it away, Ted!