Palm Mojo SDK初试三—翻译官方hello world(2)

 

欢迎大家关注webOS开发系列，更多内容访问http://i.wezine.cn/index.php/webos-dev，转载请注明出处

 

此篇原文http://i.wezine.cn/index.php/archives/43

 

接上一篇Palm Mojo SDK初试三—翻译官方hello world(1)

 

接下来继续翻译第二部分helloworld

——————————–创建场景scene———————————-

场景是用于显示信息和任务的格式化屏幕，每个场景包含一个视图view和一个脚本assistant(直接理解成js包好了)，视图决定场景的布局和显示，脚本assistant决定场景的动作行为，某些场景还包含有提供数据的模型models。

palm-generate命令生成首个场景的视图view和脚本assistant，并在sources.json中添加一些和脚本、场景相关的代码，看看下面的文件：

• /app/views/first/first-scene.html — 视图文件.
• /app/assistants/first-assistant.js — js脚本附件.
• sources.json — 包含first-assistant.js绑定首个场景的json信息.

创建、编辑场景scene

1 命令行模式进入工作目录

2 输入palm-generate… ，如以下命令

palm-generate -t new_scene -p "name:First" HelloWorld

 

3 打开first-scene.html文件并用以下代码替换

 

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

 

要实时显示出场景，必须告诉stage “push”输出场景，接下来我们将在stage中添加代码。

————–Stage Assistant(流程脚本？运行面脚本/辅助？)—————-
和视图view一样，流程/运行面也有一个assistant脚本。简单的程序中，流程脚本唯一的任务就是渲染、输出场景。流程脚本在脚本包中名为stage-assistant.js，它包含两个函数：

• StageAssistant() 是构造函数.
• setup(), 流程启动时调用，并输出首个场景.

输出程序场景
1 打开stage-assistant.js
2 照如下代码编辑StageAssistant函数

 

 

function StageAssistant () {

}

StageAssistant.prototype.setup = function() {
    this.controller.pushScene("first");
}

 

 

现在程序有流程和场景了，要使程序运转，还需要在scene assistant场景脚本中加入些代码。
——————————–—–脚本编写—–———————————-
最后，是时候进入程序，向stage assistant流程脚本中添加首场景的代码。要使场景button按钮生效，就需要有button handler按钮句柄。下面的新函数刷新每次用户点击按钮时的数字。
添加按钮控制函数
1 打开first-assistant.js文件
2 添加以下函数

 

FirstAssistant.prototype.handleButtonPress = function(event){

// increment the total and update the display
    this.total++;
    this.controller.get("count").update(this.total);
}

 

添加好按钮点击动作的监听句柄后，运行环境会在每次点击按钮时调用函数。函数句柄必须在场景脚本中绑定，以便运行时调用句柄有权访问场景和DOM元素。否则函数句柄将被默认对象替换。这个示例阐述两个步骤：

• 在流程中场景脚本绑定函数句柄

bind(this)

• 标注为监听句柄

 

Mojo.Event.listen()

  

绑定标注函数句柄
1 打开first-assistant.js文件
2 编辑setup函数如下：

 

 

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

 

运行程序时，将显示你点击按钮的次数，如果没有类似下面的效果，就需要调试一下代码了。常见错误有拼写错误，大小写敏感。调试之后，编译安装程序新版本之前，最好先卸载早期版本，以防出错