这个简要的教程将教你创建你的第一个Palm® webOS™应用程序：一个简单的按钮点击计数器。学习完这个教程以后，你将对舞台（stages），场景（scenes），辅助器（assistants）以及其他一些重要的概念。
在你开始之前
在你开始你的第一个Palm® webOS™应用程序之前，请安装Palm® Mojo™ SDK。让你自己熟悉模拟器，并且知道怎么运行应用程序。这个教程将会帮助你建立一个简单的webOS应用程序，同时也能确信你的开发工具运行环境运行正常。
你只要使用Palm tools（palm工具）和你喜爱的文本编辑器或者web开发工具就能编写webOS应用程序。使用装有Palm插件的Eclipse就能简化调试，打包，安装和运行webOS应用程序。
应用程序的目录
webOS应用程序目录有特定的结构。如果你使用装有Palm SDK插件的Eclipse作为开发工具，你能通过“ File > New > Project and then choosing Mojo Application”创建webOS应用程序的目录结构。将项目命名为HelloWorld。或者，你可以使用命令工具palm-generate来建立这种目录结构：
1. 创建一个目录作为webOS应用程序的工作空间
2. 在这个工作空间目录下，键入下面一行：
$ palm-generate -p "{title:'Hello World', id:com.mystuff.hello, version:'1.0.0'}" HelloWorld
看一下这个新建的HelloWorld目录下的内容：
* app — contains the assistants, models, and views that make up the application. Later in the tutorial, you will be adding files inside this directory.
* appinfo.json — the Application Information file.
* icon.png — the image that the application presents in the Launcher on the emulator or device.
* images — any other images the application uses.
* index.html — the main stage on which the application's scenes will appear.
* sources.json — a list of the source files for each scene.
For more information about the application directory structure, see Application Structure.
Application Information
The file appinfo.json provides information that the Mojo framework uses to package and run the application. Take a look at the contents of appinfo.json:
{
"id": "com.palm.developer",
"version": "1.0.0",
"vendor": "My Company",
"type": "web",
"main": "index.html",
"title": "Hello World",
"icon": "icon.png"
}
Notice the id and vendor parameters, which become useful when you are building signed applications to run on the device itself.
Setting the Stage
A stage is the platform on which you build the user interface for your application. A stage generally corresponds to a single card, or application window. Most simple applications have a single stage, contained in the file index.html. An application that lets the user perform more than one action concurrently might require more than one stage. For example, an email application might display the inbox on one stage, but launch a second stage to compose a new email message. Notification and background applications have no stages at all.
Take a look at the contents of index.html:
<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN"
"http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
<head>
<title>Hello There</title>
<script src="/usr/palm/frameworks/mojo/mojo.js" type="text/javascript" x-mojo-version="1" />
<!-- application stylesheet should come in after the one loaded by the framework -->
<link href="stylesheets/hellothere.css" media="screen" rel="stylesheet" type="text/css" />
</head>
<body>
<h2>This text verifies your application is running.</h2>
<p>
To create a fully functional Palm application create a scene and remove this text from index.html.
See the documentation on Palm Applications for more information on creating applications and scenes.
</p>
</body>
</html>
Notice that index.html is a standard xhtml page, with a tag that brings in the Mojo framework required for webOS applications.
Although it won't do much yet, it's time to try running your application on the emulator.
Starting the Emulator
* Mac: In the Applications folder, double-click the Palm Emulator.
* Windows: On the Desktop, double-click the Palm Emulator shortcut (or select Start > All Programs > Palm > SDK > Palm Emulator).
* Linux: From the command line, type palm-emulator.
Running Applications on the Emulator
If you are using Eclipse with the Palm plug-in, you can run an application on the emulator by selecting Run > Run As > Palm Application. Eclipse automatically packages, installs, and launches the application.
Otherwise, run the application from the command line by using the palm tools included with the SDK.
To package and install a file on the emulator from the command line
1. Ensure that the emulator is running.
2. On the command line, navigate to your workspace directory, which contains all of your application directories.
3. Use the palm-package command to package the directory containing the application.
Example:
$ palm-package HelloWorld
4. Use palm-install to install the resulting .ipk file on the emulator.
Example:
$ palm-install com.mystuff.hello_1.0.0_all.ipk
Note: Installing a new version of an application does not remove the source files that are not present in the new version. During testing, it is useful to delete the old version of an application before installing a new version.
To delete the application on the emulator, use palm-install.
Example:
palm-install -r com.mystuff.hello
Launch an application from the console with:
$ palm-launch com.mystuff.hello
Close the application from the console with:
$ palm-launch -c com.yourdomain.yourapp
For more information about the emulator, see Emulator.
Here is a screenshot of the emulator running the application.
Making a Scene
A scene is a formatted screen for presenting information or a task to the user. Each scene has a view and an assistant. The view determines the layout and appearance of the scene. The assistant determines the behavior. Some scenes also have models, which supply data.
To create the first scene, type the following on the command line:
$ palm-generate -t new_scene -p "name:First" HelloWorld
This command creates the view and the assistant for the first scene, and also adds a few lines to sources.json to correlate the assistants and scenes. Take a look at the following files:
* /app/views/first/first-scene.html — This is the view.
* /app/assistants/first-assistant.js — This is the assistant.
* sources.json — This file now includes JSON information that binds first-assistant.js to the first scene.
Edit the view (first-scene.html) to contain the following:
<div id="main" class="palm-hasheader">
<div class="palm-header">Header</div>
<div id="count" class="palm-body-text">0</div>
<div id="MyButton" name="MyButton1" x-mojo-element="Button"></div>
</div>
In order to actually display the scene, you must tell the stage to push it. In the next section, you'll add that code to the stage assistant.
The Stage Assistant
Like a view, the stage also has an assistant. In this simple application, the stage assistant's only task is to push the scene, making it visible. The stage assistant is a file called stage-assistant.js in the assistants directory. Edit stage-assistant.js to contain the following:
function StageAssistant () {
}
StageAssistant.prototype.setup = function() {
this.controller.pushScene('first');
}
Notice that this stage assistant contains two functions:
* StageAssistant() is the constructor.
* setup(), which is called when the stage is launched, pushes the first scene.
The application now has a stage and a scene. In order to make the application functional, it is time to write some code in the scene assistant.
Script Writing
At last, it is time to breathe life into the application by adding code to the scene assistant for the first scene. To make the first scene's button functional, the application needs a button handler. This function updates the text each time the user taps the button. Add the following function to first-assistant.js:
FirstAssistant.prototype.handleButtonPress = function(event){
// increment the total and update the display
this.total++;
this.controller.get('count').update(this.total);
}
Once you register the handler as a listener for Tap events on the button, the framework will call the handler every time the button is tapped. The handler must be bound to the scene assistant, so that when the framework calls the handler it has access to the scene and its DOM. Otherwise, the handler is bound by default to the calling object instead, which is not useful. This example demonstrates two steps:
* binding the handler to the scene assistant's scope, using bind(this)
* registering the handler as a listener, using Mojo.Event.listen()
Edit the setup function to match the following example:
FirstAssistant.prototype.setup = function() {
// set the initial total and display it
this.total=0;
this.controller.get('count').update(this.total);
// a local object for button attributes
this.buttonAttributes = {};
// a local object for button model
this.buttonModel = {
buttonLabel : 'TAP HERE',
buttonClass : '',
disabled : false
};
// set up the button
this.controller.setupWidget("MyButton", this.buttonAttributes, this.buttonModel);
// bind the button to its handler
Mojo.Event.listen(this.controller.get('MyButton'), Mojo.Event.tap, this.handleButtonPress.bind(this));
}
When you run the application, it shows how many times you have tapped the button.
Where to Go from here
* For more information about the structure of a webOS application, see Application Basics.
* For more code samples, see Samples.
* For information about webOS widgets, see Widgets.