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：px就是pixel，像素，是相对长度单位，与分辨率的大小有关。而分辨率和屏幕大小有关，不同的屏幕大小分辨率不同。

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

• vw：vw和vh是视口（viewport units）单位，vw 和vh 这两个单位为根据当前设备可视区的宽高为基准动态计算当前元素的宽高，可以实现当前元素在不同宽高的可视区下以不同的px展现，换言之，就是根据浏览器窗口的大小的单位进行自适应的响应式设计，不受设备分辨率的影响。vw和vh是以百分比为单位，1vw = 可视窗口的宽度的百分之一，比如窗口宽度大小是1800px，那么1vw = 18px，100vw=设备可视区的宽的100%，100vh=设备可视区的高100%；
• vh：可视窗口的高度，vh用于解决以设备可视区高为基准的px动态换算，如果设计的表单高度需要自适应各类设备高度的情况下，一般会选择高度vh为：70-80；
• %：当处理宽度的时候，%单位更合适, 元素的大小是由它的父元素决定的；
• rem：rem是CSS3新增的相对长度单位，是指相对于根元素html的font-size计算值的大小。在DWF中，1rem = 14px，但是不一样的是rem始终都是相对html根元素。使用rem后不会受到对象内文本字体尺寸的影响，而且只需要改变根元素就能改变所有的字体大小。

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

表单建模工具

（一）表单定制页面

表单定制界面如下：

图-表单定制页面

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

（二）工具条

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

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

• 创建（）：快速创建当前目标类的新表单。
• 复制（）：可在当前类下快速复制当前表单定制内容并创建一个新表单；特别说明：也可以实现跨类进行表单复制，在选择“复制”后，在右侧的“目标类”栏目，点击小箭头可进行目标类选择，从而实现跨类的表单复制，跨类赋值表单只能实现实体类到实体类、关联类到关联类的复制。
• 删除（）：快速删除当前定制的表单，如果该表单已与其他操作绑定，需要解绑后才能删除。
• 清空（）：快速清空当前表单定制内容。
• 前进、后退（）：前进和后退的快捷键。
• 背景色（）：表单画布区容器的背景色。
• 行间距（）：行与行之间上下间隙。
• 列间距（）：列与列之间的左右间隙。
• 标签:控件比例（）：标签和控件之间的占比，默认为2:3
• json（）：查看当前表单定制页面的json内容。
• 布局（）：从json格式切换为布局，也就是UI界面形式内容。
• 快速创建（）：勾选属性后点击确定可以快速创建一个有内容的表单。
• 基础设置（）：设置表单初始化操作、默认操作等，还可以编辑表单显示名、备注信息等。

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

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

（三）控件分类

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

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

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

（1）单对象控件

按钮（）：通过绑定操作实现一定的业务功能，例如：绑定基本操作、自定义操作。

文本框（）：用于接收和展示用户在页面输入的文本类型数据，支持绑定String、Clob类型属性。

数字框（）：用于接收和展示数字类型的数据，支持绑定Integer、Double、Long类型属性。

日期框（）：用于接收和展示日期类型的数据，支持绑定Timestamp、Date类型属性。

复选框（）：一种可同时选中多项的控件。鼠标左击进行点选操作来完成复选多个目标的功能。

单选框（）：当用户只有一种选择时，使用单选框更合适。

选择框（）：提供下拉形式选项的控件。支持单选也支持多选（需要自行配置）。

标签（）：用于展示对象上具体的属性值，例如：设备名称、设备状态。支持所有类型属性，控件绑定属性为日期类型时，可以设置日期显示的格式。

复合标签（）：不与属性进行绑定，可以设置静态文本框、设置图标、设置点击事件。

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

超链接（）：快速跳转至另一个网页。支持自定义超链接地址，也可以通过String类型属性映射。

网页（）：实现在页面内嵌另一个网页的控件。不支持绑定属性，需要用户设置内嵌网页的链接地址。

