移動(dòng)Web應(yīng)用程序的開發(fā)研究

摘 要: 本文主要介紹了如何快速開發(fā)面向多平臺(tái)的移動(dòng)Web程序，降低學(xué)習(xí)成本、研發(fā)成本，以及加快開發(fā)進(jìn)度。解決平臺(tái)之間移植復(fù)用問題，解決設(shè)計(jì)標(biāo)準(zhǔn)和編碼規(guī)范問題，以及更為敏捷的原型開發(fā)問題。

關(guān)鍵詞: 移動(dòng)Web應(yīng)用程序開發(fā) 模型 EMF

1.前言

移動(dòng)平臺(tái)的程序開發(fā)是近年來的熱門，但是由于移動(dòng)設(shè)備種類眾多，如何高效、快捷地開發(fā)基于移動(dòng)平臺(tái)的應(yīng)用程序就成為了一個(gè)問題。我們的主要目標(biāo)是提高軟件生產(chǎn)力，這包括代碼的復(fù)用、設(shè)計(jì)的重用，以及針對(duì)用戶相似需求的基本模型元素的的提取。而面向?qū)ο螅谀０澹谀Ｐ秃突诳蚣艿拈_發(fā)方法為這些問題提供了很好的解決方案。

2.移動(dòng)Web應(yīng)用程序開發(fā)的基本方法

由于移動(dòng)設(shè)備的種類眾多，不同的移動(dòng)設(shè)備支持不同的編程語言。有些支持WAP和WML，有些則支持HTML或者受限制的HTML，還有些同時(shí)支持以上兩種或者其他不同的語言。為了支持所有類型的移動(dòng)設(shè)備，開發(fā)人員不得不為每一種語言創(chuàng)建不同的應(yīng)用程序。

這就對(duì)移動(dòng)應(yīng)用程序的開發(fā)者提出了較高的要求。像基于模板和框架等開發(fā)方法也比較好地解決了一些移動(dòng)設(shè)備的支持問題。但是當(dāng)開發(fā)者具體面對(duì)某一類移動(dòng)設(shè)備開發(fā)具體移動(dòng)應(yīng)用程序時(shí)，開發(fā)者很難擺脫對(duì)具體設(shè)備的依賴，也就是說為了開發(fā)某一個(gè)Web移動(dòng)應(yīng)用程序，開發(fā)者可能不得不購買相關(guān)設(shè)備來進(jìn)行開發(fā)研究，這對(duì)開發(fā)者來說也成為了一種負(fù)擔(dān)。本文所研究的基于模型的移動(dòng)Web應(yīng)用程序的開發(fā)方法，只需要PC和瀏覽器即可，非常方便。

3.基于模型的移動(dòng)Web應(yīng)用程序的開發(fā)

模型是平臺(tái)無關(guān)的需求抽象。和平臺(tái)相關(guān)的代碼層面交給框架根據(jù)環(huán)境配置、用戶選項(xiàng)來自動(dòng)生成，然后針對(duì)特定的領(lǐng)域和客戶要求，進(jìn)行再加工和編碼優(yōu)化。這解決了以下3個(gè)方面的問題。

3.1解決了平臺(tái)之間移植復(fù)用的問題。首先選取通用的數(shù)據(jù)和流程模型元素來構(gòu)架系統(tǒng)，然后調(diào)用合適的代碼生成器來產(chǎn)生針對(duì)特定平臺(tái)的工程。

3.2解決了設(shè)計(jì)標(biāo)準(zhǔn)和編碼規(guī)范的問題。由于代碼框架是由生成器產(chǎn)生的，因此使用同樣的建模描述方式就可以保持代碼風(fēng)格的一致性和代碼規(guī)范性。

3.3支持更為敏捷的原型開發(fā)，便于客戶理解系統(tǒng)。

基于模型的應(yīng)用程序開發(fā)模式已經(jīng)是業(yè)界的一個(gè)趨勢。

4.開發(fā)一個(gè)twitter客戶端的iphone應(yīng)用程序?qū)嵗?/p>

本文中使用的基于模型移動(dòng)Web應(yīng)用程序開發(fā)平臺(tái)為Tersus Studio windows版本。這是一個(gè)基于Eclipse的開源開發(fā)平臺(tái)。

4.1基礎(chǔ)設(shè)置

選擇選擇文件→新建→Tersus Project，輸入Project name:Twitter，選擇Template:iPhone Application，點(diǎn)擊完成按鈕。在模型編輯器(即中間的主窗口)中，雙擊放大到/Body。右鍵點(diǎn)擊Body→Add Element:Scroll Pane.名字修改為:Top Trends Screen。這樣我們就創(chuàng)建了一個(gè)包含一個(gè)列表控件的帶滾動(dòng)條的。

保存工程并運(yùn)行(焦點(diǎn)需要在模型編輯器中)。瀏覽器將會(huì)自動(dòng)啟動(dòng)。默認(rèn)情況為打開http://localhost:8080/twitter，我們?cè)诤竺婕由?iphone.html。也就是http://localhost:8080/twitter/iphone.html。這樣將會(huì)出現(xiàn)如下iPhone空白界面:(圖1)

4.2讀取Twitter數(shù)據(jù)

在模型編輯器中，放大到/Body/Top Trends Screen/List。從左邊palette窗口的Basic部分拖動(dòng)一個(gè)Action到Top Trends Screen.取名為Init。

建模Top Trends Init動(dòng)作:放大到Init。從palette窗口的Basic部分拖拉一個(gè)Service，取名Get Top Trends，添加一個(gè)exit(灰色小箭頭)到Get Top Trends。

