IFML在Web开发中的应用

朱汇龙　刘晓燕

摘要：IFML（Interaction Flow Modeling Language）的目标是为系统架构师、软件工程师和软件开发人员提供描述应用程序前端主要维度的交互流模型定义工具。应用程序视图部分由视图容器和视图组件组成，体现应用程序状态的对象以及可执行的业务逻辑操作引用。视图组件与数据对象和事件的绑定事件发生后要执行动作控制逻辑，以及在不同层次架构中分配控制、数据和业务逻辑。分析了IFML在Web开发中的生命周期，并根据生命周期中使用的方法对IFML进行比较，最终将IFML添加到Web工程的生命周期图中。通过实例验证了该方法的可行性。

关键词关键词：IFML；Web开发生命周期；交互建模；Web工程方法；WebRatio

DOIDOI：TP311.510.11907/rjdk.171856

中图分类号：TP319

文献标识码：A文章编号文章编号：16727800（2017）011015703

0引言

交互流建模语言（Interaction Flow Modeling Language，简称IFML）[1]是国际标准化组织OMG制定的可视化建模标准，是一种可视化表达前端应用程序内容、界面构成、用户交互和控制行为的工具。与传统的软件开发方法相比，IFML模型可以与UML、域模型集成，使用BPMN 2.0建模。一个UX风格的设计师可以与IFML模型结合完成屏幕可视化。组合IFML、UML、BPMN模型和样式表传递给代码生成器[2]。

IFML标准解决了与应用程序前端相关的建模问题。WebRatio Plaform是第一个完全支持IFML标准的平台。IFML使设计人员将重点从编码转变为需求定义，从而增加了利益相关者的参与度，并提高了软件质量。建立一套可重复使用的资产和组件，可以跨项目重用。本文以图书购买系统软件开发为例，围绕IFML应用于Web开发生命周期展开研究，通过IFML提高Web应用程序开发能力。

1IFML相关理论

1.1交互流建模语言应用

IFML由对象管理组织（Object Management Group，OMG）在2013年提出，具有开发Web应用程序功能，特别是丰富的应用界面，可以轻松支持RIA（Rich Internet Applications）。 Macro Brambilla和Piero Fraternal[3]解释了IFML概念，并介绍了元模型、Web的过程开发、移动应用程序和功能扩展等； WebRatio[4]是支持IFML开发移动应用程序的良好平台。Web开发与演变过程如图1所示。

图1Web开发与演变过程

1.2IFML元模型

IFML元模型定义是语言描述的最佳方法，包括抽象、模块化、回收以及可扩展性。元模型分为扩展包、核心包及数据类包。核心包在交互流、流元素以及限制方面包含了创建语言交互基础设施的思想；扩展包发展了中心包思想，涵盖高精度行为；数据类型包包含IFML描述的自定义数据类型。基本的UML元模型数据类型由IFML元模型重用，它將几个UML元类重点作为IFML元类的基础。IFML模型是其它模型组件的顶级组件。它需要一个域模型、一个交互流模型以及“观点”。交互流模型通过引用交互流模型元素集合，共同定义系统功能，提供应用程序视图。作为一个抽象类别，“Named Element”重点介绍了Element类，证明“Named Element”元素对任何组件，指定注释和约束都很容易[5]。交互流模型元素是对IFML各方面进行分级，本身与使用IFML图不直接相关。相反，它由更特定的概念（如交互流程元素，交互流程）定义。

1.3IFML作用

（1）要求规范：规范有关应用领域数据及预期功能。输入一组需要满足应用程序开发的业务需求，以及可访问数据。输出一个实用的规格文件：识别用户功能以及与每个功能相关的用例、所需领域概念及其语义关联的数据字典。每个应用案例的工作流程，显示关键参与者（应用程序、用户和可能的外部服务）的交互。

（2）领域建模：将关键信息对象系统化为一个广泛而清晰的模型，域建模将关键数据集定义为域模型，特征视觉描绘必要的对象以及质量和相互关系[6]。

（3）前端建模：将数据操作要求和信息传递功能绘制到前端模型中。 IFML在前端建模中起作用。

（4）业务逻辑建模：描述和维护用例所需的业务对象和技术。UML动态和静态图通常用于显示对象接口及消息流。调整过程信息（如UML功能和序列图，BPMN流程模型和BPEL服务编排），提供服务和对象之间表示工作流的有效方法。

（5）实施：将业务逻辑、数据和界面设计转换为应用程序软件。

（6）测试和评估：确认所安装的应用程序功能要求一致。交互式模型测试包括功能试用、可用性评估、绩效评估等，如图2所示。

图2IFML在交互式应用程序开发过程中的作用

1.4IFML与其它方法比较

