一種基于Web和跨平臺移動應用的建模語言研究

曹榮凱，劉曉燕，朱匯龍，樂婷婷，李丹丹

（昆明理工大學 信息工程與自動化學院，云南 昆明 650500）

一種基于Web和跨平臺移動應用的建模語言研究

曹榮凱，劉曉燕，朱匯龍，樂婷婷，李丹丹

（昆明理工大學 信息工程與自動化學院，云南 昆明 650500）

移動應用的前端設計是一個涉及多門學科而且復雜的任務，這個任務在各方面都不是獨立的，并且要使用戶體驗完美地適應應用目標。然而，移動用戶交互的發展在很大程度上仍然是一個手工的工作，這導致了工作中會出現編碼錯誤，不一致和效率低下等問題。模型驅動開發（MDD）以文本或視覺語言代表高級應用程序，可用于通過模型到模型和模型到代碼轉換來自動生成最終產品。本文提出了一種基于IFML標準模型驅動的移動應用程序開發方法。而且描述了 IFMLEdit.org，一個開源的在線模型驅動開發（MDD）工具，用于從交互流建模語言（IFML）規范中指定和自動生成快速原型的Web和移動應用程序。

交互流建模語言；模型驅動開發；跨平臺移動應用開發

0 引言

在Web和移動開發中，廣泛的編碼平臺和設備需要能夠快速演進和適應多個版本。在移動領域，跨平臺工具允許創建和分發多個目標的應用程序，前端開發仍然是成本高昂且效率低下的工作，手工編碼是主要的開發方法，設計工具的重用性低，跨平臺的可移植性仍然不足。這就引入了一種開發工具，IFMLEdit.org允許開發人員編輯或導入 IFML模型，支持從IFML到PCN（Petri網的變體）的語義映射轉換，用于模型仿真和檢查; 最終，它執行Web和移動應用程序原型的模型到文本生成，可以快速演變成最終產品。

交互流建模語言(IFML)是軟件工程領域的一種標準化建模語言。IFML包括一組圖形符號，用于在軟件系統中創建用戶交互和前端行為的可視化模型。

1 交互流建模語言（IFML）

交互流建模語言(IFML)是被對象管理組織(OMG)定義的。IFML支持圖形用戶界面的獨立平臺，以供在桌面計算機、筆記本電腦、移動手機和平板電腦等系統上訪問或部署應用程序。

IFML描述了以下領域應用前端的用戶交互和控制行為：

HTML+基于 HTTP的 Web應用程序；移動應用程序；客戶端-服務器應用程序；桌面應用程序；嵌入式人機界面控制應用程序；多通道和上下文感知應用程序。

IFML模型由一個或多個視圖容器組成。例如，windows在傳統的桌面應用程序或 Web應用程序中，視圖容器可以包含視圖組件，它可以表示發布靜態或動態的內容，或者用于數據輸入的接口元素(例如輸入表單)。視圖組件可以有輸入和輸出參數，視圖容器和視圖組件可以與事件關聯，可以表示用戶交互或系統生成的事件。例如，從列表中選擇一個或多個項目或從表單提交輸入的事件。事件的影響由交互流連接表示，交互流表示用戶界面狀態的變化。事件還可以觸發一個動作，在更新用戶界面狀態之前執行該操作。例如，在數據庫實例上刪除或更新操作。元素之間的輸入輸出可以通過與導航流或數據流相關的參數綁定來指定。

1.1 交互流建模語言模型

IFML模型，如圖1所示，通過三個ViewContainers（ProductCategories，ProductOfCategory和ProductInformation）來表示視圖結構，反映了三個屏幕中GUI的頂層組織。ViewContainers包括ViewComponents，它們表示接口的實際內容。通用的 ViewComponent分類器可以被刻板化，以表示不同的專業，例如列表，對象細節，數據輸入表單等。在圖 1中，ProductCategories ViewContainer包含一個 CategoryList的 ViewComponent，它代表屏幕內容，在該例中為產品列表類別。ProductOfCategory還顯示所選類別的產品的元素列表，而ProductInformation顯示單個產品的詳細信息。

