基于IFML的跨平臺移動應用程序模型驅動開發

樂婷婷 劉曉燕

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

關鍵詞：模型驅動開發；IFML；跨平臺開發；移動應用

DOI：10.11907/rjdk.172606

中圖分類號：TP319

文獻標識碼：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 引言

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

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

本文描述了在Web和移動領域實現IFML的經驗[1]，該工具稱為WebRatio Platform[10]，是一種基于Eclipse的modeldriven[11]，以及基于Apache Cordova/PhoneGap框架的低代碼開發平臺，能夠生成功能齊全的Web應用程序與跨平臺移動應用程序。

1 IFML簡介

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

此外，IFML可用外部模型進行補充，用于連接到任何類型的內容模型（代表數據庫、本體集、文件系統或其它資源）和動態模型（描述應用前端的業務邏輯）。

圖1顯示了IFML圖的簡單示例，其中起始頁面顯示產品列表，并且在用戶選擇時，目標頁面顯示所選產品的詳細信息。

2 IFML移動擴展

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

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

2.1 容器與組件

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

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

2.2 MobileContext

假定上下文在移動應用程序中具有特殊的相關性，它們必須利用所有可用的信息提供最有效的接口。因此，上下文必須收集所有維度信息描述用戶意圖，包括訪問設備和通信網絡容量以及用戶周圍環境。現已有一個新類MobileContext被定義，是擴展Context得到的，用來表達移動語境特征。

2.3 事件

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

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

已經定義一個由SystemEvent類擴展的新類MobileSystemEvent表達移動系統事件，以下類擴展了用于特定系統事件的MobileSystemEvent類：

BatteryEvent：描述與電池狀態有關的事件。

StorageEvent：描述與存檔容量有關的事件。

NotificationEvent：對被操作系統處理的通用通知相關事件進行分組。

ConnectionEvent：描述與設備連接狀態相關的事件。

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

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

3 方法步驟

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

3.1 要求規范

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

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

3.2 業務流程設計

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

Web或Mobile應用程序可以有完全不同的、相似的或完全相同的業務流程。本文方法支持共同點和變異性的引出，從而實現基于特定目標平臺的自動應用程序模型生成。

3.3 獨立平臺設計

從要求和業務模型出發，可以從導航、業務邏輯和內容模型中得出應用特征。應用程序的獨立平臺模型可以自動從業務流程中導出，或者進行手動設計。導航描述了用戶交互、可視化組件和應用程序中狀態的更改，業務邏輯描述了應用程序主要邏輯、數據存儲和管理，內容模型包含數據模式方面對持久層的描述。

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

3.4 代碼生成

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

3.5 執行與反饋

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

4 WebRatio

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

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

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

5 結語

為實現跨平臺的移動應用程序模型驅動開發，本文介紹了MDE工具WebRatio，也為Web與移動應用程序開發提供了步驟和方法，從而減少了應用程序開發的工作量。未來計劃進一步研究如何通過提出的方法改進平臺無關與平臺依賴模型的集成和交叉授權。

參考文獻：

[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模型到可靠性分析模型的轉換方法[J].軟件學報，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] 何嘯，麻志毅，馮超，等.一種針對模型轉換的圖形化建模語言[J].計算機研究與發展，2015，52（9）：2145-2162.

（責任編輯：黃 健）