DWF表单建模是基于拖拽所见即所得方式完成界面的建模,建模工具提供了7大类、51种控件,覆盖多种数据展示场景。

DWF控件支持与数据的无缝对接,让用户将精力集中在了解需求;通过DWF的分享功能可边用边改,及时响应需求变更;表单随时分享方便与其他系统集成。

1. 表单建模

1.1 表单

DWF中,表单(Form)是用于展示实体类、关联类对象的界面模板。

表单模型通过建模工具(modeler)定制,形式包括属性的展示方式和布局方式。

每个表单有一个目标类,如果该目标类为实体类,则是实体类表单(Entity Class Form);如果该目标类为关联类,则是关联类表单(Relation Class Form)。

1.2 控件

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

1.3 单位介绍

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

px:px就是pixel,像素,是相对长度单位,与分辨率的大小有关。而分辨率和屏幕大小有关,不同的屏幕大小分辨率不同。

目前出现了自适应的响应式设计,来解决不同终端设备分辨率和大小的问题,一般会用到设置:控件宽高(vw和 vh)和文本字体大小(rem):

单位在宽、高和文本中的应用,黑色“√”为使用频率较高的单位选项:

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

vh

%

rem

2.表单建模工具

2.1 表单定制页面

表单定制界面如下:

图-表单定制页面

2.2 工具条

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

第一栏-表单全局设置栏,从左到右的图标含义分别是:

第二栏-对表单所有控件设置,从左到右的图标含义分别是:

2.3 控件分类

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

图-DWF表单控件区提供的控件

2.2.1 布局控件

单列():单个列布局,可灵活调整布局形式。

多列():一行多列布局。

多行():多行布局。

标签页():可以添加多个标签页,实现一个布局內切换不同的面板。

分组框():每个分组框的顶部边缘处都有一个内置的标题,通常描述了框的内容。利用分组框可以上让你的表单设计更有协调性,直观性。

拖拽池():一个栅格化的布局容器,需要配合拖拽块一起使用,用于存放拖拽块布局。

拖拽块():灵活可随意挪动、伸缩的布局容器,需要将拖拽池先放在画布区,拖拽池內拖入拖拽块才能使用。

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

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

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

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

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

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

2.2.2 单对象控件

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

文件框():用于接收和展示用户在页面输入的文本类型数据,支持绑定String、Clob类型属性。

数字框():用于接收和展示数字类型的数据,支持绑定Integer、Double、Long类型属性。

日期框():用于接收和展示日期类型的数据,支持绑定Timestamp、Date类型属性。

单选框():当用户只有一种选择时,使用单选框更合适。支持绑定String、Clob类型属性。

复选框():一种可同时选中多项控件。鼠标左击进行点选操作来完成复选多个目标的功能。支持绑定String、Clob等文本类型属性。

选择框():提供下拉形式选项控件。支持单选也支持多选(需要打开多选开关)。支持绑定String,Clob等文本类型属性。

富文本():富文本编辑器提供类似于 Microsoft Word 的编辑功能。用于输入和展示用户个性化的数据。支持String、Clob等文本类型的数据。

文本标签():用于展示对象上具体的属性值,需与目标属性绑定,例如:设备名称、设备状态。支持所有类型属性,控件绑定属性为日期类型时,可以设置日期显示的格式。

对象标签():外键引用类控件。原理同单对象下拉框,只是绑定对象数据的形式为弹窗,可以展示引用类对象更多信息。

主键:唯一标识的一条记录,不能有重复的,不允许为空。例如全局唯一标识oid。

外键:通过唯一标识的字段,可以把数据与另一张表关联起来,这种列(属性)称为外键,例如上讲中提到的故障设备assetOid、故障部位partOid。

上传文件():用于上传和展示文件类型数据的控件,支持文件名、音频、视频、图片等显示形式。

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

进度条():展示业务进展情况的控件。支持Integer、Double等数字类型属性。

超链接():快速跳转至另一个网页,需与属性进行绑定。支持自定义超链接地址,也可以通过String类型属性映射。

