樂(lè)婷婷 劉曉燕

摘 要：現(xiàn)有軟件應(yīng)用程序可分為移動(dòng)版本和Web版本兩大類，但這些應(yīng)用程序通常只能應(yīng)用于其中一個(gè)平臺(tái)（移動(dòng)或Web平臺(tái)），而不能同時(shí)適用于另一個(gè)平臺(tái)。目前的解決方案是開(kāi)發(fā)兩個(gè)不同程序，通過(guò)不同的設(shè)計(jì)方法和工具實(shí)現(xiàn)，但該方式需要雙重的開(kāi)發(fā)和維護(hù)成本。為解決該問(wèn)題，提出一個(gè)名為WebRatio Platform的綜合工具套裝軟件，用于Web和移動(dòng)應(yīng)用程序的模型驅(qū)動(dòng)開(kāi)發(fā)，能夠同時(shí)支持Web和移動(dòng)應(yīng)用程序設(shè)計(jì)。該工具是根據(jù)IFML（交互流建模語(yǔ)言）中OMG標(biāo)準(zhǔn)語(yǔ)言的兩個(gè)版本擴(kuò)展而來(lái)，具有模型檢查和全代碼生成功能，可生成即時(shí)發(fā)布的Web和跨平臺(tái)移動(dòng)應(yīng)用程序。

關(guān)鍵詞：模型驅(qū)動(dòng)開(kāi)發(fā)；IFML；跨平臺(tái)開(kāi)發(fā)；移動(dòng)應(yīng)用

DOI：10.11907/rjdk.172606

中圖分類號(hào)：TP319

文獻(xiàn)標(biāo)識(shí)碼：A 文章編號(hào)：1672-7800（2018）004-0107-04

Abstract：Existing software applications can be divided into the two categories of mobile and Web versions， however， these applications can only be applied to one of the platforms （ie， mobile or Web）， and can not be applied to the other platform. The current solution is to develop two different programs and employ different design methods and tools， but this will require double development and maintenance costs. To solve this problem， we propose a comprehensive tool suite called WebRatio Platform for model-driven development of web and mobile applications that supports both Web and mobile application design. The tool is made according to two extended versions of the OMG standard language called IFML （Interaction Flow Modeling Language）. The tool features model checking and full code generation that produces ready-to-publish Web and cross-platform mobile applications.

Key Words：model-driven development； IFML； cross-platform development； mobile application

0 引言

如今，已經(jīng)有大量研究將軟件工程技術(shù)與Web工程技術(shù)應(yīng)用于多個(gè)平臺(tái)，包括廣義上的Web、多平臺(tái)應(yīng)用程序接口和用戶交互規(guī)范，可以引用WAE、WebDSL[1]、WebML[2]、RUX-Model[6]，以及USIXML等建模語(yǔ)言[5]。商業(yè)供應(yīng)商目前提出用于Web開(kāi)發(fā)的工具，如Mendix（http：//www.mendix.com）和Outsystems（http：//www.outsystems.com），但這些工具尚未在軟件行業(yè)得到廣泛應(yīng)用。因此，如今前端開(kāi)發(fā)仍然代價(jià)昂貴且效率低下，手工編碼仍是主要開(kāi)發(fā)方法，但該方式具有重復(fù)利用率低、跨平臺(tái)可移植性不足的缺陷。

2014年，Object Management Group采用一種稱為交互流建模語(yǔ)言（Interaction Flow Modeling Language，簡(jiǎn)稱IFML[8]）的新標(biāo)準(zhǔn)，支持在各種臺(tái)式計(jì)算機(jī)、筆記本電腦、PDA、移動(dòng)和平板電腦等系統(tǒng)上訪問(wèn)或部署圖形用戶界面。IFML受WebML等啟發(fā)進(jìn)行了一些創(chuàng)新，包括：增加業(yè)務(wù)分析上的分離，完全禁止將業(yè)務(wù)邏輯集成到用戶交互規(guī)范中；定義一組非常通用的概念（語(yǔ)言核心），可應(yīng)用于任何類型的用戶界面；引入事件和異步交互概念；與UML[3]和BPMN[4]符號(hào)無(wú)縫集成。

