基于IFML自動(dòng)生成Web和移動(dòng)應(yīng)用程序的研究

朱匯龍，劉曉燕，張雪梅，李丹丹，曹榮凱

（1. 昆明理工大學(xué)信息工程與自動(dòng)化學(xué)院計(jì)算機(jī)技術(shù)，云南 昆明 650500；2. 山東省商河縣胡集中學(xué)，山東 濟(jì)南 251600）

基于IFML自動(dòng)生成Web和移動(dòng)應(yīng)用程序的研究

朱匯龍1，劉曉燕1，張雪梅2，李丹丹1，曹榮凱1

（1. 昆明理工大學(xué)信息工程與自動(dòng)化學(xué)院計(jì)算機(jī)技術(shù)，云南 昆明 650500；2. 山東省商河縣胡集中學(xué)，山東 濟(jì)南 251600）

IFML（Interaction Flow Modeling Language）的目標(biāo)是為系統(tǒng)架構(gòu)師、軟件工程師和軟件開(kāi)發(fā)人員提供描述應(yīng)用程序前端主要維度的交互流模型的定義工具。用于 Web和移動(dòng)應(yīng)用程序開(kāi)發(fā)的各種不同平臺(tái)且需要快速原型設(shè)計(jì)和多個(gè)版本的評(píng)估。模型驅(qū)動(dòng)開(kāi)發(fā)（MDD）以文本或視覺(jué)語(yǔ)言來(lái)代表高級(jí)應(yīng)用程序，可用于通過(guò)模型到模型、模型到代碼自動(dòng)轉(zhuǎn)換最終生成產(chǎn)品。我們描述了IFMLEdit.org，一個(gè)開(kāi)源的在線MDD工具，用于從IFML規(guī)范自動(dòng)生成Web和移動(dòng)應(yīng)用程序的快速原型。該工具還支持從IFML到PCN（petri網(wǎng)的一個(gè)變體）的語(yǔ)義映射，用于模型模擬和檢查。

IFML；移動(dòng)應(yīng)用；模型驅(qū)動(dòng)開(kāi)發(fā)；語(yǔ)義映射

0 引言

在網(wǎng)絡(luò)和移動(dòng)開(kāi)發(fā)中，廣泛的編碼平臺(tái)和設(shè)備屏幕需要快速開(kāi)發(fā)和評(píng)估多個(gè)版本。而在移動(dòng)領(lǐng)域，跨平臺(tái)工具允許為多個(gè)目標(biāo)創(chuàng)建和生成應(yīng)用程序。最近，快速移動(dòng)應(yīng)用開(kāi)發(fā)（RMAD）工具，它們支持在線視覺(jué) IDE[1]快速移動(dòng)開(kāi)發(fā)，對(duì)于復(fù)雜或定制的行為，仍然需要編程技能來(lái)編寫(xiě)可視組件。

利用模型驅(qū)動(dòng)開(kāi)發(fā)（MDD）模式[2-3]。應(yīng)用程序通過(guò)文本、視覺(jué)語(yǔ)言、模型到模型以及模型到代碼轉(zhuǎn)換來(lái)生成最終產(chǎn)品。MDD與跨平臺(tái)開(kāi)發(fā)、可視化IDE不同之處在于：它將開(kāi)發(fā)工作從代碼轉(zhuǎn)移到模型轉(zhuǎn)換，促進(jìn)了早期原型的部署，并減輕了典型開(kāi)發(fā)應(yīng)用程序需求之間的差異[4]。在本文中，我們通過(guò) IFMLEdit.org，一個(gè)開(kāi)源的在線 MDD工具，用于從IFML圖中規(guī)范自動(dòng)生成Web和移動(dòng)應(yīng)用程序的快速原型。IFMLEdit.org允許開(kāi)發(fā)人員編輯或?qū)隝FML模型，支持從IFML到PCN的語(yǔ)義映射轉(zhuǎn)換，它執(zhí)行模型到文本生成全功能的Web和移動(dòng)應(yīng)用程序原型，可以快速生成最終產(chǎn)品。

