IFML到MVPJavaFX的元模型转换及代码生成研究

2020-03-16李丹丹刘晓燕曹荣凯吉春山

陕西理工大学学报(自然科学版) 2020年1期

李丹丹，刘晓燕*，曹荣凯，吉春山，严馨

(1.昆明理工大学信息工程与自动化学院，云南昆明 650500； 2.金川镍钻研究设计院，甘肃金昌 737100)

近年来，软件应用市场对用户界面的需求逐渐变得丰富且复杂，因此，传统的基于Html的Web应用程序的用户界面越来越体现出局限性，已不能满足浏览者更高的、全方位的体验要求。而富互联网应用程序(Rich Internet Application，RIA)[1]的出现解决了这个问题。RIA由于结合了桌面应用程序良好的用户交互体验和Web应用程序部署的灵活性，很快获得企业的青睐[2]。然而，由于RIA用户界面的复杂性，在开发用户界面工作前，设计师需了解计算机平台、用户特点、环境交互等，这是一项复杂耗时、一致性低的工作。交互流建模语言(Interaction Flow Modeling Language，IFML)的出现解决了RIA用户界面建模设计工作复杂的问题，提高了设计效率，并且保证应用程序的需求被完整准确地设计。传统的软件开发过程是以代码为中心，通常采用文本和图的方式来描述需求分析和设计，随着开发的进行，不可避免地需要不断地修改软件，但实际上只是修改代码，这样不利于软件的维护和复用。本文采用模型驱动方法[3]结合Eclipse 建模框架(Eclipse Modeling Framework，EMF)[4]开发RIA用户界面，降低开发工作的重复性，提高开发质量。IFML是以图形化的方式描述用户界面需求，并且可以通过扩展方式描述更为复杂的大型应用的用户界面，操作灵活度高[5]。现有的实现模型驱动方法中RIA用户界面实现平台的选择技术有Ajax、Flex、Silveright、JavaFX、WPF等。传统Web应用程序开发已经得到一些软件框架的支持，这些框架是用于加速企业级应用程序开发的实例化架构，利用组件的内部组织，通过分离关注点促进代码的模块化，因此每个模块只处理一个特定的方面，比如业务逻辑处理，交互逻辑处理，用户交互与界面显示，这些框架也适用于模型驱动开发。因此，本文选择符合MVP设计模式的JavaFX开发框架。

1 相关概念介绍

1.1 模型驱动架构

对象管理组织(Object Management Group，OMG)提出了模型驱动架构(Model Driven Architecture，MDA)[6]。与传统的以代码为中心的软件开发方法相比，MDA以模型作为软件开发重要成分[7]，其中包含3个不同的抽象层次：

(1)计算独立模型(Computing Independent Model，CIM)：该层模型精确地显示了系统应该做什么，但是隐藏了所有的技术规范；

(2)平台独立模型(Platform Independent Model,PIM)：该模型描述了软件需求，不涉及任何有关实现技术的问题，提高了需求分析与设计的抽象层次；

(3)平台相关模型(Platform Specification Model,PSM)：它将PIM中的规范与特定类型平台的细节相结合，从而该层包含具体实现技术的细节。

通过执行模型转换，可以实现CIM、PIM和PSM模型之间的转换，最终实现代码的生成。转换是通过转换规则将一个抽象层转换为另一个抽象层，通常是从较高级别抽象层转换为低级别的抽象层。转换包括两种:模型到模型，模型之间的转换包含从CIM到PIM或从PIM到PSM的转换；模型到文本，该转换实现将PSM转换成目标编程语言的代码生成。

1.2 交互流建模语言

交互流建模语言是OMG最近为用户界面建模采用的新标准，它是UML扩展，同时具有扩展性[8]。IFML是以图形化的形式来表示软件应用前端的内容、用户交互和控制行为，并且支持诸如桌面、网页、移动设备等多种终端上的应用[9]。IFML由于它的可视化，易操作解读，在用户界面建模领域得到广泛的应用。

