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

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

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

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

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

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

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

交互流建模語言；模型驅(qū)動開發(fā)；跨平臺移動應(yīng)用開發(fā)

0 引言

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

交互流建模語言(IFML)是軟件工程領(lǐng)域的一種標(biāo)準(zhǔn)化建模語言。IFML包括一組圖形符號，用于在軟件系統(tǒng)中創(chuàng)建用戶交互和前端行為的可視化模型。

1 交互流建模語言（IFML）

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

IFML描述了以下領(lǐng)域應(yīng)用前端的用戶交互和控制行為：

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

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

1.1 交互流建模語言模型

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

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

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

ViewComponents可以有輸入和輸出參數(shù)。 例如，顯示對象細(xì)節(jié)的ViewComponent具有與要顯示的對象的標(biāo)識符相對應(yīng)的輸入?yún)?shù)；作為輸出參數(shù)的項(xiàng)目導(dǎo)出的列表是所選項(xiàng)目的標(biāo)識符。在圖1中CategoryList和 ProductList之間的輸入輸出依賴表示為參數(shù)綁定：用于表示用戶選擇對象的 Selected-Category參數(shù)的值與ProductList ViewComponent請求的輸入?yún)?shù)Category的值相關(guān)聯(lián)。ViewContainers可以嵌入多個 ViewComponents和嵌套 ViewContainers，以指定更復(fù)雜的行為和不同組織的界面。

圖1 IFML模型Fig.1 IFML model

2 模型驅(qū)動開發(fā)（MDD）

應(yīng)用程序通過文本或視覺語言和模型到模型以及模型到代碼的轉(zhuǎn)換來生成最終產(chǎn)品。MDD與跨平臺開發(fā)和可視化IDE不同之處在于它將開發(fā)工作從代碼轉(zhuǎn)移到模型，這種方法促進(jìn)了早期原型的發(fā)展，并減輕了快速發(fā)展的應(yīng)用程序所需要實(shí)現(xiàn)的工作量，規(guī)范了行業(yè)標(biāo)準(zhǔn)。

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

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

（1）PIM到本機(jī)代碼（NC）。此選項(xiàng)表示，應(yīng)用程序代碼是從描述應(yīng)用程序的PIM生成的，通過跨平臺為每個目標(biāo)平臺提供一個本地代碼生成器。

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

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

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

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

3 IFML的語義映射

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

該原型使用自動生成的樣本數(shù)據(jù)，以便填充UI，允許開發(fā)人員測試接口而不加載內(nèi)容。對于其他的測試，開發(fā)人員可以自動從數(shù)據(jù)庫編輯，添加或刪除實(shí)體?？梢灾貜?fù)使用IFMLEdit.org來評估不同的應(yīng)用程序結(jié)構(gòu)（例如單頁對多頁面）和交互方法，生成的原型可以下載和修復(fù)，以產(chǎn)生最終的應(yīng)用程序。

4 結(jié)論

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

IFML的含義是通過將其映射到 PCN（可以用于模擬的Petri網(wǎng)的變體）來定義的。從PCN和平臺規(guī)范（網(wǎng)絡(luò)或移動）可以轉(zhuǎn)換為執(zhí)行應(yīng)用程序原型，開發(fā)過程由在線 IFMLEdit.org工具支持。 未來的工作將側(cè)重于通過先進(jìn)的移動設(shè)計模式擴(kuò)展生成代碼，以便內(nèi)容緩存和預(yù)取可以在線使用。

[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模型轉(zhuǎn)換：從功能模型到現(xiàn)實(shí)模型[J]. 計算機(jī)應(yīng)用與軟件,2005 , 22 (11):1-4.

[9] 侯金奎, 萬建成, 王帥強(qiáng). 一種支持MDA的模型轉(zhuǎn)換方法[J]. 計算機(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和跨平臺移動應(yīng)用的建模語言研究[J]. 軟件，2017，38（12）：246-248

曹榮凱(1994-)，男，山東聊城人，昆明理工大學(xué)信息工程與自動化學(xué)院碩士研究生，研究方向?yàn)槟Ｐ万?qū)動方法、跨平臺移動應(yīng)用開發(fā)。

劉曉燕(1964-)，女，云南昆明人，博士，昆明理工大學(xué)信息工程與自動化學(xué)院副教授、研究生導(dǎo)師，研究方向?yàn)槟Ｐ万?qū)動方法。