开关(:界面中可直接操作的控件,提供两个互斥选项(如:开/关、是/否、启动/禁用)供用户选择。支持Boolean类型属性。

评价():以点星方式输入和展示数据,支持Integer、Double等数字类型属性。

点赞():用点击方式输入和展示数据。提供“赞”、“踩”和“收藏”三种类型。支持Boolean类型属性。

图标():用于展示属性映射的图标,便于直观理解数据形态。支持String等文本类型属性。

动态参数框():清华数为大数据软件栈的算法库和模型库内部存储的算法各自包含了不同的参数设置,因此需要为这些算法动态生成参数设置的界面。动态参数插件可以根据目标对象的某个属性的取值,按照约定模式展示出一个临时性界面,用户填入具体取值以后,将取值的内容拼接成一个指定格式的字符串存储起来。

静态标签()用于显示一个静态标签值,不与属性绑定,可用于定义属性分组名。

嵌入网页():实现在页面内嵌另一个网页的控件。不支持绑定属性,需要用户设置内嵌网页的链接地址。

  • 单选框、复选框、选择框都是选择框,区别在于选择方式不一样,分别实现的是单选、多选和对象下拉选择,选择框在“开启多选”开关后也可以实现下拉多选;
  • 单选框、复选框、选择框在属性定义区打开“数据字典”后,这3个控件也都是外键引用类控件,可以对引用类的数据进行应用,在未打开“数据字典”时,3个控件不当做外键引用类试用。

2.2.3 多对象控件

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

查询框(:文本框、数字框等控件和提交按钮的组合。方便用于快速搜索查询目标。查询框需要和多对象控件配合使用,例如:查询框绑定表格id,可以实现过滤查询指定表格的数据。

卡片():用于引用展示当前目标类或者引用类表单实例的控件。默认以单对象表单实例展示,也可以开启多对象展示开关,以多对象卡片形式展示目标里的多条数据。

表单实例:表单和数据的结合。

多媒体():将一个对象上所有多媒体文件用一个控件同时展示出来。支持音频、视频和图片等数据类型。

级联点选():树形下拉点选的形式选择对象/数据。

目录树():树形结构的形式展现,主要显示实体类自关联的数据结构。创建实体类时可以开启树开关,类上自动绑定parentOId。

关联结构树():以树形结构展示对象和对象之间的关联关系。例如本案例中将为大家讲解的产品结构。

消息订阅():利用订阅机制,给表单的事件增加订阅,当事件被执行后可以接收到事件的推送消息。

2.3.4 可视化控件

动态数字标签():用于动态展示数据,支持Integer、Double、Long和Timeseries类型属性。

饼图():饼状图显示一个数据系列中各项的大小与各项总和的比例,饼状图中的数据点显示为整个饼状图;饼状图中包括环形图。

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

仪表盘():展示度量信息和关键业务指标(KPI)现状的数据虚拟化控件。

散点图():数据点在直角坐标系平面上的分布图

百度地图():根据对象的经、纬度位置变化,动态显示对象在地图上的位置。

省份地图():按照在地图上的标签(省份),对数值进行统计,当鼠标移动到省份时,显示汇总的数据,如:可用省份地图对设备类的“工作地点”进行开工时长的统计。

2.3.5 模型点选控件

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

类属性点选器():用于点选和展示当前系统数据模型中所有类和类属性的控件。

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

2.2.6 编码扩展

自定义可视化():具有一定开发能力的用户,HTML、CSS、JavaScript和Vue代码,定制可视化控件。

超级控件():具有一定开发能力的用户,可以自定义HTML、CSS、JavaScript和Vue代码,定制特殊功能的控件。

2.2.7 IOTDB专用控件

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

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

时序看板():时序图表进行增强看板。

2.4 控件属性区

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

动态响应:利用双向通讯,支持不同用户同时操作一条数据时,数据在页面始终显示最新的数据。

3. 表单引擎

3.1 表单实例

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

3.2 分享表单

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

表单分享链接地址的表现形式:http://[服务器IP]:[端口]/app-web/[实体类]/[表单英文名]?[参数1=取值]&[参数2=取值]...

表单引擎支持的分享链接参数:

4.操作

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

操作的创建有以下三要素:动作、操作样式、目标类和表单。

在操作配置界面,可以选择用弹框的方式还是弹出页签的方式打开表单:

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

图-操作信息编辑框

5.小结

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

表单由表单模型的表单建模工具定制,表单建模工具页面包括工具条、控件区、画布区和属性区四个区域构成。

DWF表单引擎将数据和表单的控件结合起来形成表单实例。

对单位和使用场景进行了介绍,自适应式设计单位有:vw、vh、rem、%,如果设计的表单高度需要自适应各类设备高度的情况下,一般会选择高度vh为:70-80。

6.附件