1 IFML 相關(guān)理論

1.1 交互流建模語(yǔ)言應(yīng)用

IFML（交互流建模語(yǔ)言[5]）是一種OMG標(biāo)準(zhǔn)，支持具有各種形式的設(shè)備圖形用戶界面的平臺(tái)無(wú)關(guān)描述。IFML允許開(kāi)發(fā)人員指定交互式應(yīng)用程序的以下幾個(gè)方面：

（1）視圖結(jié)構(gòu)和內(nèi)容：接口的一般組織以ViewElements的形式表達(dá)，以及它們的包容關(guān)系、可見(jiàn)性、激活。

（2）事件：影響用戶界面狀態(tài)的事件，可由用戶交互、應(yīng)用程序和外部系統(tǒng)生成。

（3）事件轉(zhuǎn)換：事件在用戶界面上的后果，可以是ViewContainer的更改、顯示內(nèi)容的更新、觸發(fā)動(dòng)作或這些效果的混合。

1.2 IFML 模型

IFML模型如圖1所示，通過(guò)三個(gè)ViewContainers（ProductCategories，ProductOfCategory 和 ProductInformation）來(lái)表示視圖結(jié)構(gòu)。ViewContainers包括ViewComponents，它們表示接口的實(shí)際內(nèi)容。通用ViewComponent分類器可以被定型，以表示不同的專業(yè)化。例如列表、對(duì)象詳細(xì)信息、數(shù)據(jù)輸入表單等。在圖1中，ProductCategories View-Container包含一個(gè)名為 CategoryList的 ViewComponent，它代表屏幕內(nèi)容，在這種情況下是產(chǎn)品類別列表。ProductOfCategory還顯示所選類別的產(chǎn)品的元素列表,而 ProductInformation顯示單個(gè)產(chǎn)品的詳細(xì)信息。

圖1 IFML 模型Fig.1 IFML model

1.3 IFML 模型的交互過(guò)程

ViewContainers和 ViewComponents可以與Events相關(guān)聯(lián)，以表示支持用戶交互。事件的效果由NavigationFlow表示，它將事件連接到受其影響的 ViewContainer或 ViewComponent。將NavigationFlow表示為箭頭與 ViewElement相關(guān)聯(lián)的事件連接到目標(biāo)。 NavigationFlow指定用戶界面的狀態(tài)更改，在計(jì)算其內(nèi)容之后，將NavigationFlow的目標(biāo) ViewElement引入視圖并根據(jù)接口的結(jié)構(gòu)，ViewElement可能會(huì)保持視圖或切換到視圖效果。在圖1中，與SelectCategory事件相關(guān)聯(lián)的NavigationFlow（以圓圈形式表示）將CategoryList與目標(biāo)ProductList連接起來(lái)。當(dāng)事件發(fā)生時(shí)，計(jì)算目標(biāo)ViewComponent的內(nèi)容，以顯示所選類別的產(chǎn)品列表，觸發(fā) SelectCategory事件會(huì)導(dǎo)致 ProductOf-Category的顯示，并替換ProductCategory。

ViewComponents可以有輸入和輸出參數(shù)。例如，一個(gè)顯示對(duì)象細(xì)節(jié)的ViewComponent對(duì)應(yīng)該對(duì)象的標(biāo)識(shí)符輸入?yún)?shù)。作為輸出參數(shù)導(dǎo)出的項(xiàng)目列表是所選項(xiàng)目的標(biāo)識(shí)符。在圖 1中，CategoryList和ProductList之間的輸入輸出依賴關(guān)系表示為參數(shù)綁定（由IFML ParameterBindingGroup元素表示）。

2 IFML 的語(yǔ)義映射

2.1 IFML 模型的PCN

