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

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

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

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

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

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

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

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

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

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

11、K、開發(fā)調(diào)試工作臺(tái)、集成運(yùn)行工作臺(tái)等一應(yīng)俱全。如果開發(fā)人員有自己個(gè)性的喜好,已經(jīng)有了類似MyEclipse之類的開發(fā)環(huán)境,不用擔(dān)心被強(qiáng)制替換。因?yàn)閃ADE-Studio插件集可以同已有的其它Eclipse開發(fā)環(huán)境融為一體,同樣也能提供很好的開發(fā)支持。 Studio,基于著名的跨平臺(tái)自由集成開發(fā)環(huán)境(IDEEclipse,提供一組標(biāo)準(zhǔn)的Eclipse插件集。Workspace,開發(fā)工作區(qū),也是Eclipse工作區(qū),用于存放源代碼,包括示例項(xiàng)目Quickstart,其中包含單應(yīng)用工作臺(tái),用于開發(fā)調(diào)試時(shí)運(yùn)行單一應(yīng)用的功能,便于開發(fā)人員進(jìn)行單元測試。服務(wù)器,開發(fā)環(huán)境文件包中自帶有Tomcat應(yīng)用服務(wù)器

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

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

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

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

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

17、面控制包括頁面跳轉(zhuǎn)和參數(shù)綁定。數(shù)據(jù)總線移動(dòng)應(yīng)用開發(fā)專題二 創(chuàng)新周報(bào)總第 172 期 Wade.DatasetList(IDataset 接口的 Javascript 實(shí)現(xiàn)） 序號(hào) 1 2 3 4 5 6 7 8 9 length get(indexint，keystring each(fnfunction,scopeobject add(oobject remove(oobject removeAt(indexint indexOf(oobject getCount( toString(false|true 方法 API 類型 屬性 說明 得到所包含的數(shù)據(jù)行數(shù)長度 獲取一行數(shù)據(jù)，如果設(shè)置了 k

18、ey，并 且獲取的數(shù)據(jù)是 Wade.DataMap 格 式，則返回其中名稱為 key 的項(xiàng)。 遍歷數(shù)據(jù) 增加一行數(shù)據(jù) 刪除一行數(shù)據(jù) 刪除數(shù)據(jù)列表中的一列 獲取某列數(shù)據(jù)的行標(biāo) 獲取所包含的數(shù)據(jù)行記錄數(shù) 生成字符串。 當(dāng)參數(shù)為 true 時(shí)， 生成 舊的格式字符串；當(dāng)參數(shù)為 false 或 不填時(shí)生成 JSON 語義的字符串。 將 IDataset 的 數(shù) 據(jù) 綁 定 到 10 idataset.bind(domname domname 元素里，可包含多行數(shù)據(jù) Wade.DataMap(IData 接口的 Javascript 實(shí)現(xiàn) 序號(hào) 1 2 3 4 5 6 7 8 9 10 11 12 13

19、 14 length get(namestring,defaultValuestring each(fnfunction,scopeobject eachKey(fnfunction,scopeobject put(namestring,valueobject remove(oobject removeKey(namestring getCount( contains(oobject containsKey(namestring clear( first( last( fillFormElements(formdomelement API 類型 屬性 方法 說明 得到所包含的數(shù)據(jù)項(xiàng)長度 獲取項(xiàng)

20、數(shù)據(jù),如果值為空并且設(shè) 置了默認(rèn)值則返回默認(rèn)值 遍歷所有數(shù)據(jù)項(xiàng) 遍歷所有數(shù)據(jù)項(xiàng)名稱 增加一項(xiàng)數(shù)據(jù) 刪除數(shù)據(jù)中的一項(xiàng) 根據(jù)項(xiàng)名稱來刪除數(shù)據(jù)中的一項(xiàng) 獲取所包含的數(shù)據(jù)項(xiàng)總數(shù) 判斷是否包含指定的數(shù)據(jù)項(xiàng) 判斷是否包含指定名稱的數(shù)據(jù)項(xiàng) 清空所有數(shù)據(jù)項(xiàng) 獲取第一項(xiàng)數(shù)據(jù) 獲取最后一項(xiàng)數(shù)據(jù) 將對象包含的值填充到和項(xiàng)名稱 匹配的表單元素中 移動(dòng)應(yīng)用開發(fā)專題二 2 3 4 5 to(url toUrl(subsys,page,listener,params toSysUrl(subsys,url toPage(subsys,page,listener,params 地址跳轉(zhuǎn) 創(chuàng)新周報(bào)總第 172 期 子系統(tǒng)頁面地址跳轉(zhuǎn) 子系統(tǒng)地址跳轉(zhuǎn) 頁面跳轉(zhuǎn) APP 殼 移動(dòng)應(yīng)用 APP 殼支持主流操作系統(tǒng)的各種智能手機(jī)和平板電腦基本功能，包括擴(kuò)展瀏覽器內(nèi)核、 撥號(hào)、短信、拍照和位置等。 環(huán)境要求 WADE-Mobile 對環(huán)境的要求可以分為開發(fā)環(huán)境和運(yùn)行環(huán)境。開發(fā)環(huán)境主要?dú)w程序員使用，而運(yùn)行 環(huán)境則是面向測試人員和最