在前两讲中，最基础的实体类表单建模已经完成，接下来，我们可以在它们的基础上进行一些扩展，使系统的功能更加全面，对用户更友好。比如，对于属性复杂、信息量很大的设备类来说，只是简单的文字浏览表单无法满足用户的需要，用户无法通过设备位置信息中存储的一组数字来理解设备所在的位置。因此，我们利用DWF提供的可视化控件定制设备信息的看板，涉及到的可视化控件有：

• 布局控件：拖拽池、拖拽块
• 单对象控件：动态参数框
• 可视化控件：动态地图、自定义可视化控件

本节还对外键引用类控件进行了介绍和总结。

1.设备地图

如下图所示，这是利用DWF提供的可视化控件-动态地图创建的表单，能够将存储在数据库中对象的一组数字用可视化的方式显示出来。

图-设备地图

1.1 可视化控件-动态地图

动态地图的使用方法如下：

1）进入实体类管理，为设备类（Asset）创建一个英文名为LandingMap表单，跳转至表单定制页面。

2）在控件区-可视化控件区域找到动态地图()控件，利用双击或者拖拽方式将控件放入画布区。

3）点击画布区的动态地图控件，右侧滑出动态地图的属性编辑框。首先为动态地图选择展示对象的目标类——设备（Asset）。

4）选择经纬度映射类型，DWF提供两种方式给建模者，建模者可以选一，本案例中使用单独映射。

5）接下来设置图标。图标的设置也有两种方式，可以选择任意一方式，也可以根据业务需要同时选择。例如：用一个“设备图片asseImg”属性存储图片地址，图片显示在设备地图上。或根据设备状态assetState的属性值映射成图标显示在设备地图上。

6）设置好对象在地图上映射的图标后，还需要调整图标的大小。在样式设置区，根据实际情况调整图标的高度、宽度。系统默认设置为30*30，单位为px。因为本次案例我们选用的网络图片是50*50的，所以这里将图标高度、宽度分别调整为50px。

图-动态地图样式设置

7）除了对图标设置外，还可以对动态地图设置整体高度和地图高度。

2. 设备看板

上面为大家演示了如何用可视化控件展示设备在地图上的地理位置。如果我们想以看板的形式来显示更多的信息，这时候需要组合其他可视化控件及单对象控件。本案例设备看板设计如下图。

图-设备看板

接下来将重点为大家介绍布局控件-拖拽池/拖拽块，单对象控件-动态参数框，可视化控件的使用。

2.1 布局控件-拖拽池/拖拽块

拖拽池/拖拽块是一体的，需要配合使用。拖拽池/拖拽块在布局设计时更灵活。下面讲解具体使用方法：

1）首先为设备（Asset）创建一个英文名为AssetDashBoard的表单；

2）在左侧控件区找到布局控件-拖拽池()。将拖拽池通过双击或者拖动的方式放入画布区域内；

3）选中画布区的拖拽池，右侧滑出拖拽池属性编辑框。其中有两个设置项：

• 密竖排：放入拖拽池中的拖拽块，当位置发生移动时，拖拽池下边缘会紧贴着处于最下方的拖拽块，保证拖拽池没有空白区域。
• 可拖拽：关闭可拖拽功能，拖拽池将不能从画布区域拖动移除，仅能通过工具条出的删除按钮移除。

4）在左侧控件区找到布局控件-拖拽块(),将拖拽块拖入拖拽池适当位置。根据案例设计，拖入6个拖拽块到拖拽池布局内。选中拖拽块进行拖拽块位置的移动，如果想要拖拽块位的大小，需要将鼠标移动到拖拽块右下角处，进行拖坏块的放大和缩小；

5）选中画布区域的拖拽块，右侧滑出拖拽块的属性设置区，主要有以下几个设置项：

• 可伸缩：默认为可伸缩。拖拽块右下角有一个折角，鼠标点击该区域可以调整拖拽块的大小，且应用端也可以调整拖拽块的大小。当关闭可伸缩功能后，拖拽块右下角折角消失，拖拽块在建模端、应用端只能移动位置，不能改变大小。
• 冻结：默认为非冻结状态。如果希望拖拽块不能移动，可以开启冻结功能。
• 带标题：默认不带标题。开启标题后，可以设置拖拽块的标签，效果同分组框。
• 适应内容：默认不适应内容，可以通过手动调整适应拖拽块内的控件，也可以开启适应内容功能，自动适应拖拽块内的控件布局。
• 背景：布局内控件均支持设置布局的背景，默认两种方式，一是自定义输入图片的网络地址；二是通过选择图片库的图片设置。

