移動(dòng)應(yīng)用開(kāi)發(fā)框架(WADE-Mobile)

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

17、面控制包括頁(yè)面跳轉(zhuǎn)和參數(shù)綁定。數(shù)據(jù)總線移動(dòng)應(yīng)用開(kāi)發(fā)專(zhuān)題二 創(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 類(lèi)型 屬性 說(shuō)明 得到所包含的數(shù)據(jù)行數(shù)長(zhǎng)度 獲取一行數(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 語(yǔ)義的字符串。 將 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 類(lèi)型 屬性 方法 說(shuō)明 得到所包含的數(shù)據(jù)項(xiàng)長(zhǎ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)名稱來(lái)刪除數(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ù) 將對(duì)象包含的值填充到和項(xiàng)名稱 匹配的表單元素中 移動(dòng)應(yīng)用開(kāi)發(fā)專(zhuān)題二 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)頁(yè)面地址跳轉(zhuǎn) 子系統(tǒng)地址跳轉(zhuǎn) 頁(yè)面跳轉(zhuǎn) APP 殼 移動(dòng)應(yīng)用 APP 殼支持主流操作系統(tǒng)的各種智能手機(jī)和平板電腦基本功能，包括擴(kuò)展瀏覽器內(nèi)核、 撥號(hào)、短信、拍照和位置等。 環(huán)境要求 WADE-Mobile 對(duì)環(huán)境的要求可以分為開(kāi)發(fā)環(huán)境和運(yùn)行環(huán)境。開(kāi)發(fā)環(huán)境主要?dú)w程序員使用，而運(yùn)行 環(huán)境則是面向測(cè)試人員和最