一种基于Web和跨平台移动应用的建模语言研究

曹荣凯，刘晓燕，朱汇龙，乐婷婷，李丹丹

（昆明理工大学 信息工程与自动化学院，云南 昆明 650500）

一种基于Web和跨平台移动应用的建模语言研究

曹荣凯，刘晓燕，朱汇龙，乐婷婷，李丹丹

（昆明理工大学 信息工程与自动化学院，云南 昆明 650500）

移动应用的前端设计是一个涉及多门学科而且复杂的任务，这个任务在各方面都不是独立的，并且要使用户体验完美地适应应用目标。然而，移动用户交互的发展在很大程度上仍然是一个手工的工作，这导致了工作中会出现编码错误，不一致和效率低下等问题。模型驱动开发（MDD）以文本或视觉语言代表高级应用程序，可用于通过模型到模型和模型到代码转换来自动生成最终产品。本文提出了一种基于IFML标准模型驱动的移动应用程序开发方法。而且描述了 IFMLEdit.org，一个开源的在线模型驱动开发（MDD）工具，用于从交互流建模语言（IFML）规范中指定和自动生成快速原型的Web和移动应用程序。

交互流建模语言；模型驱动开发；跨平台移动应用开发

0 引言

在Web和移动开发中，广泛的编码平台和设备需要能够快速演进和适应多个版本。在移动领域，跨平台工具允许创建和分发多个目标的应用程序，前端开发仍然是成本高昂且效率低下的工作，手工编码是主要的开发方法，设计工具的重用性低，跨平台的可移植性仍然不足。这就引入了一种开发工具，IFMLEdit.org允许开发人员编辑或导入 IFML模型，支持从IFML到PCN（Petri网的变体）的语义映射转换，用于模型仿真和检查; 最终，它执行Web和移动应用程序原型的模型到文本生成，可以快速演变成最终产品。

交互流建模语言(IFML)是软件工程领域的一种标准化建模语言。IFML包括一组图形符号，用于在软件系统中创建用户交互和前端行为的可视化模型。

1 交互流建模语言（IFML）

交互流建模语言(IFML)是被对象管理组织(OMG)定义的。IFML支持图形用户界面的独立平台，以供在桌面计算机、笔记本电脑、移动手机和平板电脑等系统上访问或部署应用程序。

IFML描述了以下领域应用前端的用户交互和控制行为：

HTML+基于 HTTP的 Web应用程序；移动应用程序；客户端-服务器应用程序；桌面应用程序；嵌入式人机界面控制应用程序；多通道和上下文感知应用程序。

IFML模型由一个或多个视图容器组成。例如，windows在传统的桌面应用程序或 Web应用程序中，视图容器可以包含视图组件，它可以表示发布静态或动态的内容，或者用于数据输入的接口元素(例如输入表单)。视图组件可以有输入和输出参数，视图容器和视图组件可以与事件关联，可以表示用户交互或系统生成的事件。例如，从列表中选择一个或多个项目或从表单提交输入的事件。事件的影响由交互流连接表示，交互流表示用户界面状态的变化。事件还可以触发一个动作，在更新用户界面状态之前执行该操作。例如，在数据库实例上删除或更新操作。元素之间的输入输出可以通过与导航流或数据流相关的参数绑定来指定。

1.1 交互流建模语言模型

IFML模型，如图1所示，通过三个ViewContainers（ProductCategories，ProductOfCategory和ProductInformation）来表示视图结构，反映了三个屏幕中GUI的顶层组织。ViewContainers包括ViewComponents，它们表示接口的实际内容。通用的 ViewComponent分类器可以被刻板化，以表示不同的专业，例如列表，对象细节，数据输入表单等。在图 1中，ProductCategories ViewContainer包含一个 CategoryList的 ViewComponent，它代表屏幕内容，在该例中为产品列表类别。ProductOfCategory还显示所选类别的产品的元素列表，而ProductInformation显示单个产品的详细信息。

ViewContainers和 ViewComponents可以与Events相关联，以表示它们支持用户交互。事件的效果由NavigationFlow表示，该NavigationFlow将Event连接到受其影响的 ViewContainer或 View-Component。将 NavigationFlow 表示为箭头，将与ViewElement相关联的事件连接到目标 View-Element。NavigationFlow指定用户界面的状态变化：在计算其内容之后，引入 NavigationFlow的目标ViewElement;根据接口的结构，NavigationFlow的目标 ViewElement可能会保持视图状态或切换到视图状态。

在图1中，与SelectCategory事件关联的NavigationFlow表示为一个圆，将ViewComponent CategoryList与目标ViewComponent ProductList连接起来。当事件发生时，计算目标ViewComponent的内容，以显示所选类别的产品列表；触发SelectCategor事件将导致 ProductOfCategory ViewContainer的显示，以及附带的 ViewComponent替换 ProductCategory ViewContainer，那么该视图将不可见。