ViewContainers和 ViewComponents可以與Events相關聯，以表示它們支持用戶交互。事件的效果由NavigationFlow表示，該NavigationFlow將Event連接到受其影響的 ViewContainer或 View-Component。將 NavigationFlow 表示為箭頭，將與ViewElement相關聯的事件連接到目標 View-Element。NavigationFlow指定用戶界面的狀態變化：在計算其內容之后，引入 NavigationFlow的目標ViewElement;根據接口的結構，NavigationFlow的目標 ViewElement可能會保持視圖狀態或切換到視圖狀態。

在圖1中，與SelectCategory事件關聯的NavigationFlow表示為一個圓，將ViewComponent CategoryList與目標ViewComponent ProductList連接起來。當事件發生時，計算目標ViewComponent的內容，以顯示所選類別的產品列表；觸發SelectCategor事件將導致 ProductOfCategory ViewContainer的顯示，以及附帶的 ViewComponent替換 ProductCategory ViewContainer，那么該視圖將不可見。

ViewComponents可以有輸入和輸出參數。 例如，顯示對象細節的ViewComponent具有與要顯示的對象的標識符相對應的輸入參數；作為輸出參數的項目導出的列表是所選項目的標識符。在圖1中CategoryList和 ProductList之間的輸入輸出依賴表示為參數綁定：用于表示用戶選擇對象的 Selected-Category參數的值與ProductList ViewComponent請求的輸入參數Category的值相關聯。ViewContainers可以嵌入多個 ViewComponents和嵌套 ViewContainers，以指定更復雜的行為和不同組織的界面。

圖1 IFML模型Fig.1 IFML model

2 模型驅動開發（MDD）

應用程序通過文本或視覺語言和模型到模型以及模型到代碼的轉換來生成最終產品。MDD與跨平臺開發和可視化IDE不同之處在于它將開發工作從代碼轉移到模型，這種方法促進了早期原型的發展，并減輕了快速發展的應用程序所需要實現的工作量，規范了行業標準。

針對跨平臺移動應用程序的 MDD方法進行了調查：它們主要基于文本域規范語言（DSL），依靠特定的非正式建模語言相互轉換。MDD和域規范語言（DSL）是支持跨平臺開發的幾種解決方案的關鍵要素：MDD，DSL通過生成代碼或直接執行模型驅動自動轉換為工作軟件所需要的應用程序。

當遵循 MDD方法時，有可能會生成幾種不同的方案，這取決于在建立應用程序時要使用的抽象級別和要生成的代碼的抽象級別。我們將使用模型驅動架構（MDA）作為參考框架來說明不同的參考方案。MDA定義了三個不同抽象層次的模型：計算獨立模型（CIM），平臺獨立模型（PIM）和平臺特定模型（PSM）。這個驅動架構可以通過模型轉換，形成每個級別和下一級之間的一組映射。通常，每個CIM可以映射到不同的PIM，PIM又可以映射到不同的PSM，同時也可以遵循許多其他組合，例如跳過其中一個級別，和下一個級別映射。

（1）PIM到本機代碼（NC）。此選項表示，應用程序代碼是從描述應用程序的PIM生成的，通過跨平臺為每個目標平臺提供一個本地代碼生成器。

（2）PIM-to-PSM到NC。全局PIM被轉換成一組 PSM，用于特定的平臺，這些低級 PSM模型是相應平臺的代碼生成器的輸入。

（3）PSM到NC。它表示為每個開發平臺直接定義一個 PSM，然后從這些 PSM中生成應用程序代碼。

（4）PIM-to-Cross（CPC）到NC。此選項作為平臺獨立模型的輸入，并通過交叉平臺模式（如PhoneGap，AppCelerator Titanium和 Xamarin）生成跨平臺應用程序。

（5）PIM-to-FSM(框架規范模型)到CPC。對于PIM到CPC選項，這種方法引入了FSM，它收集了用于生成應用程序的跨平臺框架的信息。FSM是一個PSM，其中MDA術語中的平臺實際上是用于移動應用程序開發的跨平臺框架。

3 IFML的語義映射

IFML的含義是通過將交互流建模語言映射到個人通信網（PCN），PCN是Petri網的一個變體，是緊湊的模塊化的。IFML到PCN是通過模型到模型的轉換來生成應用程序的，在網絡中移動可視地呈現 PCN動態，顯示界面中的控制流和 ViewElements的狀態變化。PCN模擬可幫助開發人員識別指定應用程序中的不一致之處，例如無法訪問的狀態和競爭條件。開發人員可以通過模型到代碼的轉換來生成功能完整的Web和移動原型。瀏覽器的仿真模擬器允許開發人員測試當前的網絡或移動版本，并且在沒有互聯網連接的情況下，也無需安裝任何Web服務器。

