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