Developing Applications for WebOS


Published on

slides from the O'Reilly "Developing Applications for WebOS" webcast.

Full webcast available here:

Published in: Technology
No Downloads
Total views
On SlideShare
From Embeds
Number of Embeds
Embeds 0
No embeds

No notes for slide
  • Thanks, Kathryn and hello everyone. I’m Mitch Allen with Palm and I would like to start by thanking you for taking the time to tune into our webcast today. We’ve got a full hour planned for you, whether you’ve Come to check out Palm webOS for the first time or have scoured the web for everything on the webOS and are hoping to hear something new. I’ve been with Palm since 2000 when I joined Handspring to lead the software team and have been involved with webOS since the beginning. I am thrilled to be representing our terrific engineering and product teams back in Sunnyvale, who have done a tremendous job on the design and implementation of webOS and are working around the clock to get the Pre into stores as soon as possible and to get the SDK into your hands and all developers hands as well. We are all very excited to have a chance to share our work with you today. I’m joined by Paul Cousineau, who heads the Palm webOS and SDK product management team Paul introduces himself and talks about the Q&A So please, submit questions at any time by typing them into the Q&A portion of your webEx window
  • Developing Applications for WebOS

    1. 1. Developing Applications for webOS: A Preview <ul><li>Presented by: </li></ul><ul><li>Mitch Allen </li></ul><ul><li>Software CTO, Palm </li></ul>
    2. 2. Will … <ul><li>Talk about Palm webOS </li></ul><ul><li>Review the Mojo Framework </li></ul><ul><li>Develop a Simple Application </li></ul><ul><li>Q & A </li></ul>
    3. 3. Won’t … <ul><li>When…. ? </li></ul><ul><li>Where… ? </li></ul><ul><li>How much… ? </li></ul>
    4. 4. Palm webOS <ul><ul><li>Introduction </li></ul></ul>
    5. 5. Palm webOS <ul><li>Features </li></ul><ul><ul><ul><li>Palm’s next generation operating system </li></ul></ul></ul><ul><ul><ul><li>Fast, beautiful, multi-tasking user experience </li></ul></ul></ul><ul><ul><ul><li>Integrates a card-based OS with a web browser </li></ul></ul></ul><ul><li>Applications are built with JavaScript, HTML & CSS using common web development tools </li></ul>
    6. 6. Architecture
    7. 7. User Experience Quick Launch Bar Launcher Status Bar
    8. 8. Cards Activity Card View Card
    9. 9. Notifications & Dashboard Notification Bar Banner Notification Dashboard Dashboard Panel
    10. 10. Application Model
    11. 11. Anatomy of a webOS Application App Catalog Launcher Foreground Headless Background Dashboard Notifications App Removed Card View Dashboard View Close Launch Notifications Push Stage Remove Install or Update Install or Update Remove Notifications Push Stage Close Deactivate Activate
    12. 12. Mojo <ul><li>Developing webOS Applications </li></ul>
    13. 13. Mojo <ul><li>A JavaScript framework </li></ul><ul><ul><ul><li>Bundled with webOS </li></ul></ul></ul><ul><ul><ul><li>Included as source in the SDK for reference </li></ul></ul></ul><ul><ul><ul><li>Provides UI APIs, Widgets and Services </li></ul></ul></ul><ul><li>Uses Prototype 1.6.3, which is also bundled with webOS </li></ul>
    14. 14. To Get Started <ul><li>It’s the web! </li></ul><ul><ul><ul><li>All you need is a text editor and a web browser  </li></ul></ul></ul><ul><ul><ul><li>It helps to know JavaScript, but you don’t need to be an expert </li></ul></ul></ul><ul><li>Palm’s SDK includes: </li></ul><ul><ul><ul><li>Mojo Framework & Documentation </li></ul></ul></ul><ul><ul><ul><li>Emulator with DOM Inspector and JavaScript Debugger </li></ul></ul></ul><ul><ul><ul><li>Tool bundles (project generator, app package tools) </li></ul></ul></ul>
    15. 15. Sample Application <ul><li>Build a Simple App </li></ul><ul><ul><ul><li>Create a New Project </li></ul></ul></ul><ul><ul><ul><li>Add a Scene </li></ul></ul></ul><ul><ul><ul><li>Add a Widget </li></ul></ul></ul><ul><ul><ul><li>Store local data </li></ul></ul></ul><ul><ul><ul><li>Generate a Notification </li></ul></ul></ul><ul><ul><ul><li>Use a Service </li></ul></ul></ul><ul><li>In this example </li></ul><ul><ul><ul><li>Macintosh </li></ul></ul></ul><ul><ul><ul><li>TextMate & Safari </li></ul></ul></ul><ul><li>With SDK </li></ul><ul><ul><ul><li>Tool Bundles </li></ul></ul></ul><ul><ul><ul><li>Emulator with Debugger </li></ul></ul></ul>
    16. 16. Stages & Scenes <ul><li>Stage </li></ul><ul><ul><ul><li>HTML structure similar to a browser window </li></ul></ul></ul><ul><ul><ul><li>A Card or Dashboard panel </li></ul></ul></ul><ul><li>Scene </li></ul><ul><ul><ul><li>Mutually exclusive views </li></ul></ul></ul><ul><ul><ul><li>Can have many but must have one </li></ul></ul></ul><ul><li>SceneStack </li></ul><ul><ul><ul><li>Push and pop scenes </li></ul></ul></ul>
    17. 17. Stages Activity Card Dashboard Panel
    18. 18. Scenes Push Pop
    19. 19. Widgets <ul><li>HTML </li></ul>  this.controller.setupWidget('my-toggle', this.toggle = { property : 'value' }, this.toggleModel = { value : true, disabled : false });   this.controller.listen('my-toggle', Mojo.Event.propertyChange, this.togglePressed.bindAsEventListener(this)); <div x-mojo-element=&quot;ToggleButton&quot; id=&quot;my-toggle&quot;></div> <ul><li>JavaScript: </li></ul><ul><li>CSS: </li></ul>#my-toggle { float:left; }
    20. 20. Local Storage <ul><li>Three types: </li></ul><ul><ul><ul><li>HTML5 database API </li></ul></ul></ul><ul><ul><ul><li>Depot </li></ul></ul></ul><ul><ul><ul><li>Cookies </li></ul></ul></ul><ul><li>Create/Open Depot </li></ul>var db = new Mojo.Depot({name:”myDB&quot;, version:1, replace:false}, this.openOK, this.openFail); <ul><li>Save </li></ul>db.simpleAdd(”myData&quot;, myDataContents, this.savedListOK, this.savedListFailed); <ul><li>Get </li></ul>db.simpleGet(”myData”, this.getListOK, this.getListFailed);
    21. 21. Notifications <ul><li>Banner Notification </li></ul>var msg = “Hello World!”; Mojo.Controller.getAppController().showBanner({icon: “Img.png” “messageText: msg}, msg); Banner Notification
    22. 22. Services <ul><li>Service Call </li></ul>this.controller.serviceRequest('palm://com.palm.location', { method:&quot;getFix&quot;, parameters:{ mode: “auto” }, onSuccess: this.gotFix, onFailure: this.error } }); <ul><li>Callback </li></ul>this.gotFix= function(response){“Fix received:”, response.longitude, response.latitude); } this.error= function(response){; }
    23. 23. Recap <ul><li>You’ve heard about: </li></ul><ul><ul><ul><li>Palm webOS; native applications written in JavaScript </li></ul></ul></ul><ul><ul><ul><li>Mojo framework; access to UI, APIs and Services </li></ul></ul></ul><ul><li>It’s still early – there’s a lot more to come </li></ul><ul><li>To learn more </li></ul><ul><ul><ul><li>Official Palm website – </li></ul></ul></ul><ul><ul><ul><li>Other web resources </li></ul></ul></ul><ul><li>Sign up at for updates </li></ul>
    24. 24. Q&A <ul><li>For more information register at </li></ul>
    25. 25. Thanks! <ul><li>For more information register at </li></ul>