本文描述了在Web和移動(dòng)領(lǐng)域?qū)崿F(xiàn)IFML的經(jīng)驗(yàn)[1]，該工具稱為WebRatio Platform[10]，是一種基于Eclipse的modeldriven[11]，以及基于Apache Cordova/PhoneGap框架的低代碼開(kāi)發(fā)平臺(tái)，能夠生成功能齊全的Web應(yīng)用程序與跨平臺(tái)移動(dòng)應(yīng)用程序。

1 IFML簡(jiǎn)介

在任何系統(tǒng)和技術(shù)平臺(tái)上訪問(wèn)或部署應(yīng)用程序，交互流建模語(yǔ)言（IFML）可支持圖形用戶界面的平臺(tái)獨(dú)立描述，描述重點(diǎn)是終端用戶感知到的應(yīng)用前端結(jié)構(gòu)和行為。關(guān)于交互流應(yīng)用程序方面，目前流行的是模型—視圖—控制器（MVC）模型。IFML的重點(diǎn)主要集中在視圖部分。IFML模型支持以下設(shè)計(jì)視角：①視圖結(jié)構(gòu)規(guī)范，由視圖容器定義組成；②視圖內(nèi)容規(guī)范，包括視圖組件的定義，即包含在視圖容器內(nèi)的內(nèi)容發(fā)布和數(shù)據(jù)輸入元素；③事件規(guī)范，包括可能影響用戶界面狀態(tài)的事件定義（來(lái)自用戶交互、應(yīng)用邏輯或外部代理）；④事件轉(zhuǎn)換規(guī)范，包括事件在用戶界面上的定義；⑤參數(shù)綁定規(guī)范，由模型元素之間輸入輸出依賴關(guān)系的定義組成。

此外，IFML可用外部模型進(jìn)行補(bǔ)充，用于連接到任何類型的內(nèi)容模型（代表數(shù)據(jù)庫(kù)、本體集、文件系統(tǒng)或其它資源）和動(dòng)態(tài)模型（描述應(yīng)用前端的業(yè)務(wù)邏輯）。

圖1顯示了IFML圖的簡(jiǎn)單示例，其中起始頁(yè)面顯示產(chǎn)品列表，并且在用戶選擇時(shí)，目標(biāo)頁(yè)面顯示所選產(chǎn)品的詳細(xì)信息。

2 IFML移動(dòng)擴(kuò)展

移動(dòng)應(yīng)用程序類似于小規(guī)模的全桌面應(yīng)用程序，其具有豐富的界面和更加復(fù)雜的交互模式，從而需要最大限度地利用可用空間。對(duì)于傳感器（如攝像頭和GPS）的移動(dòng)性和可用性方面，通過(guò)提供平臺(tái)無(wú)關(guān)建模語(yǔ)言（如IFML）的移動(dòng)設(shè)備擴(kuò)展功能，介紹能夠獲得的最佳性能。

這里介紹3大類移動(dòng)擴(kuò)展事件：①由用戶進(jìn)行交互產(chǎn)生的事件，如點(diǎn)擊和滑動(dòng)等；②移動(dòng)設(shè)備性能觸發(fā)事件，如傳感器、電池等；③由用戶對(duì)與設(shè)備組件相關(guān)的操作觸發(fā)的事件，例如拍攝照片、錄制視頻或使用麥克風(fēng)。

2.1 容器與組件

