`
MyEyeOfJava
  • 浏览: 1156619 次
  • 性别: Icon_minigender_1
  • 来自: 北京
博客专栏
7af2d6ca-4fe1-3e9a-be85-3f65f7120bd0
测试开发
浏览量：71338
533896eb-dd7b-3cde-b4d3-cc1ce02c1c14
晨记
浏览量：0
社区版块
存档分类
最新评论

WebOS-Build your first app【doc】一

JavaScriptEclipseHPPalmWebOS 
阅读更多
building your first app
这篇教程将带你创建第一个HP WebOS应用，教程将展示一个简单的Button计数器应用来代替一个HelloWorld类的程序。看完该教程后，你将会对stages，scenes，assistants以及其他一些重要的概念熟悉。

before you begin
这篇教程帮你搭建一个简单的WebOS应用来验证你的开发工具工作正常，教程假设你已经对JavaScript和HTML非常的熟悉，如果你刚接触HTML和Javascript的开发，我们将推荐给新开发者一些链接资源，他们获取会对你有用

在你开始你的一个WebOS应用之前，请安装HP WebOS SDK。ADK中安装了一些命令行工具，为你即将些的创建，打包，安装以及Debugging应用程序这些工作有所帮助。这个安装页面里也告诉你怎么样下载 Oracle VirtualBox工具，一个虚拟机环境。SDK将安装在虚拟机上来模拟Desktop下的WebOS环境

请熟悉一下你的模拟环境，确认你知道怎样从模拟设备中开启应用程序（通过点击WebOS主屏幕右下方的箭头图片，你能够使用运行主菜单），模拟设备会想真的Palm设备一样工作，但是你的电脑键盘将会被占用，你的鼠标也会被占用，请使用ESC按键来模拟back操作。

你能够些一个WebOS的应用，使用HP命令行工具或者你喜爱的文本编辑器，或者一些Web开发工具。你可以使用Eclipse的WebOS插件来进行简单的Debugging，packaging，installing，and running webos 应用程序。更多的信息，请查看Eclipse.

the application directory

webos应用程序目录拥有特殊的结构，下面的说明将向你展示怎样去使用webos sdk命令行工具去建立一个应用目录结构并且创建一个应用需求的文件集。

（如果你使用Eclipse WebOS插件，请选择File-new-mojo application，输入HelloWorld作为这个项目的名字和标题，其他Fields接受默认选项即可，点击Finish完成Application Framework）

建立一个应用目录结构
1.开启windows命令行，为应用开发建立一个工作空间
2.在工作空间的目录下，输入下面的命令 
palm-generate -p "{title:'Hello World', id:com.mystuff.hello, version:'1.0.0'}" HelloWorld

查看一下HelloWorld文件夹中的内容。
*app folder包含了assistants，models和应用程序的一些view，在随后的教程中，你可以在此目录下添加一些文件
*images folder包含了一些程序需要使用的图片
*stylesheets folder包含了一些CSS文件
*appinfo.json是程序的应用信息文件
*icon.png是在模拟机上运行该程序时显示的程序图标
*index.html是应用程序主要显示的信息
*sources.json是每一屏需要的资源文件列表

更多关于应用目录结构的信息，请查看Application Stucture。

Application information

appinfo.json提供了一些SDK使用包以及运行程序所需要的信息。我们一起来看一下appinfo.json的内容： 
{
  "id": "com.mystuff.hello",
  "version": "1.0.0",
  "vendor": "My Company",
  "type": "web",
  "main": "index.html",
  "title": "Hello World",
  "icon": "icon.png"
}


注意id和vendor参数，当你在设备上运行一个已经签名的应用时，他们会非常有用。

Setting the stage
stage是你为应用建立用户接口的一个平台。stage通常相当于一个card或者一个应用窗口。大多数简单的应用都会有单独一个stage，它包含了index.html文件。需要用户执行多个action的应用可能会需要多个stage，例如，一个email的应用可能要用一个stage来展示收件箱，同时也需要第二个stage去撰写一个新的Email信息。通知和后台程序根本不需要stages。

看一下下面的index.html的内容 
<!DOCTYPE html>
<html>
<head>
    <title>Hello World</title>
    <script src="/usr/palm/frameworks/mojo/mojo.js" 
        type="text/javascript" x-mojo-version="1"></script> 
    <!-- application stylesheet should come in after the one loaded by the framework -->
    <link href="/stylesheets/helloworld.css" media="screen" rel="stylesheet" type="text/css">
</head>
</html>


注意index.html是一个典型的HTML页面，他具有script标签是webos应用sdk架构要求的。尽管它没有那么多，不过是时候你可以在虚拟webos上运行一下你的程序了。

Starting the Emulator
按照下面的操作去做：

*Linux： 在命令行模式下，输入 palm-emulator
*Mac： 在应用文件夹下，双击 Emulator图标
*Windows： 选择 Start-All Programs-Palm-SDK-Emulator

Running Applications on the Emulator

如果你使用Eclipse WebOS插件，你能够运行模拟器通过选择Run -- Run Configurations...，然后选择“Palm Emulator” 作为你的应用名标签，在随后的动作中选择Run -- Run As --Mojo Application。 Eclipse将自动打包，安装，运行这个应用。在Eclipse环境下，每次运行你都不需要卸载该程序。

如果你使用命令行工具，那么通过使用SDK中的WebOS工具你可以运行该应用程序。
把流程做了下面4个部分的划分：
*在虚拟设备上打包安装应用程序
*在命令行下运行应用程序
*在命令行下关闭应用程序
*在模拟器上删除应用程序

注意：
*Hello，World的例子在实际应用中是需要改变的
*工作空间包含了所有的应用目录
*你如果不删除你的前置版本软件，不重新打包重新安装应用的话，在开发和Debugging中你的改变可能不会出现。
*安装新版本应用时，没有移除原任何资源文件，那么改变也不会出现。因此在测试期间，在安装新版本应用时删除旧版本应用显得非常有必要。

在虚拟设备上打包安装应用程序

1.开启模拟器
2.打开window命令行窗口，然后进入workspace工作空间
3.使用palm-package命令作为打包应用程序的命令 
palm-package HelloWorld

4.使用palm安装命令安装后最为ipk的文件（注意如果你的模拟器没有运行，但是你有一个WebOS的设备，那么你可以用USB连接你的电脑，如果你的设备选择了开发模式，它将安装这个IPK到你的设备上，你将在你的应用程序菜单中看到这个应用图标，当把设备上的应用程序想在电脑上运行时，请选择设备上的Just Charge选项） 

palm-install com.mystuff.hello_1.0.0_all.ipk


在命令行下运行应用程序
1.如果模拟器没有开启，请开启模拟器
2.开启windows命令行窗口，并进入到工作空间目录下
3.使用palm-launch 命令 
palm-launch com.mystuff.hello


在命令行下关闭应用
1.如果模拟器没有开启，请开启模拟器
2.开启windows命令行窗口，并进入到工作空间目录下
3.使用palm-launch 命令 
palm-launch -c com.mystuff.hello


在模拟器上删除应用程序
1.如果模拟器没有开启，请开启模拟器
2.开启windows命令行窗口，并进入到工作空间目录下
3.使用palm-install 命令 
palm-install -r com.mystuff.hello


在你打包安装完HelloWorld应用之后，在命令行中可以运行它，或者在模拟器上选择Launcher -- Hello World（默认是新月图标）下面的屏幕将会打开

【图片不翻译了，这里是一张HelloWorld的HTML页面，空白页面】

更多的信息请查看模拟器。

Creating a Scene
Scene长江是一个呈现信息或者用户任务的有规范格式的屏幕。每个场景拥有一个视图或者一个assistant。视图定义了场景的布局和外貌。assistant定义了行为。有些场景也拥有models，支持数据。

palm-generate命令能够创建场景和行为，它在sources.json中添加了一些内容，使得场景和行为有了关系。在下一步中，我们将使用它去创建一个叫first的场景，它包括以下文件。

* /app/assistants/first-assistant.js —This is the assistant.（行为）
* /app/views/first/first-scene.html —This is the view.（视图）
* sources.json —This file now includes JSON information that binds first-assistant.js to the first scene.（这个文件包含了JSON信息，能够把first-assistant.js绑定到first场景中）

Create and edit the first scene
1.打开命令行窗口，进入到工作空间目录
2.使用palm-generate命令 
palm-generate -t new_scene -p "name:first" HelloWorld

命令将创建first-assistant.js和first-scene.html
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 assistant.

Stage Assistant

类似一个视图，stage也有一个assistant。在这个简单的应用中，stage assistant的任务是把场景push进去，使它可见。stage assistant是一个叫stage-assistant.js的文件，它在assistants目录下，包含了2个功能。

*StageAssistant()是一个构造器
*setup()在stage运行并把first scene压入时，这个方法被调用

Push the applicatiom scene
1.打开stage-assistant.js
2.编辑StageAssistant.prototype.setup方法如下内容： 
StageAssistant.prototype.setup = function() {
     this.controller.pushScene("first");
};


这个应用现在拥有了一个stage和一个场景，为了使应用更具有功能性，你需要些一些代码到场景assistant中

Script Writing
最后，是时候让该应用具有生命力了，为了使场景中的button具有功能性，应有应该添加对button的处理。用户每次按button时，新的工作就是去每次更新文本。

Add a button handler function

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

当你注册该处理作为该button的监听器之后，这个框架将会在每次button按下时调用这个处理。这个处理一定会被框架响应,我们要将这个Handler和它的情景以及Dom绑定起来。下面的例子告诉我们这2步：
*使用bind()方法，绑定处理器到情景范围
*注册处理作为一个监听器，使用Mojo.Event.listen()

Bind and register the handler
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 = {
     "label" : "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));
};


Conclusion
现在你已经改变了原文件，创建了第一个场景，你必须重新打包，重新安装这个应用。以查看应用被完成

当你运行应用时，它将会展示你已经按了按钮多少次得数字。如果你没有看到下面的屏幕，你需要修改你的代码。看一看是否有单词拼写累的错误，在修改之后，你可能需要删除原有的应用，重新打包重新安装。

Where to Go from Here
*想要获取更多关于webos应用的信息，请查看应用基础
*想获得更多代码的信息，请查看例子
*想获得webos工具的信息，请查看widgets
分享到：
| Android APK自动化测试
评论
发表评论

您还没有登录,请您登录后再发表评论

相关推荐

Magicbox
Global site tag (gtag.js) - Google Analytics