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 speciļ¬c 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
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 notiļ¬cation area
ā¢ category - category for the application
ā¢ noWindow - indivates that this is a headless application that
will be only called by other applications
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
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
45. Storage
ā¢ Mojo supports:
ā¢ HTML5 database CRUD operations
ā¢ Depot
ā¢ Cookies
ā¢ Used for application preferences or to
cache data
46. Mojo Depot
ā¢ Provides a simpliļ¬ed interface to the native HTML5
database API
ā¢ Depot is recommended if:
ā¢ You are storing simple objects for ofļ¬ine access
ā¢ You donāt need a speciļ¬c 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
ā¢ Simpliļ¬ed 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 ļ¬elds, menus, dialogs, pickers, viewers
ā¢ Instantiated in a sceneās assistant setup method
or when speciļ¬ed 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 speciļ¬ed
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.
Some of our products include applications like Present.ly, a microblogging solution for businesses.
Scalr, which allows you to take advantage of Amazon’s EC2 service without poking your eyeballs out.
CrowdSound, which allows your customers to leave feedback on your applications.
... and MediaPlug which allows you to offload long user uploads and do complex transcoding and manipulations automagically without your users having to leave your site.
This is the native application model, which Palm OS had and other major mobile platforms use. In this model the app is installed as an executable on the native OS with direct access to the OS’s data and services.
This is the application model that Palm’s webOS uses. Ajax apps have some nice advantages over embedded apps. They can be more easily deployed and updated through the same techniques used for web applications. It’s also much easier for most developers to jump in since it’s just like web apps. This is big for web development shops with developers that aren’t familiar with Java or Objective-C. Since they all know how to make web apps, they are all essentially mobile developers bc of Palm’s Mojo SDK.
Cards were inspired by the way one person handles a deck of cards. webOS works similarly by allowing you to scroll through cards, select cards and flicking cards off the top of the screen to remove them or select them and drag them to a new location.
There are cards, the expanded card view and the individual activity view.
webOS applications can have one or more stages. Here you can see the Card stage, Activity stage, and the Dashboard stage. Stages are declarative HTML structures similar to a traditional HTML window or browser tab. For example the Inbox view may be one stage and the screen to create a new e-mail would be another stage.
So, this is the initial structure of the application after you generate your helloWorld application. Within app there is the assistants folder, views for your HTML files, images, stylsheets, etc.
The important file here is appinfo.json which holds all the info for your application. The icon is what is shown in the launcher for your application. Also, like a regular web page, index.html is the initial view that is loaded.
So the appinfo.json file is one of the most important files in your application. It contains the information to load and launch your application. The id specifies the package name for your account. Everything else is pretty much self explanatory. There’s a bunch of other options you can include here as well ...
Here are some of the other options you can add in to your appInfo.json
So, this is the index.html page that is automatically generated for you.
The mojo framework is automatically included for you in the script tag above. You must include this in every application.
Also you can notice below, there’s sample text that is automatically generated for you to verify that your application actually runs.
If you end up creating other stages or other scenes you have to include the assistants for those. We’ll go into this in just a second.
Most applications will have multiple scenes. An example of an application with only one scene, though, would be a Calculator. Scenes are managed like a stack with new scenes ‘pushed’ onto and off of the stack with the last scene on the stack visible in the view.
palm-generate -t (task) new_scene with properties of name = to first.
So you can see on the right the old directory structure from when we initially generated the application earlier.
So, after you run this command you can see that the first assistant was added and a new folder called ‘first’ and an html page called first-scene.html has been created.
So, if we go into index.htm, we’re going to want to add in stage-assistant and first-assistant.
The stage assistant sets up any application-wide objects and pushes the first scene onto the stack.
The scene assistant allows you to control that scene’s behavior.
This is the code generated for you within stage-assistant sans the comments.
Here we’re going to want to add a new call to the setup method, which gets run when the application gets started.
Here, we’re telling the stage assistant to go ahead and load the first scene when we launch the application.
Since it won’t be any fun to link to a bank page, we’re going to add some html to our first scene. As you can see here, it’s just straight HTML. The CSS classes you see above are built in styling that comes with the MojoSDK, which you can also override if you want to.
Palm actually has a set of Human Interface Guidelines just like Apple does with the iPhone -- so make sure that if you do end up overriding these styles, you are within their guidelines.
So, after
Now that we’ve created the second scene, we have to do what we did to the first scene and add in the second-assistant to our index page.
So, within our first scene I’m adding a button with the standard palm-button styling and with an id of myButton so that I can reference it within an assistant.
So, this here is what is generated for you for a specific assistant. In this case this is our first assistant file that was generated for us earlier when we created that scene. I made sure to take out the comments within the javascript file since it took up way too much space to fit within this slide.
So, within the setup function, which gets called when this scene is loaded, we’re going to want to setup an event listener for ‘myButton’, which we specifically specified in the html page. So when we ‘click’ we’re going to want to go to launch the nextScene function.
So if you look on the bottom you can see in the nextScene function, we make the Mojo controller push the second scene onto the stack.
and like the first, let’s add some goods to our second scene so we have something to look at.
Depot, which is just a simplified interface to the HTML5 database API
Cookies are your standard HTTP cookies
Widgets support the webOS interface and Mojo defines the styles for each of the widgets. The styling for them is already available by declaring and using the widgets -- although styling can be overridden with custom CSS.
The List widget is the most important in the framework since webOS was built around a fast and power list widget experience.
The List widget is the most important in the framework since webOS was built around a fast and power list widget experience.
You can use lists to bind dynamic data sources with instant filtering and you can also embed other widgets & objects within your lists
Menu widgets can be used with specified areas of the screen.
- The App Menu is a regular desktop style menu on the top left of the screen.
- The View Menu applies to menus across the top of the screen and can be used as your display header
- The Command Menu is used to set a menu at the bottom of the screen
Unlike other widgets, the menu widgets aren’t declared in your scene view. They are instantiated completely within the scene assistant within the setupWidget call.