在本節(jié)中描述了添加的概念，為有移動(dòng)上下文特征的組件建模（見(jiàn)圖2）。一個(gè)名為“Screen”的新類被定義，用來(lái)表示移動(dòng)應(yīng)用程序的屏幕。由于屏幕是移動(dòng)應(yīng)用程序的主要容器，Screen擴(kuò)展了IFML標(biāo)準(zhǔn)的核心類ViewContainer。ToolBar類表示屏幕的特定子容器，它可能包含其它容器，并可能在其邊界上有一個(gè)事件列表。ToolBar擴(kuò)展了IFML標(biāo)準(zhǔn)的核心類ViewContainer。

移動(dòng)界面的典型特征是利用用于特定功能的預(yù)定義ViewContainers（包括通知區(qū)域和設(shè)置面板），使這些系統(tǒng)級(jí)容器提供空間經(jīng)濟(jì)性，并且實(shí)現(xiàn)常見(jiàn)功能的一致使用。MobileSystem原型已被定義，用來(lái)區(qū)分這些特殊的ViewContainers。MobileSystem定義的ViewContainer表示接口固定區(qū)域，由移動(dòng)操作系統(tǒng)或交叉應(yīng)用程序的另一個(gè)接口框架進(jìn)行管理。MobileComponent類表示特定的移動(dòng)視圖組件，例如按鈕、圖像、圖標(biāo)等。MobileComponent取決于用戶事件。MobileSystem構(gòu)造也可應(yīng)用于ViewComponents，以突出顯示該接口使用系統(tǒng)的內(nèi)置組件（見(jiàn)圖3）。

2.2 MobileContext

假定上下文在移動(dòng)應(yīng)用程序中具有特殊的相關(guān)性，它們必須利用所有可用的信息提供最有效的接口。因此，上下文必須收集所有維度信息描述用戶意圖，包括訪問(wèn)設(shè)備和通信網(wǎng)絡(luò)容量以及用戶周圍環(huán)境?，F(xiàn)已有一個(gè)新類MobileContext被定義，是擴(kuò)展Context得到的，用來(lái)表達(dá)移動(dòng)語(yǔ)境特征。

2.3 事件

在本節(jié)中使用IFML描述了為移動(dòng)上下文定義的新事件類型。首先，已經(jīng)定義了新類MobileUserEvent，允許對(duì)移動(dòng)用戶事件進(jìn)行建模。MobileUserEvent擴(kuò)展了IFML標(biāo)準(zhǔn)的核心類ViewElementEvent，這些類（DragDrop；Swipe；Pinch；Spread；Touch；LongPress；Scroll和Shake）擴(kuò)展了MobileUserEvent，用于對(duì)特定的移動(dòng)用戶事件進(jìn)行建模，每個(gè)類代表了與觸發(fā)其手勢(shì)相關(guān)的事件。

圖4顯示IFML模型的一個(gè)片段，用于列表管理。當(dāng)用戶在列表的一個(gè)元素上執(zhí)行LongPress手勢(shì)時(shí)，會(huì)彈出一個(gè)窗口，里面包含所選元素的信息，并允許用戶編輯或刪除該列表。

已經(jīng)定義一個(gè)由SystemEvent類擴(kuò)展的新類MobileSystemEvent表達(dá)移動(dòng)系統(tǒng)事件，以下類擴(kuò)展了用于特定系統(tǒng)事件的MobileSystemEvent類：

BatteryEvent：描述與電池狀態(tài)有關(guān)的事件。

StorageEvent：描述與存檔容量有關(guān)的事件。

NotificationEvent：對(duì)被操作系統(tǒng)處理的通用通知相關(guān)事件進(jìn)行分組。

ConnectionEvent：描述與設(shè)備連接狀態(tài)相關(guān)的事件。

SensorEvent：定義與設(shè)備傳感器相關(guān)的事件。SensorEvent類擴(kuò)展了ExternalEvent IFML核心類。最常用的傳感器是接近傳感器、運(yùn)動(dòng)傳感器、磁力計(jì)傳感器、陀螺儀和位置傳感器。類PositionEvent、MotionEvent、AccelerationEvent、ProximityEvent和RotationEvent擴(kuò)展了SensorEvent，以表示與特定傳感器相關(guān)的事件。

