DWF表单建模是基于拖拽所见即所得方式完成界面的建模，建模工具提供了7大类、51种控件，覆盖多种数据展示场景。
DWF控件支持与数据的无缝对接，让用户将精力集中在了解需求；通过DWF的分享功能可边用边改，及时响应需求变更；表单随时分享方便与其他系统集成。
1. 表单建模
1.1 表单
DWF中，表单（Form）是用于展示实体类、关联类对象的界面模板。
表单模型通过建模工具（modeler）定制，形式包括属性的展示方式和布局方式。
每个表单有一个目标类，如果该目标类为实体类，则是实体类表单（Entity Class Form）；如果该目标类为关联类，则是关联类表单（Relation Class Form）。
1.2 控件
单个表单通常由一个或多个表单控件（Form Control）通过一定布局方式组成，控件用于显示单个对象的某个属性或多个对象的列表。表单控件有三类调整表单展示和行为的属性：
- 控件设置（Control Settings）：用于设置目标属性的特征。例如：日期控件可设置日期的显示方式。
- 控件样式（Control Styles）：用于设置控件的外观样式。例如：对齐方式等布局风格。
- 控件事件（Control Events）：用于设置控件的行为，每个控件有若干事件。例如：值变化事件就代表控件的一类事件。事件和操作绑定后，开发脚本控制表单的行为。
1.3 单位介绍
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后不会受到对象内文本字体尺寸的影响，而且只需要改变根元素就能改变所有的字体大小。
单位在宽、高和文本中的应用，黑色“√”为使用频率较高的单位选项：
| 单位 | 宽度 | 高度 | 文本大小 |
|---|---|---|---|
| px | √ | √ | √ |
| vw | √ | ||
| vh | √ | ||
| % | √ | ||
| rem | √ | √ | √ |
2.表单建模工具
2.1 表单定制页面
表单定制界面如下：
- 工具条：工具条提供的对整体表单的操作，例如创建、复制、删除表单；控制整体布局的样式及提供前进、后退等快捷键；设置表单被打开前或关闭后的事件响应。
- 控件区：左侧控件区提供了多样化控件，用于处理不同类型的数据，直接双击或拖拽到画布区即可使用。
- 画布区：画布区是前端页面的预览，画布中的内容将会被呈现给终端用户。
- 属性区：属性区显示针对当前所选控件的数据属性和布局属性，建模人员从这里调整各个控件属性、样式和行为。
2.2 工具条
DWF表单定制工具的工具条，具体的功能分为两部分，第一行是表单全局设置栏，第二行为控件全局设置栏，见下图：
第一栏-表单全局设置栏，从左到右的图标含义分别是：
- 创建（
）：快速创建当前目标类的新表单。 - 复制（
）：可在当前类下快速复制当前表单定制内容并创建一个新表单；特别说明：也可以实现跨类进行表单复制，在选择“复制”后，在右侧的“目标类”栏目，点击小箭头可进行目标类选择，从而实现跨类的表单复制，跨类赋值表单只能实现实体类到实体类、关联类到关联类的复制。 - 删除（
）：快速删除当前定制的表单，如果该表单已与其他操作绑定，需要解绑后才能删除。 - 清空（
）：快速清空当前表单定制内容。 - 前进、后退（
）：前进和后退的快捷键。 - 背景色（
）：表单画布区容器的背景色。 - 行间距（
）：行与行之间上下间隙。 - 列间距（
）：列与列之间的左右间隙。 - 标签:控件比例（
）：标签和控件之间的占比，默认为2:3 - json（
）：查看当前表单定制页面的json内容。 - 布局（
）：从json格式切换为布局，也就是UI界面形式内容。 - 快速创建（
）：勾选属性后点击确定可以快速创建一个有内容的表单。 - 基础设置（
）：设置表单初始化操作、默认操作等，还可以编辑表单显示名、备注信息等。
第二栏-对表单所有控件设置，从左到右的图标含义分别是：
- 收起控件区（
）：收起左侧控件区，使画布区面积宽度展示更多。 - 标签颜色和字号（
）：标签颜色和字号大小设置。 - 标签水平（
）：标签水平布局设置。 - 标签垂直（
）：标签上下布局设置。 - 控件颜色和字号（
）：控件内容的颜色和字号大小设置。 - 控件水平（
）：控件水平布局设置。
2.3 控件分类
DWF表单的控件区控件具体区分了“单对象控件”、“多对象控件”、“可视化控件”、“布局控件”、“模型点选控件”与“时间序列控件”等，如下图所示。
- 布局控件：调整控件之间的间距，排列等，改善页面的外观、样式。
- 单对象控件：用于描述单个对象上的某一条属性的信息。选择控件展示时需要考虑属性对应的数据类型。
- 多对象控件：用于描述多个对象的多条数据的信息。
- 模型点选控件：提供快速引用当前系统模型数据的控件。
- 可视化控件：将某个类上的数据用图表的形式直观展示出来。
- 编码扩展：可通过echart和js脚本实现扩展功能。
- IOTDB专用控件：用于记录和描述随时间不断变化属性的大量数据，并将数据变化趋势，最大值，平均值等数据统计方式通过可视化的方式直观展示出来。
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表单引擎将数据和表单的控件结合起来形成表单实例。这些表单实例有以下几种状态：
- 创建状态（create）：显示一个空白的表单。
- 编辑状态（edit）：显示一个用于修改对象的表单。
- 浏览状态（visit）：仅仅用于展示，不允许修改。
3.2 分享表单
点击表单定制页面工具条的“分享”按钮，可以快速跳转至分享页面。分享页面的链接地址，是DWF为每个表单分配的唯一的表单分享链接（From Share Link）地址，用于直接在浏览器显示表单实例。这个链接通常是通过创建状态打开表单，方便建模人员与表单的交互，从而对该表单进行调试。同时，它也方便了系统集成时DWF表单实例在其他系统上的嵌入，无需过多二次开发。
表单分享链接地址的表现形式：http://[服务器IP]:[端口]/app-web/[实体类]/[表单英文名]?[参数1=取值]&[参数2=取值]...
表单引擎支持的分享链接参数：
- token：当前登陆用户的令牌，这是一个必选参数。
- displayType：表单打开的状态。包括create、edit和visit，这些参数和表单实例状态对应。
- query：表单打开时，可以赋予一个查询条件，以便对初始的表单进行条件过滤。查询条件的语法参见附录DWF内部查询条件语法。
4.操作
操作是DWF中功能最小粒度的单位，每个操作包含一个特定的行为。例如，编辑、保存，删除等。操作有一个英文名和一个中文名，可以指定一个图标。操作有三种表现形式：
- 功能菜单：应用端左侧的功能菜单内容。
按钮：按钮控件绑定一个具体的操作。
事件：事件是可以被控件识别的操作，例如单击、双击、值变化、鼠标悬停等。
操作的创建有以下三要素：动作、操作样式、目标类和表单。
在操作配置界面，可以选择用弹框的方式还是弹出页签的方式打开表单：
弹框
页签
侧面滑入
浮窗
当选择操作的动作为创建、编辑、浏览、列表时，DWF会按照对应的方式打开一个表单，这时需要指定一个目标类和表单名称。
5.小结
表单是由一个或者多个控件按照一定布局方式组成的。控件用于显示单个对象的某个属性或多个对象的列表。
表单由表单模型的表单建模工具定制，表单建模工具页面包括工具条、控件区、画布区和属性区四个区域构成。
DWF表单引擎将数据和表单的控件结合起来形成表单实例。
对单位和使用场景进行了介绍，自适应式设计单位有：vw、vh、rem、%，如果设计的表单高度需要自适应各类设备高度的情况下，一般会选择高度vh为：70-80。
