页面操作流程图元详解

[必修]掌握页面操作流程图元(10分钟) - 图1一个业务系统的用户界面一般由多个页面组成，而一个页面内的组成结构和交互逻辑可以用一套简单的流程图来描述。下面来详细介绍 Enhancer 流程图元。

1. 起点

[必修]掌握页面操作流程图元(10分钟) - 图2
起点是一个页面的起始标记点，它有且只有一根连出线，指示整幅图从哪里开始。

2. 帧

[必修]掌握页面操作流程图元(10分钟) - 图3
帧是一个容器概念，一个页面由 1 个或者多个帧组成，一个帧包含（盛放）多个窗口，帧和帧之间依靠事件动作串联。一个帧下可以设置最多一个主窗口。在帧内，主窗口会先初始化，然后再初始化其他窗口。若无主窗口，帧直挂窗口会一并初始化。

3. 窗口

[必修]掌握页面操作流程图元(10分钟) - 图4
窗口是页面中盛放组件的功能单元，可以提供变量供内部或者外部使用，也可以触发事件和动作。窗口必须属于（或被挂载到）某个帧。每个窗口都有一个页面内部唯一编号，在窗口的左上角。每个窗口盛放一种类型的组件，组件名显示在窗口的右上角。可以设置窗口的显示及隐藏条件。

4. 连接线

[必修]掌握页面操作流程图元(10分钟) - 图5
连接线是帧连接到窗口之间的线，表示该挂载窗口属于该帧。

5. 动作线

[必修]掌握页面操作流程图元(10分钟) - 图6
动作线起点连接动作触发窗口，终点连接动作的目标窗口或者帧。动作线上附着文本[动作类型: 执行条件]。目前支持的动作类型有：跳转 表示从一个窗口跳转到另外一个窗口或者帧。影响 表示本窗口有变化，影响到其他窗口，其他窗口会根据依赖关系更新视图。重置 表示重置某个窗口。弹出 表示弹出某个窗口或帧。可以设置弹出方式为模态，或者非模态。按回 表示本窗口按回到弹出窗口或帧。 注意：影响和重置动作只能在同帧内进行。

动作执行是有条件的，双击动作线可以对动作执行条件进行设置。动作执行条件表达式的格式类似于 SQL 条件，但其可以包含 @变量表达式@，如：

  1. @11-GENDER@ = '男' AND @11-CHECKED@ = true

也可以是带变量的 JavaScript 条件表达式，如：

  1. @11-GENDER@ == '男' && @11-CHECKED@ == true

6. 页面跳转

[必修]掌握页面操作流程图元(10分钟) - 图7
页面跳转指向其他页面，头部标题表示页面编号。可以设置要传递给目标页面的参数，并在目标页面中通过@9-同名参数@变量获得其值。

有了这些基本图元，一个页面的基本结构和复杂的交互流程就能很直观快速地表示出来，开发者能够借助该流程图快速完成业务逻辑。

Demo