基于IFML自动生成Web和移动应用程序的研究

朱汇龙，刘晓燕，张雪梅，李丹丹，曹荣凯

（1. 昆明理工大学信息工程与自动化学院计算机技术，云南 昆明 650500；2. 山东省商河县胡集中学，山东 济南 251600）

基于IFML自动生成Web和移动应用程序的研究

朱汇龙1，刘晓燕1，张雪梅2，李丹丹1，曹荣凯1

（1. 昆明理工大学信息工程与自动化学院计算机技术，云南 昆明 650500；2. 山东省商河县胡集中学，山东 济南 251600）

IFML（Interaction Flow Modeling Language）的目标是为系统架构师、软件工程师和软件开发人员提供描述应用程序前端主要维度的交互流模型的定义工具。用于 Web和移动应用程序开发的各种不同平台且需要快速原型设计和多个版本的评估。模型驱动开发（MDD）以文本或视觉语言来代表高级应用程序，可用于通过模型到模型、模型到代码自动转换最终生成产品。我们描述了IFMLEdit.org，一个开源的在线MDD工具，用于从IFML规范自动生成Web和移动应用程序的快速原型。该工具还支持从IFML到PCN（petri网的一个变体）的语义映射，用于模型模拟和检查。

IFML；移动应用；模型驱动开发；语义映射

0 引言

在网络和移动开发中，广泛的编码平台和设备屏幕需要快速开发和评估多个版本。而在移动领域，跨平台工具允许为多个目标创建和生成应用程序。最近，快速移动应用开发（RMAD）工具，它们支持在线视觉 IDE[1]快速移动开发，对于复杂或定制的行为，仍然需要编程技能来编写可视组件。

利用模型驱动开发（MDD）模式[2-3]。应用程序通过文本、视觉语言、模型到模型以及模型到代码转换来生成最终产品。MDD与跨平台开发、可视化IDE不同之处在于：它将开发工作从代码转移到模型转换，促进了早期原型的部署，并减轻了典型开发应用程序需求之间的差异[4]。在本文中，我们通过 IFMLEdit.org，一个开源的在线 MDD工具，用于从IFML图中规范自动生成Web和移动应用程序的快速原型。IFMLEdit.org允许开发人员编辑或导入IFML模型，支持从IFML到PCN的语义映射转换，它执行模型到文本生成全功能的Web和移动应用程序原型，可以快速生成最终产品。

1 IFML 相关理论

1.1 交互流建模语言应用

IFML（交互流建模语言[5]）是一种OMG标准，支持具有各种形式的设备图形用户界面的平台无关描述。IFML允许开发人员指定交互式应用程序的以下几个方面：

（1）视图结构和内容：接口的一般组织以ViewElements的形式表达，以及它们的包容关系、可见性、激活。

（2）事件：影响用户界面状态的事件，可由用户交互、应用程序和外部系统生成。

（3）事件转换：事件在用户界面上的后果，可以是ViewContainer的更改、显示内容的更新、触发动作或这些效果的混合。

1.2 IFML 模型

IFML模型如图1所示，通过三个ViewContainers（ProductCategories，ProductOfCategory 和 ProductInformation）来表示视图结构。ViewContainers包括ViewComponents，它们表示接口的实际内容。通用ViewComponent分类器可以被定型，以表示不同的专业化。例如列表、对象详细信息、数据输入表单等。在图1中，ProductCategories View-Container包含一个名为 CategoryList的 ViewComponent，它代表屏幕内容，在这种情况下是产品类别列表。ProductOfCategory还显示所选类别的产品的元素列表,而 ProductInformation显示单个产品的详细信息。

图1 IFML 模型Fig.1 IFML model

1.3 IFML 模型的交互过程

ViewContainers和 ViewComponents可以与Events相关联，以表示支持用户交互。事件的效果由NavigationFlow表示，它将事件连接到受其影响的 ViewContainer或 ViewComponent。将NavigationFlow表示为箭头与 ViewElement相关联的事件连接到目标。 NavigationFlow指定用户界面的状态更改，在计算其内容之后，将NavigationFlow的目标 ViewElement引入视图并根据接口的结构，ViewElement可能会保持视图或切换到视图效果。在图1中，与SelectCategory事件相关联的NavigationFlow（以圆圈形式表示）将CategoryList与目标ProductList连接起来。当事件发生时，计算目标ViewComponent的内容，以显示所选类别的产品列表，触发 SelectCategory事件会导致 ProductOf-Category的显示，并替换ProductCategory。

ViewComponents可以有输入和输出参数。例如，一个显示对象细节的ViewComponent对应该对象的标识符输入参数。作为输出参数导出的项目列表是所选项目的标识符。在图 1中，CategoryList和ProductList之间的输入输出依赖关系表示为参数绑定（由IFML ParameterBindingGroup元素表示）。

2 IFML 的语义映射

2.1 IFML 模型的PCN

OMG标准非正式地定义了IFML语言的语义。而 MDD工具开发和操作性要求具有精确语义的MDD语言。在本文中，IFML的语义是通过将IFML图映射到PCN[6]，这是以模块化原语为特征的Petri网的变体。

PCN的基础结构是一个位置图，它代表一个地方的层次结构。没有“父母”和“孩子”的电脑被称为一个地方，因为它相当于一个PN地方。一个有“父母”但没有“孩子”的地方称为底部地图。有“孩子”的地方但没有“父母”被称为顶级地图。没有“孩子”的地图中记号数量被定义为Petri网，而带有“孩子”的地图中记号数量被定义为孩子记号数量的最大值。过渡从一组位置图中删除记号并将记号添加到其他人上面。当所有源位置图至少具有所需记号数时将启用转换，从没有“孩子”的地图中删除记号会将数量减少一个，同时从具有子级的位置图中删除记号则清空所有记号。为了避免非确定性，只能在没有“孩子”的地方图表中插入记号。作为减少弧的组合的一种方法，引入了默认弧，它将父位置图连接到一个或多个后代。图2显示了对应于空IFML模型的PCN。

图2 一个空的应用程序的PCNFig.2 PCN of an empty application

PCN包含两个称为打开和关闭的转换。初始标记包括等待中的一个记号和ViewApplication中的一个记号，描述用户可以打开最初不在视图中的应用程序。打开之后转移从应用程序中移除并添加一个记号，并将记号从开始移到等待，禁用自身并启用关闭。 关闭转换将记号从应用程序移动到ViewApplication，并将记号从等待转移到开始，禁用自身并启用打开，从而将应用程序状态重置为默认的初始标记。

图3显示了它的映射：PCN通过引入一个名为“Mails”的应用程序的子进程来扩展。邮件地图表有两个孩子的底部图表。两个 ViewMails状态表示ViewContainer是否在视图中。打开转换的触发添加了一个记号给ViewMails，这意味着ViewContainer被显示。

2.2 ViewContainers之间的导航过程

应用程序顶部位置图包含两个地图图表邮件和联系人，每个图表有两个子页面底部图表（View-Mails，ViewMails，ViewContacts，ViewContacts）。邮件由应用程序初始化，因为邮件是默认的顶级ViewContainer，这将导致默认情况下的 ViewMails放置图的初始化[9]。相反，联系人未初始化为默认，是来自应用程序的初始化弧目标为ViewContacts放置图，表示最初未查看联系人ViewContainer。两个ViewContainers之间的导航由一个名为contacts的转换来表示，它表示两个ViewContainer的显示状态的变化。转换将从记号到邮件、视图邮件、联系人移动到联系人、视图邮件。

图3 单个空默认ViewContainer模型Fig.3 Single, empty default ViewContainer Model

图 4显示了基于某些输入参数的值的包含ViewComponents，在接口中计算和呈现的模型的映射。ViewComponent的行为可以被认为是两部分之间相互作用的结果：

（1）模型：表示与向ViewComponent提供内容的数据源的交互状态。

（2）视图模型：表示界面中内容的显示。

图4 顶级ViewContainers之间的导航Fig.4 Navigation between top-level ViewContainers

在Web应用程序中，模型可以是保存从数据库中提取的对象数据bean，视图模型可以是这些对象的 HTML[7]呈现。在 Android应用中，该模型可能是一个Java对象，并且视图模型将GUI[8]窗口小部件绑定到该对象。ViewComponent的模型部分可以通过以下状态建模：

