页面树结构

版本比较

标识

  • 该行被添加。
  • 该行被删除。
  • 格式已经改变。

DWF的表单建模是基于拖拽所见即所得方式完成界面的建模,建模工具提供了6大类、51种控件,覆盖多种数据展示场景;DWF控件支持与数据的无缝对接,让用户将精力集中在了解需求;通过DWF的分享功能可边用边改,及时响应需求变更;表单随时分享方便与其他系统集成。

表单建模

(一)表单

DWF中,表单(Form)是用于展示实体类、关联类对象的界面模板。表单模型通过建模工具(modeler)定制,形式包括属性的展示方式和布局方式。每个表单有一个目标类,如果该目标类为实体类,则是实体类表单(Entity Class Form);如果该目标类为关联类,则是关联类表单(Relation Class Form)。

(二)控件

单个表单通常由一个或多个表单控件(Form Control)通过一定布局方式组成,控件用于显示单个对象的某个属性或多个对象的列表。表单控件有三类调整表单展示和行为的属性:

  • 控件设置(Control Settings):用于设置目标属性的特征。例如:日期控件可设置日期的显示方式。
  • 控件样式(Control Styles):用于设置控件的外观样式。例如:对齐方式等布局风格。
  • 控件事件(Control Events):用于设置控件的行为,每个控件有若干事件。例如:值变化事件就代表控件的一类事件。事件和操作绑定后,开发脚本控制表单的行为。

(三)单位介绍

DWF中样式设置区提供5种单位,5种单位的含义解释如下:

...

单位宽度高度文本大小
px
vw

vh

%

rem

表单建模工具

(一)表单定制页面

表单定制界面如下:

图-表单定制页面

  • 工具条:工具条提供的对整体表单的操作,例如创建、复制、删除表单;控制整体布局的样式及提供前进、后退等快捷键;设置表单被打开前或关闭后的事件响应。
  • 控件区:左侧控件区提供了多样化控件,用于处理不同类型的数据,直接双击或拖拽到画布区即可使用。
  • 画布区:画布区是前端页面的预览,画布中的内容将会被呈现给终端用户。
  • 属性区:属性区显示针对当前所选控件的数据属性和布局属性,建模人员从这里调整各个控件属性、样式和行为。

(二)工具条

DWF表单定制工具的工具条,具体的功能分为两部分,第一行是表单全局设置栏,第二行为控件全局设置栏,见下图:

...

  • 收起控件区():收起左侧控件区,使画布区面积宽度展示更多。
  • 标签颜色和字号():标签颜色和字号大小设置。
  • 标签水平():标签水平布局设置。
  • 标签垂直():标签上下布局设置。
  • 控件颜色和字号():控件内容的颜色和字号大小设置。
  • 控件水平():控件水平布局设置。

(三)控件分类

DWF表单的控件区控件具体区分了“单对象控件”、“多对象控件”、“可视化控件”、“布局控件”、“模型点选控件”与“时间序列控件”等,如下图所示。

...

  • 单对象控件:用于描述一个对象上某个属性的信息。选择控件展示时需要考虑属性对应的数据类型。
  • 多对象控件:用于描述多个对象上属性的信息。
  • 模型点选控件:提供快速引用当前系统模型数据的控件。
  • 可视化控件:将某个类上的数据用图表的形式直观展示出来。
  • 布局控件:调整控件之间的间距,排列等,改善页面的外观、样式。
  • 时间序列控件:用于记录和描述随时间不断变化属性的大量数据,并将数据变化趋势,最大值,平均值等数据统计方式通过可视化的方式直观展示出来。

(1)单对象控件

按钮():通过绑定操作实现一定的业务功能,例如:绑定基本操作、自定义操作。

...

多文件():用于上传、下载、预览多个文件。支持多种文件类型,例如word文档、Excel表格、图片等。支持使用String、Clob等文本类型属性。

(2)多对象控件

表格():表格由一行或多行单元格组成,用于显示数字和其它项以便快速引用和分析。支持展示不同目标类的数据。

...

超级控件():用户可以使用已掌握的前端技术编写超级控件,可以自定义HTML、CSS、JavaScript和Vue代码,定制特殊功能的控件;超级控件可以被收藏,并且超级控件被收藏后可以作为控件被在此拖到表单建模工具中使用。如果需要有复杂的交互逻辑和点击事件就需要用到插件开发。

(3) 时间序列控件

时序点选():用于绑定和查看DWF中IOTDB时间序列属性值的控件,支持绑定TimeSerires类型属性。

