目录 |
---|
1 控件的属性区编程
上一章里详细介绍了表单控件的各项配置和对应的代码,表单控件自身自带的属性设置非常丰富,有些属性的设置在很多控件中重复出现,例如:目标类设置,目标属性设置,如下图所示,当用户打开DWF的表单建模工具的时候,工具会显示下面的一些区域:
...
如果这些设置都需要重新开发,不仅增加程序员的负担,还会导致用户体验的不一致,为了针对这一问题,DWF封装了一套标准的交互组件,如果使用这些交互组件进行设置可以大幅度降低控件属性设置的难度,提高用户体验的一致性。
以目标属性为例,交互组件的形式如下所示:
图-DWF表单控件中目标属性参数的标准交互示意
本章介绍交互组件的使用方法介绍这些缺省设置对应的使用方法,和上一章一样,本章将开发一个名为“空白控件”的控件开发,围绕一个可以设置高度、宽度和显示的内容,如下所示:
图-空白控件示意图
2 控件属性编辑区
2.1 控件初始标签设置
和上一节入门控件一样,这里即将开发白板控件对应的建模端包含图标,预览和属性编辑三大块标签,如下代码所示:
...
- 已经使用了vue的数据绑定能力将整体宽度、整体高度和标签内容设置为args.height,heightType,width,widthType以及args.label五个参数。
- 其中<span v-show="t_edit" ref="edit">标签的内容仍然保持为空,因此如果此时调试控件是不会有和上述5个参数对应的属性编辑框出现的。
下面看如何得到属性编辑框。
2.2 给控件增加自动配置能力
为了给控件增加属性编辑功能,DWF提供了一个称之为EditBox的标签和配套的函数,只要控件的代码中包含args属性是DWF建模工具可以自动识别的,表单建模工具会自动为其在属性编辑区建立对应的输入控件。增加EditBox需要执行下面的步骤:
- 在控件vue文件中的<template>内增加<EditBox>标签并配置参数。
- 在脚本部分通过import引入_EditBox.vue文件和EditBox的component组件。
- 引入DWF表单引擎传入的prop参数,以便EditBox作为标签参数绑定。
引入EditBox标签
首先,引入EditBox标签的方法很简单,如下代码所示:
...
- 在EditBox里增加了一系列prop变量绑定,例如:attributes, router, route, root, query_oprs, itemValue。
- 在标签里如果出现需要自定义的部分可以分别在<div slot>标签里添加,这里先不考虑添加自定义属性。
引入EditBox脚本
接下来,直接引入EditBox标签对应的脚本实现,具体代码片段如下所示:
...
- widgetAnnotation="widgetAnnotation":控件标注所用参数,DWF会通过props直接传递一个缺省值进来
- router="router":当前路由对象,DWF会通过props直接传递一个缺省值进来
- route="route":当前路由信息,DWF会通过props直接传递一个缺省值进来
- root="root":根组件对象,DWF会通过props直接传递一个缺省值进来
- itemValue="itemValue":表单对应JSON实例化以后的对象,DWF会通过props直接传递一个缺省值进来
- dataTypes="dataTypes":目标属性类型
- attributes="filter_attributes":过滤之后的目标属性
- targetclass="itemValue.data.targetClass":表单类
增加args属性
引入了EditBox以后,还需要在vue文件脚本部分的data()函数中返回args对象,用于保存和初始化需要展示的控件属性。
...
代码块 |
---|
// Vue数据绑定的时候要求返回的结果 data() { return { //插件的名字 name: "blankControl", //表示是否已经进入画布区 t_preview: false, //是否需要编辑属性 t_edit: false, // 属性配置项,按需设置 args: { height: 300, heightType: "px", width: 100, widthType: "%", label: "Empty!", }, }; }, |
2.3 为控件增加事件
除了配置项以外,控件内的事件也可以添加到里面来,如果需要添加控件自身的事件响应,具体操作是:
建模工具里的事件配置
在args属性里添加两个配置参数:eventRange,events,它们的作用是:
...
上述代码添加到进阶插件的args列表之中以后,在画布中添加进阶控件,可以看到如下的效果:
图-控件增加单击、双击事件
表单应用中的事件触发
通过this.invokeOperation触发操作
...
好了,上述代码补充到之前的实现里,打开表单即可让脚本开发者验证是否具有单击和双击实现,关于操作脚本的开发详见 第五章 多对象表单控件脚本:
图-控件增加单击和双击事件后的效果
2.4 完整代码
建模端完整代码
上面两节介绍了最关键的操作,下面公布空白控件在建模工具里的完整代码,此时控件的methods部分包含了表单建模工具将要调用的大部分函数:setDisplayType,getEditBox,setHeight,setArgs,getArgs,getAllow,getFormName
代码块 | ||||
---|---|---|---|---|
| ||||
<template> <!-- 建模时的预览前端,即插件的实际显示样式 :addinName="name"和ref="main"一般情况不可去除 --> <section v-if="t_preview" :addinName="name" ref="main" :style="{ width: args.width + args.widthType }" > <!-- 在画布区的显示内容 --> <span :style="{ height: args.height + args.heightType, width: 100 }" style=" font-size: 50px; display: flex; justify-content: center; align-items: center;" >{{ args.label }}</span> <span v-show="t_edit" ref="edit"> <!-- 属性编辑框区域 需要该插件获取attributes, router, route, root, query_oprs, itemValue的prop 对于不需要设置目标属性的插件,可以将attributes去掉 对于不需要设置事件的插件,可以将router, route, root, query_oprs去掉 --> <EditBox v-model="args" :router="router" :route="route" :root="root" :itemValue="itemValue" :query_oprs="query_oprs" :targetclass="itemValue.data.targetClass" > <div slot="attribute"> <!-- 属性选项放置区域 一般一个控件的prop都属于属性选项 --> </div> <div slot="layout"> <!-- 样式选项放置区域 仅有涉及到高度,宽度,对齐等样式的选项放在这里 --> </div> <div slot="operation"> <!-- 事件选项放置区域 --> </div> </EditBox> </span> </section> <section v-else :addinName="name"> <span style="text-align: center;"> <div class="form-addin-icon"> <!-- 控件拖放区图标的样式 --> <i class="iconfont"></i> </div> <!-- 在控件拖放区图标的名字 --> <div class="form-addin-name">进阶控件</div> </span> </section> </template> <script> // 引入控件自身的属性编辑框,DWF给出的标准实现 import EditBox from "@/ext_components/form/_EditBox.vue"; export default { // 引入控件的设置框对应的组件,对应在标签内可以引用 components: { EditBox, }, // 引入DWF的控件编辑辅助属性 props: [ "widgetAnnotation", "itemValue", "attributes", "route", "router", "root", "query_oprs", ], // Vue数据绑定的时候要求返回的结果 data() { return { //插件的名字 name: "blankControl", //表示是否已经进入画布区 t_preview: false, //是否需要编辑属性 t_edit: false, // 属性配置项,按需设置 args: { height: 300, heightType: "px", width: 100, widthType: "%", label: "Empty!", eventRange: ["单击", "双击"], events: [], }, }; }, methods: { /* 在建模的时候传入,提示控件是在画布区还是在控件列表中 0:表示在画布区,已经被拖入 1:表示在控件区,准备被拖入 2: 表示在拖动中,还未放下 */ setDisplayType(type) { if (type == 0) this.t_preview = true; return this; }, // 默认不用变化,返回编辑框供建模工具绘制,当控件拖入画布区以后被点击的时候触发 getEditBox() { this.t_edit = true; return this.$refs.edit; }, // 当插件无法直接通过style设置高度时,使用setHeight方法设置高度 setHeight() { if (!this.$refs.main) return; }, // 现有表单加载在画布区加载控件的时候,会将之前的配置传入 setArgs(args) { for (var i in args) { this.args[i] = args[i]; } return this; }, // 表单保存的时候将控件的设置合并到表单自身的JSON中 getArgs() { return this.args; }, // 是否允许其他子控件拖入,如果不允许则返回null getAllow() { return null; }, // 返回控件绑定的目标属性,如果没有绑定返回undefined或者null getFormName() { return null; }, }, }; </script> <style> </style> |
应用端完整代码
在上述讨论之后,对应插件的应用端代码和入门控件的应用端类似,除了入门控件提到的setDisplayType, setArgs, getArgs以外,应用端代码还实现了用于和表单引擎交互的一些其他函数包括:
...
freshData:根据给定的查询条件刷新表单,如果没有给定则使用默认的查询条件。
3 小结
本章是在入门插件的基础上重点介绍了如何利用DWF提供的EditBox内部组件自动识别控件的属性,并自动产生属性编辑区对应输入界面的方法,使用EditBox的要点是:
...
本章在最后还介绍了控件应用端的一些额外函数,当控件需要和DWF数据绑定并进行交互的时候这些函数就会被调用,接下来在表单建模进阶里将会介绍控件如何与后台数据交互。
4 附件
建模端进阶控件:
View file | ||||||||
---|---|---|---|---|---|---|---|---|
|
View file | ||||||||
---|---|---|---|---|---|---|---|---|
|
应用端进阶控件:
View file | ||||||||
---|---|---|---|---|---|---|---|---|
|
View file | ||||||||
---|---|---|---|---|---|---|---|---|
|