1、移動應用開發專題二創新周報總第172期框架為橋,天塹變通途移動應用開發框架(WADE-Mobile參與過早期J2EE WEB開發的同事一定記憶猶新,大多數程序員都剛剛從傳統的PB、Delphi等C/S模式應用開發中轉型過來,不再是單一的編程語言,也缺少統一的集成開發環境(IDE,滿眼盡是從前端(JSP、HTML、Javascript到后端(Java、HTTP、WSDL、DB數量眾多、紛繁復雜的全新面孔。混亂過一陣子后,開源和定制開發框架逐漸興起,技術門檻高、開發效率低的糟糕境況才得以好轉。今天,移動應用開發又將我們拉回到這似曾相識的境地。云計算、移動互聯網大勢所趨,HTML5、CSS3新技術閃

2、亮齊登場。Apple iOS、Google Android、Windows Phone、OMS(中國移動OPhone、Linux(中國聯通沃Phone等平臺之爭,Objective-C、Java、C/C+各種語言伴隨著陸。Apple xCode、Google Android Development Tools (ADT、中國移動Open Mobile System Development Tools (ODT、Microsoft Visual Studio 2008等各種開發環境跟著亂象紛呈。我們會不會再次回到混沌之初,期待盤古重開天地呢?答案是否定的,請看下面關于移動應用開發框架(WADE-

3、Mobile的詳細介紹。WADE移動應用開發框架(簡稱WADE-Mobile基于最新的WEB技術(HTML5、CSS3,并結合面向各種操作系統、移動設備的專用APP殼,可廣泛用于各種企業場景的移動應用開發,能夠有效降低技術門檻、提高開發效率、保證產品質量和保障信息安全。適用場景WADE-Mobile適用于公司內部各部門移動應用產品研發和項目實施,包括滿足運營商業務支撐系統向移動設備終端的延伸需求,以及面向更為廣闊的移動互聯網領域,開發公眾使用的移動應用產品。在運營商業務支撐系統方面,已知能夠適用的一些需求包括:中國移動集團規范(NGBOSS-CRM3多OP管理分冊G3版工作臺部分、廣東移動G3

4、版CRM手機客戶端解決方案、中國移動集團公司統一積分商城、上海移動WLAN登錄、江蘇電信掌上BOSS等。在移動互聯網方面,可以支持的移動設備操作系統包括:Apple iOS,開發使用Objective-C程序語言和xCode集成開發環境;Google Android,開發使用Java程序語言和Eclipse集成開發環境,包含Android Development Tools (ADT插件包;中國移動Open Mobile System (OMS,程序語言和開發環境同谷歌類似,不同的是插件包為OMS Development Tools (ODT;中國聯通沃PHONE,國產Linux操作系統,使用

5、C/C+程序語言和Microsoft Visual Studio 2008集成開發環境;其它還有Microsoft Windows Phone、BlackBerry OS、Nokia Symbian等,在此不再一一贅述。能做什么WADE-Mobile能為移動應用開發提供全方位支持。不但能夠輔助開發人員輕松完成前端的頁面開發、腳本編碼,以及后端的WEB服務;而且可以協助測試人員、配置管理人員等進行功能驗證和產品發布。如同工廠里的自動化流水線一般,直接產出可供立即上架的成品。一是提供模板,支持靜態頁面拼裝。讓我們先來看看WEB頁面開發的一般流程:美工提前設計界面效果圖;接著做切分,形成樣式、圖片等

6、備選資源;然后,程序員再用HTML和CSS正式開發頁面。整個過程步驟很多,非常繁瑣,顯得特別笨重。對參與其中的美工和程序員素質要求也相當高,美工在設計效果圖的時候不但要考慮用戶需求,還要照顧程序員的實現能力;程序員則要深入掌握HTML、CSS知識。大家都知道,招聘一個既懂需求又了解程序開發的美工很困難,而類似最新流行的HTML5和CSS3技術,要想讓普通程序員都快速學會并且熟練使用,也不是件容易的事情。WADE-Mobile可以在一般的開發過程中,省去美工這一角色,類似從前C/S架構應用一樣,程序員僅需選用合適的“控件”快速拼裝,即可完成頁面的開發。這里提到的“控件”主要是指模板(元素、組件和

7、布局和現成的CSS樣式文件。程序員通過簡單的拷貝和引入,就能做出實用、美觀并富含先進技術的高品質頁面。一個對WADE-Mobile基本熟練的程序員,幾乎可以做到在同客戶一對一互動需求的同時,完成頁面的開發。從需求到實現的過程中,讓客戶獲得“所說即所見、所見即所得”的完美體驗。二是提供API,支持動態腳本編碼。動態腳本編碼是在靜態頁面效果完成之后進行的開發步驟,開發內容包括離線交互、本地存儲、在線訪問和設備功能。WADE-Mobile提供完整的Javascript API 支持,程序員無需了解其中的技術實現細節,包括各種操作系統、設備機型差異等。這些API是面向開發人員的統一編程接口,后端封裝有

8、各種差異化實現,如針對iOS的Objective-C程序功能、針對Android的Java程序功能、調用后端云服務進行數據交互等。四是提供APP殼,支持產品在各種設備終端的兼容運行。APP殼是支撐前面提及API的實體,也是最終安裝到用戶個人設備上的移動應用,例如針對使用Android2.1操作系統的Motorola Milestone 手機,則是一個擴展名為APK的程序安裝包。對于APP殼,程序員不用關心,但是測試人員和最終用戶需要使用。使用WADE-Mobile開發的移動應用產品,實質上就是借助APP殼打開位于服務器端的WEB應用。開發APP殼,并廣泛支持各種移動設備終端,使得基于框架API

9、開發的移動應用產品都具備良好的兼容性,是WADE-Mobile作為開發框架所必備的基礎設施。五是提供云服務框架,支持WEB服務的快速封裝。接口封裝框架(MWJI隸屬于WADE基礎平臺產品,專門用來封裝業務支撐系統內部已有的業務邏輯代碼。通過配置即可封裝成為供外部訪問的WEB 服務,不光同時支持HTTP和WSDL方式,而且安全方面還能得到很好的保障。基于WADE-Mobile的移動應用同MWJI框架完全兼容,程序員通過快速封裝即可完成移動應用后端的WEB服務開發。另外,即將推出的云計算資源平臺(WADE-LC還可以提供原生的私有云計算支持,包括資源智能伸縮、應用自動部署、服務動態路由等特性。六是

10、提供集成開發環境,輔助開發、調試。集成開發環境(WADE-Studio為移動應用開發提供工具支持,包括開發工具、調試工作臺等。程序員可以借助向導,快速開發初步的移動應用功能部件,包括項目、功能、文件等。有經驗的程序員還可以封裝自己的可復用代碼,打包成為WADE-Studio的用戶模板,供自己二次使用或者分發給其他程序員開發使用。如何使用下面將扼要介紹WADE-Mobile的開發環境、關鍵步驟和使用方法。熟悉集成開發環境使用獲取到的WADE開發環境文件包,開發人員可以快速在本機搭建好開發環境。Eclipse、WADE-Studio插件集、工作區(Workspace、調試工作臺、Tomcat、JD

11、K、開發調試工作臺、集成運行工作臺等一應俱全。如果開發人員有自己個性的喜好,已經有了類似MyEclipse之類的開發環境,不用擔心被強制替換。因為WADE-Studio插件集可以同已有的其它Eclipse開發環境融為一體,同樣也能提供很好的開發支持。 Studio,基于著名的跨平臺自由集成開發環境(IDEEclipse,提供一組標準的Eclipse插件集。Workspace,開發工作區,也是Eclipse工作區,用于存放源代碼,包括示例項目Quickstart,其中包含單應用工作臺,用于開發調試時運行單一應用的功能,便于開發人員進行單元測試。服務器,開發環境文件包中自帶有Tomcat應用服務器

12、,正式環境可以采用商用產品,如Oracle Weblogic。多應用工作臺(Desktop、信息推送服務(IM都屬于基礎設施,集中存放在開發環境文件包的Base文件夾中,默認配置為隨同Tomcat應用服務器啟動時一并運行。另外,開發環境文件包還提供有開發所必須的Java Development Kit (JDK 1.6版本。開發靜態頁面具備簡單HTML語言基礎的開發人員,在熟悉了移動應用靜態頁面開發框架(ECL4M提供的元素、組件和布局之后,就可以像拼圖一般簡單快速地開發頁面。以下是包含框架模板沉淀積累在內的完整演進圖: 普通開發人員根據業務需求,使用模板拼裝初步的靜態頁面。這可能是一個反復的

13、過程,根據需求開發頁面,用頁面反過來印證需求,需求和頁面相互作用,最終達到需求和實現的完美統一,如果存在現有模板無法滿足的需求,那么就由框架研發人員修改/補充HTML模板和CSS樣式文件。在項目中,以業務功能開發、保證工程實施進度為第一要務,框架內容的修改第一時間應用于當前的頁面實現之中。待到主體工作完成之后,再抽象成為正式的可復用模板。倘若實際情況許可,建議完成從卓越到完美的最后工序即在最終的靜態頁面中,將修補的內容替換成為標準的模板復用。大大改善系統穩定性的同時,還能提高代碼的標準化程度,為接下來的維護及將來的升級改造提供極大的便利。編寫頁面動態腳本具備一定的Javascript腳本語言基

14、礎的開發人員,在了解移動應用動態腳本核心類庫(JCL4M提供的API之后,就可以駕輕就熟地開發那些原本技術門檻很高的功能特性。封裝現有業務邏輯代碼為WEB服務凡是了解已有業務邏輯代碼調用入口的開發人員,在熟悉WADE-MWJI的配置方法之后,就可以封裝完成移動應用需要的WEB服務開發。另外,WEB服務要想成為穩定性和性能都有保證的云服務,也只需要將系統部署到云計算資源平臺(WADE-LC上即可,開發人員無需關心。安裝APP殼,測試產品開發人員無需了解APP殼,但測試人員需要在安裝好APP殼的移動設備上,逐一驗證開發的業務功能。測試通過后方可發布移動應用產品的支持設備列表,并借助WADE-Mob

15、ile提供的產品發布工具制作最終的移動應用安裝包。接下來,就可以通告用戶下載或者登錄移動應用商店,獲取產品開始體驗使用。功能列表WADE-Mobile的功能分為移動應用靜態頁面開發框架(ECL4M、移動應用動態腳本核心類庫(JCL4M和APP殼三個部分,以及可能復用到的原有WADE基礎平臺產品部分模塊,如接口封裝(MWJI、云計算資源平臺(LC和集成開發環境(STUDIO等。下面重點介紹ECL4M、JCL4M和APP殼,限于篇幅,MWJI、LC和STUDIO部分將略過,有興趣的讀者可以關注WADE相關的其它知識分享。ECL4M移動應用靜態頁面開發框架(ECL4M功能細分為元素、組件和布局三個部

16、分。其中,元素包括按鈕、單行文本域、文本控制、文字對齊;組件包括組件外框、標題、表單、表格、載入、橫向排列、圖文排列、彈出提示;布局包括間距設定和內部間距設定。 上圖為參考UI元素、模板(注:ECL4M本身沒有固定的UI風格,只是提供任意類型UI的能力,包括但不限于Apple iOS、Google Android的標準UI風格。JCL4M移動應用動態腳本核心類庫(JCL4M功能細分為離線交互、在線訪問、本地存儲和頁面控制四個部分。其中,離線交互包括數據總線、Session、URL數據解析;在線訪問包括AJAX調用、HTTP服務調用;本地存儲包括Local存儲、WEB數據庫、SQL和異常處理;頁

17、面控制包括頁面跳轉和參數綁定。數據總線數據總線是指WADE服務消息架構(WSMA在Javascript中對應的數據結構,提供靈活的數據轉換功能。包含兩個重要的類:Wade.DatasetList和Wade.DataMap。移動應用開發專題二 創新周報總第 172 期 Wade.DatasetList(IDataset 接口的 Javascript 實現） 序號 1 2 3 4 5 6 7 8 9 length get(indexint，keystring each(fnfunction,scopeobject add(oobject remove(oobject removeAt(indexi

18、nt indexOf(oobject getCount( toString(false|true 方法 API 類型 屬性 說明 得到所包含的數據行數長度 獲取一行數據，如果設置了 key，并 且獲取的數據是 Wade.DataMap 格 式，則返回其中名稱為 key 的項。 遍歷數據 增加一行數據 刪除一行數據 刪除數據列表中的一列 獲取某列數據的行標 獲取所包含的數據行記錄數 生成字符串。 當參數為 true 時， 生成 舊的格式字符串；當參數為 false 或 不填時生成 JSON 語義的字符串。 將 IDataset 的 數 據 綁 定 到 10 idataset.bind(domna

19、me domname 元素里，可包含多行數據 Wade.DataMap(IData 接口的 Javascript 實現 序號 1 2 3 4 5 6 7 8 9 10 11 12 13 14 length get(namestring,defaultValuestring each(fnfunction,scopeobject eachKey(fnfunction,scopeobject put(namestring,valueobject remove(oobject removeKey(namestring getCount( contains(oobject containsKey(na

20、mestring clear( first( last( fillFormElements(formdomelement API 類型 屬性 方法 說明 得到所包含的數據項長度 獲取項數據,如果值為空并且設 置了默認值則返回默認值 遍歷所有數據項 遍歷所有數據項名稱 增加一項數據 刪除數據中的一項 根據項名稱來刪除數據中的一項 獲取所包含的數據項總數 判斷是否包含指定的數據項 判斷是否包含指定名稱的數據項 清空所有數據項 獲取第一項數據 獲取最后一項數據 將對象包含的值填充到和項名稱 匹配的表單元素中 移動應用開發專題二 創新周報總第 172 期 生成字符串。當參數為 true 時， 15 t

21、oString(false|true 生成舊的格式字符串；當參數為 false 或不填時，生成 JSON 語義 的字符串。 16 idata.bind(domname 將 IData 的數據綁定到 domname 元素里，單行數據 Session 和 Local 存儲 在 JavaScript 中操作 Session 或 Local 中的數據，這些數據在瀏覽器(含內核關閉時將失效。 Wade.mobile.storage 序號 1 2 3 4 5 6 7 8 9 10 API notSSsupport( add(key,value get(key remove(key clear( notLS

22、support( add_local(key,value get_local(key remove_local(key clear_local( 說明 判斷瀏覽器是否支持 Session Storage 在 Session Storage 里添加 key=value 的數據 在 Session Storage 里獲取 key 的數據 在 Session Storage 里刪除 key 的數據 清空 Session Storage 里的數據 判斷瀏覽器是否支持 Local Storage 在 Local Storage 里添加 key=value 的數據 在 Local Storage 里獲取

23、key 的數據 在 Local Storage 里刪除 key 的數據 清空 Local Storage 里的數據 URL 數據解析 在 JavaScript 中解析獲取 URL 里的參數數據。 Wade.mobile.params 序號 1 2 3 4 API get(key set(key,value remove(key load( 獲取 URL 里 key 對應的數據 在 URL 里設置 key=value 的數據 在 URL 里刪除 key 的數據 重新加載 URL 說明 AJAX 調用 AJAX，異步調用，局部刷新頁面，提供更好的交互體驗。 Wade.ajax AJAX 封裝包，其

24、中公開方法已經映射到 window 對象，可以直接調用方法。 序號 1 API/說明 ajaxDirect(page, listener, params, partids, israw,fn 移動應用開發專題二 使用 get 方式傳遞數據并異步調用服務器端方法。 2 ajaxSubmit(page,listener,params,partids,formIds,israw,fn 使用 post 方式傳遞數據并異步調用服務器端方法。 setAjaxLoading(true|false 創新周報總第 172 期 3 設置 ajax 時是否帶有載入效果，若不要載入效果，需要設置該參數，默認為 tru

25、e ajaxGet(page,listener,params,partids,israw,d,fn 使用 ajaxGet 來進行異步調用，大部分參數類似 ajaxDirect，其中， “d”參數為是否 4 調用默認的 ajax 回調處理函數，值應為 true|false。當設置了 partids 或者需要在回 調函數中取 ajaxDataset 時必須設置為 true 才能生效。 而如果只是使用簡單的 ajax 調用，則可以設置為 false，可有效提高效率。 ajaxPost(page,listener,params,partids,israw,postbody,d,fn 使用 ajax P

26、ost 異步調用 Post 自定義數據到服務器端。 其中， postBody 為自定義的 post 數據，必須是經過格式化的數據，可以使用 Wade.ajax.buildPostData(oobject和 5 Wade.ajax.buildFormData(formstring|dom來構造 postBody 數據。 “d” 參數為是否 調用默認的 AJAX 回調處理函數，值應為 true|false。當設置了 partids 或者需要在回 調函數中取 ajaxDataset 時必須設置為 true 才能生效。而如果只是使用簡單的 AJAX 調用，則設置為 false，可有效提高效率。 HTT

27、P 服務調用 在 JavaScript 里實現跨域調用 Http 服務。 Wade.mobile.httptran callHttpSvc:function(svcLogicName,param,callback,error，跨域調用 HTTP 服務。 WEB 數據庫 在 JavaScript 里實現離線數據庫功能。 Wade.mobile.db 序號 1 2 3 4 openDatabase( execute(sql,params,success,error query(sql,params,success,error trans_error(tx,e API 獲取 WADE 數據庫 SQL 語句執行(增刪改 SQL 語句執行(查詢） 獲取 WADE 數據庫操作的異常信息 說明 頁面跳轉 在 JavaScript 里實現頁面跳轉功能。 Wade.mobile.redirect 序號 1 API buildUrl(subsys,page,listener,params 說明 根據頁面信息拼裝地址 移動應用開發專題二 2 3 4 5 to(url toUrl(subsys,page,liste