詳解惠普webOS官方教程開發你的第一個應用程序

作者：小野 2011-04-02 10:08:21

前不久，我們為大家講解了怎樣安裝惠普webOS的SDK和PDK，當你把開發前的準備做好后，是不是很想一展身手呢？下面的這篇webOS應用程序開發教程同樣摘自惠普官網，通過對這篇教程的學習，你能夠自己開發一個統計按鈕點擊量的計數器，快來試試吧！

【51CTO譯文】這份簡短的教程將帶你經歷你的第一個惠普webOS應用程序。本教程將向你介紹如何創建一個簡單的計數器，計算按鈕的點擊量，而不是單純的顯示“Hello, World!”。本教程結束后，你應該會熟悉stages、scenes、assistants以及其他一些重要的概念。

一、開始之前

本教程幫助你開發一個簡單的webOS應用程序以驗證你的開發工具是否可以正常運作。本教程假定你已經熟悉HTML和JavaScript。如果你是剛剛開始學習HTML和JavaScript，我們收集了一些Web開發的相關鏈接，希望會對你有所幫助。

在開始你的第一個webOS應用程序的之前，請先安裝惠普webOS的SDK。webOS的SDK安裝了幾個命令行工具，用于創建，封裝，安裝和調試的應用程序，安裝包還會告訴你如何下載甲骨文的VirtualBox，它是一個虛擬機環境。為SDK安裝虛擬機文件是因為需要在你的桌面上模擬webOS的環境。

自己熟悉模擬器，并確保你知道如何開始用模擬器啟動應用程序（你可以通過點擊webOS主界面右下角的箭頭圖標來啟動模擬器）。模擬器運行起來很像真正的Palm設備，但需要用你的計算機鍵盤進行輸入，用你的鼠標控制動作，用“Esc”鍵模擬“返回”鍵。

你可以使用惠普命令行工具開發一個應用程序，或者使用你喜歡的文本編輯器和Web開發工具。使用Eclipse的webOS插件簡化調試、封裝、安裝、運行webOS的應用程序的過程。欲了解更多信息，請看Eclipse官網。

二、應用程序目錄

webOS的應用程序目錄具有特定的結構。這些指南會告訴你如何使用webOS的SDK的命令行工具來設置應用程序目錄結構，以及創建一個應用程序所需文件的初始設置。

（注：如果你使用的是有webOS SDK插件的Eclipse，選擇“文件”>“新建”>“Mojo應用”。然后輸入“HelloWorld”作為項目的名稱和標題，并在其他選項接受默認值。點擊“完成”即可創建應用程序框架。）

1.設置應用程序的目錄結構

（1）打開一個命令提示符窗口，新建一個開發應用程序工作區目錄（例如，app_dir）。

（2）在工作區目錄，鍵入以下內容（注意雙引號里面的單引號）：

palm-generate -p "{title:'Hello World', id:com.mystuff.hello, version:'1.0.0'}" HelloWorld

2.來看一下新的HelloWorld文件夾的內容：

（1）應用程序文件夾：包含構成應用程序的assistants、models和views文件。在本教程的后面，你將會把文件添加到這個目錄。

（2）圖像文件夾：包含應用程序使用的所有圖像。

（3）樣式表文件夾：包含應用程序的層疊樣式表文件。

（4）appinfo.json：應用程序的信息文件。

（5）icon.png：應用程序在模擬器或設備上顯示的圖標。

（6）index.html：應用程序打開時的主頁面文件。

（7）sources.json：每個scene的源文件列表。

如需更多有關應用程序目錄結構的信息，請參見應用程序結構。

三、應用信息

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和供應商參數，當你在它們各自的設備上創建簽名的應用程序時，這將會對你有所幫助。

四、設置Stage

Stage是一個建立在應用程序用戶界面上的平臺。Stage通常對應于一個單獨的選項卡，或應用程序窗口。最簡單的應用程序只有一個Stage，包含在index.html文件中。應用程序會允許用戶同時執行多個操作，這就可能需要多個Stage。例如，電子郵件應用程序可能會在Stage上顯示一個收件箱，但第二步操作會創建新的電子郵件。通知和后臺應用程序沒有Stage。

2.來看一下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框架。現在是時候測試你的應用程序在模擬器里的運行效果了，盡管它現在還沒有太大作用。#p#

五、啟動模擬器

按照下面的說明配置你的系統：

1.Linux系統：在命令提示符下，鍵入palm-emulator。

2.Mac：在應用程序文件夾，雙擊“Emulator”圖標。

3.Windows：選擇“開始”>“所有程序”>“Palm”>“SDK”>“Emulator”。

六、在模擬器上運行應用程序

如果你使用的開發工具是惠普webOS插件的Eclipse，你可以選擇Run>Run Configurations...，在模擬器上運行應用程序。然后選擇“Palm Emulator”作為應用程序的名稱。選擇Run>Run As...>Mojo Application進行之后的激活。Eclipse自動封裝，安裝和啟動應用程序。使用Eclipse，沒有必要卸載應用程序，然后再次運行它。

如果你使用的是命令行工具，通過使用包含SDK的webOS工具，在命令提示符中運行應用程序。

本節包括以下過程：