MobileActionEvent類被定義為對(duì)由移動(dòng)操作觸發(fā)的事件進(jìn)行建模。在移動(dòng)操作中，有與相機(jī)相關(guān)的操作，如拍攝動(dòng)作，以及與麥克風(fēng)有關(guān)的動(dòng)作。圖3顯示了該事件的例子，用戶使用照相設(shè)備拍攝照片，應(yīng)用程序會(huì)顯示與任何被拍攝產(chǎn)品相對(duì)應(yīng)的拍攝照片。照片拍好后會(huì)跳出一個(gè)屏幕，詢問(wèn)用戶是否要使用照片或重新拍攝。照片可將事件與拍攝動(dòng)作相關(guān)聯(lián)。

3 方法步驟

為解決Web與移動(dòng)平臺(tái)模型驅(qū)動(dòng)開(kāi)發(fā)的設(shè)計(jì)需求，本文提出了以下開(kāi)發(fā)過(guò)程，如圖5所示（本文目的不是將此工作與特定開(kāi)發(fā)方法如瀑布、螺旋、敏捷等相關(guān)聯(lián)，為清楚起見(jiàn)，只是按順序報(bào)告步驟）。

3.1 要求規(guī)范

雖然沒(méi)有強(qiáng)制要求收集和規(guī)范特定標(biāo)識(shí)與方法，但假設(shè)要求在定義階段就完成標(biāo)識(shí)，通常從一般描述開(kāi)始會(huì)指定其中一個(gè)用例的低級(jí)規(guī)范，如果在需求規(guī)范階段使用modeldriven方法，則在此階段也可以標(biāo)記會(huì)應(yīng)用在部署平臺(tái)上的具體符號(hào)。如應(yīng)用在Web平臺(tái)上標(biāo)記“W”，應(yīng)用在移動(dòng)平臺(tái)上則標(biāo)記“M”。

所提出的標(biāo)記允許在需求級(jí)別上標(biāo)識(shí)出所要生成的平臺(tái)，然后將該標(biāo)識(shí)傳遞到后續(xù)設(shè)計(jì)階段，并且可以通過(guò)平臺(tái)和特征追溯過(guò)程。

3.2 業(yè)務(wù)流程設(shè)計(jì)

對(duì)于在需求規(guī)范階段確定的每個(gè)用例，可以對(duì)其定義業(yè)務(wù)流程（或等效的業(yè)務(wù)級(jí)別規(guī)范）。同樣在該級(jí)別，模型元素可被標(biāo)記為Web或Mobile。

Web或Mobile應(yīng)用程序可以有完全不同的、相似的或完全相同的業(yè)務(wù)流程。本文方法支持共同點(diǎn)和變異性的引出，從而實(shí)現(xiàn)基于特定目標(biāo)平臺(tái)的自動(dòng)應(yīng)用程序模型生成。

3.3 獨(dú)立平臺(tái)設(shè)計(jì)

從要求和業(yè)務(wù)模型出發(fā)，可以從導(dǎo)航、業(yè)務(wù)邏輯和內(nèi)容模型中得出應(yīng)用特征。應(yīng)用程序的獨(dú)立平臺(tái)模型可以自動(dòng)從業(yè)務(wù)流程中導(dǎo)出，或者進(jìn)行手動(dòng)設(shè)計(jì)。導(dǎo)航描述了用戶交互、可視化組件和應(yīng)用程序中狀態(tài)的更改，業(yè)務(wù)邏輯描述了應(yīng)用程序主要邏輯、數(shù)據(jù)存儲(chǔ)和管理，內(nèi)容模型包含數(shù)據(jù)模式方面對(duì)持久層的描述。

IFML在該階段是理想的，因?yàn)槠浜w了所有需要的方面：導(dǎo)航規(guī)范、業(yè)務(wù)邏輯以及內(nèi)容模型連接。平臺(tái)獨(dú)立模型中的元素可以注釋為Web或Mobile，具體取決于它們是否與其中一個(gè)部署平臺(tái)相關(guān)。

3.4 代碼生成

可利用設(shè)計(jì)好的模型自動(dòng)生成應(yīng)用程序代碼。由于IFML是獨(dú)立于平臺(tái)的模型，可用于生成應(yīng)用程序的Web和Mobile功能。例如，可以使用WebRatio6工具實(shí)現(xiàn)，該工具能夠通過(guò)Java平臺(tái)生成應(yīng)用于工業(yè)的Web應(yīng)用程序，以及基于PhoneGap（Apache Cordova的商業(yè)分發(fā)）的跨平臺(tái)移動(dòng)應(yīng)用程序，進(jìn)行Android和iOS部署測(cè)試。

3.5 執(zhí)行與反饋

一旦生成了應(yīng)用程序代碼，則可在選擇的平臺(tái)上進(jìn)行部署，并作為測(cè)試和反饋收集的原型。對(duì)應(yīng)用程序執(zhí)行和建模都可提供有價(jià)值的反饋信息，用于從需求到業(yè)務(wù)模型以及應(yīng)用程序設(shè)計(jì)的整個(gè)過(guò)程，然后對(duì)所有階段進(jìn)行改進(jìn)，從而允許應(yīng)用程序快速、均勻地演進(jìn)，而不會(huì)忽視系統(tǒng)的高級(jí)總體規(guī)劃。

4 WebRatio

WebRatio平臺(tái)（www.webratio.com）是一款基于IFML模型驅(qū)動(dòng)的低代碼開(kāi)發(fā)工具，其集成了3個(gè)版本，分別集中在Web和移動(dòng)應(yīng)用程序設(shè)計(jì)和開(kāi)發(fā)以及業(yè)務(wù)流程分析上。WebRatio Platform正在實(shí)施IFML的Web擴(kuò)展版本，并專注于Web應(yīng)用程序。WebRatio Mobile Platform正在實(shí)施IFML的移動(dòng)擴(kuò)展版，并專注于移動(dòng)應(yīng)用。Mobile BPM Platform能立即創(chuàng)建可執(zhí)行進(jìn)程，在Web應(yīng)用程序中運(yùn)行。WebRatio提供3種集成環(huán)境：①建模環(huán)境支持IFML圖的規(guī)范，可供視圖描述，并用于信息設(shè)計(jì)的UML類圖（或ER圖），以及可選地與業(yè)務(wù)流程方面規(guī)范的BPMN圖集成；②用于支持定制組件實(shí)施的開(kāi)發(fā)環(huán)境，目的是允許基于垂直需求或本地功能建模語(yǔ)言的個(gè)性化擴(kuò)展，以及定制數(shù)據(jù)和系統(tǒng)集成要求；③布局模板和樣式設(shè)計(jì)環(huán)境，由于完全支持HTML 5，基于CSS和JavaScript樣式，可以實(shí)現(xiàn)最高級(jí)別的UI復(fù)雜度。

通過(guò)這些環(huán)境提供的輸入，WebRatio提供模型檢查、全代碼生成、group-work支持和生命周期管理功能。生成的代碼包括：自動(dòng)云部署的Java EE代碼，覆蓋WebRatio的Web版本中Web應(yīng)用程序的后端和前端，并準(zhǔn)備部署跨平臺(tái)的移動(dòng)應(yīng)用程序，基于開(kāi)源的Apache Cordova框架，在PhoneGap發(fā)行中為WebRatio的Mobile版本。目標(biāo)應(yīng)用程序的布局和樣式可以通過(guò)HTML5模板和CSS的定義進(jìn)行定義。默認(rèn)情況下，WebRatio Mobile即使在沒(méi)有連接互聯(lián)網(wǎng)的情況下，也可以構(gòu)建完整功能的應(yīng)用程序（offline模式）。它還提供了一種用于使移動(dòng)設(shè)備和后端之間讀/寫(xiě)數(shù)據(jù)同步的內(nèi)置解決方案。移動(dòng)應(yīng)用程序架構(gòu)是基于開(kāi)放和事實(shí)的標(biāo)準(zhǔn)庫(kù)，如Angular.js、JData和Ionic。