对参考资料进行详细的IFML审核后，获得有关IFML生命周期的完整过程。在WebRatio支持下，通过以下方式定义视觉语法：DD、DI和OMG标准，模型序列化，基于XMI定义的交换格式 [7]。用completely简写C表示开发阶段，用portion简写P表示开发阶段。IFML与其它方法比较结果如表1所示。

2实例研究

利用WebRatio建模工具建立网站图书购买系统，以支付模块为例展示IFML方法设计Web应用程序的能力。

2.1内容模型

内容建模是设计中最为重要的环节之一，本文以WebRatio开发思想为指导，设计了系统业务逻辑模型[8]。endprint

本例中客户的购物车开始是空的。当用户浏览页面并获取喜爱的图书信息时，将产品添加到购物车中。用户随时可以通过IFML方法选择移动列表，可随时查询，以及提供支付订单选项，清空购物车或继续浏览其它图书信息。图3为网站图书内容模型。

图3网站图书内容模型

2.2流程模型

用户进入网站后浏览书籍。找到感兴趣的图书后可选择放入购物车。用户可继续浏览其它产品，通过删除或更新图书管理购物车信息[9]。用户准备付款则执行结帐程序。付款必须将用户信息发送给银行，并等待确认。该过程如图4所示。

图4网站图书流程模型

2.3IFML应用于网站书店中

在网站主页中，用户可选择其中一本图书查看完整描述，也可直接通过添加购物车购买图书。一旦用户从BookCategory中选择一个类别，就会产生一个导航事件，然后在BookDetail中显示Book细节。当用户选择Checkout选项时，将显示容器的“客户信息”，用户必须通过填写此容器内的表单提供个人信息。当用户提交个人信息后，将显示“容器的支付信息”。在该容器中，用户必须提供银行帐户详细信息，执行支付流程。为了增加模型的可重用性和模块化，设计人员可将模型集成到模块中[10]。例如，支付模型可打包成一个特定的模块。

IFML方法完全支持Web工程生命周期中的分析/设计阶段[11]。可生成代码作为语义实现，但不完全支持其它阶段。

由于篇幅有限，本文选取系统一部分为例说明IFML支持Web工程生命周期的方法。IFML应用在网站图书购买系统过程如图5所示。

图5IFML模型下的付款执行流程

3结语

本文分析了IFML在Web开发生命周期中的作用。将IFML添加到Web生命周期图中，并将IFML和现有方法进行了比较。结果表明，IFML在Web开发周期中发挥了良好的作用。

参考文献参考文献：

[1]IFML. Interaction flow modeling language[EB/OL]. http：//www.ifml.org/.

[2]MANOLESCU I， BRAMBILLA M， CERI S， et al. Modeldriven design and deployment of serviceenabled web applications[J]. Acm Transactions on Internet Technology， 2005，5（3）：439479.

[3]BRAMBILLA M， FRATERNALI P. Interaction flow modeling language： modeldriven UI Engineering of Web and mobile Apps with IFML[EB/OL]. http：//www.doc88.com/p6963130464657.html.

[4]ACERBIS R， BONGIO A， BRAMBILLA M， et al. Modeldriven development based on OMGs IFML with Webratio Web and mobile platform[J]. Engineering the Web in the Big Data Era. Springer International Publishing， 2015（5）：605608.

[5]WAKIL K， JAWAWI D N A， SAFI A. A comparison of navigation model between UWE and WebML： homepage development case study[EB/OL]. https：//www.researchgate.net/profile/Karzan_Wakil.

[6]劉洪星，李广田，张笑，等.用户界面概念元模型及概念建模工具的研究[J].武汉理工大学学报，2016，38（1）：96100.

[7]LUíS A， DOMINGUES S， BIANCHINI S L， et al. A comparison study of Web development methods[EB/OL]. https：//www.researchgate.net/publication/228965170_A_Comparison_Study_of_Web_Development_Methods？ev=auth_pub.

[8]HUANG Y C， WU C C， CHU C P. A new approach for Web engineering based on model driven architecture[EB/OL]. https：//www.en.cnki.com.cn/Article_en/CJFDTotalJSJK200702011.htm.

[9]FATOLAHI A， SOME S S. Assessing a modeldriven Webapplication engineering approach[J]. Journal of Software Engineering & Applications， 2014，7（5）：360370.

[10]ROSSI G， PASTOR O， SCHWABE D， et al. Web Engineering： modelling and implementing Web applications[M]. Springer London， 2007：44.

[11]HUANG W， LI R， MAPLE C， et al. A novel lifecycle model for Webbased application development in small and medium enterprises[J]. International automation and computing， 2010，7（3）：389398.

责任编辑（责任编辑：杜能钢）endprint