目录 |
---|
...
控件的属性区编程
上一章里详细介绍了表单控件的各项配置和对应的代码,表单控件自身自带的属性设置非常丰富,有些属性的设置在很多控件中重复出现,例如:目标类设置,目标属性设置,如下图所示,当用户打开DWF的表单建模工具的时候,工具会显示下面的一些区域:
...
本章介绍交互组件的使用方法介绍这些缺省设置对应的使用方法,和上一章一样,本章将开发一个名为“空白控件”的控件开发,围绕一个可以设置高度、宽度和显示的内容,如下所示:
图-空白控件示意图
...
控件属性编辑区
...
(一)控件初始标签设置
和上一节入门控件一样,这里即将开发白板控件对应的建模端包含图标,预览和属性编辑三大块标签,如下代码所示:
...
- 已经使用了vue的数据绑定能力将整体宽度、整体高度和标签内容设置为args.height,heightType,width,widthType以及args.label五个参数。
- 其中<span v-show="t_edit" ref="edit">标签的内容仍然保持为空,因此如果此时调试控件是不会有和上述5个参数对应的属性编辑框出现的。
下面看如何得到属性编辑框。
...
(二)给控件增加自动配置能力
为了给控件增加属性编辑功能,DWF提供了一个称之为EditBox的标签和配套的函数,只要控件的代码中包含args属性是DWF建模工具可以自动识别的,表单建模工具会自动为其在属性编辑区建立对应的输入控件。增加EditBox需要执行下面的步骤:
- 在控件vue文件中的<template>内增加<EditBox>标签并配置参数。
- 在脚本部分通过import引入_EditBox.vue文件和EditBox的component组件。
- 引入DWF表单引擎传入的prop参数,以便EditBox作为标签参数绑定。
...
(1)引入EditBox标签
首先,引入EditBox标签的方法很简单,如下代码所示:
...
- 在EditBox里增加了一系列prop变量绑定,例如:attributes, router, route, root, query_oprs, itemValue。
- 在标签里如果出现需要自定义的部分可以分别在<div slot>标签里添加,这里先不考虑添加自定义属性。
...
(2)引入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":表单类
...
(3)增加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列表之中以后,在画布中添加进阶控件,可以看到如下的效果:
图-控件增加单击、双击事件
...
(1)表单应用中的事件触发
通过this.invokeOperation触发操作
...
代码块 |
---|
export default { props: ["itemValue", "store"], // Vue数据绑定的时候要求返回的结果 data() { return { ... // 省略无关代码 args: { ... // 省略无关代码 events: [], }, }; }, methods: { ... //省略无关代码 triggerEvent(eventName) { let eventConfig = null; // 提取事件对应的操作参数 if (this.args.events && this.args.events.length > 0) { eventConfig = this.args.events.find((val) => { return val.name === eventName; }); } // 触发实际操作 if (eventConfig) { this.invokeOperation( eventConfig.opr_type, eventConfig.opr_path, this.itemValue, this.store ); } }, }, }; |
...
(2)绑定标签的原始事件
了解如何绑定原始事件并且触发操作以后,剩余的部分就非常简单了,在标签部分将标签的原始事件与函数对应起来,然后调用前面描述的triggerEvent方法触发事件配置对应的参数,先看如何绑定标签上的事件,以本章的进阶控件为例,原本设计了两个事件:单击和双击,运用vue规定的语法在template部分的标签中增加@click和@dbclick分别绑定到onClick() 和 onDoubleClick()方法上,代码如下:
...
好了,上述代码补充到之前的实现里,打开表单即可让脚本开发者验证是否具有单击和双击实现,关于操作脚本的开发详见 第五章 多对象表单控件脚本:
图-控件增加单击和双击事件后的效果
2.4 完整代码
...
(四)完整代码
(1)建模端完整代码
上面两节介绍了最关键的操作,下面公布空白控件在建模工具里的完整代码,此时控件的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> |
...
(2)应用端完整代码
在上述讨论之后,对应插件的应用端代码和入门控件的应用端类似,除了入门控件提到的setDisplayType, setArgs, getArgs以外,应用端代码还实现了用于和表单引擎交互的一些其他函数包括:
...
freshData:根据给定的查询条件刷新表单,如果没有给定则使用默认的查询条件。
...
小结
本章是在入门插件的基础上重点介绍了如何利用DWF提供的EditBox内部组件自动识别控件的属性,并自动产生属性编辑区对应输入界面的方法,使用EditBox的要点是:
...
本章在最后还介绍了控件应用端的一些额外函数,当控件需要和DWF数据绑定并进行交互的时候这些函数就会被调用,接下来在表单建模进阶里将会介绍控件如何与后台数据交互。
...
示例代码附件
建模端进阶控件:
View file | ||||
---|---|---|---|---|
|
View file | ||||
---|---|---|---|---|
|
应用端进阶控件:
View file | ||||
---|---|---|---|---|
|
应用端进阶控件: