基于IFML的跨平臺移動應(yīng)用程序模型驅(qū)動開發(fā)

樂婷婷 劉曉燕

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

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

DOI：10.11907/rjdk.172606

中圖分類號：TP319

文獻(xiàn)標(biāo)識碼：A 文章編號：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)用于多個平臺，包括廣義上的Web、多平臺應(yīng)用程序接口和用戶交互規(guī)范，可以引用WAE、WebDSL[1]、WebML[2]、RUX-Model[6]，以及USIXML等建模語言[5]。商業(yè)供應(yīng)商目前提出用于Web開發(fā)的工具，如Mendix（http：//www.mendix.com）和Outsystems（http：//www.outsystems.com），但這些工具尚未在軟件行業(yè)得到廣泛應(yīng)用。因此，如今前端開發(fā)仍然代價昂貴且效率低下，手工編碼仍是主要開發(fā)方法，但該方式具有重復(fù)利用率低、跨平臺可移植性不足的缺陷。

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

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

1 IFML簡介

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

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

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

2 IFML移動擴展

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

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

2.1 容器與組件

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

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

2.2 MobileContext

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

2.3 事件

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

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

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

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

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

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

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

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

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

3 方法步驟

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

3.1 要求規(guī)范

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

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

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

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

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

3.3 獨立平臺設(shè)計

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

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

3.4 代碼生成

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

3.5 執(zhí)行與反饋

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

4 WebRatio

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

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

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

5 結(jié)語

為實現(xiàn)跨平臺的移動應(yīng)用程序模型驅(qū)動開發(fā)，本文介紹了MDE工具WebRatio，也為Web與移動應(yīng)用程序開發(fā)提供了步驟和方法，從而減少了應(yīng)用程序開發(fā)的工作量。未來計劃進(jìn)一步研究如何通過提出的方法改進(jìn)平臺無關(guān)與平臺依賴模型的集成和交叉授權(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é)報，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] 何嘯，麻志毅，馮超，等.一種針對模型轉(zhuǎn)換的圖形化建模語言[J].計算機研究與發(fā)展，2015，52（9）：2145-2162.

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