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

1. Introduction to
Palm’s Mojo SDK
Brendan G. Lim
brendan@intridea.com
@brendanlim

2. Overview
• Introduction
• What’s the Mojo SDK?
• Introduction to webOS
• Creating your first application
• Data storage solutions
• Overview of UI Widgets
• Conclusion

8. Do you know HTML?

9. Do you know CSS?

10. Do you know
JavaScript?

11. The Mojo SDK
is a perfect fit

12. Mojo SDK
• JavaScript framework
• Bundled with webOS
• Model-View-Controller (MVC)
• Can use standard web development tools

13. Mojo SDK
• Includes ....
• Prototype, the JavaScript framework
• Mojo Framework & Documentation
• Emulator, DOM Inspector, debugger, etc
• Palm specific CSS styles

14. 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

15. 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

16. Native App Model
Native Client
User Interface
Server Logic Data

17. Ajax Web App Model
Browser Client
User Interface
Server Logic Data
HTTP DHTML/JavaScript
Web Server
Server Logic Data
Server-side Systems

18. Launcher
Quick Launch bar

19. Cards
Card View
Cards Activity

20. Stages
Card Activity Dashboard

21. Generate an App
palm-generate helloWorld

22. ‣ <app>
‣ <assistants>
‣ stage-assistant.js
Structure of ‣ <views>
‣ <images>
an Application ‣ <stylesheets>
‣ appinfo.json
‣ icon.png
‣ index.html

23. appinfo.json
{
"id": "com.yourdomain.helloworld",
"version": "1.0",
"vendor": "My Company",
"type": "web",
"main": "index.html",
"title": "helloWorld",
"icon": "icon.png"
}

24. 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

25. helloWorld App
app/index.html

26. Packaging an Application
palm-package helloWorld
The directory where your application was generated

27. Packaging an Application
Which ends up creating this package:
com.yourdomain.helloworld_1.0_all.ipk

28. 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

29. Tada!

30. 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

31. ‣ <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

32. ‣ <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

33. Linking to a Scene
app/index.html

34. Linking to a Scene
app/assistants/stage-assistant.js

35. Linking to a Scene
app/assistants/stage-assistant.js

36. Setting up the First Scene
app/views/first/first-scene.html

37. After packing & reinstalling

38. Let’s tie in one more scene
Run this in the root of your app directory:
palm-generate -t new_scene -p "name=Second" .

39. Setup the Second Scene
app/index.html

40. Add Button to First Scene
app/views/first/first-scene.html

41. Link Button to Second Scene
app/assistants/first-assistant.js

42. Link Button to Second Scene
app/assistants/first-assistant.js

43. Setup the Second Scene
app/views/second/second-scene.html

44. After packing & reinstalling

45. Storage
• Mojo supports:
• HTML5 database CRUD operations
• Depot
• Cookies
• Used for application preferences or to
cache data

46. 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

47. 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

48. 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();

49. 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();

50. 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));
}

51. 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

52. 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

53. 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();

54. 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.

55. 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

56. 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

57. 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.

58. Questions?