（1）Clear：如果ViewComponent需要计算输入，在这种状态下，它不能显示任何内容并保持为空。

（2）Ready：这种情况发生在两种情况下：ViewComponent不需要任何输入参数或者它已经接收到所需的输入。

（3）计算：如果其内容是计算的，这些状态之间的变化由PCN转换建模和传播，从清除到就绪，并将输入参数传播给ViewComponent。

图5显示了IFML模型的PCN映射。一个名为MailList的邮件子邮件地址表表示从父项初始化的MailListViewComponent。它分别包含两个子位置图ModelMailList和 ViewModelMailList，分别表示ViewComponent的模型和视图模型部分。Model-MailList包含前面定义的四个底部位置图表（InMailList，InMailList，OutMailList 和 OutMailList）。Transition computeMailList表示内容的计算：它从InMailList中删除一个记号，并将一个记号添加到InMailList，表示输入的消耗；它还从 OutMailList中删除一个记号，并将一个记号添加到OutMailList，表示模型内容的可用性。

2.3 事件和导航流过程

下面扩展了一个示例，其中包含事件和导航流。邮件列表是交互式的，从列表中启用邮件选择并显示在另一个界面组件中。应用程序启动时只显示列表，用户从列表中选择一个项目之后将显示其详细信息。现在，邮件ViewContainer的位置图包含两个对应于 MailList和 Mail ViewComponents的“孩子”位置图，特别是它们被初始化为就绪状态。虽然与Mail ViewComponent关联的地方图已初始化为就绪状态，但其输入最初参数为空值，因为用户尚未选择消息。因此，计算和渲染转换后视图模型显示一个空（“null”）内容。如图6所示。

图5 单个ViewComponent模型Fig.5 Single ViewComponent model

图6 导航流Fig.6 Navigation flow

3 实例研究

3.1 映射在IFMLEdit.org中实现

开发人员用在线编辑器中创建IFML模型[10]，然后将模型映射到PCN并模拟它以研究其动态。然后他们可以为网络或跨平台移动语言生成代码，执行和验证原型，并通过定制外观和使用真实调用替换模拟数据访问[11]，最后将其转换为真实的应用程序。IFMLEdit.org利用了JavaScript开发的客户端编辑器和代码生成器，一旦加载可以离线使用。

该系统包括四个组件：

（1）模型编辑器：可视化编辑器在模型中插入元素，编辑其属性和连接。

（2）模型到JSON转换框架：一个基于规则的JavaScript引擎，它作为输入一个模型对象，可以生成输出任意的JSON结构。

（3）浏览器-服务器仿真器：能够模拟Web浏览器，Node.js服务器以及连接两者的整个请求响应周期。

（4）移动仿真器：能够模拟移动跨平台环境的JavaScript组件，它支持生成跨平台移动代码的执行。

开发人员可以通过从IFML到PCN的模型到模型转换来生成应用程序的正式描述。通过在网络中移动的记号可视化地呈现PCN动态，显示界面中的控制流以及ViewElements的状态变化。图7显示出了IFML图生成的PCN模型。

开发人员可以通过模型到代码转换来生成Web和移动原型。图8显示了生成的Web原型，在浏览器中仿真的Web服务器中运行。图9显示了在移动仿真器内部的浏览器中生成的移动原型。浏览器内仿真允许开发人员测试当前的网络或移动版本。

图7 模型语义模拟Fig.7 M odel semantics simulation

图8 网页代码生成Fig.8 W eb code generation

4 结论

在本文中，我们描述了一种用于从 IFML规范自动生成跨平台Web和移动应用程序的MDD方法。IFML的语义是通过将其映射到 PCN（可用于模拟的Petri网的变体）来定义的，从PCN平台规范可以交付可执行应用程序原型。原型使用自动生成的样本数据以便填充UI，允许开发人员测试接口而不加载内容。对于更实际的测试，开发人员可以从自动数据库中编辑，添加或删除实体。可以重复使用IFMLEdit.org来评估不同的应用程序结构和交互方法。生成的原型可以下载和完善以产生最终的应用。开发过程由在线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的软件开发技术。

刘晓燕(1964-)，女，副教授，硕士生导师，研究方向：模型驱动方法和基于WEB的软件开发技术。