基于MVC的IFML建模方法研究

李雅雯+刘晓燕

摘 要：MVC模式是制作软件的标准设计模式，前端开发用户体验良好。但是目前基于MVC模式的开发框架存在成本高、效率低的问题。为了避免前端开发过程中产生代码量过大、重用性过低、不易维护、扩展性不好等技术难题，OMG提出了一种详细的用来描述图形界面的抽象模型：交互流建模语言（IFML）。它是一种可视化表达前端界面构成、用户交互和控制行为的工具。在IFML模型中结合MVC 架构模式，对增强前端开发的精确性和完备性具有重要意义。扩展后的框架可以根据不同需求修改相关模型，增强了模型的可复用性，提高了应用前端的开发效率及代码的可重用性。

关键词：MVC模式；前端开发；IFML；可视化；模型

DOIDOI：10.11907/rjdk.172257

中图分类号：TP301

文献标识码：A 文章编号：1672-7800（2018）002-0038-03

0 引言

在过去几十年中，各种各样的操作系统用户界面（Graphical User Interface，简称 GUI）复杂，且复杂度随时间而增加。一些强大的交互功能是在各种技术和平台上实现的，其边界变得越来越不可区分，例如：客户端——服务器应用程序、Web应用程序、丰富的Internet应用程序、移动应用程序等等。软件开发需要更加抽象的实践，因此，软件开发研究开始侧重于用户界面的抽象模型，并出现了新的建模语言标准，这些抽象层面上的表达要求变得更加强大。

对象管理组（OMG）提出了一种名为模型驱动架构（Model Driven Architecture，简称MDA）[1]的工作，以配合软件技术的飞速发展，使物理系统的抽象化水平得以提高。因此，产生了许多描述和生成图形界面的方法，多数方法都是基于MDA的。IFML是被OMG定义为描述元素和用户界面行为的语言，它允许捕获用户交互和前端（用户界面）内容，并为该系统用户界面的控制行为建模。

1 IFML相关理论

交互流建模语言（Interaction Flow Modeling Language，簡称IFML）[2]是国际标准化组织OMG制定的可视化建模标准，目标是为系统架构师、软件工程师和软件开发人员提供交互流模型的定义工具：视图部分的应用程序由视图容器和视图组件构成，体现应用程序的对象，以及对业务逻辑动作的引用；视图组件与数据对象和事件的绑定，确定事件发生后要执行的动作控制逻辑，以及在不同层次的架构中分配控制、数据和业务逻辑。

IFML规范[3]由4个技术组件组成：①IFML元模型，使用MOF指定IFML构造的结构和语义；②IFML的 UML配置文件[4]定义了基于UML的语法，特别是UML配置文件扩展了UML图的概念：类图、状态机和复合结构图；③IFML视觉语法提供了一种专门的可视化语法，用于以特别简洁的方式表达IFML模型，具体就是提供了一个独特的图，能够压缩UML类图、状态机和复合结构图单独表示的用户界面；④IFML XMI提供IFML模型交换格式，方便工具的可移植性。

图1显示IFML模型的简单示例，用户可以在相册搜索表单中输入一些条件来搜索相册，匹配项目显示在列表中。选择一个项目触发删除操作，删除完成后，再次显示更新的相册列表。

可将IFML概念定型为描述更精确的行为。例如，可定义描述网页（特定类型的视图容器）的特定原型，表格、清单和细节（特定种类的视图组件），提交或选择事件等等[5]。

2 MVC模式

MVC（Model-View-Controller）[6]模式是一种 Web应用程序开发模式，通过将复杂的 Web 应用程序分成模型（Model）、视图（View）和控制器（Controller）3个部分，实现Web 系统的职能分工。

2.1 MVC结构

MVC模型结构[7]如图2所示。视图负责界面数据和用户请求的采集和显示，将接收到的模型处理结果显示给用户，一个模型可以对应一个或多个视图。控制器是模型与视图的联系纽带，负责用户请求的接收和转发。模型封装了系统的核心流程和业务规则，是 MVC设计模式[8]的核心，其接收来自视图的用户请求或数据，并将处理结果返回给视图。

MVC有如下优点[9]：①低耦合性：MVC模式中，模型与视图两部分相互解耦，模型不会依赖视图，而视图也只是从模型中获取所需展示的数据，不与其逻辑功能关联；②低开发成本： MVC模式将各模块职责进行了明确地划分，使开发人员可以有明确的分工、各司其责，后端程序员只负责业务逻辑功能实现，即模型部分；前端程序员只用实现界面展示效果即视图部分即可；③低维护难度：MVC模式下模型和视图部分明确分开，并使其解耦。如果改变软件需求，便可相互之间互不影响进行修改，使应用程序更易于修改、维护及扩展，从而使应用的灵活性和复用性大大提升。

2.2 MVC模式下的IFML

