Palm WebOS Application Development [email protected] Outline • Palm Pre overview • Palm WebOS architecture • Sample application • Mojo Simulator • HTML5 and Offline Storage Database • Future development • Q&A Palm Pre Overview • Jan ‘09: first announcement in CES ‘09 o Best of CES 2009 o People’s Voice Award • Feb ‘09: announcement of the book “Palm WebOS: Developing application in Javascript using the Palm Mojo framework” - Mitch Allen, Palm CTO (releasing on Aug ‘09) • Palm Pre will be available sometime in the first half of 2009 (official Palm blog) • Palm Pre SDK will be released just after Palm Pre Palm WebOS • Palm's next generation operating system • Integrates the power of a window-based operating system with the simplicity of a browser • Supports multitasking, background applications • Handles interruptions and events without losing context. Palm WebOS Architecture • Core OS: based on Linux 2.6 Kernel • UI System Manager: built on top of WebKit rendering engine that supports HTML5 • Mojo Framework: JavaScript library • Application: following MVC model Palm WebOS SDK • Development tools: targets for Linux,Windows (XP/Vista) and Mac OS X o SDK Bundle Installer o Emulator o Command-Line Tools • Mojo Framework • Sample code • Planned to be released right after Palm Pre launch Mojo Framework • Common application-level functions: gesture- based navigation, transitions, and scrolling • UI Widgets: Palm standardized buttons, list, media viewer. • Storage: HTML5 Offline Storage Database • Device services: contacts, calendars, and location, etc. WebOS Application Card view Banner Notification Dashboard WebOS Application • Developed using HTML, JavaScript, CSS • Stage o HTML structure similar to a browser window o An application can have one or more stages o Example: a card, a dashboard panel • Scene o A stage can have one or more scene o Within a stage, only one scene is active at a time • Scene stack o Push and pop scene • Running mode: foreground and background • Popup notification and banner notification WebOS Application structure Sample application • Application name: RSS Feed Reader • Based on sample code from the book “Palm WebOS: Developing application in Javascript using the Palm Mojo framework” • Utilizing Mojo Simulator and HTML5 Database API RSS Feed Reader • Card stage o Feed list o Add a new feed o Delete a feed o View Story list of a feed . View content of a story • Dashboard stage Assistants • Application Assistant • Stage Assistant • Scene Assistant o setup() o activate() o deactivate() o cleanup() Controllers • Application controller • Stage controller o Scene Stack . pushScene() . popScene() . swapScene() . … • Scene controller o listen() o … Controller/Assistant class diagram News Controller/Assistant diagram Mojo Simulator • Provides exactly the same API as the real Mojo framework so that the application-level code will work correctly on Palm WebOS • Based on the API specification written in the Palm WebOS book • Can support o application with multiple stages o background process o notification system o widgets o database transaction • Cannot support o device services request HTML5 • New elements: section, audio, video, progress, nav, canvas • New <input> attributes with auto validation: dates and times, email, url • New API: o Offline storage database o Timed media playback o The canvas tag for 2D drawing • Demo: 3D JavaScript Rendering HTML5 Offline storage database • Key-Value storage o sessionStorage: persist within a session o localStorage: persist permanently o Unlike cookie, these values are not sent back to the server • Relational database o Based on SQLite • Apple has just released a documentation for HTML5 database on Safari 4 Beta HTML5 Offline storage database • Open/create a database var db = openDatabase(shortName, version, displayName, maxSize); • Create a table db.transaction(function(tx) { tx.executeSql("SELECT COUNT(*) FROM feeds", [], function(result) { thisAssistant.start(); }, function(tx, error) { tx.executeSql("CREATE TABLE feeds (id INTEGER NOT NULL PRIMARY KEY, title TEXT, url TEXT)", [], function(result) { thisAssistant.start(); }); }); }); HTML5 Offline storage database • Select data db.transaction( function(tx) { tx.executeSql("SELECT * FROM feeds", [], function(tx, result) { for (var i=0; i<result.rows.length; i++) { var row = result.rows.item(i); var title = row['title']; var url = row[‘url’]; … } … }, function(tx, error) { alert(error.getMessage()); }); }); HTML5 Offline storage database • Insert a data row db.transaction( function (tx) { tx.executeSql("INSERT INTO feeds (id, title, url) VALUES (?, ?, ?)", [id, title, url], insertOK, insertFail }); Mojo Depot class • WebOS uses Mojo.Depot class to encapsulate low-level database transactions • Create/Open Depot var db=new Mojo.Depot({name: “myDB”, version: 1, replace: falase}, openOK, openFail); • Save db.simpleAdd(“myData”, myDataContent, this.saveOK, this.saveNOK); • Get var data = db.simpleGet(“myData”, this.getDataOk, this.getDataFail); Future development • Mojo Simulator improvements o Code restructure o Dynamic loading of JavaScript o Database API: Depot o Handling multiple stages o Background process o Notification and dashboard o Simple Mojo widgets • Application manager • Launcher Q&A.