...

时序看板():为时序数据库(例如IoTDB)的时间序列属性设计一个可视化组件,支持展示Timeseries类型属性。

(4)模型点选控件

组织用户点选器():用于点选和展示当前系统组织模型用户和用户组的控件。支持UUID类型属性(存储用户和用户组的唯一标识oid,例如实际生活中用身份证号码记录人)。

...

表单点选框():用于应用端(app-web)针对指定目标类的某个表单快速返回定制或创建新表单。

(5)可视化控件

混合图():支持折线、柱状、横向堆叠和竖堆多种形式组合展示目标类数据。

...

自定义可视化():具有一定开发能力的用户,HTML、CSS、JavaScript和Vue代码,定制可视化控件。可视化控件中的自定义支持myChart的方法,可以直接使用myChart来基于echarts制作dwf不支持的图表,支持this.handleQuery 获取类对象的数据。如果需要有复杂的交互逻辑和点击事件就需要用到插件开发。

(6)布局控件

多列():默认一行两列布局,可以改默认列数,实现一行多列布局。

...

信息
title布局控件使用技巧

通过布局控件+脚本方式可以设计出复杂的业务操作页面:

1.行、列控件是使用频率较高的布局控件,通过行、列控件基本可以完成多数页面布局的设计。

2.当列、拖拽池的高度大于一屏,就会出现浏览器的滚动条,此时就无法实现内容区域固定在屏幕的效果。

3.如果希望设计某个区域的内容能够固定在屏幕上不动,此时可以选择拖拽池和拖拽块,且拖拽池和拖拽块的内容都不大于一屏,就能实现拖拽块的内容固定在屏幕上的布局效果。

4.用2个“单列”控件嵌套使用可以设计出内容区域和背景区域不同背景色的效果。

5.除对齐方式外,也可通过增加“单列”控件并设置列宽来实现文字缩进的效果。

(四)控件属性区

控件属性区显示针对当前所选控件的数据属性和布局属性,建模人员从这里调整各个控件属性、样式、行为。属性编辑区域包括:属性、样式、事件、批注。  

...

  •  样式:用于设置控件的外观样式。可对控件进行整体高度、宽度、字体的大小、颜色,控件内容字体颜色、输入框背景颜色,标签和主区域的比例、对齐方式,必填、只读、是否隐藏等设置。
  •  事件:根据表单的使用情况,可对控件进行操作定义;针对表单控件提供:值变化事件、失去焦点事件、鼠标悬停事件、获得焦点事件、值校验等事件,针对不同控件提供不同事件。
  •  批注:为项目主管提供了对控件设计进行审核和批注功能。当属性栏中有批注信息时,选中的控件的右上角标记为红色。

表单引擎

(一)表单实例

表单定制后,将数据带入表单的结果称为表单实例(Form Instance)。在应用前端(app端),DWF表单引擎将数据和表单的控件结合起来形成表单实例。这些表单实例有以下几种状态:

  • 创建状态(create):显示一个空白的表单。
  • 编辑状态(edit):显示一个用于修改对象的表单。
  • 浏览状态(visit):仅仅用于展示,不允许修改。

(二)分享表单

点击表单定制页面工具条的“分享”按钮,可以快速跳转至分享页面。分享页面的链接地址,是DWF为每个表单分配的唯一的表单分享链接(From Share Link)地址,用于直接在浏览器显示表单实例。这个链接通常是通过创建状态打开表单,方便建模人员与表单的交互,从而对该表单进行调试。同时,它也方便了系统集成时DWF表单实例在其他系统上的嵌入,无需过多二次开发。

...

  • token:当前登陆用户的令牌,这是一个必选参数。
  • displayType:表单打开的状态。包括create、edit和visit,这些参数和表单实例状态对应。
  • query:表单打开时,可以赋予一个查询条件,以便对初始的表单进行条件过滤。查询条件的语法参见附录DWF内部查询条件语法

操作

操作是DWF中功能最小粒度的单位,每个操作包含一个特定的行为。例如,编辑、保存,删除等。操作有一个英文名和一个中文名,可以指定一个图标。操作有三种表现形式:

...

当选择操作的动作为创建、编辑、浏览、列表时,DWF会按照对应的方式打开一个表单,这时需要指定一个目标类和表单名称。

图-操作信息编辑框

小结

表单是由一个或者多个控件按照一定布局方式组成的。控件用于显示单个对象的某个属性或多个对象的列表。

...