詳解惠普webOS官方教程 開發(fā)你的第一個應用程序
原創(chuàng)【51CTO譯文】這份簡短的教程將帶你經(jīng)歷你的第一個惠普webOS應用程序。本教程將向你介紹如何創(chuàng)建一個簡單的計數(shù)器，計算按鈕的點擊量，而不是單純的顯示“Hello, World!”。本教程結(jié)束后，你應該會熟悉stages、scenes、assistants以及其他一些重要的概念。
一、開始之前
本教程幫助你開發(fā)一個簡單的webOS應用程序以驗證你的開發(fā)工具是否可以正常運作。本教程假定你已經(jīng)熟悉HTML和JavaScript。如果你是剛剛開始學習HTML和JavaScript，我們收集了一些Web開發(fā)的相關鏈接，希望會對你有所幫助。
在開始你的第一個webOS應用程序的之前，請先安裝惠普webOS的SDK。webOS的SDK安裝了幾個命令行工具，用于創(chuàng)建，封裝，安裝和調(diào)試的應用程序，安裝包還會告訴你如何下載甲骨文的VirtualBox，它是一個虛擬機環(huán)境。為SDK安裝虛擬機文件是因為需要在你的桌面上模擬webOS的環(huán)境。
自己熟悉模擬器，并確保你知道如何開始用模擬器啟動應用程序（你可以通過點擊webOS主界面右下角的箭頭圖標來啟動模擬器）。模擬器運行起來很像真正的Palm設備，但需要用你的計算機鍵盤進行輸入，用你的鼠標控制動作，用“Esc”鍵模擬“返回”鍵。
你可以使用惠普命令行工具開發(fā)一個應用程序，或者使用你喜歡的文本編輯器和Web開發(fā)工具。 使用Eclipse的webOS插件簡化調(diào)試、封裝、安裝、運行webOS的應用程序的過程。欲了解更多信息，請看Eclipse官網(wǎng)。
二、應用程序目錄
webOS的應用程序目錄具有特定的結(jié)構(gòu)。這些指南會告訴你如何使用webOS的SDK的命令行工具來設置應用程序目錄結(jié)構(gòu)，以及創(chuàng)建一個應用程序所需文件的初始設置。
（注：如果你使用的是有webOS SDK插件的Eclipse，選擇“文件”>“新建”>“Mojo應用”。然后輸入“HelloWorld”作為項目的名稱和標題，并在其他選項接受默認值。點擊“完成”即可創(chuàng)建應用程序框架。）
1.設置應用程序的目錄結(jié)構(gòu)
（1）打開一個命令提示符窗口，新建一個開發(fā)應用程序工作區(qū)目錄（例如，app_dir）。
（2）在工作區(qū)目錄，鍵入以下內(nèi)容（注意雙引號里面的單引號）：
palm-generate -p "{title:'Hello World', id:com.mystuff.hello, version:'1.0.0'}" HelloWorld
2.來看一下新的HelloWorld文件夾的內(nèi)容：
（1）應用程序文件夾：包含構(gòu)成應用程序的assistants、models和views文件。在本教程的后面，你將會把文件添加到這個目錄。
（2）圖像文件夾：包含應用程序使用的所有圖像。
（3）樣式表文件夾：包含應用程序的層疊樣式表文件。
（4）appinfo.json：應用程序的信息文件。
（5）icon.png：應用程序在模擬器或設備上顯示的圖標。
（6）index.html：應用程序打開時的主頁面文件。
（7）sources.json：每個scene的源文件列表。
如需更多有關應用程序目錄結(jié)構(gòu)的信息，請參見應用程序結(jié)構(gòu)。
三、應用信息
appinfo.json文件提供SDK框架封裝和運行應用程序的信息。來看一下appinfo.json的內(nèi)容：
{
"id": "com.mystuff.hello",
"version": "1.0.0",
"vendor": "My Company",
"type": "web",
"main": "index.html",
"title": "Hello World",
"icon": "icon.png"
}
留意ID和供應商參數(shù)，當你在它們各自的設備上創(chuàng)建簽名的應用程序時，這將會對你有所幫助。
四、設置Stage
Stage是一個建立在應用程序用戶界面上的平臺。Stage通常對應于一個單獨的選項卡，或應用程序窗口。最簡單的應用程序只有一個Stage，包含在index.html文件中。應用程序會允許用戶同時執(zhí)行多個操作，這就可能需要多個Stage。例如，電子郵件應用程序可能會在Stage上顯示一個收件箱，但第二步操作會創(chuàng)建新的電子郵件。通知和后臺應用程序沒有Stage。
2.來看一下index.html的內(nèi)容：
- <!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>標簽產(chǎn)生了webOS應用所需的SDK框架?，F(xiàn)在是時候測試你的應用程序在模擬器里的運行效果了，盡管它現(xiàn)在還沒有太大作用。#p#
五、啟動模擬器
按照下面的說明配置你的系統(tǒng)：
1.Linux系統(tǒng)：在命令提示符下，鍵入palm-emulator。
2.Mac：在應用程序文件夾，雙擊“Emulator”圖標。
3.Windows：選擇“開始”>“所有程序”>“Palm”>“SDK”>“Emulator”。
六、在模擬器上運行應用程序
如果你使用的開發(fā)工具是惠普webOS插件的Eclipse，你可以選擇Run>Run Configurations...，在模擬器上運行應用程序。然后選擇“Palm Emulator”作為應用程序的名稱。選擇Run>Run As...>Mojo Application進行之后的激活。Eclipse自動封裝，安裝和啟動應用程序。使用Eclipse，沒有必要卸載應用程序，然后再次運行它。
如果你使用的是命令行工具，通過使用包含SDK的webOS工具，在命令提示符中運行應用程序。
本節(jié)包括以下過程：
（1）在模擬器中封裝和安裝應用程序。
（2）在命令提示符中啟動應用程序。
（3）在命令提示符中關閉應用程序。
（4）在模擬器中刪除應用程序。
注意：
（1）這些指令是以“Hello World”為例的。記得做實際應用程序時需要進行變更。
（2）“工作區(qū)目錄”中包含所有的應用程序目錄。
（3）除非你先刪除以前的版本，然后重新封裝和重新安裝更新的應用程序，否則開發(fā)和調(diào)試過程中所做的更改不可能出現(xiàn)。
（4）安裝一個應用程序的新版本不會刪除沒有出現(xiàn)在新版本中的任何源文件。因此，在測試過程中，刪除舊版本的應用程序后再安裝新版本的應用程序?qū)δ惴浅Ｓ袔椭?/p>
1.在模擬器中封裝和安裝應用程序
（1）啟動模擬器。
（2）打開一個命令提示符窗口，然后導航到工作區(qū)目錄。
（3）如下所示用palm-package命令封裝包含應用程序的目錄：
palm-package HelloWorld
（4）如下所示用palm-install命令在模擬器上安裝.ipk文件。（注：如果你的模擬器沒有運行，但確實有webOS的設備的端口插入到計算機的USB接口，而且你已啟用開發(fā)人員模式，那么它會安裝到你的設備。你會在首啟動菜單的底部找到應用程序的圖標。當插入到計算機的設備要裝載一個應用程序時，在設備上選擇“Just Charge”選項。）
palm-install com.mystuff.hello_1.0.0_all.ipk
2.在命令提示符下啟動應用程序
（1）啟動模擬器，如果它尚未啟動。
（2）打開一個命令提示符窗口，然后導航到工作區(qū)目錄。
（3）如下所示使用palm-launch命令：
palm-launch com.mystuff.hello
3.在命令提示符下關閉應用程序
（1）啟動模擬器，如果它尚未啟動。
（2）打開一個命令提示符窗口，然后導航到工作區(qū)目錄。
（3）如下所示使用palm-launch命令：
palm-launch -c com.mystuff.hello
4.從模擬器中刪除應用程序
（1）啟動模擬器，如果它尚未啟動。
（2）打開一個命令提示符窗口，然后導航到工作區(qū)目錄。
（3）如下所示使用palm-install命令：
palm-install -r com.mystuff.hello
當你在模擬器里封裝并安裝了的Hello World應用軟件包之后，通過命令提示符啟動，或者通過選擇Launcher>Hello World打開模擬器（默認圖標是新月）。下面的屏幕截圖顯示了當下的應用程序界面。
圖1屏幕截圖
如需更多模擬器信息，請看模擬器。#p#
七、創(chuàng)建Scene
Scene是一個給用戶展示信息或任務的格式化屏幕。每個Scene都有一個view和一個assistant。view確定Scene的布局和外觀。assistant決定動作。也有一些Scene提供數(shù)據(jù)模型。
palm-generate命令可用于創(chuàng)建scenes和assistants。它還在sources.json中增加了幾行命令關聯(lián)scenes和assistants。下一步，我們將使用它來創(chuàng)建一個名字叫“first”的scene，其中將包括下列文件：
◆/app/assistants/first-assistant.js：這是assistant。
◆/app/views/first/first-scene.html：這是view。
◆sources.json：這個文件包含JSON的信息，并綁定first-assistant.js和first scene。
1.創(chuàng)建并編輯first scene
（1）打開一個命令提示符窗口，然后導航到工作區(qū)目錄。
（2）如下所示使用palm-generate命令：
palm-generate -t new_scene -p "name:first" HelloWorld
此命令創(chuàng)建了first-assistant.js和first-scene.html。
（3）打開first-scene.html并替換下面的內(nèi)容：
- <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。 在下一節(jié)中，你將在stage assistant中添加代碼。
八、Stage Assistant
像view一樣，Stage同樣需要有一個Assistant。在這個簡單的應用程序中，stage assistan的唯一任務是推送scene，使之可見。stage assistan是一個叫做assistant.js的文件，存在于assistants目錄中，它包含兩個函數(shù)：
◆StageAssistant()：構(gòu)造函數(shù)。
◆setUp()：啟動stage時，推送first scene。
推送應用程序的scene
（1）打開stage-assistant.js。
（2）編輯StageAssistant.prototype.setup調(diào)用如下：
StageAssistant.prototype.setup = function() {
this.controller.pushScene("first");
};
九、編寫腳本
最后，是時候給first scene assistant文件添加代碼，為應用程序注入活力。應用程序需要開發(fā)一個按鈕處理程序，來給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);
};
當你開發(fā)了一個處理程序，記錄按鈕的點擊事件中，框架在每次點擊時都會調(diào)用這個處理程序。該處理程序必須綁定到scene assistant上，因此，當框架調(diào)用處理程序時，它會進入scene和它的DOM中。否則，處理程序會默認的綁定到調(diào)用對象，而不是那些沒用的對象。 這個例子證明了以下兩個步驟：
◆綁定處理程序和scene assistant的范圍，使用bind(this)
◆將處理程序注冊為監(jiān)聽者，使用Mojo.Event.listen()
2.綁定和注冊處理程序
（1）打開first-assistant.js。
（2）按照下面的內(nèi)容編輯設置功能：
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));
};
總結(jié)：
既然你已經(jīng)改變了源文件，來創(chuàng)建和推送first（也是唯一的）scene，你必須重新封裝和重新安裝應用程序來查看已完成的應用程序。
當你運行應用程序時，它會顯示你點擊了多少次按鈕。如果你沒有看到下圖的屏幕，那么你需要調(diào)試代碼。常見的錯誤包括拼寫錯誤和不正確的大小寫。經(jīng)過調(diào)試，你得刪除之前版本的應用程序，然后重新封裝或者重新安裝最新版本，直到正常啟動為止。
圖2 counter
【51CTO.com獨家特稿，非經(jīng)授權(quán)謝絕轉(zhuǎn)載，合作媒體轉(zhuǎn)載請注明原文作者及出處！】
【編輯推薦】
