Meet Mojo @ Palm Developer Day, 4/24/2010
22
-
Upload
jessedonaldson -
Category
Technology
-
view
1.322 -
download
0
description
Get a head start on working with the webOS SDK in this basic introduction to the webOS platform and the Mojo framework. Learn webOS technical terminology and take a look at how applications are put together, with an emphasis on how it relates to a desktop browser environment.
Transcript of Meet Mojo @ Palm Developer Day, 4/24/2010
Meet Mojo™
Jesse DonaldsonSr. ManagerApril 24, 2010
A brief introduction to Palm® webOS™ applications
Goals
webOS UI overview
Mojo apps are like web pages
Development model is accessible
App structure, basic framework usage
Head start when you download the SDK
http://developer.palm.com
webOS UI
• Applications run in cards
• Cards are small web pages
• HTML, CSS, JavaScript
Terminology: Scenes
• Screens in a card are “scenes”
• Scenes may be stacked up
• Sibling divs in the body
Terminology: Stages
• Cards are a type of stage
• There are others:
• Dashboards & alerts
• They are all HTML documents
Structure of a webOS app
•MyApp•app
•assistants•views
•appinfo.json•icon.png•images•index.html•sources.json•stylesheets
appinfo.json
{"title": "My App","main": "index.html","id": "com.mycompany.myapp","version": "1.0.0","vendor": "MyCompany, inc."
}
index.html
<html><head></head><body>
<div id="flashlight" style="width:100%; height:100%; background-color:#FF9"></div>
</body></html>
Typical Mojo index.html
<head> <title>Framework Library</title>
<script src="/usr/palm/frameworks/mojo/mojo.js"
type="text/javascript" x-mojo-version="1"></script>
<link href="stylesheets/fr-library.css" media="screen" rel="stylesheet" type="text/css" />
</head><body></body>
sources.json
[ {"source": "app/assistants/app-assistant.js"
},{
"source": "app/assistants/detail-assistant.js"},{
"source": "app/assistants/list-assistant.js","scenes": "list"
} ]
The Assistants Directory
• Usual place for JavaScript code
• Mojo provides generic controller objects
• Apps implement assistants for them
• Assistants are delegates for:• AppController• StageController• SceneController• WidgetController
The Views Directory
• One subdirectory per scene
• Contains the HTML for each scene:• A template for the scene itself• Templates for widgets (e.g., list items)
• Mojo widgets are declared in this HTML
app/views/main/main-scene.html
<div id="power-switch" x-mojo-element="RadioButton">
</div>
<div id="main-light" style="width:100%; height:382px; background-color:#224;">
</div>
app/assistants/main-assistant.js
MainAssistant = function() {};
MainAssistant.prototype.setup = function() {…
MainAssistant.prototype.switchLight = function(ev) {…
MainAssistant.prototype.setup()
var attributes = { choices: [{label: "Off", value: false},{label: "On", value: true}] };
var model = { value: false };
this.controller.setupWidget('power-switch', attributes, model);
MainAssistant.prototype.setup(), Part #2
this.switchLight = this.switchLight.bind(this);
this.controller.listen('power-switch', Mojo.Event.propertyChange, this.switchLight);
this.light = this.controller.get('main-light');
MainAssistant.prototype.switchLight()
MainAssistant.prototype.switchLight = function(event) {
this.light.style.backgroundColor = event.value ? "#FF9" : "#224";
};
Finished Flashlight App
Dive Deeper
• Download the SDK http://developer.palm.com
&Q A
