移動Web應用程序的開發研究

摘 要: 本文主要介紹了如何快速開發面向多平臺的移動Web程序，降低學習成本、研發成本，以及加快開發進度。解決平臺之間移植復用問題，解決設計標準和編碼規范問題，以及更為敏捷的原型開發問題。

關鍵詞: 移動Web應用程序開發 模型 EMF

1.前言

移動平臺的程序開發是近年來的熱門，但是由于移動設備種類眾多，如何高效、快捷地開發基于移動平臺的應用程序就成為了一個問題。我們的主要目標是提高軟件生產力，這包括代碼的復用、設計的重用，以及針對用戶相似需求的基本模型元素的的提取。而面向對象，基于模板，基于模型和基于框架的開發方法為這些問題提供了很好的解決方案。

2.移動Web應用程序開發的基本方法

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

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

3.基于模型的移動Web應用程序的開發

模型是平臺無關的需求抽象。和平臺相關的代碼層面交給框架根據環境配置、用戶選項來自動生成，然后針對特定的領域和客戶要求，進行再加工和編碼優化。這解決了以下3個方面的問題。

3.1解決了平臺之間移植復用的問題。首先選取通用的數據和流程模型元素來構架系統，然后調用合適的代碼生成器來產生針對特定平臺的工程。

3.2解決了設計標準和編碼規范的問題。由于代碼框架是由生成器產生的，因此使用同樣的建模描述方式就可以保持代碼風格的一致性和代碼規范性。

3.3支持更為敏捷的原型開發，便于客戶理解系統。

基于模型的應用程序開發模式已經是業界的一個趨勢。

4.開發一個twitter客戶端的iphone應用程序實例

本文中使用的基于模型移動Web應用程序開發平臺為Tersus Studio windows版本。這是一個基于Eclipse的開源開發平臺。

4.1基礎設置

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

保存工程并運行(焦點需要在模型編輯器中)。瀏覽器將會自動啟動。默認情況為打開http://localhost:8080/twitter，我們在后面加上/iphone.html。也就是http://localhost:8080/twitter/iphone.html。這樣將會出現如下iPhone空白界面:(圖1)

4.2讀取Twitter數據

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

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

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

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

建模Download URL動作:從Miscellaneous部分拖拉一個Read Resource。從Text部分拖拉一個Binary to Text，從中刪除 trigger。從Download URL的trigger到Read Resource的trigger創建一個flow。從Read Resource的exit到Binary to Text的trigger創建一個flow。從Binary to Text的exit到Download URL的exit創建一個flow。

保存工程，切換回瀏覽器窗口，應該會自動更新?？梢钥吹揭粋€Alert窗口，顯示從Twitter獲取到的JSON格式數據。

4.3以iPhone的風格顯示數據

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

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

建模Get Top Trends:從Miscellaneous部分拖拉一個Parse JSON。從Download URL的exit到Parse JSON的trigger創建一個flow。從Data Types部分拖拉一個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創建一個flow。

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

為這個動作添加一個trigger和一個exit。設置動作為repetitive

從Top Trends DS/trends到Convert to Content Item的trigger創建一個flow。

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

建模“Convert to Content Item”:右鍵點擊Convert to Content Item的trigger并選擇Show in Repository Explorer。從Repository Explorer中拖拉trends數據結構到模型編輯器中的Convert to Content Item動作中。從Convert to Content Item的trigger到trends創建一個flow。同樣的:右鍵點擊Convert to Content Item的exit并選擇Show in Repository Explorer。從Repository Explorer拖拉Content Item到Convert to Content動作里。從Content Item到Convert to Content Item的exit創建一個flow。從Constants部分拖拉一個Text常量，設置數值為:Twitter48.png。從“Twitter48.png”constant到Content Item/Icon/創建一個flow。從trend/name到Content Item/Content Holder/Title Text/創建一個flow。從trend/url到Content Item/Content Holder/Content Text/創建一個flow。

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

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

5.結語

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

由于該系統是一個開源系統，開發者也可以把這個模型應用到Android、Blackbery、Symbian、Windows Phone、J2ME上去。這也正是我們所正在努力的方向。

參考文獻:

[1]弗林著.馬晶慧譯.移動應用的設計與開發.電子工業出版社.

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

[3]袁滿.移動計算.哈爾濱工業大學出版社.