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.

Introduction to Palm's Mojo SDK

3,584 views

Published on

Slides for my talk on an Introduction to Palm's Mojo SDK at MobileX Lexington.

Published in: Technology
  • @brendanlim well done! thx for posting; now w/hp releasing webOS to OpenSource, i’m belatedly diving in =) -- @ArmyOfBun (twit) / else @BunnicusRex
       Reply 
    Are you sure you want to  Yes  No
    Your message goes here

Introduction to Palm's Mojo SDK

  1. 1. Introduction to Palm’s Mojo SDK Brendan G. Lim brendan@intridea.com @brendanlim
  2. 2. Overview • Introduction • What’s the Mojo SDK? • Introduction to webOS • Creating your first application • Data storage solutions • Overview of UI Widgets • Conclusion
  3. 3. Do you know HTML?
  4. 4. Do you know CSS?
  5. 5. Do you know JavaScript?
  6. 6. The Mojo SDK is a perfect fit
  7. 7. Mojo SDK • JavaScript framework • Bundled with webOS • Model-View-Controller (MVC) • Can use standard web development tools
  8. 8. Mojo SDK • Includes .... • Prototype, the JavaScript framework • Mojo Framework & Documentation • Emulator, DOM Inspector, debugger, etc • Palm specific CSS styles
  9. 9. webOS • Palm’s next-gen operating system • Applications built using standard web technologies and languages (HTML, CSS, JavaScript) • Designed to run on a variety of hardware with different screen sizes & resolutions
  10. 10. webOS • User experience is optimized for launching and managing multiple applications at once • Integrates a card-based OS with a web browser • Applications can run in the background • Applications run off Ajax-based web application model
  11. 11. Native App Model Native Client User Interface Server Logic Data
  12. 12. Ajax Web App Model Browser Client User Interface Server Logic Data HTTP DHTML/JavaScript Web Server Server Logic Data Server-side Systems
  13. 13. Launcher Quick Launch bar
  14. 14. Cards Card View Cards Activity
  15. 15. Stages Card Activity Dashboard
  16. 16. Generate an App palm-generate helloWorld
  17. 17. ‣ <app> ‣ <assistants> ‣ stage-assistant.js Structure of ‣ <views> ‣ <images> an Application ‣ <stylesheets> ‣ appinfo.json ‣ icon.png ‣ index.html
  18. 18. appinfo.json { "id": "com.yourdomain.helloworld", "version": "1.0", "vendor": "My Company", "type": "web", "main": "index.html", "title": "helloWorld", "icon": "icon.png" }
  19. 19. appinfo.json • vender - person or company who made the app • vendorurl - URL of the vendor • visible - whether or not the application is visible within the launcher • removeable - tells webOs if you can uninstall this application • miniicon - path to icon to be used in the notification area • category - category for the application • noWindow - indivates that this is a headless application that will be only called by other applications
  20. 20. helloWorld App app/index.html
  21. 21. Packaging an Application palm-package helloWorld The directory where your application was generated
  22. 22. Packaging an Application Which ends up creating this package: com.yourdomain.helloworld_1.0_all.ipk
  23. 23. Packaging an Application Which ends up creating this package: com.yourdomain.helloworld_1.0_all.ipk That you can install by doing the following: palm-install com.yourdomain.helloworld_1.0_all.ipk
  24. 24. Tada!
  25. 25. Scenes • Can think of scenes as separate pages within a website. • Mutually exclusive views of the application within a Stage • Most applications have different scenes within the same stage. • An application must have at least one scene. • Scenes are supported by a controller • Referred to as a scene assistant
  26. 26. ‣ <app> ‣ <assistants> ‣ stage-assistant.js ‣ <views> Generate a Scene ‣ <images> ‣ <stylesheets> palm-generate -t new_scene -p "name=First" . ‣ appinfo.json ‣ icon.png ‣ index.html
  27. 27. ‣ <app> ‣ <assistants> ‣ first-assistant.js ‣ stage-assistant.js ‣ <views> Generate a Scene ‣ <first> palm-generate ‣ first-scene.html -t new_scene -p "name=First" . ‣ <images> ‣ <stylesheets> ‣ appinfo.json ‣ icon.png ‣ index.html
  28. 28. Linking to a Scene app/index.html
  29. 29. Linking to a Scene app/assistants/stage-assistant.js
  30. 30. Linking to a Scene app/assistants/stage-assistant.js
  31. 31. Setting up the First Scene app/views/first/first-scene.html
  32. 32. After packing & reinstalling
  33. 33. Let’s tie in one more scene Run this in the root of your app directory: palm-generate -t new_scene -p "name=Second" .
  34. 34. Setup the Second Scene app/index.html
  35. 35. Add Button to First Scene app/views/first/first-scene.html
  36. 36. Link Button to Second Scene app/assistants/first-assistant.js
  37. 37. Link Button to Second Scene app/assistants/first-assistant.js
  38. 38. Setup the Second Scene app/views/second/second-scene.html
  39. 39. After packing & reinstalling
  40. 40. Storage • Mojo supports: • HTML5 database CRUD operations • Depot • Cookies • Used for application preferences or to cache data
  41. 41. Mojo Depot • Provides a simplified interface to the native HTML5 database API • Depot is recommended if: • You are storing simple objects for offline access • You don’t need a specific schema design • You have no need for transactions or queries • Limited to 5MB of data per object • Asynchronous callbacks
  42. 42. Using Mojo Depot Create / Open Mojo.Depot() - opens a depot with a name that matches or creates a new DB Read simpleGet() - returns object it retrieves if there’s a match Update simpleAdd()- adds or updates the value of the named object Delete removeAll() - removes the named depot and deletes associated data
  43. 43. Using Mojo Depot Create / Open var db = new Mojo.Depot({name:”dbName”, version:1, replace:false}, this.openOK.bind(this), this.openFail.bind(this)); Read db.simpleGet(“myData”, this.getListOK.bind(this), this.getListFailed.bind(this)); Update db.simpleAdd(“myData”, myDataContents, this.savedListOK.bind(this), this.savedListFailed.bind(this)); Delete db.removeAll();
  44. 44. Using Mojo Depot Callbacks Create / Open var db = new Mojo.Depot({name:”dbName”, version:1, replace:false}, this.openOK.bind(this), this.openFail.bind(this)); Read db.simpleGet(“myData”, this.getListOK.bind(this), this.getListFailed.bind(this)); Update db.simpleAdd(“myData”, myDataContents, this.savedListOK.bind(this), this.savedListFailed.bind(this)); Delete db.removeAll();
  45. 45. Using Mojo Depot var db = new Mojo.Depot({name:”dbName”, version:1, replace:false}, this.openOK.bind(this), this.openFail.bind(this)); FirstAssistant.prototype.openOk = function() { Mojo.Log.info(“.....”,”Database opened”); db.simpleGet(“myData”, this.getListOK.bind(this), this.getListFailed.bind(this)); }
  46. 46. Mojo Cookies • Simplified interface to cookies • Intended to be used to store small amounts of data • Application Preferences, versions, or state information • webOS creates a “fake domain” for individual cookies based on the application’s ID. • Limited to 4KB, but multiple cookies per application is acceptable • Synchronous callbacks
  47. 47. Using Mojo Cookies Create / Open Mojo.Model.Cookie(id) - opens or creates cookie that matches the id Read get() - returns object it retrieves if there’s a match Update put()- adds or updates object with an optional date/time to expire Delete remove() - removes the cookie and it’s data
  48. 48. Using Mojo Cookies Create / Open this.cookie = new Mojo.Model.Cookie(“Preferences”); Read var retrievedPrefs = this.cookie.get(); Update this.cookie.put({ ...jsonKey: jsonValue ... }); Delete this.cookie.remove();
  49. 49. UI Widgets • User interface controls to create feature-rich interactive applications • Types of widgets: • Static/dynamic lists, button controls, selectors, text fields, menus, dialogs, pickers, viewers • Instantiated in a scene’s assistant setup method or when specified in an HTML template used by another widget.
  50. 50. UI Widgets: Lists • Most important widget in the framework • webOS user experience was built around a fast and powerful list widget • Can be used bind dynamic data sources • Can embed other widgets & objects within your lists
  51. 51. UI Widgets: Menus • Menu widgets can be used with specified areas of the screen • View & Command menus • Fully customizable • App menu handled by the system • Custom items can be added to these
  52. 52. Summary • If you have a general understanding of HTML, CSS, and JavaScript you can start developing for Palm’s webOS • The MojoSDK is a solid framework that allows us to create applications easily • There is MUCH more to the MojoSDK and webOS than was covered in this presentation.
  53. 53. Questions?

×