页面树结构

版本比较

标识

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

...

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

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

1.设备地图

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

图-设备地图

1.1 可视化控件-动态地图

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

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

...

信息
title定义

整体高度是指整个控件的高度,限制了地图在应用端的展示面积;

地图高度是指动态地图控件内置地图的高度,内置地图的高度可以大于控件高度,当内置地图高度大于控件高度时,控件会出现滚动条以便用户查看地图上的所有对象。

2. 设备看板

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

...

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

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

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

...

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

图-拖拽块属性设置

2.2 单对象控件-动态参数

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

...

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

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

2.3 编码扩展-Echart

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

...

代码块
languagejs
linenumberstrue
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 设备看板和数据结合

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

...

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

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

3.设备卡片

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

...

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

3.1 单对象控件-文本标签

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

...

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

图-文本标签属性设置

3.2 多对象控件-卡片(多对象展示)

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

...

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

图-卡片属性设置

图-卡片样式设置

4.单个工单信息维护

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

...

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

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

4.1 外键引用控件-选择框

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

...

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

图-对象选择属性设置

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

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

...

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

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

图-对象标签属性设置

4.3 模型点选器-组织用户

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

...

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

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

5.外键引用类控件

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

...

信息
title注意!

对象选择框和对象标签都是外键引用类控件,他们的不同之处在于:

  • 对象选择框在属性定义区开启“数据字典”后才是外键应用类控件;
  • 选择框是通过下拉的方式进行数据选择,而对象标签是弹窗方式进行选择;
  • 选择框的是“浏览字段”,而对象标签选择的是“浏览表单”;
  • 对象选择具是否”开启搜索”的开关,而对象标签没有此开关。

6.数据跨类应用

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

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

7.小结

设备地图 LandingMap

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

...

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

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

6.附件

View file
name表单建模入门(三).zip
height250