为什么使用IFML建模
当前,软件的界面和用户体验受到了越来越多的关注,而软件开发都要进行界面原型设计,但界面中还存在许多的动态逻辑,光靠界面原型就难以充分表达了。IFML就是可以面向用户界面的结构和动态逻辑建模的规范,下面,我来为大家介绍一下用EA如何进行IFML建模。
如下就是一张IFML建模示意图:
如下是IFML建模示意图中的元素说明:
NO | 元素 | 说明 |
1. | View Container (视图容器) | 应用的UI窗口或Web页面;一个IFML图是可以由一个或多个视图容器组成的。 |
2. | ViewComponent(视图组件) | 界面中用于数据输入、输出与显示的元素,例如下拉列表、表单;视图组件可存于视图容器中。 |
3. | ParameterBindin gGroup (参数绑定组) | 在用户发生交互活动时,传递的相关参数。 |
4. | Event(事件) | 界面元素进行交互后,从事件导出传递值到下一个元素。 |
如下是IFML建模示意图中的元素关系:
NO | 起点元素 | 关系 | 终点元素 |
1. | Event | Dependency | Artist |
2. | Navigation Flow | Usage | ParameterBinding Group |
IFML是什么
IFML(Interaction Flow Modeling Language,交互流建模语言)是国际标准化组织OMG定制的可视化建模标准。
IFML的目的是为系统架构师、软件工程师和软件开发人员提供用于 描述应用程序前端主要维度的交互流模型的工具:在应用程序的视图部分中,由视图容器和视图组成组件, 表示应用程序状态的对象以及对可执行的业务逻辑操作的引用。视图组件与数据对象和事件的绑定,定义事件发生后要执行动作的控制逻辑,以及在架构的不同层上的控制、数据和业务逻辑的分布。
如下就是一张IFML搜索模型的建模示意图:
如下是IFML搜索模型中的元素说明:
NO | 元素 | 类型 |
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搜索模型图中的元素关系:
NO | 起点元素 | 关系 | 终点元素 |
1. | 提交搜索数据 | Dependency | 结果列表 |
2. | 选择对应结果内容 | Dependency | 数据详情 |
IFML 有什么
在EA中,IFML主要元素被分为了三大部分,分别是:基本概念元素、核心元素和扩展元素。
接下来我们对IFML模型中所有的相关的元素介绍一下:
首先是,基本概念元素:
基本概念元素 | 说明 |
View Container :视图容器 |
其次,核心元素:
核心元素 | 说明 |
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:菜单 |
IFML可以用来做什么
FML建模规范解决了应用程序设计的相关建模问题,可以将前端的应用程序的交互过程可视化。
IFML主要作用于两方面的人员:
|
EA中如何创建IFML
在EA中,我们可以通过使用EA安装程序集成的MDG技术,快速地对应用程序进行IFML建模,除此之外,EA还支持BPMN、UML、SysML和TOGAF等多达65种建模规范,以及仿真、文档生成、代码生成、模型跟踪和团队合作管理等功能,可以方便大家实现更为复杂的应用程序设计。
在EA中可以非常快捷的创建IFML图,过程简洁。
如下图所示:
操作过程:
|
在了解EA中IFML的建模过程之后,我们开始进行具体的实例讲解。
IFML建模实例
下面,我们以一个用户购物时添加购物车的交互活动进行介绍。
如下是IFML建模的具体说明:
如下是IFML建模示意图中的元素说明:
NO | 元素 | 类型 |
1. | 产品 | ViewContainer |
2. | 产品详情 | ViewComponent |
3. | 数量 | ViewContainer |
4. | 数量 | ViewComponent |
5. | 添加购物车 | Action |
6. | 信息 | ViewContainer |
7. | 信息确认 | ViewComponent |
8. | 选择商品->商品 | ParameterBinding |
9. | 选择数量->数量 | ParameterBinding |
如下是IFML建模示意图中的元素关系:
NO | 起点元素 | 关系 | 终点元素 |
1. | 选择商品 | Dependency | 数量 |
2. | 选择数量 | Dependency | 添加购物车 |
3. | 添加购物车 | Dependency | 信息确认 |
4. | 选择商品 | Dependency | 添加购物车 |
5. | Dependency | NoteLink | 选择商品->商品 |
6. | 选择数量->数量 | NoteLink | Dependency |
本次模型中主要包含了三个视图组件和其中的视图容器,还有触发活动时传递的参数值。
这个实例主要说明了用户将产品添加到购物车的模型片段:
|
至此添加购物车的交互过程就完成了。
EA自带了11个IFML模型模板,包括四组:
- 信息输入
- 交互和线框图
- 搜索
- 桌面应用程序
这些可以帮助用户快速创建自己需要的交互模型。
如果您希望了解更多信息: