IFML 模型和OWL本体对Web图形界面的研究

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

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

IFML 模型和OWL本体对Web图形界面的研究

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

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

IFML(Interaction Flow Modeling Language)的目标是为系统架构师、软件工程师和软件开发人员提供描述应用程序前端主要维度的交互流模型的定义工具。针对当前描述图形界面的抽象模型问题，提出了一种基于MDE的模型驱动开发方法，它将逻辑描述UI组件及其与IFML捕获的交互合并，以增强Web应用程序界面的呈现。该方法用简单真实用户界面来产生一个HTML5模型作为目标模型。最终将IFML与ODM组合在一起以生成用户图形界面，通过实例验证了该方法的可行性。

ODM；IFML；图形界面；模型驱动；平台独立模型

0 引言

近年来，已经出现了许多解决方案来描述生成图形界面，其中大多数是基于OMG定义的元模型，如ODM[1]，MDA[2]。并行地，提出了基于本体的许多想法，将其集成在图形界面的描述和生成中。为了使这些想法发挥作用，演变成更好的本体驱动开发实践，OMG通过将本体与元模型结合在一起来定义ODM[3]。基于ODM的大多数作品集中在数据库和业务层[4]。IFML被定义为描述用户界面的元素和行为。

为了从交互模型和用户界面本体的优势中受益，本文提出了一种将IFML与ODM组合在一起的方法，以生成用户图形界面和两个抽象元模型。

1 用户界面的逻辑描述

本节介绍了用户界面语义模型的优点和如何使用OWLDL在OWL 2.0中显示GUI域，通过为用户图形界面定义本体来呈现该问题语义方法。

1.1 OWL2.0句法

GUI本体由三个概念形成：声明，公理和断言。用户界面域的基本元素由声明表示。声明类型分为：Classes，ObjectProperty，DataProperty，Datatypes和Individual。GUI包含的元素分为容器和控件。容器提供了一个控制控件的空间，控件是在界面中显示内容或接受用户输入的元素。对象和数据属性可用于表示域中的关系[5]。

公理分为类公理，对象属性公理和数据属性公理。每个公理与表达式相关联，属性表达式的特征在于领域和范围，在 OWL 2.0中，这是由公理subClassOf完成的，它具有subClass表达式、控制作为超类表达式的按钮。

为了区分不同类型的容器和控件，定义了DataPropertiesAxioms，该数据的集合属性在表1中表示。例如，当它是默认容器时，我们为容器选择了默认选项。除了向窗口小部件提供语义的数据属性之外，还有另一个数据类型定义附加到窗口小部件的名称和文本。断言旨在澄清个体与其他个体之间的关系。这些关系对于描述GUI的领域至关重要。而在为UI[6]开发过程保留的部分中分析GUI的逻辑模型，并遵循OWL2.0语法的ODM元模型。

表1 GUIs概念的特征Tab.1 Features of GUIs concepts

1.2 交互流建模语言（IFML）

IFML是一种平台独立模型（PIM），可以独立于实现平台来表达交互设计决策。允许捕获用户交互和前端内容，并对系统用户界面的控制行为进行建模。

IFML元模型分为核心包，扩展包和数据类包，核心包在交互流、流元素以及限制方面包含了创建语言交互基础设施的思想；扩展包发展了中心包思想，涵盖高精度行为；数据类型包包含 IFML描述的自定义数据类型。并且将许多 UML元类作为IFML元类的基础。

2 实例研究

利用WebRatio建模工具建立网站实例，分析现有的UI图形用户界面的现状，提出了一种新的MDE方法，将两个新标准相互融合生产两个抽象模型：IFML和ODM模型。可以在目标系统构建之前进行组织，评估，测试和共享。

我们提出了一种通过 OWL2.0本体[7]和 IFML的组合来获得Web应用程序的用户界面（UI）的方法，根据模型规格自动生成UI。UI元素的语义及其特征可以从 GUI本体的领域引发。然而，IFML负责捕获与 UI逻辑模型中定义的概念相关的交互和操作。这个过程是在图1所示的案例研究中进行的。

2.1 过程概述

以抽象模型开始产生一个 HTML5模型作为目标模型。HTML5寻求建立一套连贯一致的概念和共同的技术基础来开发各种互动UI。案例研究代表一个包含表单的界面。