OMG標(biāo)準(zhǔn)非正式地定義了IFML語(yǔ)言的語(yǔ)義。而 MDD工具開(kāi)發(fā)和操作性要求具有精確語(yǔ)義的MDD語(yǔ)言。在本文中，IFML的語(yǔ)義是通過(guò)將IFML圖映射到PCN[6]，這是以模塊化原語(yǔ)為特征的Petri網(wǎng)的變體。

PCN的基礎(chǔ)結(jié)構(gòu)是一個(gè)位置圖，它代表一個(gè)地方的層次結(jié)構(gòu)。沒(méi)有“父母”和“孩子”的電腦被稱為一個(gè)地方，因?yàn)樗喈?dāng)于一個(gè)PN地方。一個(gè)有“父母”但沒(méi)有“孩子”的地方稱為底部地圖。有“孩子”的地方但沒(méi)有“父母”被稱為頂級(jí)地圖。沒(méi)有“孩子”的地圖中記號(hào)數(shù)量被定義為Petri網(wǎng)，而帶有“孩子”的地圖中記號(hào)數(shù)量被定義為孩子記號(hào)數(shù)量的最大值。過(guò)渡從一組位置圖中刪除記號(hào)并將記號(hào)添加到其他人上面。當(dāng)所有源位置圖至少具有所需記號(hào)數(shù)時(shí)將啟用轉(zhuǎn)換，從沒(méi)有“孩子”的地圖中刪除記號(hào)會(huì)將數(shù)量減少一個(gè)，同時(shí)從具有子級(jí)的位置圖中刪除記號(hào)則清空所有記號(hào)。為了避免非確定性，只能在沒(méi)有“孩子”的地方圖表中插入記號(hào)。作為減少弧的組合的一種方法，引入了默認(rèn)弧，它將父位置圖連接到一個(gè)或多個(gè)后代。圖2顯示了對(duì)應(yīng)于空IFML模型的PCN。

圖2 一個(gè)空的應(yīng)用程序的PCNFig.2 PCN of an empty application

PCN包含兩個(gè)稱為打開(kāi)和關(guān)閉的轉(zhuǎn)換。初始標(biāo)記包括等待中的一個(gè)記號(hào)和ViewApplication中的一個(gè)記號(hào)，描述用戶可以打開(kāi)最初不在視圖中的應(yīng)用程序。打開(kāi)之后轉(zhuǎn)移從應(yīng)用程序中移除并添加一個(gè)記號(hào)，并將記號(hào)從開(kāi)始移到等待，禁用自身并啟用關(guān)閉。 關(guān)閉轉(zhuǎn)換將記號(hào)從應(yīng)用程序移動(dòng)到ViewApplication，并將記號(hào)從等待轉(zhuǎn)移到開(kāi)始，禁用自身并啟用打開(kāi)，從而將應(yīng)用程序狀態(tài)重置為默認(rèn)的初始標(biāo)記。

圖3顯示了它的映射：PCN通過(guò)引入一個(gè)名為“Mails”的應(yīng)用程序的子進(jìn)程來(lái)擴(kuò)展。郵件地圖表有兩個(gè)孩子的底部圖表。兩個(gè) ViewMails狀態(tài)表示ViewContainer是否在視圖中。打開(kāi)轉(zhuǎn)換的觸發(fā)添加了一個(gè)記號(hào)給ViewMails，這意味著ViewContainer被顯示。

2.2 ViewContainers之間的導(dǎo)航過(guò)程

應(yīng)用程序頂部位置圖包含兩個(gè)地圖圖表郵件和聯(lián)系人，每個(gè)圖表有兩個(gè)子頁(yè)面底部圖表（View-Mails，ViewMails，ViewContacts，ViewContacts）。郵件由應(yīng)用程序初始化，因?yàn)猷]件是默認(rèn)的頂級(jí)ViewContainer，這將導(dǎo)致默認(rèn)情況下的 ViewMails放置圖的初始化[9]。相反，聯(lián)系人未初始化為默認(rèn)，是來(lái)自應(yīng)用程序的初始化弧目標(biāo)為ViewContacts放置圖，表示最初未查看聯(lián)系人ViewContainer。兩個(gè)ViewContainers之間的導(dǎo)航由一個(gè)名為contacts的轉(zhuǎn)換來(lái)表示，它表示兩個(gè)ViewContainer的顯示狀態(tài)的變化。轉(zhuǎn)換將從記號(hào)到郵件、視圖郵件、聯(lián)系人移動(dòng)到聯(lián)系人、視圖郵件。

