曹榮凱，劉曉燕，朱匯龍，樂(lè)婷婷，李丹丹

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

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

曹榮凱，劉曉燕，朱匯龍，樂(lè)婷婷，李丹丹

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

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

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

0 引言

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

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

1 交互流建模語(yǔ)言（IFML）

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

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

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

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

1.1 交互流建模語(yǔ)言模型

IFML模型，如圖1所示，通過(guò)三個(gè)ViewContainers（ProductCategories，ProductOfCategory和ProductInformation）來(lái)表示視圖結(jié)構(gòu)，反映了三個(gè)屏幕中GUI的頂層組織。ViewContainers包括ViewComponents，它們表示接口的實(shí)際內(nèi)容。通用的 ViewComponent分類器可以被刻板化，以表示不同的專業(yè)，例如列表，對(duì)象細(xì)節(jié)，數(shù)據(jù)輸入表單等。在圖 1中，ProductCategories ViewContainer包含一個(gè) CategoryList的 ViewComponent，它代表屏幕內(nèi)容，在該例中為產(chǎn)品列表類別。ProductOfCategory還顯示所選類別的產(chǎn)品的元素列表，而ProductInformation顯示單個(gè)產(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)變化：在計(jì)算其內(nèi)容之后，引入 NavigationFlow的目標(biāo)ViewElement;根據(jù)接口的結(jié)構(gòu)，NavigationFlow的目標(biāo) ViewElement可能會(huì)保持視圖狀態(tài)或切換到視圖狀態(tài)。

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

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

圖1 IFML模型Fig.1 IFML model

2 模型驅(qū)動(dòng)開(kāi)發(fā)（MDD）

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

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

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

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

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

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

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

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

3 IFML的語(yǔ)義映射

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

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

4 結(jié)論

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

IFML的含義是通過(guò)將其映射到 PCN（可以用于模擬的Petri網(wǎng)的變體）來(lái)定義的。從PCN和平臺(tái)規(guī)范（網(wǎng)絡(luò)或移動(dòng)）可以轉(zhuǎn)換為執(zhí)行應(yīng)用程序原型，開(kāi)發(fā)過(guò)程由在線 IFMLEdit.org工具支持。 未來(lái)的工作將側(cè)重于通過(guò)先進(jìn)的移動(dòng)設(shè)計(jì)模式擴(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] 周穎, 鄭國(guó)梁, 李宣東. 基于MDA的UML模型轉(zhuǎn)換：從功能模型到現(xiàn)實(shí)模型[J]. 計(jì)算機(jī)應(yīng)用與軟件,2005 , 22 (11):1-4.

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

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

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