图1 案例研究Fig.1 case study

过程分为三个步骤：从 PSM 模型中定义 PIM模型，M2M转换和代码生成。如图2所示，显示了结合ODM和IFML的模型驱动流程。

2.2 PIM模型

首先定义两个PIM模型：关于ODM元模型的语法逻辑模型和从 IFML元模型得出的交互模型。这两个元模型以ecore格式用EMF（Eclipse建模框架）定义。

为了定义逻辑模型，我们将第2节中详细分析的结果应用于我们的案例研究。界面包括两个容器：包含控件的窗口和窗体、静态字段、单选按钮和提交按钮。这些元素在逻辑模型中的表示定义如下[8]：容器和控件是由OWL为例的个体表示。IFML原模型的PIM模型如图3所示。

重点关注两个包：核心包和扩展包。这些包抽象地表示用户界面的结构以及它们在交互方面的元素之间的依赖关系。IFML模型是所有其余模型元素的顶级容器。在用户界面可见的 IFML模型元素称为 ViewElements[9]。专门用于 ViewContainers和ViewComponents。ViewContainers（如 HTML页面或窗口）是其他ViewContainers或ViewComponents的容器，而 ViewComponents是显示内容或接受用户输入的界面的元素。扩展包包括 ViewComponent的具体示例。

图2 模型驱动的过程Fig.2 Model-driven process

图3 IFML元模型的PIM模型Fig.3 PIM model of IFML metamodel

在图 1所示的示例中，视图容器被标记为“窗口”并设置为默认值。表单由OnSubmit事件组成，但是选择一个单选按钮产生的事件导致显示一个新窗口，其中包含表示为参数绑定组的 LastName和FirstName简单字段中的数据项。该效果由连接与OnSubmit事件组件相关联的事件与两个窗口的导航流表示。导航流程表示用户界面状态的变化。事件的发生从Form（源交互流元素）到其他窗口（目标交互流元素）的转换。将表单与两个表达式相关联，激活表达式表示触发动作变为活动的事件须满足当前交互上下文的条件，以及确定在事件发生后遵循哪个InteractionFlow的交互流表达式。

模型实例是我们关于 IFML元模型语法的案例研究的抽象形式[10]。如图4所示。因此，通过这两个ODM和IFML模型，我们可以轻松地在桌面、网络、移动的多个平台中拥有UI对象模型。

2.3 PIM到PSM转换

模型到模型转换是用QVTo（查询/查看/转换）[11]设计的。为了从抽象模型中获得一个HTML5模型，应用了几个转换规则，转换算法是基于源和目标元模型元素之间的映射[12]。因此，我们能够链接本体和IFML模型的多个数据源。

所以，如果 NamedIndividual是一个具有dataProperty的“Window”类的实例，它将被映射到Page。Html Form Element从“Form”Individual获得，“Button”和“Field”类的 NamedIndividuals在 HTML5模型中被映射为HtmlInputElements。每个个体的性质由 dataProperties提供，它被映射到 HtmlInput-Element元类中存在的“Type”属性。数据类型映射到Html InputElement和Page metaclasses中的属性。则转化算法如下：

Algorithm 1:tranformation IFMLODToHTML

Inputcore:IFML/CORE,EXTENSION:IFMLL/

extension, odm:ODM

Output html:Html5

....

Mapping Nameindividuals2HTMLinputElement

HTMLinputElement

Begin

...

IfindivinstanceOf Class::Button

For all e Ɛ extension::OnsubmitEvent::OnsubmitEvent

If e.name=indiv.value

Map ActivationExpression2Script(e.elements[Activation])

Map interactionFlowExpression2Script

(e.element[InteractionFlowExpression])

End if

End for

End if

End

Mapping ActivationExpression2Script(active)

HTMLScriptElement

Begin

Language＜-active.language

Text＜-active.body

End

Mapping InteractionFlowExpression2Script(inter)

HTMLScriptElement

Begin

图4 IFML元模型的IFML模型Fig.4 IFML Metamodel IFML model

Language＜-inter.language

Text＜-inter.body0

End

End

2.4 PSM模型和代码生成