互动应用程序模型—视图—控制器（MVC）模型，IFML的重点在于视图。此外，IFML描述了视图引用或由应用程序的模型和控制部分所依赖的方式。视图元素ViewElements是在用户界面级别可见的主要IFML模型元素。此元素包括专门的视图容器ViewContainers和视图组件ViewComponents。ViewContainers（如HTML页面或Windows）是其它ViewContainers或ViewComponents的容器，而ViewComponents是显示内容或接受用户输入的界面元素。ViewComponents仅存在于ViewContainers中。

控制器方面，IFML允许设计者通过定义控制器处理相关事件。

模型方面，IFML允许引用数据对象及交互触发操作。用户界面的建模及与IFML的交互，相当于将每个模型分为独立可视化单元，可以同时显示或互斥显示，并可以分层次嵌套[10]。endprint

3 实例分析

本文根据MVC的3个经典建模视图，分割了房屋租赁系统PIM模型，包括静态、动态和功能视图[11]。建模视图和UML模型的交点如下：状态图模型表现了动态视图，类和包图的模型表现了静态视图，用例模型呈现功能视图。最后，根据模型—视图—控制器（MVC）的设计模式构建了所有类的信息系统。

3.1 用例图

用例图[12]是从用户角度描述系统功能， 是用户所能观察到的系统功能模型图，用例是系统的一个功能单元。本系统中，租房者是参与者，他的用例包括了Add accommodation options、Specify room、Display catalog、Start reservation、eliminate from cart product quantity 、Change accommodation options，它们之间是包含关系，如图3所示。

3.2 类图

类图[12]以反映类的结构（属性、操作）以及类之间的关系为主要目的，描述了软件系统结构，是一种静态建模方法。

本系统主要有Catalog类、Reservation类、Room类和AccommodationOption类。其中，Catalog类和Room类的操作都是显示（display），AccommodationOption类的操作是增加、删除和修改。Room类和Catalog类、Reservation类是一对多的关系，Room类和AccommodationOption类是多对多的关系，如图4所示。

包装是组织和管理对象类的容器，可用来组织其它模型元素，如界面。一个包装里的各个类相互合作，共同给使用者提供一组完整的服务。一个类或包装只能为一个包装所容纳。包装也可以互相引用，形成依赖关系。本系统中两个包装分别是Realize reservation和Deal accommodation，如图5所示。

3.3 类图信息系统

在MVC模式下，将系统的静态视图、动态视图和功能视图加以整合，重新构建成为一个类图信息系统。类图中的类在Model模式下整合成為Model Catalog类、Model Reservation类、Mode lRoom类和Model AccommodationOption类，在View模式下整合成为View Catalog类、View Reservation类、View Room类和View AccommodationOption类，在Controller模式下整合成为Controller Catalog类、Controller Reservation类、Controller Room类和Controller AccommodationOption类，如图6所示。

4 结语

基于MVC的软件开发模式提供了3部分并行开发机会，使程序员能集中精力负责数据封装和业务逻辑，页面制作员集中精力负责页面的展示，控制器则尽量选用或编写一些可重用的控制流程。IFML是一种最新的标准化建模语言，旨在捕获应用程序用户界面的结构和属性。本文讨论了IFML模型适用MVC结构并生成MVC模式下的类图信息系统，如果能开发出基于此模式的一个通用软件框架，将为软件工程化管理开创一个新局面。

参考文献：

[1] MILLER J， MUKERJI J. MDA guide version 1.0.1[EB/OL]. OMG，2003，http：//www.omg.org/docslomg/03.06.01.pdf.

[2] BRAMBILLA M， BONGIO A， BUTTI S，et al. Web applications design and development with WebML and WebRatio 5.0[EB/OL]. https：//link.springer.com/chapter/10.1007/978-3-319-17716-8.

[3] M BRAMBILLA， P FRATERNALI. Interaction flow modeling language—model-driven UI engineering of Web and mobile Apps with IFML[M]. Morgan Kauffman， USA，2014.

[4] 吴洁明，方英兰.软件工程实例教程[M].北京：清华大学出版社，2010.

[5] OBJECT MANAGEMENT GROUP.Interaction flow modeling language.Version 1.0[EB/OL]. http：//www.omg.org/spec/IFML/1.0/. IFML，2015.

[6] 姚腾辉.基于MVC模式的Web前端开发研究与应用[D].合肥：合肥工业大学，2016.

[7] 卢长利.基于MVC模式的Web框架构建与应用[D].西安：西安电子科技大学，2009.

[8] 李霞.MVC设计模式的原理与实现[D].长春：吉林大学，2004.

[9] 于春娜，王晨升，杨光，等.Web前端MVC框架的意义研究[J].产业与科技论坛，2014（1）：28-29.

[10] MARCO BRAMBILLA， ANDREA MAURI， ERIC UMUHOZA. Extending the interaction flow modeling language （IFML） for model driven development of mobile applications front end[EB/OL]. http：//www.doc88.com/p-3327742399440.html.

[11] 王永涛，刘勇.基于MDA的模型转换研究与应用[J].计算机工程，2011，37（16）：84-85.

[12] 张天，张岩，于笑丰，等.基于MDA的设计模式建模与模型转换[J].软件学报，2008，19（9）：2203-2217.endprint