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

（1. 昆明理工大學信息工程與自動化學院計算機技術，云南 昆明 650500；2. 山東省商河縣胡集中學，山東 濟南 251600）

基于IFML自動生成Web和移動應用程序的研究

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

（1. 昆明理工大學信息工程與自動化學院計算機技術，云南 昆明 650500；2. 山東省商河縣胡集中學，山東 濟南 251600）

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

IFML；移動應用；模型驅動開發(fā)；語義映射

0 引言

在網絡和移動開發(fā)中，廣泛的編碼平臺和設備屏幕需要快速開發(fā)和評估多個版本。而在移動領域，跨平臺工具允許為多個目標創(chuàng)建和生成應用程序。最近，快速移動應用開發(fā)（RMAD）工具，它們支持在線視覺 IDE[1]快速移動開發(fā)，對于復雜或定制的行為，仍然需要編程技能來編寫可視組件。

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

1 IFML 相關理論

1.1 交互流建模語言應用

IFML（交互流建模語言[5]）是一種OMG標準，支持具有各種形式的設備圖形用戶界面的平臺無關描述。IFML允許開發(fā)人員指定交互式應用程序的以下幾個方面：

（1）視圖結構和內容：接口的一般組織以ViewElements的形式表達，以及它們的包容關系、可見性、激活。

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

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

1.2 IFML 模型

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

圖1 IFML 模型Fig.1 IFML model

1.3 IFML 模型的交互過程

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

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

2 IFML 的語義映射

2.1 IFML 模型的PCN

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

PCN的基礎結構是一個位置圖，它代表一個地方的層次結構。沒有“父母”和“孩子”的電腦被稱為一個地方，因為它相當于一個PN地方。一個有“父母”但沒有“孩子”的地方稱為底部地圖。有“孩子”的地方但沒有“父母”被稱為頂級地圖。沒有“孩子”的地圖中記號數(shù)量被定義為Petri網，而帶有“孩子”的地圖中記號數(shù)量被定義為孩子記號數(shù)量的最大值。過渡從一組位置圖中刪除記號并將記號添加到其他人上面。當所有源位置圖至少具有所需記號數(shù)時將啟用轉換，從沒有“孩子”的地圖中刪除記號會將數(shù)量減少一個，同時從具有子級的位置圖中刪除記號則清空所有記號。為了避免非確定性，只能在沒有“孩子”的地方圖表中插入記號。作為減少弧的組合的一種方法，引入了默認弧，它將父位置圖連接到一個或多個后代。圖2顯示了對應于空IFML模型的PCN。

圖2 一個空的應用程序的PCNFig.2 PCN of an empty application

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

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

2.2 ViewContainers之間的導航過程

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

圖3 單個空默認ViewContainer模型Fig.3 Single, empty default ViewContainer Model

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

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

（2）視圖模型：表示界面中內容的顯示。

圖4 頂級ViewContainers之間的導航Fig.4 Navigation between top-level ViewContainers

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

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

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

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

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

2.3 事件和導航流過程

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

圖5 單個ViewComponent模型Fig.5 Single ViewComponent model

圖6 導航流Fig.6 Navigation flow

3 實例研究

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

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

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

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

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

（3）瀏覽器-服務器仿真器：能夠模擬Web瀏覽器，Node.js服務器以及連接兩者的整個請求響應周期。

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

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

開發(fā)人員可以通過模型到代碼轉換來生成Web和移動原型。圖8顯示了生成的Web原型，在瀏覽器中仿真的Web服務器中運行。圖9顯示了在移動仿真器內部的瀏覽器中生成的移動原型。瀏覽器內仿真允許開發(fā)人員測試當前的網絡或移動版本。

圖7 模型語義模擬Fig.7 M odel semantics simulation

圖8 網頁代碼生成Fig.8 W eb code generation

4 結論

在本文中，我們描述了一種用于從 IFML規(guī)范自動生成跨平臺Web和移動應用程序的MDD方法。IFML的語義是通過將其映射到 PCN（可用于模擬的Petri網的變體）來定義的，從PCN平臺規(guī)范可以交付可執(zhí)行應用程序原型。原型使用自動生成的樣本數(shù)據(jù)以便填充UI，允許開發(fā)人員測試接口而不加載內容。對于更實際的測試，開發(fā)人員可以從自動數(shù)據(jù)庫中編輯，添加或刪除實體?？梢灾貜褪褂肐FMLEdit.org來評估不同的應用程序結構和交互方法。生成的原型可以下載和完善以產生最終的應用。開發(fā)過程由在線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自動生成Web和移動應用程序的研究[J]. 軟件，2017，38（11）：95-100

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

劉曉燕(1964-)，女，副教授，碩士生導師，研究方向：模型驅動方法和基于WEB的軟件開發(fā)技術。