開始Worklight的開發(fā)之旅
文章將從安裝 Worklight 的開發(fā)環(huán)境開始，然后分析 Worklight 的各個部分，***完成一個簡單的程序，來向讀者介紹這個平臺的使用方法。
移動平臺的開發(fā)現(xiàn)狀
隨著第三代移動通信技術(shù)的發(fā)展，手機(jī)作為下一代的個人終端已經(jīng)日益被用戶所接受，但是傳統(tǒng)的移動應(yīng)用開發(fā)存在著很多的問題：首先智能手機(jī)市場存在著多種類型的操作系統(tǒng)，同時在相同的操作系統(tǒng)中也包含著不同分辨率的機(jī)型，甚至在同種操作系統(tǒng)上因為系統(tǒng)版本的差別，也會影響相同功能的開發(fā)；其次，新開發(fā)的應(yīng)用如果要和原有系統(tǒng)集成，因為認(rèn)證方面的原因，需要重復(fù)大量原有的代碼；***，客戶端一旦發(fā)布，就面臨著版本更新的問題，當(dāng)新版本推出時，是廢棄還是維持舊版本，如何方便用戶更新都是開發(fā)者需要面臨的問題；以上這些因素都加大了開發(fā)和維護(hù)手機(jī)應(yīng)用的成本。
與此同時，隨著 HTML5 標(biāo)準(zhǔn)的提出，基于網(wǎng)頁技術(shù)的移動客戶端程序和傳統(tǒng)的本地客戶端程序之間差距越來越小，使用 Web 技術(shù)開發(fā)手機(jī)客戶端來替換原有的本地客戶端成為可能。
Worklight 的概念模型
Worklight 平臺（以下簡稱 WL）為開發(fā)基于 Web 技術(shù)的手機(jī)客戶端提供了一套完整的解決方案，從開發(fā)、部署、測試到發(fā)布均可在這個平臺上完成。
圖 1. WL 架構(gòu)圖
平臺的架構(gòu)如圖 1 所示：
- Worklight Studio – 它是一個基于 Eclipse 的 IDE，通過 WL 支持的插件，可以方便的和企業(yè)級后臺連接，讓開發(fā)者在上面完成代碼的編寫和集成工作。
- Worklight Server – 它是一個基于 Java-based 的服務(wù)器，作為應(yīng)用、外部服務(wù)和企業(yè)級后端設(shè)施的交流途徑，提供了豐富的認(rèn)證、推送、分析和管理的功能。
- Device Runtime – 它由客戶端的 API 構(gòu)成，既可以訪問手機(jī)的本地功能，又能調(diào)用其他 JS 框架完成頁面的工作。
- Worklight Console – 它是一個基于 Web 的 UI 控制臺，通過它可以管理和監(jiān)控部署在上面的程序，并且實(shí)現(xiàn)消息的推送，完成數(shù)據(jù)報表的生成和分析。
根據(jù)上面的介紹，WL 平臺是開發(fā)企業(yè)級手機(jī)應(yīng)用的良好選擇，它不但利用 Web 技術(shù)統(tǒng)一了在不同環(huán)境下對手機(jī)應(yīng)用的開發(fā)，還提供了自動更新機(jī)制，讓用戶及時更新客戶端，而且它還提供了報表生成功能，對于企業(yè)級用戶來說，可以通過報表 獲得詳細(xì)的信息，進(jìn)行持續(xù)的開發(fā)和維護(hù)工作。
下文將從安裝開發(fā)環(huán)境開始，然后詳細(xì)敘述平臺支持的三種應(yīng)用模式的編寫方法，來完成對這個平臺的初步介紹。
開發(fā)環(huán)境搭建
Worklight 平臺（以下簡稱 WL）為開發(fā)基于 Web 技術(shù)的手機(jī)客戶端提供了一套完整的解決方案，從開發(fā)、部署、測試到發(fā)布均可在這個平臺上完成。
WL 的開發(fā)平臺由四部分組成：后臺數(shù)據(jù)庫，WL 的 SDK，Eclipse 和服務(wù)器。下面的安裝過程基于 Windows XP 完成，對于 Windows 的其他系統(tǒng)和 Mac 系統(tǒng)將略有不同，可以參見 WL 的主頁 進(jìn)行修正。在安裝系統(tǒng)之前需要確保 JDK6 或者以后版本已經(jīng)被安裝在系統(tǒng)中。
下載
表一將描述需要下載的軟件，并且提供相應(yīng)的鏈接：
表 1. 下載軟件列表
| 軟件名稱 | 軟件作用 | 說明 |
|---|---|---|
| MySQL | 后臺數(shù)據(jù)庫 | 鏈接 |
| MySQL Connector | JDBC 驅(qū)動 | 鏈接 |
| Eclipse3.7 | IDE | 鏈接 |
| SDK | WL 的開發(fā)環(huán)境 | 鏈接 |
因為 WL 的 SDK 自帶 Tomcat7.0 環(huán)境，就不需要再下載了。
安裝
安裝過程的整體流程如下：
- 安裝 MySQL：下載時建議使用安裝版本，并且根據(jù)圖 2 完成配置過程
- 解壓 MySQL Connector：任何位置均可，用于 WL 的 SDK 配置數(shù)據(jù)庫連接時指定驅(qū)動位置
- 解壓 Eclipse：任意位置均可
- 安裝 WL 的 SDK：根據(jù)安裝向?qū)?，完成安裝，并且根據(jù)圖 3 完成配置
- 安裝 Android 模擬器：因為需要用到模擬器來測試 WL 的混合和本地應(yīng)用，所以安裝相應(yīng)的模擬器，詳細(xì)過程參見 鏈接，需要說明的是，建議下載 Android2.2 作為模擬器的測試環(huán)境，因為 2.3 的 WebView 有一個未修復(fù)的錯誤
- 安裝基于 WL 的 Eclipse 插件：根據(jù)安裝插件的常規(guī)方法，輸入地址 http://www.worklight.com/downloads/eclipse-plugin-4.2.1-eval 完成插件安裝
- 安裝基于 ADT 的 Eclipse 插件：具體的方法參見 鏈接
- 驗證：在安裝完畢的 Eclipse 工作空間中，可以創(chuàng)建 Worklight 和 Android 的項目，就代表安裝完成
圖 2. MySQL 實(shí)例配置
圖 3. WL 數(shù)據(jù)庫配置
***個程序
為了更好的了解 WL 平臺，本章將通過構(gòu)建最簡單的 HelloWorklight 程序來完成平臺支持的三種類型應(yīng)用：純 Web 模式、混合模式和本地模式（基于 Android）。
WEB 模式
構(gòu)建一個 Worklight 項目需要了解以下兩個概念：工程和應(yīng)用（Project&Application），一個工程下面可以有多個應(yīng)用，應(yīng)用可以理解為一個單純的 Web 項目，作為開發(fā)的內(nèi)容。
新建工程和應(yīng)用：
- 點(diǎn)擊 File-> New -> Project -> Worklight -> Worklight Project
- 輸入工程名稱：HelloWorklightProj，點(diǎn)擊確認(rèn)，完成工程創(chuàng)建
- 點(diǎn)擊 File-> New -> Other -> Worklight -> Worklight Application
- 輸入應(yīng)用名稱：HelloWorklight，并選擇 HelloWorklightProj 作為工程，點(diǎn)擊確認(rèn)，完成應(yīng)用創(chuàng)建
創(chuàng)建完畢的應(yīng)用包含一個默認(rèn)的描述文件 application-descriptor.xml，通過它指定了系統(tǒng)訪問的初始頁面。在初始頁面中，通過調(diào)用 onload 方法和 WL 平臺取得聯(lián)系，并且利用定義好的 CSS 文件，來優(yōu)化頁面顯示，易于手機(jī)客戶端展現(xiàn)。
清單 1. 描述文件配置
- <mainFile>ClientApp.html</mainFile>
清單 2. 默認(rèn)初始頁面
- <body onload="WL.Client.init({})" id="content" style="display: none">
- <div id="AppBody">
- <div id="header">
- <h1>HelloWorld</h1>
- </div>
- <div id="wrapper">
- HelloWorld
- </div>
- <script src="js/ClientApp.js"></script>
- <script src="js/messages.js"></script>
- <script src="js/auth.js"></script>
- </body>
清單 3. CSS 定義
- #AppBody {
- height: 460px;
- margin: 0 auto;
- width: 320px;
- background-color: #ccc;
- overflow: hidden;
- overflow-y: auto;
- }
- #header {
- text-align: center;
- background-color: #1D4D90;
- color: #F9FAFB;
- font-size: 16px;
- height: 38px;
- line-height: 38px;
- border-bottom: 1px solid #BBBBBB;
- }
- #wrapper {
- padding: 10px;
- }
運(yùn)行 WL 服務(wù)器，右擊 HelloWorklight -> Run as -> Build and Deploy，在 console 中可以看到部署成功的提示信息，就表明應(yīng)用已經(jīng)被部署到服務(wù)器上，訪問 WL 的控制臺鏈接（http://localhost:8080/console/#catalog ），在 catalog 標(biāo)簽中可以看到 HelloWorklight 已經(jīng)被部署上去，點(diǎn)擊 Preview as common resource 就可以看到運(yùn)行的效果。
從這個程序可以看到，構(gòu)建一個純 Web 程序是很簡單的，但是如何將其部署到手機(jī)上呢？創(chuàng)建混合模式解決了這個問題。
混合模式
混合模式中引入的概念是環(huán)境（Environment），在相同的程序基礎(chǔ)上，WL 平臺可以生成不同環(huán)境的版本，根據(jù) Windows 的特點(diǎn)，示例將使用 Android2.2 作為模擬器環(huán)境，創(chuàng)建過程如下：
- 選擇 HelloWorklight
- 點(diǎn)擊 File-> New -> Other -> Worklight -> Worklight Environment
- 在環(huán)境選擇中選擇 Android phones and tablets，點(diǎn)擊 Finish 完成
從系統(tǒng)自動生成的文件中可以看到，在應(yīng)用目錄下多了一個 android 文件夾，在 Eclipse 的項目瀏覽頁中，多了一個 Android 項目。
圖 4. Android 客戶端程序
對于剛剛使用 WL 進(jìn)行開發(fā)的程序員來說，后面這個項目可以認(rèn)為是系統(tǒng)對應(yīng)于 android 文件夾自動生成的只讀項目，不建議進(jìn)行修改。
重新部署項目，可以在 WL 的控制臺看到 Android 版本的提示，與訪問純 Web 模式的應(yīng)用類似，點(diǎn)擊 Preview as android 就可以看到運(yùn)行的效果。
為了在客戶端上安裝應(yīng)用，右擊自動生成的 Android 項目，然后點(diǎn)擊 Run as -> Android Application，系統(tǒng)會啟動 Android 的模擬器，并在模擬器上安裝客戶端，然后顯示。這里需要提醒的是，一定要先部署 Android 版本到服務(wù)器，再運(yùn)行生成的項目，否則應(yīng)用運(yùn)行會報錯。
本地模式
對于大多數(shù)的應(yīng)用來說，混合模式已經(jīng)足夠滿足需求，但是當(dāng)用戶有特殊需求時，滿足對純 Native API 的開發(fā)也是平臺需要考慮的情況。WL 平臺只需要在混合模式下對生成程序進(jìn)行一定的改動，就可以完成本地模式的開發(fā)。相應(yīng)的改動如下：
- 修改 assets 文件夾下的 wlclient.properties 文件，包括遠(yuǎn)程訪問的協(xié)議、地址和端口，在沒有適配器的情況下，這些參數(shù)可以忽略
- 修改 com.HelloWorklight.HelloWorklight.java 文件，將繼承的類由 WLDroidGap 替換為 Activity，并且刪除 loadUrl 函數(shù)
- 添加 WLClient 類用于監(jiān)聽遠(yuǎn)程適配器獲得的信息（在這個應(yīng)用中將不添加任何適配器）
- 添加 TextView 類，用于在頁面上顯示本地化的效果
- 按照混合模式的方法，運(yùn)行 Android 程序，這時程序已經(jīng)和 WL 上部署的服務(wù)端應(yīng)用沒有關(guān)系，即使沒有部署也可以良好的運(yùn)行
清單 4. 本地模式的 Java 文件
- public class HelloWorklight extends Activity {
- @Override
- public void onCreate(Bundle savedInstanceState) {
- super.onCreate(savedInstanceState);
- TextView text = new TextView(this);
- text.setText("HelloWorld");
- setContentView(text);
- }
- }
調(diào)試方法介紹
為了更好的開發(fā)應(yīng)用，WL 平臺還提供了多種調(diào)試程序的方法：
- 使用 preview 的方式，在瀏覽器上使用它自帶調(diào)試工具進(jìn)行調(diào)試
- 雖然有些瀏覽器支持 console.debug() API，WL 平臺提供了自帶的 log 框架，包括 WL.Logger.debug() 和 WL.Logger.error() 方法，上述方法可以根據(jù)環(huán)境的不同，將日志輸出到不同的地方
- 平臺還支持通過 Weinre 和 iWebInspector 進(jìn)行調(diào)試
結(jié)束語
WL 作為新一代的移動開發(fā)平臺，向開發(fā)者提供了一個完整而又靈活的開發(fā)框架?；谶@個框架，程序員可以開發(fā)基于 HTML5 的純網(wǎng)頁應(yīng)用，又可以開發(fā)混合和本地模式的手機(jī)客戶端應(yīng)用。在 JS 框架的支持下，除了內(nèi)置的 prototype 外，還支持 jQuery、dojo、sencha 等多種 JS 框架，對于不同的前端開發(fā)要求有很好的支持。本文通過一個簡單的示例描述的開發(fā)各種應(yīng)用的方法，可以幫助讀者對 WL 有個整體的了解。