圖3 單個(gè)空默認(rèn)ViewContainer模型Fig.3 Single, empty default ViewContainer Model

圖 4顯示了基于某些輸入?yún)?shù)的值的包含ViewComponents，在接口中計(jì)算和呈現(xiàn)的模型的映射。ViewComponent的行為可以被認(rèn)為是兩部分之間相互作用的結(jié)果：

（1）模型：表示與向ViewComponent提供內(nèi)容的數(shù)據(jù)源的交互狀態(tài)。

（2）視圖模型：表示界面中內(nèi)容的顯示。

圖4 頂級(jí)ViewContainers之間的導(dǎo)航Fig.4 Navigation between top-level ViewContainers

在Web應(yīng)用程序中，模型可以是保存從數(shù)據(jù)庫(kù)中提取的對(duì)象數(shù)據(jù)bean，視圖模型可以是這些對(duì)象的 HTML[7]呈現(xiàn)。在 Android應(yīng)用中，該模型可能是一個(gè)Java對(duì)象，并且視圖模型將GUI[8]窗口小部件綁定到該對(duì)象。ViewComponent的模型部分可以通過(guò)以下?tīng)顟B(tài)建模：

（1）Clear：如果ViewComponent需要計(jì)算輸入，在這種狀態(tài)下，它不能顯示任何內(nèi)容并保持為空。

（2）Ready：這種情況發(fā)生在兩種情況下：ViewComponent不需要任何輸入?yún)?shù)或者它已經(jīng)接收到所需的輸入。

（3）計(jì)算：如果其內(nèi)容是計(jì)算的，這些狀態(tài)之間的變化由PCN轉(zhuǎn)換建模和傳播，從清除到就緒，并將輸入?yún)?shù)傳播給ViewComponent。

圖5顯示了IFML模型的PCN映射。一個(gè)名為MailList的郵件子郵件地址表表示從父項(xiàng)初始化的MailListViewComponent。它分別包含兩個(gè)子位置圖ModelMailList和 ViewModelMailList，分別表示ViewComponent的模型和視圖模型部分。Model-MailList包含前面定義的四個(gè)底部位置圖表（InMailList，InMailList，OutMailList 和 OutMailList）。Transition computeMailList表示內(nèi)容的計(jì)算：它從InMailList中刪除一個(gè)記號(hào)，并將一個(gè)記號(hào)添加到InMailList，表示輸入的消耗；它還從 OutMailList中刪除一個(gè)記號(hào)，并將一個(gè)記號(hào)添加到OutMailList，表示模型內(nèi)容的可用性。

2.3 事件和導(dǎo)航流過(guò)程

下面擴(kuò)展了一個(gè)示例，其中包含事件和導(dǎo)航流。郵件列表是交互式的，從列表中啟用郵件選擇并顯示在另一個(gè)界面組件中。應(yīng)用程序啟動(dòng)時(shí)只顯示列表，用戶從列表中選擇一個(gè)項(xiàng)目之后將顯示其詳細(xì)信息。現(xiàn)在，郵件ViewContainer的位置圖包含兩個(gè)對(duì)應(yīng)于 MailList和 Mail ViewComponents的“孩子”位置圖，特別是它們被初始化為就緒狀態(tài)。雖然與Mail ViewComponent關(guān)聯(lián)的地方圖已初始化為就緒狀態(tài)，但其輸入最初參數(shù)為空值，因?yàn)橛脩羯形催x擇消息。因此，計(jì)算和渲染轉(zhuǎn)換后視圖模型顯示一個(gè)空（“null”）內(nèi)容。如圖6所示。