图-拖拽块属性设置

2.2 单对象控件-动态参数

为了让用户能够更直观、清晰看到动态变化的数据，DWF提供动态数字标签“动态参数”来实现这类业务需求。下面介绍动态参数的使用：

1）在控件区-单对象控件区域找到动态参数()控件，将控件拖拽至画布区的第一个拖拽块中；

2）选中拖拽块中的动态参数控件，右侧滑出动态参数的属性编辑框，为该控件目标属性绑定“工作小时数workHour”属性；

3）符号设置：动态参数标签显示的数据前添加的符号，例如人民币用“¥”，美元用“$”，按需填入；

4）单位设置：动态参数标签显示数据后添加的单位，例如小时数用“h”，米用"m"；

5)  开启千位符：打开千位符时，在千位数字处会增加标识千位的“，”，如：数字1528数字当千位符打开时就显示为：1,528;

6）开启图标：默认为开启图标。开启图标后，需要在上方图标地址处粘贴你要显示的网络图片地址；

7）开启动效：默认开启动效。开启动效后，加载该表单时，会有数字从0变化到实际数值的效果；

8）开启动态响应：默认关闭。如果想要该对象的数据变化时，使该标签的数字能及时刷新，需要开启动态响应开关。

图-动态参数标签属性设置

2.3 编码扩展-Echart

除了提供的可视化控件外，用户还可以根据业务需要，自己定义一个可视化控件。本讲将简单介绍编码扩展中的Echarts控件的使用。

1）在编码扩展中找到“Echart”控件()控件，拖入合适布局内；

2）选择画布区自定义控件，右侧滑出属性编辑框，点击“打开编辑”开关，弹出脚本编辑框；

往脚本编辑框中输入代码点击运行，即可绘制出自定义的可视化图形。本案例中提供代码如下：

option = {
    xAxis: {
        type: 'category',
        data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun']
    },
    yAxis: {
        type: 'value'
    },
    series: [{
        data: [820, 932, 901, 934, 1290, 1330, 1320],
        type: 'line'
    }]
};

2.4 设备看板和数据结合

根据上文建模，我们完成了单个设备看板表单的创建。在查看设备列表时，我们需要选中一条数据，就能查看这个设备看板，这就需要用到我们之前提到的按钮。建模步骤如下：

1）进入实体类表单建模-设备（Asset），编辑MultiAssets表单，进入表单定制页面；

2）向合适布局内拖入一个按钮控件，在按钮属性设置区的事件-单击事件处创建并绑定一个显示名为“设备看板”的操作。动作为vist，操作激活时打开设备（Asset）的AssetDasbord表单；

3）保存表单，即可完成在设备列表处查看点选设备的看板信息。

图-查看设备面板操作编辑框

3.设备卡片

在前面的讲解中，用于多个对象信息的展示我们介绍了表格。除了表格还可以使用卡片形式的展示方式。首先看下本次案例中我们利用卡片控件设计的表单如下图。

图-设备卡片（多对象）

对于这类用同一表单模版显示多个对象的形式，我们可以用卡片控件来实现。卡片控件是引用当前目标类或者其他类上的表单，以单个或者多个卡片的形式展示引用类对象的信息。

3.1 单对象控件-文本标签

正如我们提到的卡片控件的定义，结合案例，明确我们需要创建一个显示单个设备卡片的表单，如下图。这里我们将介绍新的控件-文本标签。标签是将对象存储在数据库中的数据展示到页面的控件，没有属性类型限制，时间、数字、字符串类型均可显示。下面为大将讲解单个设备卡片创建及标签的使用。

图-设备卡片（单对象）

单个设备卡片的建模步骤：

1）进入实体类管理-设备（Asset）创建一个表单英文名为AssetCard的表单，页面跳转表单建模工具页面；

2）根据上图显示，首先放入一个行布局控件，并调整两列的占位个数，本案例中调整第一列占10格，第二列占14格；

3）在第一列中放入附件控件，并控件的目标属性绑定“设备图片assetImg”属性，可以去掉控件的标签，调整附件高度。

标签控件的使用：

1）找到控件区-单对象控件中的文本标签()控件，将控件拖入第二列布局中；

2）选中画布区的标签控件，右侧滑出属性编辑；

3）同其他单对象控件一样，文本标签也需要绑定目标属性，才能显示出对象上的属性值，以同样的方式设置剩余的属性；

4）需要提出的是，如果文本标签绑定的属性是时间类型的属性，标签属性区会多出一个设置项用于设置时间格式，例如y-M-D h:m:s。