（1）在模擬器中封裝和安裝應用程序。

（2）在命令提示符中啟動應用程序。

（3）在命令提示符中關閉應用程序。

（4）在模擬器中刪除應用程序。

注意：

（1）這些指令是以“Hello World”為例的。記得做實際應用程序時需要進行變更。

（2）“工作區目錄”中包含所有的應用程序目錄。

（3）除非你先刪除以前的版本，然后重新封裝和重新安裝更新的應用程序，否則開發和調試過程中所做的更改不可能出現。

（4）安裝一個應用程序的新版本不會刪除沒有出現在新版本中的任何源文件。因此，在測試過程中，刪除舊版本的應用程序后再安裝新版本的應用程序將會對你非常有幫助。

1.在模擬器中封裝和安裝應用程序

（1）啟動模擬器。

（2）打開一個命令提示符窗口，然后導航到工作區目錄。

（3）如下所示用palm-package命令封裝包含應用程序的目錄：

palm-package HelloWorld

（4）如下所示用palm-install命令在模擬器上安裝.ipk文件。（注：如果你的模擬器沒有運行，但確實有webOS的設備的端口插入到計算機的USB接口，而且你已啟用開發人員模式，那么它會安裝到你的設備。你會在首啟動菜單的底部找到應用程序的圖標。當插入到計算機的設備要裝載一個應用程序時，在設備上選擇“Just Charge”選項。）

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

2.在命令提示符下啟動應用程序

（1）啟動模擬器，如果它尚未啟動。

（2）打開一個命令提示符窗口，然后導航到工作區目錄。

（3）如下所示使用palm-launch命令：

palm-launch com.mystuff.hello

3.在命令提示符下關閉應用程序

（1）啟動模擬器，如果它尚未啟動。

（2）打開一個命令提示符窗口，然后導航到工作區目錄。

（3）如下所示使用palm-launch命令：

palm-launch -c com.mystuff.hello

4.從模擬器中刪除應用程序

（1）啟動模擬器，如果它尚未啟動。

（2）打開一個命令提示符窗口，然后導航到工作區目錄。

（3）如下所示使用palm-install命令：

palm-install -r com.mystuff.hello

當你在模擬器里封裝并安裝了的Hello World應用軟件包之后，通過命令提示符啟動，或者通過選擇Launcher>Hello World打開模擬器（默認圖標是新月）。下面的屏幕截圖顯示了當下的應用程序界面。

圖1屏幕截圖

如需更多模擬器信息，請看模擬器。#p#

七、創建Scene

Scene是一個給用戶展示信息或任務的格式化屏幕。每個Scene都有一個view和一個assistant。view確定Scene的布局和外觀。assistant決定動作。也有一些Scene提供數據模型。

palm-generate命令可用于創建scenes和assistants。它還在sources.json中增加了幾行命令關聯scenes和assistants。下一步，我們將使用它來創建一個名字叫“first”的scene，其中將包括下列文件：

◆/app/assistants/first-assistant.js：這是assistant。

◆/app/views/first/first-scene.html：這是view。

◆sources.json：這個文件包含JSON的信息，并綁定first-assistant.js和first scene。

1.創建并編輯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>

要實際顯示scene，你必須讓stage去“推送”scene。在下一節中，你將在stage assistant中添加代碼。

八、Stage Assistant

像view一樣，Stage同樣需要有一個Assistant。在這個簡單的應用程序中，stage assistan的唯一任務是推送scene，使之可見。stage assistan是一個叫做assistant.js的文件，存在于assistants目錄中，它包含兩個函數：

◆StageAssistant()：構造函數。

◆setUp()：啟動stage時，推送first scene。

推送應用程序的scene

（1）打開stage-assistant.js。

（2）編輯StageAssistant.prototype.setup調用如下：

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

九、編寫腳本

最后，是時候給first scene assistant文件添加代碼，為應用程序注入活力。應用程序需要開發一個按鈕處理程序，來給first scene按鈕增加功能。這項新功能是在每次用戶點擊按鈕時更新文本。

1.添加一個按鈕的處理功能

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

當你開發了一個處理程序，記錄按鈕的點擊事件中，框架在每次點擊時都會調用這個處理程序。該處理程序必須綁定到scene assistant上，因此，當框架調用處理程序時，它會進入scene和它的DOM中。否則，處理程序會默認的綁定到調用對象，而不是那些沒用的對象。這個例子證明了以下兩個步驟：

◆綁定處理程序和scene assistant的范圍，使用bind(this)

◆將處理程序注冊為監聽者，使用Mojo.Event.listen()

2.綁定和注冊處理程序

（1）打開first-assistant.js。

（2）按照下面的內容編輯設置功能：

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

總結：

既然你已經改變了源文件，來創建和推送first（也是唯一的）scene，你必須重新封裝和重新安裝應用程序來查看已完成的應用程序。

當你運行應用程序時，它會顯示你點擊了多少次按鈕。如果你沒有看到下圖的屏幕，那么你需要調試代碼。常見的錯誤包括拼寫錯誤和不正確的大小寫。經過調試，你得刪除之前版本的應用程序，然后重新封裝或者重新安裝最新版本，直到正常啟動為止。