圖5 單個(gè)ViewComponent模型Fig.5 Single ViewComponent model

圖6 導(dǎo)航流Fig.6 Navigation flow

3 實(shí)例研究

3.1 映射在IFMLEdit.org中實(shí)現(xiàn)

開(kāi)發(fā)人員用在線編輯器中創(chuàng)建IFML模型[10]，然后將模型映射到PCN并模擬它以研究其動(dòng)態(tài)。然后他們可以為網(wǎng)絡(luò)或跨平臺(tái)移動(dòng)語(yǔ)言生成代碼，執(zhí)行和驗(yàn)證原型，并通過(guò)定制外觀和使用真實(shí)調(diào)用替換模擬數(shù)據(jù)訪問(wèn)[11]，最后將其轉(zhuǎn)換為真實(shí)的應(yīng)用程序。IFMLEdit.org利用了JavaScript開(kāi)發(fā)的客戶端編輯器和代碼生成器，一旦加載可以離線使用。

該系統(tǒng)包括四個(gè)組件：

（1）模型編輯器：可視化編輯器在模型中插入元素，編輯其屬性和連接。

（2）模型到JSON轉(zhuǎn)換框架：一個(gè)基于規(guī)則的JavaScript引擎，它作為輸入一個(gè)模型對(duì)象，可以生成輸出任意的JSON結(jié)構(gòu)。

（3）瀏覽器-服務(wù)器仿真器：能夠模擬Web瀏覽器，Node.js服務(wù)器以及連接兩者的整個(gè)請(qǐng)求響應(yīng)周期。

（4）移動(dòng)仿真器：能夠模擬移動(dòng)跨平臺(tái)環(huán)境的JavaScript組件，它支持生成跨平臺(tái)移動(dòng)代碼的執(zhí)行。

開(kāi)發(fā)人員可以通過(guò)從IFML到PCN的模型到模型轉(zhuǎn)換來(lái)生成應(yīng)用程序的正式描述。通過(guò)在網(wǎng)絡(luò)中移動(dòng)的記號(hào)可視化地呈現(xiàn)PCN動(dòng)態(tài)，顯示界面中的控制流以及ViewElements的狀態(tài)變化。圖7顯示出了IFML圖生成的PCN模型。

開(kāi)發(fā)人員可以通過(guò)模型到代碼轉(zhuǎn)換來(lái)生成Web和移動(dòng)原型。圖8顯示了生成的Web原型，在瀏覽器中仿真的Web服務(wù)器中運(yùn)行。圖9顯示了在移動(dòng)仿真器內(nèi)部的瀏覽器中生成的移動(dòng)原型。瀏覽器內(nèi)仿真允許開(kāi)發(fā)人員測(cè)試當(dāng)前的網(wǎng)絡(luò)或移動(dòng)版本。

圖7 模型語(yǔ)義模擬Fig.7 M odel semantics simulation

圖8 網(wǎng)頁(yè)代碼生成Fig.8 W eb code generation

4 結(jié)論

在本文中，我們描述了一種用于從 IFML規(guī)范自動(dòng)生成跨平臺(tái)Web和移動(dòng)應(yīng)用程序的MDD方法。IFML的語(yǔ)義是通過(guò)將其映射到 PCN（可用于模擬的Petri網(wǎng)的變體）來(lái)定義的，從PCN平臺(tái)規(guī)范可以交付可執(zhí)行應(yīng)用程序原型。原型使用自動(dòng)生成的樣本數(shù)據(jù)以便填充UI，允許開(kāi)發(fā)人員測(cè)試接口而不加載內(nèi)容。對(duì)于更實(shí)際的測(cè)試，開(kāi)發(fā)人員可以從自動(dòng)數(shù)據(jù)庫(kù)中編輯，添加或刪除實(shí)體。可以重復(fù)使用IFMLEdit.org來(lái)評(píng)估不同的應(yīng)用程序結(jié)構(gòu)和交互方法。生成的原型可以下載和完善以產(chǎn)生最終的應(yīng)用。開(kāi)發(fā)過(guò)程由在線IFMLEdit.org工具支持的。

