PreDevCamp San Diego slides

Welcome to PreDevCamp! Wifi: linksys (unencrypted)

Introductions Name/handle 3 tags

Javascript Frameworks PROTOTYPE SCRIPTACULOUS

What’s your app? Twitter Foursquare Porting iPhone apps GPS loggers Productivity/todo app Exercise logger

Schedule 10:00 Doors open 10:30 Welcome session 10:45 to 12:30 Intro to Pre development 12:30 to 1:30 Lunch 1:30 to 6:00 Open hacking & more talks 6:00 to 6:30 Demo your app & prizes! 6:30 Closing remarks 7:00 Cleanup 8:00 Afterparty

Before we begin… Who needs the SDK? Got Windows 7 and having trouble?

Go into dev mode upupdowndownleftrightleftrightbastart

Got root? http://tr.im/preRoot

Mac users Type novaterm at the command line…done!

Windows users Novaterm proxy @ http://tr.im/novaterm

Specs Top bar: 50px 480px Notification bar: 20px up to 240px Shrink screenshots by 65% 320px

Resources http://webos-internals.org http://precentral.net http://developer.palm.com PreDevCamp IRC! Irc.freenode.net #predevcamp

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": "appassistantsapp-assistant.js"},{"source": "appassistantsstage-assistant.js"},{"source": "appassistantsmain-assistant.js","scenes": "main"}]

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" />  <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

Install your app! palm-launch –d usb|tcpcom.example.app

Package for Homebrew Install palm-package

Services API GPS Accelerometer palm-install –l –d usb

GPS this.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) { … }

getReverseLocation this.controller.serviceRequest('palm://com.palm.location', {method:"getReverseLocation",parameters:{}, //latitude=double,longitude=doubleonSuccess:{},onFailure:{}}}); onSuccessFunction = function(address,errorCode) { … } onFailureFunction = function(errorCode) { … }

Continuous track this.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 orientation if (this.controller.stageController.setWindowOrientation) {this.controller.stageController.setWindowOrientation("free"); } Run code when orientation changes this.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 raw this.controller.listen(document, 'acceleration',this.handleAcceleration.bindAsEventListener(this)); handleAcceleration(event) = { … } //.accelX=float,.accelY=float,.accelZ=float //.time=time

Debugging palm-launch -icom.example.app …then launch Inspector (part of SDK)

PreDevCamp San Diego slides

Recommended

Recommended

More Related Content

Similar to PreDevCamp San Diego slides

Similar to PreDevCamp San Diego slides (20)

Recently uploaded

Recently uploaded (18)

PreDevCamp San Diego slides