视图容器(ViewContainer)是IFML模型图的基本界面元素，例如实际中的窗口、网页或者抽象意义上的容器等。视图组件(ViewComponent)是视图容器组成部分，用来显示内容或接受用户输入的界面元素。视图组件可以由一个或多个视图组件部件(ViewComponentPart)组成，比如输入的字段(SimpleField)、选择字段(SelectionField)等。视图容器或视图组件可以和事件(Event)相关联，事件可以由用户交互，系统事件或动作(Action)的正常或异常终止生成。事件通过导航流(NavigationFlow)连接到目标视图组件或视图容器。参数绑定组(ParameterBindingGroup)与导航流相关联，表示视图容器和视图组件之间的输入、输出的依赖关系。

1.3 MVP设计模式

MVP模式(Model-View-Presenter)是从著名的MVC模式(Model-View-Controller)[10]演变而来的。图1描述了MVP模式的架构，该模式分为3层。

View：该层是视图层，用于接收用户交互的行为并将数据处理结果进行显示；

Presenter：该层是展示器层，提供View和Model之间数据的纽带，主要负责数据传输与交互逻辑的处理；

Model：该层是模型层，负责对数据的处理，Model保存Presenter传递来的数据，通过业务逻辑处理后，将更新的数据返回给Presenter[11]。

图1 MVP模式的架构图

近年来，MVP模式在Web应用前端设计的用户界面开发中逐渐得到广泛地运用。Java、.NET、PHP平台下已经有很多基于MVP模式的开发框架，应用比较多的有JavaFX[12]、Vaadin、Echo2、ASP.NET、Nette(PHP)等。

2 研究方法概述

图2 研究过程及采用的技术

本文在已有的MDA思想下实现RIA用户界面的生成，图2给出了本文的研究过程。首先，使用IFML为RIA用户界面定义PIM层的Ecore元模型；其次，选择JavaFX作为生成RIA用户界面的目标实现平台，并定义了满足MVP模式的JavaFX PSM层的元模型；通过使用ATL定义的模型转换规则[13]实现PIM到PSM转换；最后，使用Acceleo模型转换工具[14]实现PSM到最终代码的生成。

2.1 使用IFML建立PIM Ecore元模型

2.1.1 针对RIA对IFML进行扩展

本节将结合一个书籍管理应用(MyBooks Application)的实例进行建模说明。该应用实例支持查看书籍列表，选择一本书籍查看其详细信息(书名、作者、书籍种类)，编辑书籍信息等功能。由于IFML支持扩展，在建模之前，将针对该实例进行扩展，以满足RIA用户界面建模需求。具体扩展如下：

(1)针对视图组件的扩展：表单视图组件(Form ViewComponent)表示数据输入表单，详细信息视图组件(Details ViewComponent)用于表示一个对象的属性值，标签视图组件(Label ViewComponent)用于定义标注，列表视图组件(List ViewComponent)用于显示对象列表。

(2)针对事件的扩展：选择事件(On Select Event)表示从集合中选择一个元素的事件，数据提交事件(On Submit Event)表示提交一个或多个值的事件。

(3)针对视图组件部件的扩展：输入字段(Simple Field)表示捕获一种类型值的字段，选择字段(Selection Field)是一种字段，支持从预定义的集合中选择一个或多个值。

2.1.2 建模过程

根据2.1.1节对IFML进行的扩展说明，本节使用基于Eclipse和Sirius API的开源IFML编辑器[15]对实例的用户界面需求进行图形化建模设计。首先在Eclipse中建立一个Modeling Project，并在工程中建立一个Ecore文件，打开IFML图形编辑器进行建模，图3给出了书籍管理应用的图形化建模。

图3 书籍管理应用的IFML图形化建模

2.2 MVPJavaFX的PSM元模型设计

图4定义了满足MVP架构模式的JavaFX_PSM元模型，其中包含了3个包。

(1)视图层包：该层包含描述用户界面的元素，Scene表示用户界面最顶层的元素，Scene还可以包含一些组件(Control)。由于JavaFX实现平台包含很多描述用户界面的组件，在这里，仅列出其中几个常用的组件，如Label(标签)、Text Field(文本框)、Combo Box(组合框)、List View(列表视图)、Button(按钮)。组件在整个用户界面的位置分布用Root表示，包括顶部、中部、底部3种。触发组件会引起动作事件(ActionEvent)的产生。

(2)模型层包：在该层包中，JavaBean用来封装业务数据，并使用Service(服务)实现业务逻辑处理。