图-文本标签属性设置

3.2 多对象控件-卡片（多对象展示）

上面为大家介绍了如何设计单个的设备卡片，现在为大将讲解卡片控件的使用：

1）进入实体类建模-设备（Asset），创建一个英文名为AssetCards的表单，进入表单定制页面；

2）在控件区-多对象控件区域找到卡片()控件，通过双击或者拖拽的方式将控件放入画布区；

3）使用表单控价时，一定要明确想要引用那个目标类上的那个表单，本案例中选择目标类为设备（Asset）;

4）接下来确定使用目标类上什么表单模版，这里选择我们上一节建好的AssetCard；

5）完成上两步后仅能显示单个设备对象的卡片。开启“多对象展示”开关，即可实现设备对象的多对象卡片展示；

6）开启多对象展示后，会同时提供“多选”、”分页“功能开关，可按需设置；

7）多对象卡片默认显示目标类的全部数据，也可以在过滤条件处设置过滤条件，展示部分卡片；

8）多对象卡片每行显示3张卡片，如果想调整每行显示的卡片个数，可以在属性编辑框-样式处设置卡片的宽度。

图-卡片属性设置

图-卡片样式设置

4.单个工单信息维护

在之前的讲解中，为大家介绍如如何维护零部件信息、零部件列表、设备信息和设备列表。结合实际的业务场景，设备发生故障时，需要确定发生故障的设备是那一台，并且要定位该设备上发生故障的部位。这时候需要用一个工单类来记录故障设备和故障部位。首先看下本次案例中关于为维护单个工单设计的表单，见下图。

图-进阶版工单信息维护表单

分析上图，除了已经提到过的布局控件和基础控件，多了一些没有使用过的控件。工单需要记录故障设备（设备类对象）和故障部位（零部件对象），所以引入了外键引用类控件——对象选择框和单对象弹窗。在创建工单时，往往需要明确负责人是组织中的具体某个人，这时候我们引入模型点选类控件——组织用户点选器来。首先通过已经熟悉的控件进行单对象表单——工单的创建，建模步骤如下：

1）进入实体类表单管理，为工单（WorkOrder），创建一个英文名为SingleWO的表单，进入表单定制工具；

2）根据上图布局设计，在画布区拖入两个分组框，并修改标题为“工单属性”、“工单内容”；

3）在“工单属性”分组框内拖入3行；

4）在“工单内容”分组框内拖入2行，均调整为1列；

5）接下来将日期框、选择框、文本框拖入对应的布局内，并且绑定上图所示的属性；

6）其他控件的使用将在下文中讲解。

4.1 外键引用控件-选择框

选择框控件是一个外键引用类控件，在DWF中，”全局唯一标签oid“属性可以保证对象的唯一性，所以我们在前面工单建模时，创建了属性为UUID的“故障设备assetOid”属性，用于存储设备对象的“全局唯一标识oid”值。接下来具体讲解对象选择框的使用：

1）在控件区-单对象控件处找到对象选择框()控件，将控件拖放到合适布局内；

2）选中画布区的对象选择框控件，右侧滑出控件的属性编辑框；

3）为单对象控件绑定目标属性，在本案例中绑定“故障设备assetOid”属性；

4）在属性编辑区开启“数据字典”，选择框控件可做为引用类型的控件使用，所以需要明确需要该属性需要引用的目标类，在本案例中，设置目标类为设备（Asset）；

5）我们引用的对象属性较多，不能将所有属性的数据都罗列出来，因此需要设置浏览字段，也就是点击对象选择框时那个或者那些属性的数据。本次案例中，我们设置浏览字段为“代号”、“设备名称”；

6）接下来需要设置回填字段。回填属性具体的存储过程——单对象控件就会把将选中的对象的“回填字段”属性值赋值到对象选择框控件绑定的目标属性上。我们将回填属性设置“全局唯一标识oid”；

7）现在设置显示字段，显示字段与浏览字段不同。显示字段是指显示在对象选择框的内容区域的文字。通常浏览字段可以跟显示字段保持一致，也可以自定义设置显示字段；

8）在本次案例中，提供的数据不多。当引用类对象较多时，可以开启远程搜索功能，该功能提供搜索功能和分页，当数据超过100条时，系统默认开启远程搜索；

9）如果开启多选时，还可以实现选中多个对象；

10）添加过滤条件，可以将下拉框显示的数据进行过滤。

图-对象选择属性设置

4.2 外键引用控件-对象标签