[1] Mitsch S, Platzer A. The KeYmaera X Proof IDE - Concepts on Usability in Hybrid Systems Theorem Proving[J]. 2017.

[2] Selic B. The pragmatics of model-driven development[J].Software IEEE, 2003, 20(5): 19-25.

[3] Brambilla M, Cabot J, Wimmer M. Model-Driven Software Engineering in Practice[M]. Morgan & Claypool Publishers,2012.

[4] Gaouar L, Benamar A, Bendimerad F T. Model Driven Approaches to Cross Platform Mobile Development[C]//International Conference on Intelligent Information Processing,Security and Advanced Communication. ACM, 2015: 19.

[5] Brambilla M, Fraternali P. - Interaction Flow Modeling Language[J]. Interaction Flow Modeling Language, 2015: 395-400.

[6] Kishinevsky M, Cortadella J, Kondratyev A, et al. Coupling Asynchrony and Interrupts: Place Chart Nets. [C]// International Conference on Application and Theory of Petri Nets.Springer-Verlag, 1997: 328-347.

[7] Hickson I. A vocabulary and associated APIs for HTML and XHTML (2014)[J]. 2015.

[8] Diep C K, Tran Q N, Tran M T. Online model-driven IDE to design GUIs for cross-platform mobile applications[C]//Symposium on Information and Communication Technology.2013: 294-300.

[9] Steiner D, ?urlea C, Culea C, et al. Model-Driven Development of Cloud-Connected Mobile Applications Using DSLs with Xtext[M]// Computer Aided Systems Theory – EUROCAST 2013. 2013: 409-416

[10] Barnett S, Vasa R, Grundy J. Bootstrapping mobile app development[C]// Ieee/acm, IEEE International Conference on Software Engineering. IEEE, 2015: 657-660.

[11] Majchrzak T A. Cross-platform development of business apps with MD 2[C]// International Conference on Design Science at the Intersection of Physical and Virtual Design.Springer-Verlag, 2013: 405-411.

Research on Automatic Generation of Web and Mobile Application Based on IFML

ZHU Hui-long1, LIU Xiao-yan1, ZHANG Xue-mei2, LI Dan-dan1, CAO Rong-kai1
(1. Kunming University of Science and Technology, Faculty of Information Engineering and Automation,Kunming 650500, China;2. Huji middle school in Shanghe County, Shandong Province, Jinan, 2501600, China)

The goal of IFML (Interaction Flow Modeling Language) is to provide system architects, software engineers, and software developers with a definition tool for the interactive flow model that describes the main dimensions of the application front end. A variety of different platforms for Web and mobile application developpment require rapid prototyping and multiple versions of the evaluation. Model-driven development (MDD) is a high-level application in text or visual language that can be used to automatically generate a product by model-tomodel, model-to-code auto-conversion. We describe IFMLEdit.org, an open source online MDD tool for automatically generating Web and mobile applications from the IFML specification for rapid prototyping. The tool also supports semantic mapping from IFML to PCN (a variant of the petri net) for model modeling and checking.

FML; Mobile applications; Model driven engineering; Semantic mapping

TP311.5

A

10.3969/j.issn.1003-6970.2017.11.019

本文著錄格式：朱匯龍，劉曉燕，張雪梅，等. 基于IFML自動(dòng)生成Web和移動(dòng)應(yīng)用程序的研究[J]. 軟件，2017，38（11）：95-100

朱匯龍(1992-)，男，碩士研究生，研究方向：模型驅(qū)動(dòng)方法和基于WEB的軟件開(kāi)發(fā)技術(shù)。

劉曉燕(1964-)，女，副教授，碩士生導(dǎo)師，研究方向：模型驅(qū)動(dòng)方法和基于WEB的軟件開(kāi)發(fā)技術(shù)。