此步骤描述了从较高级别到较低抽象级别的渐进优化[13]。通过应用前面提到的转换规则，ODM和IFML模型中的每个元素将被转换为HTML5[14]元模型的元素。根据HTML5元模型生成的目标模型[15]。该模型包含从两个PIM模型中收集所有元素、属性和交互。系统的PSM模型如图5所示。

3 结束语

在本文中，我们给出了一种新的方法 MDE组合，由 OMG定义的两个重要的抽象规范来导出UIsWeb应用程序。IFML允许抽象地表示用户界面的结构以及它们在交互方面的元素之间的依赖关系。该过程已经在一个简单的抽象形式界面上进行了测试，该界面被转换为一个 HTML5表单。由于将本体与 IFML结合在一起的优势，我们有信心在用户界面开发中使用IFML和 ODM为未来的软件增添有趣的功能。

图5 系统的部分PSM模型Fig.5 Part of the PSM model of the system

[1] OMG, Architecture-Driven Modernization Standards(2007),http: //adm. omg. org/.

[2] 王永涛, 刘勇. 基于MDA的模型转换研究与应用[J]. 计算机工程, 2011, 37(16): 84-85.

[3] 于欢, 陈劲杰, 周庆曙, 等. 基于本体的机械零件知识库语义查询[J]. 电子科技, 2017, 30(7): 90-93.

[4] Paulheim H, Probst F. A Formal Ontology on User Interfaces-Yet Another User Interface Description Language[J].Konferenzveröffentlichung, 2011, 76(6): 1124-1129.

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

[6] Fernando Silva Parreiras, Steffen Staab. Using ontologies with UML class-based modeling: The TwoUse approach[J].Data & Knowledge Engineering, 2010, 69(11): 1194-1207

[7] Brambilla M, Fraternali P. Interaction Flow Modeling Language: Model-Driven UI Engineering of Web and Mobile Apps with IFML[M]. Morgan Kaufmann Publishers Inc. 2014.

[8] Wysota W. Porting Graphical User Interfaces through Ontology Alignment[M]// Emerging Intelligent Technologies in Industry. Springer Berlin Heidelberg, 2011: 91-104.

[9] Bast W, Murphree M, Michael L, et al. MOF QVT final adopted specification: meta object facility (MOF) 2.0 query/view/transformation specification[J]. 2005.

[10] Fernando Silva Parreiras, Steffen Staab. Using ontologies with UML class-based modeling: The TwoUse approach[J].Data & Knowledge Engineering, 2010, 69(11): 1194-1207.

[11] Paulheim H. Ontology-based System Integration[M]//Ontology-based Application Integration. Springer New York,2011: 27-59.

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

[13] Wagner C, Wagner C. Model-Driven Software Migration[J].Model-Driven Software Migration: A Methodology: Reengineering, Recovery and Modernization of Legacy Systems,2014: 67-105.

[14] 李岩. 基于XML的系统数据集成方法研究及应用[J]. 电子科技, 2009, 22(4): 1-4.

[15] Cañadas J, Palma J, Túnez S. Model-driven rich user interface generation from ontologies for data-intensive web applications[J]. Aepia Org, 2011, 4(2): 95-101.

Research on Web Graphical Interface Based on IFML Model and OWL Ontology

ZHU Hui-long1, LIU Xiao-yan1, ZHANG Xue-mei2, CAO Rong-kai1, LI Dan-dan1
(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) was 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. Aiming at the abstract model of the graphical interface, a model-driven development method based on MDE is proposed, which combines the logical description UI component and its interaction with IFML to enhance the presentation of the Web application interface. The method used a simple real user interface to generate an HTML5 model as the target model. Finally, IFML and ODM were combined to generate user graphical interface, and the feasibility of the method was verified by an example.

ODM; IFML; Graphic interface; Model driven engineering; Platform independent model

TP311.5

A

10.3969/j.issn.1003-6970.2017.12.041

本文著录格式：朱汇龙，刘晓燕，张雪梅，等. IFML模型和OWL本体对Web图形界面的研究[J]. 软件，2017，38（12）：211-215

朱汇龙(1992-)，男，硕士研究生，研究方向为：模型驱动方法和基于WEB的软件开发技术。

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