对象标签是另一个外键引用类控件。上一讲为大家介绍了如何使用对象选择框。除了通过下拉列表形式展示数据，我们还希望看到引用类更多信息。这种情况，我们可以使用对象标签来替对象选择框。接下来讲解对象标签的具体使用方法：

1）在控件区-对象标签控件处找到单对象标签()控件，拖入合适布局内；

2）选中画布区的对象标签控件，右侧滑出对象标签的属性编辑框；

3）为对象标签控件绑定属性，在本案例中，我们为其绑定“故障部位partOid”；

4）因为对象标签也是引用类控件，同对象选择框一样，需要明确引用数据的类别，即“零部件Part”；

5）对象标签与对象选择框的数据展示形式不同，点击对象标签输入框右侧的放大图标，会弹出一个弹窗。这个弹窗的内容也是需要明确的，即设置浏览表单。因为我们想看到读多条零部件的信息，这里我们可以选中浏览表单为“MultiParts”；

6）同对象选择框一样，需要设置回填字段，这一步我们将回填字段设置为零部件类的“全局唯一标识oid”；

7）显示字段的含义同对象选择框的含义，显示字段是指显示在对象选择框的内容区域的文字，我们把显示字段定义为“零件代号”和“零件名称”；

8）如果开启”多选“开关时，还可以实现选中多个对象。

9）可进行属性联动赋值定义。

图-对象标签属性设置

4.3 模型点选器-组织用户

在培训的讲义中，我们为大家将讲解了如何在组织模型处创建用户和用户组。接下来为大家介绍如何利用模型点选控件-组织用户点选器将模型中数据和应用结合起来使用。下面是组织用户点选器的使用步骤：

1）在控件区-模型点选控件处找到组织用户点选器()控件，将控件到合适的布局内；

2）点击画布区的组织用户点选器控件，右侧滑出组织用户点选器属性编辑框；

3）为组织用户点选器绑定目标属性，本案例中，为组织用户点选器绑定“负责工程师engineerOid”属性；

4）在组织模型中有区分用户和用户组，因为“负责工程师engineerOid”属于用户，所以此时指定为用户；

5）指定为用户组时，如果没有指定用户组，点击组织用户点选器时会下拉显示所有的用户，也可以指定显示某一个用户组下的用户。

图-组织用户点选器属性设置

5.外键引用类控件

外键引用类控件可以解决不同实体类之间数据的引用问题，可以通过引用类来选择引用类属性，例如实现在实体类A下面的表单根据实体类B的oid 来访问实体类B的数据，通过在浏览字段中选择应用类的属性，实现对引用类B的属性的浏览，在本节的4.1和4.2中介绍了对象选择框和对象标签在设备管理案例中的外键应用类控件的使用。DWF单对象控件中有4个外键引用类控件：

• 单选框、复选框、选择框这3个控件在控件属性定义区开启“数据字典”的情况下也是外键应用类控件
• 对象标签是外键引用类控件

6.数据跨类应用

 在定制表单时一般是在某个类下创建表单，但DWF同样可以实现表单中数据跨类的使用，实现途径如下：

• 单对象控件中具有“数据字典”的4个控件（单选框、复选框、选择框、对象标签），通过开启“数据字典”可以实现数据跨类应用
• 多对象的表格控件通过属性“列定制面板”中的引用类可以实现数据跨类应用
• 可视化控件中的“动态数字”控件，可以通过选择“目标类”实现数据跨类应用

7.小结

设备地图 LandingMap

• 可视化控件
  • 动态地图：单独映射、字符串映射、图标、角标属性

设备看板 AssetDashBoard

• 布局控件
  • 拖拽池/拖拽块：冻结、带标题、可伸缩、适应内容
• 单对象控控件
  • 动态数字标签：千位符、开启图标、开启动效、符号和单位
• 可视化控件：
  • 动态地图
  • 自定义可视化控件：前端脚本

单个设备卡片 AssetCard

• 布局控件
  • 行、列
• 单对象控件
  • 标签、上传文件

多个设备卡片 AssetCards

• 多对象控件
  • 表单：目标类、选择表单、多对象展示

维护单个工单信息

• 单对象控件
  • 对象选择：目标类、浏览字段、回填字段、显示字段
  • 对象标签：目标类、浏览表单、回填字段、显示字段
  • 组织用户点选器：指定类型

本节还对外键引用类控件进行了介绍和总结，外键应用类控件有4个：单选框、复选框、选择框、对象标签。

总结了表单中数据跨类应用的3类情况。

6.附件

第六章 表单模型（四）.zip