ViewComponents可以有输入和输出参数。 例如，显示对象细节的ViewComponent具有与要显示的对象的标识符相对应的输入参数；作为输出参数的项目导出的列表是所选项目的标识符。在图1中CategoryList和 ProductList之间的输入输出依赖表示为参数绑定：用于表示用户选择对象的 Selected-Category参数的值与ProductList ViewComponent请求的输入参数Category的值相关联。ViewContainers可以嵌入多个 ViewComponents和嵌套 ViewContainers，以指定更复杂的行为和不同组织的界面。

图1 IFML模型Fig.1 IFML model

2 模型驱动开发（MDD）

应用程序通过文本或视觉语言和模型到模型以及模型到代码的转换来生成最终产品。MDD与跨平台开发和可视化IDE不同之处在于它将开发工作从代码转移到模型，这种方法促进了早期原型的发展，并减轻了快速发展的应用程序所需要实现的工作量，规范了行业标准。

针对跨平台移动应用程序的 MDD方法进行了调查：它们主要基于文本域规范语言（DSL），依靠特定的非正式建模语言相互转换。MDD和域规范语言（DSL）是支持跨平台开发的几种解决方案的关键要素：MDD，DSL通过生成代码或直接执行模型驱动自动转换为工作软件所需要的应用程序。

当遵循 MDD方法时，有可能会生成几种不同的方案，这取决于在建立应用程序时要使用的抽象级别和要生成的代码的抽象级别。我们将使用模型驱动架构（MDA）作为参考框架来说明不同的参考方案。MDA定义了三个不同抽象层次的模型：计算独立模型（CIM），平台独立模型（PIM）和平台特定模型（PSM）。这个驱动架构可以通过模型转换，形成每个级别和下一级之间的一组映射。通常，每个CIM可以映射到不同的PIM，PIM又可以映射到不同的PSM，同时也可以遵循许多其他组合，例如跳过其中一个级别，和下一个级别映射。

（1）PIM到本机代码（NC）。此选项表示，应用程序代码是从描述应用程序的PIM生成的，通过跨平台为每个目标平台提供一个本地代码生成器。

（2）PIM-to-PSM到NC。全局PIM被转换成一组 PSM，用于特定的平台，这些低级 PSM模型是相应平台的代码生成器的输入。

（3）PSM到NC。它表示为每个开发平台直接定义一个 PSM，然后从这些 PSM中生成应用程序代码。

（4）PIM-to-Cross（CPC）到NC。此选项作为平台独立模型的输入，并通过交叉平台模式（如PhoneGap，AppCelerator Titanium和 Xamarin）生成跨平台应用程序。

（5）PIM-to-FSM(框架规范模型)到CPC。对于PIM到CPC选项，这种方法引入了FSM，它收集了用于生成应用程序的跨平台框架的信息。FSM是一个PSM，其中MDA术语中的平台实际上是用于移动应用程序开发的跨平台框架。

3 IFML的语义映射

IFML的含义是通过将交互流建模语言映射到个人通信网（PCN），PCN是Petri网的一个变体，是紧凑的模块化的。IFML到PCN是通过模型到模型的转换来生成应用程序的，在网络中移动可视地呈现 PCN动态，显示界面中的控制流和 ViewElements的状态变化。PCN模拟可帮助开发人员识别指定应用程序中的不一致之处，例如无法访问的状态和竞争条件。开发人员可以通过模型到代码的转换来生成功能完整的Web和移动原型。浏览器的仿真模拟器允许开发人员测试当前的网络或移动版本，并且在没有互联网连接的情况下，也无需安装任何Web服务器。

该原型使用自动生成的样本数据，以便填充UI，允许开发人员测试接口而不加载内容。对于其他的测试，开发人员可以自动从数据库编辑，添加或删除实体。可以重复使用IFMLEdit.org来评估不同的应用程序结构（例如单页对多页面）和交互方法，生成的原型可以下载和修复，以产生最终的应用程序。

4 结论

我们已经描述了一种用于从 IFML规范可以跨平台自动生成Web和移动应用程序的MDD方法。

IFML的含义是通过将其映射到 PCN（可以用于模拟的Petri网的变体）来定义的。从PCN和平台规范（网络或移动）可以转换为执行应用程序原型，开发过程由在线 IFMLEdit.org工具支持。 未来的工作将侧重于通过先进的移动设计模式扩展生成代码，以便内容缓存和预取可以在线使用。

[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模型转换：从功能模型到现实模型[J]. 计算机应用与软件,2005 , 22 (11):1-4.

[9] 侯金奎, 万建成, 王帅强. 一种支持MDA的模型转换方法[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和跨平台移动应用的建模语言研究[J]. 软件，2017，38（12）：246-248

曹荣凯(1994-)，男，山东聊城人，昆明理工大学信息工程与自动化学院硕士研究生，研究方向为模型驱动方法、跨平台移动应用开发。

刘晓燕(1964-)，女，云南昆明人，博士，昆明理工大学信息工程与自动化学院副教授、研究生导师，研究方向为模型驱动方法。