对象选择（）：外键引用类控件。通过绑定引用类的主键（全局唯一标识oid），将数据与当前目标类数据关联起来的控件。绑定对象形式为下拉框，相当于随引用类数据动态变化的选择框。

对象标签（）：外键引用类控件。原理同对象选择框，只是绑定对象数据的形式为弹窗，可以展示引用类对象更多信息。

附件（）：用于上传和展示文件类型数据的控件，支持文件名、音频、视频、图片等显示形式。

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

评价（）：以点星方式输入和展示数据，支持Integer、Double等数字类型属性。

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

图标（）：用于展示属性映射的图标，便于直观理解数据形态。支持String等文本类型属性。

动态数字（）：用于动态展示数据，支持Integer、Double、Long和Timeseries类型属性。

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

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

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

（2）多对象控件

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

消息订阅（）：消息订阅控件可以帮助前后端脚本之间建立起实时联系，从而有助于帮助用户通过脚本对后端发生的情况作出相应的处理，消息订阅将在第三部分第九章综合案例汇编中有详细介绍。

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

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

目录点选（）：与选择框作用类似。下拉点选时以树的形式展示自定义的选项。目录树可与目录点选通常配套使用，用目录树定义树，用目录点选通过下拉方式实现对树上的对象进行选择。

目录树（）：基于实体类以树形结构展示自己到自己的关联的树。目录树可以用于构建：工厂树、工程资源树、数据字典分树类等用途。

关联树（）：基于关联类以树形结构展示对象和对象之间的关联关系。本案例中将为大家讲解的产品结构是用关联树实现的，关联树是基于关联类实现的自己到自己的关联树，关联树的关联关系即BOM关系可被引用。

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

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

（3） 时间序列控件

时序点选（）：用于绑定和查看DWF中IOTDB时间序列属性值的控件，支持绑定TimeSerires类型属性。

时序图表（）：可对所选择的时序数据进行统计量的可视化，统计量包括显示：最大值、最小值、平均值、方差，可视化的方式包括：折线图、阶梯图。

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

（4）模型点选控件

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

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

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

（5）可视化控件

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

散点图（）：数据点在直角坐标系平面上的分布图。

饼图（）：饼状图显示一个数据系列中各项的大小与各项总和的比例，饼状图中的数据点显示为整个饼状图；饼状图中包括环形图。

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

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

动态地图（）：根据对象的经、纬度位置变化，动态显示对象在地图上的位置。

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

（6）布局控件

多列（）：默认一行两列布局，可以改默认列数，实现一行多列布局。

多行（）：多行控件，默认是3行，可以改默认行数，实现一列多行布局。多行控件可以在“属性”中实现行间距、圆角的设置，也可以在“样式”中进行“背景图片显示方式”的多种设置，以实现更丰富的页面表达。

单列（））：默认一行一列的单列控件。

标签页（）：可以添加多个标签页，实现一个布局內切换不同的面板。

分组框（）：每个分组框的顶部边缘处都有一个内置的标题，通常描述了框的内容。利用分组框可以让你的表单显示的内容进行分组，例如：可以把零件的属性进行分组：设计属性、工艺属性、制造属性，分组可以让属性显示更直观。

拖拽池（）：一个栅格化的布局容器，需要配合拖拽块一起使用，用于存放拖拽块布局。

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

（四）控件属性区

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

•  属性：当控件被拖放入画布区后，需要对控件的一些基本属性进行设置，以此来设计控件按照什么形式展示目标实体类对象的哪个属性信息；实现对控件的属性默认值、验证规则、是否动态响应和值判重等设置。

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

表单引擎

（一）表单实例

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

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

（二）分享表单

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

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

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

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

操作

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

• 功能菜单：应用端左侧的功能菜单内容。

• 按钮：按钮控件绑定一个具体的操作。

• 事件：事件是可以被控件识别的操作，例如单击、双击、值变化、鼠标悬停等。

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

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

• 弹框

• 页签

• 侧面滑入

• 浮窗

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

图-操作信息编辑框

小结

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

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

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

对单位和使用场景进行了介绍，自适应式设计单位有：vw、vh、rem、%。