從Display Actions部分拖拉一個(gè)Alert，從Get Top Trends的exit到Alert trigger(綠色小箭頭)創(chuàng)建一個(gè)flow.Init模型。

建模Get Top Trends服務(wù):從Constants部分拖拉一個(gè)Text常量，數(shù)值為“http://search.twitter.com/trends.json”。名字改為Trends URL。從Basic部分拖拉一個(gè)Action，取名Download URL。給這個(gè)action添加一個(gè)trigger和一個(gè)exit。從Trends URL constant到Download URL的trigger創(chuàng)建一個(gè)flow。從Download URL的exit到Get Top Trends的exit創(chuàng)建一個(gè)flow。

建模Download URL動(dòng)作:從Miscellaneous部分拖拉一個(gè)Read Resource。從Text部分拖拉一個(gè)Binary to Text，從中刪除 trigger。從Download URL的trigger到Read Resource的trigger創(chuàng)建一個(gè)flow。從Read Resource的exit到Binary to Text的trigger創(chuàng)建一個(gè)flow。從Binary to Text的exit到Download URL的exit創(chuàng)建一個(gè)flow。

保存工程，切換回瀏覽器窗口，應(yīng)該會(huì)自動(dòng)更新?？梢钥吹揭粋€(gè)Alert窗口，顯示從Twitter獲取到的JSON格式數(shù)據(jù)。

4.3以iPhone的風(fēng)格顯示數(shù)據(jù)

在模型編輯器中，放大到/Body/Top Trends Screen/List。右鍵點(diǎn)擊List→Add Element:Content Item。

建模Init動(dòng)作:放大到Init Action。給Get Top Trends添加一個(gè)exit。命名為Parsed Data。設(shè)置其Reptetive屬性。(選中exit對(duì)象，點(diǎn)擊右鍵)右鍵點(diǎn)擊Init→Add Ancestor Reference:選擇Top Trends Screen。從Get Top Trends的repetitive exit(重疊的灰色小箭頭)到Content Item(Scrollable Pane/List/Content Item)元素的exit創(chuàng)建一個(gè)flow。刪除到Alert的flow。刪除Alert元素。

建模Get Top Trends:從Miscellaneous部分拖拉一個(gè)Parse JSON。從Download URL的exit到Parse JSON的trigger創(chuàng)建一個(gè)flow。從Data Types部分拖拉一個(gè)Data Structre。取名:Top Trends DS。

從同樣的部分拖拉下面這些元素到Top Trends DS并如下命名:

as_of:類型:Text。

trends:類型:Data Dtructure;Reptetive。

name:類型:Text。

url:類型:Text。

從Parse JSON的 exit到Top Trends DS創(chuàng)建一個(gè)flow。

從Basic部分拖拉一個(gè)Action。取名Convert to Content Item。

為這個(gè)動(dòng)作添加一個(gè)trigger和一個(gè)exit。設(shè)置動(dòng)作為repetitive

從Top Trends DS/trends到Convert to Content Item的trigger創(chuàng)建一個(gè)flow。

從Convert to Content Item的exit到Get Top Trends的repetitive exit(Prased Data)創(chuàng)建一個(gè)flow。

建模“Convert to Content Item”:右鍵點(diǎn)擊Convert to Content Item的trigger并選擇Show in Repository Explorer。從Repository Explorer中拖拉trends數(shù)據(jù)結(jié)構(gòu)到模型編輯器中的Convert to Content Item動(dòng)作中。從Convert to Content Item的trigger到trends創(chuàng)建一個(gè)flow。同樣的:右鍵點(diǎn)擊Convert to Content Item的exit并選擇Show in Repository Explorer。從Repository Explorer拖拉Content Item到Convert to Content動(dòng)作里。從Content Item到Convert to Content Item的exit創(chuàng)建一個(gè)flow。從Constants部分拖拉一個(gè)Text常量，設(shè)置數(shù)值為:Twitter48.png。從“Twitter48.png”constant到Content Item/Icon/創(chuàng)建一個(gè)flow。從trend/name到Content Item/Content Holder/Title Text/創(chuàng)建一個(gè)flow。從trend/url到Content Item/Content Holder/Content Text/創(chuàng)建一個(gè)flow。

添加圖像:切換到Navigator view(Window→Show View→Navigator)。

下載圖片“http://downloads.tersus.com/Twitter48.png”并保存到/Twitter/Web中。切換回瀏覽器，如果您的所在地能夠訪問twitter網(wǎng)站，您將看到如下頁面:

5.結(jié)語

以上的過程相對(duì)于普通的開發(fā)過程非常簡單、高效，整個(gè)開發(fā)過程沒有書寫一行代碼，只是通過鼠標(biāo)的操作就完成了開發(fā)過程，建立了如圖3的開發(fā)模型。

由于該系統(tǒng)是一個(gè)開源系統(tǒng)，開發(fā)者也可以把這個(gè)模型應(yīng)用到Android、Blackbery、Symbian、Windows Phone、J2ME上去。這也正是我們所正在努力的方向。

參考文獻(xiàn):

[1]弗林著.馬晶慧譯.移動(dòng)應(yīng)用的設(shè)計(jì)與開發(fā).電子工業(yè)出版社.

[2]連洪武.Eclipse Web開發(fā)從入門到精通.清華大學(xué)出版社.

[3]袁滿.移動(dòng)計(jì)算.哈爾濱工業(yè)大學(xué)出版社.