Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.

Developing Applications for WebOS

18,085 views

Published on

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

Full webcast available here: http://www.youtube.com/watch?v=YXS3SQauwPE

Published in: Technology
  • Waiting for Palm Pre go online ....
       Reply 
    Are you sure you want to  Yes  No
    Your message goes here
  • the video is embedded...



    Just as a note, you can embed the video in the sldieshare presentation itself. We launched this recently, details here

    http://www.slideshare.net/youtube-in-slideshare<br /><object type="application/x-shockwave-flash" data="http://www.youtube.com/v/YXS3SQauwPE&hl=en&fs=1" width="350" height="288"><param name="movie" value="http://www.youtube.com/v/YXS3SQauwPE&hl=en&fs=1"></param><embed src="http://www.youtube.com/v/YXS3SQauwPE&hl=en&fs=1" width="350" height="288" type="application/x-shockwave-flash"></embed></object>
       Reply 
    Are you sure you want to  Yes  No
    Your message goes here

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){ Mojo.Log.info(“Fix received:”, response.longitude, response.latitude); } this.error= function(response){ Mojo.Log.info(response.errorText); }
  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 – www.palm.com </li></ul></ul></ul><ul><ul><ul><li>Other web resources </li></ul></ul></ul><ul><li>Sign up at developer.palm.com for updates </li></ul>
  24. 24. Q&A <ul><li>For more information register at http://developer.palm.com </li></ul>
  25. 25. Thanks! <ul><li>For more information register at http://developer.palm.com </li></ul>

×