构建第一个webOS应用程序－－Hello World（部分翻译，未完成） - 翻译 - webos

[翻译] 构建第一个webOS应用程序－－Hello World（部分翻译，未完成）

tonynju 2009-07-27

这个简要的教程将教你创建你的第一个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" />


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

发表回复

>>返回群组首页

[翻译] 构建第一个webOS应用程序－－Hello World（部分翻译，未完成）

相关讨论

相关资源推荐