页面树结构
转至元数据结尾
转至元数据起始

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

DWF表单建模目前提供了7大类、51种控件,将控件拖拽到工作区,然后绑定实体类/关联类的属性即可实现数据的展示,在此基础上完成业务系统操作页面构建。

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

表单形式包括表单布局方式和属性的展示,每个表单有一个目标类,如果该目标类为实体类,则是实体类表单(Entity Class Form);如果该目标类为关联类,则是关联类表单(Relation Class Form)。

1.表单界面定制

表单定制界面分为4个区域:

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

2. 控件分类

DWF表单模型提供了7大类51个表单的控件,控件区具体区分为:”布局控件”、“单对象控件”、“多对象控件”、“可视化控件”、“模型点选控件”、“编码扩展”、“IotDB专用控件”,如下图所示。

DWF表单控件区提供的控件

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

此外,DWF还提供了自定义控件的扩展功能。

表单基本功能介绍详见

3.表单定制视频

结合设备管理的案例,视频中展示了新建设备表单、设备列表、设备地图3个表单的定制过程,其他的设备管理页面读者可以触类旁通自己练习定制。

3.1 设备数据录入表单

设备录入表单是一个单对象表单,用来供数据录入、数据编辑和数据查看详情使用,主要操作步骤:

  • 第一步:在“布局”控件区选择3个分组框,分别定义3个分组框的标题为:“基础属性”、“业主属性”、“设备状态”,根据要呈现的数据,在每个分组框内拖入行、列控件;
  • 第二步:在“基础属性”分组框“的布局内,在单对象控件区域中分别拖入:“附件”、“文本框”(代号)"、"文本框"(设备名称)、“选择框”(设备类型)、“文本框”(设备描述),并完成与目标类属性的绑定;其次再完成对”业主属性“和”设备状态“分组框区域控件的定义;
  • 第三步:点击右上角”保存“,点击”分享“,可预览所制定表单的格式,选择”建模工具”再次返回表单定制页面。

新建单个设备表单

3.2 创建设备查询表单

下面的视频是一个经常使用多对象查询表单,用于查询数据,并与3.1中的表单组合使用完成数据的增、删、改操作,该表单的主要操作步骤如下:

  • 第一步:创建多对象列表。在布局控件中选择”行“控件(设置2行),在多对象控件中“表格”控件,在属性设置区域“选着属性”中选择表格要显示的属性;
  • 第二步:在画布区行控件的第一行拖入3个“按钮”控件,以新增按钮为例,选中按钮,在属性设置去选择“事件”,点击“”+“号,创建一个增加的操作:       
    •    需要设置事件的英文名、显示名
    • 选择动作为为“creat"
    •    选择目标i类”Asset“,选择表单名”SingleAsset“ 
    •   按照弹出的界面完成配置,注意在”表格名称“中选择在3.1中已经完成的新建单个设备表单”SingleAsset”,这样就把2个表单关联起来了,再依次完成编辑和删除按钮的设置
  • 第三步:操作列设置。在表格的右侧需要设置一个”查看详情“的列操作,在表格属性设置区的选择属性中选中”“操作列”,在操作列设置中完成相关的设置,可以通过“绑定操作”与相关的操作和表单建立联系。

注意:

  • 这三个按钮都需要设置按钮的属性,选中绑定的多对象控件为指定表格,否则刷新不生效;
  • 要调整表格的高度,使其表格底部落在屏幕的下方,可以在属性设置区的“样式”中的整体高度选择“vh"为70~80,逐步进行调整,直至表格底部落在屏幕的底部。

定制设备列表表单

注意!

实体类的增、删、改表单是最常用的业务表单,关于该表单定制的详细说明和小结,请看参看本手册第二部分 DWF系统定制中第三章 表单建模入门中的表单建模入门(一)的详细介绍。


3.3 创建设备地图

 下面的视频为教学案例中的设备地图的创建过程:

  • 第一步:在可视化控件中拖入“百度地图”到画布区域,在属性设置去中的“经纬度映射类型”中选择“单独映射”,将位置经度与位置维度做绑定设置;
  • 第二步:选择图标与设备实体类中的“设备图标”做绑定;在选择图标地址;
  • 第三步:对过滤条件进行选择,例如可以把设备状态、工作小时数、总里程数、业主名称等做为过滤条件进行设置。

创建设备地图




  • 无标签