如何在EA中使用IFML建模

捐助

如何在EA中使用IFML建模

作者：王玉（火龙果软件工程）

次浏览

2020-9-9

为什么使用IFML建模

当前，软件的界面和用户体验受到了越来越多的关注，而软件开发都要进行界面原型设计，但界面中还存在许多的动态逻辑，光靠界面原型就难以充分表达了。IFML就是可以面向用户界面的结构和动态逻辑建模的规范，下面，我来为大家介绍一下用EA如何进行IFML建模。

如下就是一张IFML建模示意图：

如下是IFML建模示意图中的元素说明：

序号	元素	说明
1.	View Container (视图容器)	应用的UI窗口或Web页面；一个IFML图是可以由一个或多个视图容器组成的。
2.	View Component(视图组件)	界面中用于数据输入、输出与显示的元素，例如下拉列表、表单；视图组件可存于视图容器中。
3.	ParameterBinding Group (参数绑定组)	在用户发生交互活动时，传递的相关参数。
4.	Event(事件)	界面元素进行交互后，从事件导出传递值到下一个元素。

如下是IFML建模示意图中的元素关系：

序号	起点元素	关系	终点元素
1.	Event	Dependency	Artist
2.	Navigation Flow	Usage	ParameterBinding Group

IFML是什么

IFML（Interaction Flow Modeling Language，交互流建模语言）是国际标准化组织OMG定制的可视化建模标准。

IFML的目的是为系统架构师、软件工程师和软件开发人员提供用于描述应用程序前端主要维度的交互流模型的工具：在应用程序的视图部分中，由视图容器和视图组成组件，表示应用程序状态的对象以及对可执行的业务逻辑操作的引用。视图组件与数据对象和事件的绑定，定义事件发生后要执行动作的控制逻辑，以及在架构的不同层上的控制、数据和业务逻辑的分布。

如下就是一张IFML搜索模型的建模示意图：

如下是IFML搜索模型中的元素说明：

序号	元素	类型
1.	搜索页面	ViewContainer
2.	搜索结果页面	ViewContainer
3.	内容详情页面	ViewContainer
4.	搜索表单	Form
5.	搜索条件一	Field
6.	搜索条件二	Field
7.	搜索条件三	Field
8.	提交搜索数据	OnSubmitEvent
9.	结果列表	List
10.	选择对应结果内容	OnSelectEvent
11.	结果数据详情	Details
12.	图片数据	Data Binding

如下是IFML搜索模型图中的元素关系：

序号	起点元素	关系	终点元素
1.	提交搜索数据	Dependency	结果列表
2.	选择对应结果内容	Dependency	数据详情

IFML 有什么

在EA中，IFML主要元素被分为了三大部分，分别是：基本概念元素、核心元素和扩展元素。

接下来我们对IFML模型中所有的相关的元素介绍一下：

首先是，基本概念元素：

基本概念元素	说明
	View Container ：视图容器 View Component：视图组件 Catching Event：捕获事件 Throwing Event：抛出事件 Action：活动 Navigation Flow：导航流 Data Flow：数据流 Parameter:参数 Parameter Binding：参数绑定 Parameter Binding Group：参数绑定组 Parameter Binding Link参数绑定连接

其次，核心元素：

核心元素

说明

Domain Model：领域模型
IFML Model：IFML模型
Interaction Flow Model：交互流模型
Module Package：模块包
Viewpoint：视点
Annotation：注释
Module Definition：模块定义
Module：模块
Context Variable：上下文变量
Simple Context Variable: 简单的上下文变量
Data Context Variable：数据上下文变量
Action Event：行动事件
System Event：系统事件
View Element Event：视图元素事件
Port：端口
Port Definition：端口定义
Context：上下文
Data Binding：数据绑定
Dynamic Behavior：动态行为
Activity Concept：活动概念
BPMN Activity Concept：BPMN活动概念
UML Structural Feature：UML结构特征
UML Domain Concept：UML域概念
UML Behavior：UML行为
UML Behavioral Feature：UML行为特征

最后是，扩展元素：

扩展元素	说明
	Menu：菜单 Window：窗口 List：列表 Form：表单 Details：详情 Slot：位置 Field：字段 Jump Event：跳过 Landing Event：登录事件 On select Event：选择事件 On Submit Event：提交事件 On Load Event：加载事件 Device：设备 User Role：用户角色 Position：位置

IFML可以用来做什么

IFML建模规范解决了应用程序设计的相关建模问题，可以将前端的应用程序的交互过程可视化。

IFML主要作用于两方面的人员：

用户：直接了解程序的设计结构和操作过程，帮助用户理解和使用程序。

应用程序设计师：更深入了解用户交互过程，将更多的精力转向产品需求，设计出更易于让用户理解的程序，从而提交程序的受欢迎度；同时，可以帮助设计师建立一套可重复使用的组件，使其提高工作效率。

EA中如何创建IFML

在EA中，我们可以通过使用EA安装程序集成的MDG技术，快速地对应用程序进行IFML建模，除此之外，EA还支持BPMN、UML、SysML和TOGAF等多达65种建模规范，以及仿真、文档生成、代码生成、模型跟踪和团队合作管理等功能，可以方便大家实现更为复杂的应用程序设计。

在EA中可以非常快捷的创建IFML图，过程简洁。

如下图所示：

操作过程：

创建新的模型图

首先，图类型中找到交互设计

然后，选择交互流IFML

其次，选择要创建的对应IFML的图类型，点击OK即可创建完成。

在了解EA中IFML的建模过程之后，我们开始进行具体的实例讲解。

IFML建模实例

下面，我们以一个用户购物时添加购物车的交互活动进行介绍。

如下是IFML建模的具体说明：

如下是IFML建模示意图中的元素说明：

序号	元素	类型
1.	产品	ViewContainer
2.	产品详情	ViewComponent
3.	数量	ViewContainer
4.	数量	ViewComponent
5.	添加购物车	Action
6.	信息	ViewContainer
7.	信息确认	ViewComponent
8.	选择商品->商品	ParameterBinding
9.	选择数量->数量	ParameterBinding

如下是IFML建模示意图中的元素关系：

序号	起点元素	关系	终点元素
1.	选择商品	Dependency	数量
2.	选择数量	Dependency	添加购物车
3.	添加购物车	Dependency	信息确认
4.	选择商品	Dependency	添加购物车
5.	Dependency	NoteLink	选择商品->商品
6.	选择数量->数量	NoteLink	Dependency