您可以捐助,支持我们的公益事业。

1元 10元 50元





认证码:  验证码,看不清楚?请点击刷新验证码 必填



  求知 文章 文库 Lib 视频 iPerson 课程 认证 咨询 工具 讲座 Modeler   Code  
会员   
   
 
     
   
 订阅
  捐助
如何在EA中使用IFML建模
 
作者:王玉(火龙果软件工程)
352 次浏览     评价:  
 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

    本次模型中主要包含了三个视图组件和其中的视图容器,还有触发活动时传递的参数值。

    这个实例主要说明了用户将产品添加到购物车的模型片段:

  • 用户点击添加购物车按钮,网站中弹出询问选择产品数量的模态窗口;
  • 系统将的所选商品及选择的数量作为参数将值传递,触发 “添加到购物车”的操作;
  • 执行操作后,页面将弹出确认信息窗口,提示用户检查当前窗口的详细内容,是否是我们所选择的产品;
  • 其次,选择要创建的对应IFML的图类型,点击OK即可创建完成。

  • 至此添加购物车的交互过程就完成了。

    EA自带了11个IFML模型模板,包括四组:

  • 信息输入
  • 交互和线框图
  • 搜索
  • 桌面应用程序
  • 这些可以帮助用户快速创建自己需要的交互模型。


     

    如果您希望了解更多信息:

    下载 pdf版: 《如何在EA中使用IFML建模》

    本文使用的建模工具为EA,可以下载试用版http://tool.uml.com.cn/ToolsEA/download.asp

     

     

    后记

    希望您读了此文后有所受益。

    如果您有经验乐于分享,欢迎投稿给我们。

    如果您对我们的培训、咨询和工具感兴趣:

  • 课程:基于UML和EA进行分析设计
  • 课程:MBSE(基于模型的系统工程)  
  • 课程:基于模型的需求管理)方法与实践
  • 课程:基于SysML和EA进行系统设计与建模  
  • 课程:企业架构建模
  • 课程:系统架构建模方法与案例
  • 课程:领域驱动的建模与设计
  • 课程:基于模型的设计
  • 课程:业务建模与业务分析
  • 建模工具:EA
  • 基于模型的需求管理工具:iSpace
  • 咨询方案:MBSE(基于模型的系统工程)
  • 咨询方案:基于UML的模型驱动的开发
  • 欢迎联系我们: 俎涛 Zutao@uml.net.cn

       
    352 次浏览     评价: 订阅 捐助
     
    相关文章

    UML概览
    UML图解:用例图(Use case diagram )
    UML图解:活动图(activity diagram )
    UML图解:类图(class diagram )
     
    相关文档

    UML统一建模语言参考手册
    网上商城UML图
    UML建模示例:JPetStor
    UML序列图编写规范
     
    相关课程

    UML与面向对象分析设计
    UML + 嵌入式系统分析设计
    业务建模与业务分析
    基于UML和EA进行系统分析设计
    最新课程计划
     
    最新文章
    iPerson的过程观:要 过程 or 结果
    “以人为本”的工程哲学
    企业架构、TOGAF与ArchiMate概览
    UML 图解:顺序图( sequence diagram )
    UML 图解:对象图( class diagram )
    最新课程
    基于UML和EA进行系统分析设计
    UML+EA+面向对象分析设计
    基于SysML和EA进行系统设计与建模
    UML + 嵌入式系统分析设计
    领域驱动的建模与设计
    更多...   
    成功案例
    某电信运营供应商 应用UML进行面向对象分析
    烽火通信 UML进行面向对象的分析设计
    西门子 UML与嵌入式软件分析设计
    航天科工某子公司 从系统到软件的分析、设计
    深圳某汽车企业 模型驱动的分析设计
    更多...