該原型使用自動生成的樣本數據，以便填充UI，允許開發人員測試接口而不加載內容。對于其他的測試，開發人員可以自動從數據庫編輯，添加或刪除實體?？梢灾貜褪褂肐FMLEdit.org來評估不同的應用程序結構（例如單頁對多頁面）和交互方法，生成的原型可以下載和修復，以產生最終的應用程序。

4 結論

我們已經描述了一種用于從 IFML規范可以跨平臺自動生成Web和移動應用程序的MDD方法。

IFML的含義是通過將其映射到 PCN（可以用于模擬的Petri網的變體）來定義的。從PCN和平臺規范（網絡或移動）可以轉換為執行應用程序原型，開發過程由在線 IFMLEdit.org工具支持。 未來的工作將側重于通過先進的移動設計模式擴展生成代碼，以便內容緩存和預取可以在線使用。

[1] N. Koch, A. Knapp, G. Zhang, and H. Baumeister. Umlbased web engineering. In Web Engineering: Modelling and Implementing Web Applications. Springer, 2008.

[2] G′ omez, J., Cachero, C., Pastor, O., Pastor, O.: Conceptual modeling of deviceindependent web applications, pp. 26-39(2001).

[3] Schwabe, D., Rossi, G., Barbosa, S.D.J.: Systematic Hypermedia Application Design with OOHDM. In: Proc. Hypertext 1996,pp. 116-128 (1996).

[4] Marco Brambilla, Sara Comai, Piero Fraternali, Hypertext semantics for web applications, in: SEBD, 2002, pp. 73-86.

[5] Piero Fraternali, Sara Comai, Alessandro Bozzon, Giovanni Toffetti Carughi, Engineering rich internet applications with a model-driven approach, TWEB 4 (2) (2010).

[6] E. Umuhoza and M. Brambilla. Model driven development approaches for mobile applications: A survey. In 13th Conf.Mobile Web and Intelligent Information Systems, MobiWIS 2016., pages 93-107, 2016.

[7] B. Selic, “The pragmatics of model-driven development,”IEEE Softw., vol. 20, no. 5, pp. 19-25, Sep. 2003.

[8] 周穎, 鄭國梁, 李宣東. 基于MDA的UML模型轉換：從功能模型到現實模型[J]. 計算機應用與軟件,2005 , 22 (11):1-4.

[9] 侯金奎, 萬建成, 王帥強. 一種支持MDA的模型轉換方法[J]. 計算機工程. 2007(12).

Research on Modeling Language Based on Web and Cross - platform Mobile Application

CAO Rong-kai, LIU Xiao-yan, ZHU Hui-long, LE Ting-ting, LI Dan-dan
(School of Information Engineering and Automation, Kunming University of Science and Technology, Kunming, Yunnan, 650500)

Front-end design of mobile applications is a complex and multidisciplinary task, where many perspectives intersect and the user experience must be perfectly tailored to the application objective. However, development of mobile user interactions is still largely a manual task, which yields to high risks of errors, inconsistencies and inefficiencies. Model-driven development (MDD) stands for advanced applications in text or visual language and can be used to automatically generate the final product from model to model and model to transcoding. This paper propose a mobile application development method based on IFML standard model-driven. IFMLEdit.org, an open source online model-driven development (MDD) tools, used to specify and automatically generate rapid prototyping of Web and mobile applications from the interactive flow modeling language (IFML) specification.

Interactive flow modeling language; Model-driven development; Cross-platform mobile application development

TP311.5

A

10.3969/j.issn.1003-6970.2017.12.048

本文著錄格式：曹榮凱，劉曉燕，朱匯龍，等. 一種基于Web和跨平臺移動應用的建模語言研究[J]. 軟件，2017，38（12）：246-248

曹榮凱(1994-)，男，山東聊城人，昆明理工大學信息工程與自動化學院碩士研究生，研究方向為模型驅動方法、跨平臺移動應用開發。

劉曉燕(1964-)，女，云南昆明人，博士，昆明理工大學信息工程與自動化學院副教授、研究生導師，研究方向為模型驅動方法。