在部署中，移動(dòng)和Web應(yīng)用程序之間的集成和一致性是通過(guò)一種通用建模方法實(shí)現(xiàn)的。Web和移動(dòng)應(yīng)用程序可以被任何現(xiàn)有的具有RESTful API的后端系統(tǒng)集成，或者使用WebRatio Platform和基于時(shí)間的云計(jì)劃構(gòu)建自己的后端。生成的代碼庫(kù)是人類可讀與可維護(hù)的，甚至在WebRatio Platform之外。生成的代碼中沒(méi)有專有或封閉組件。

5 結(jié)語(yǔ)

為實(shí)現(xiàn)跨平臺(tái)的移動(dòng)應(yīng)用程序模型驅(qū)動(dòng)開(kāi)發(fā)，本文介紹了MDE工具WebRatio，也為Web與移動(dòng)應(yīng)用程序開(kāi)發(fā)提供了步驟和方法，從而減少了應(yīng)用程序開(kāi)發(fā)的工作量。未來(lái)計(jì)劃進(jìn)一步研究如何通過(guò)提出的方法改進(jìn)平臺(tái)無(wú)關(guān)與平臺(tái)依賴模型的集成和交叉授權(quán)。

參考文獻(xiàn)：

[1] GROENEWEGEN D M， HEMEL Z， KATS L C L， et al. WebDSL： a domain-specific language for dynamic web applications[J]. OOPSLA Companion， ACM，2008.

[2] CERI S， BRAMBILLA M， FRATERNALI P. The history of webml lessons learned from 10 years of model-driven development of web applications[J].Sociology of Health & Illness，2009，5600（3）：273-292.

[3] 柳毅，麻志毅，何嘯，等.一種從UML模型到可靠性分析模型的轉(zhuǎn)換方法[J].軟件學(xué)報(bào)，2010，21（2）：287-304.

[4] UMUHOZA E， BRAMBILLA M， RIPAMONTI D， et al. Anempirical study on simplification of business process modeling languages[C].ACM New York， NY， USA，2015：13-24.

[5] LIMBOURG Q， VANDERDONCKT J， MICHOTTE B， et al. USIXML： a language supporting multi-path development of user interfaces[C].Engineering Human Computer Interaction & Interactive Systems， Joint Working Conferences Ehci-dsvis，2004，3425：200-220.

[6] LINAJE M， PRECIADO J C， FIGUEROA F N. A method for model based design of rich internet application interactive user interfaces[C].In Proceedings of International Conference on Web Engineering，2007：226-241.

[7] SCHRAMM A， PREUSSNER A， HEINRICH M， et al. Rapid UI development for enterprise applications： combining manual and model-driven techniques[C].International Conference on Model Driven Engineering Languages & Systems，2010，6394：271-285.

[8] FRAJTK K， BURE M， JELNEK I. Transformation of IFML schemas to automated tests[C].ACM New York， NY， USA，2015：509-511.

[9] CONALLEN J. Building Web applications with UML[M]. Addison Wesley，2002.

[10] MARCOBRAMBILL A， PIEROFRATERNAL I. Large-scale model-driven engineering of web user interaction： The WebML and WebRatio experience [J].Science of Computer Programming，2012，89：71-87.

[11] 何嘯，麻志毅，馮超，等.一種針對(duì)模型轉(zhuǎn)換的圖形化建模語(yǔ)言[J].計(jì)算機(jī)研究與發(fā)展，2015，52（9）：2145-2162.

（責(zé)任編輯：黃 健）