(3)展示器层包：该层包包含连接Model层和View层的事件处理器，如图所示的EventHandler。事件处理器得到来自View层的动作事件通知时，将会连接到模型层指定的服务完成业务逻辑处理，处理完毕，事件处理器接着将处理结果返回给View层显示。

图4 MVPJavaFX_PSM元模型

2.3 转换过程

2.3.1 IFML到MVPJavaFX的元模型转换

由2.1节描述的方法完成用户界面需求的IFML_PIM Ecore元模型的建立，接下来通过ATL转换生成MVPJavaFX_PSM Ecore元模型。根据IFML元素与MVPJavaFX平台元素的语义关系，将IFML元素分别映射到MVPJavaFX平台中有相同语义关系的元素。具体转换规则的描述如下：

1)ViewContainer2Scene：IFML中的ViewContainer元素转换为JavaFX平台中的Scene元素；

2)Label2Label：IFML中的Label元素转换为JavaFX平台中的Label元素；

3)List2ListView：IFML中的List元素转换为JavaFX平台中的ListView元素；

4)Event2ActionEvent：IFML中的Event元素转换为JavaFX平台中的ActionEvent元素；

5)NavigationFlow2Button：IFML中的Navigation Flow元素转换为JavaFX平台中的Button元素；

6)SimpleField2TextField：IFML中的Simple Field元素转换为JavaFX平台中的TextField元素；

7)SelectionField2Combo Box：IFML中的Selection Field元素转换为JavaFX平台中的Combo Box元素；

8)Event2EventHandler：当用户界面中的Event被触发时，比如选择了一本书籍查看其详细信息或者提交一份表单数据，将这种场景映射到JavaFX平台中的Presenter模块则需要对应的一个EventHandler；

9)ParameterBindingGroup2JavaBean:IFML中的Parameter Binding Group元素转换为JavaFX平台中Model模块的JavaBean元素；

10)Event2Service：当用户界面中的Event被触发时，映射到JavaFX平台中的Model模块则需要处理该事件业务逻辑相对应的Service Event_method。

实现以上模型转换的ATL转换代码如下：

Moudle IFMLModel2JavaFXMVPPackage

Creat OUT:JavaFX JavaFXMVPPackage from IN: IFMLModel

//将IFML中的元素转换为MVPJavaFX平台中的View模块元素

rule IFMLModel2JavaFXViewPackage{

from

i:IFMLModel!IFMLModel

j:JavaFXViewPackage! JavaFXViewPackage{

Scene <- i.View Container,

Label<- i.View Component Label,

Combo Box<- i.Selection Field,

ListView<- i.List,

TextField<- i.Simple Field,

Button<- i.Navigation Flow

ActionEvent<- i.Event

};

//将IFML中的元素转换为MVPJavaFX平台中的Preseneter模块元素

rule IFMLModel2JavaFXPresenterPackage{

from

i:IFMLModel!IFMLModel

j:JavaFXPresenterPackage! JavaFXPresenterPackage{

EventHandler <- i. Event,

};

//将IFML中的元素转换为MVPJavaFX平台中的Model模块元素

rule IFMLModel2JavaFXModelPackage{

from

i:IFMLModel!IFMLModel

j:JavaFXModelPackage! JavaFXModelPackage{

JavaBean <- i.Parameter Binding Group,

Service Event_method<- i. Event

};

2.3.2 MVPJavaFX元模型到文本的转换

由2.3.1节生成的MVPJavaFX_PSM Ecore元模型，最后通过OMG标准Acceleo实现PSM模型到代码的生成。Acceleo是一种OMG标准模板语言，使用模板生成代码，因此，首先需要定义符合MVPJavaFX平台的代码生成模板。在Acceleo工具中执行所定义的代码模板文件，最后为应用程序生成Model、View、Presenter三个模块的Java源代码和fxml文件，这些源文件最终作为JavaFX工程被加载到Eclipse中。图5为定义的Acceleo代码生成模板的部分截图。

图5 Acceleo代码生成模板

3 举例说明

为验证2.3节模型转换的可行性，采用2.1节给出的MyBooks Application作为研究案例。2.1节已完成对该实例的IFML_PIM Ecore元模型的建立，所以不再重述。根据2.3.1节描述的IFML模型元素到MVPJavaFX模型元素的映射过程，在Eclipse平台下，通过ATL插件编写应用实例的模型转换代码，部分截图如图6所示。