1 插件代码的封装
在DWF开发调试的时候,扩展的插件文件需要在dwf-part-all文件夹特定的子文件夹,在DWF SDK展开后dwf-part-all内已经布置了一个part01的文件夹,作为示例。
当插件开发好以后,DWF的装配脚本会将插件的vue文件打包,并且封装为一个zip文件,这个被封装的zip文件称之为代码包,用于进行代码包的封装脚本在:scripts\assemble.py中。
当装配脚本开始执行的时候,其会将文件拷贝到 app-web\src\assemble_components或者modeler-web\src\assemble_components内的文件夹里,并且自动修改config.js文件,从而扩展新的功能。
1.1 代码包目录结构
当开发者打开样例工程的时候,已经安排了一个名为part01的文件夹,用来代表需要独立打包的代码,开发者可以根据自己的偏好将part01修改为其他名称,用来代表自己或者自己小组开发的代码。
part01内部的结构由三部分组成:
- part-model:表示代码运行需要提供的基础模型,例如:数据模型,表单模型等,内部保存一个或者多个模型包,关于模型如何打包,详见: 第十章 应用发布管理。
- part-web:前端扩展的代码,分为app, common和modeler三个模块,每个模块又分forms和operations两个子模块,用户在子模块中开发对应的前端控件。
- part-svc:后端扩展的代码,后端分为app,common和modeler三个模块,每个模块又分controller,entity和service三个子模块,用户在子模块中开发对应的后端接口。
目录结构如图:
图-代码包的典型结构
最后,在每一个代码包的结构中有一个asemble-part.yaml用于描述代码包的元信息,在代码开发完成,封装完毕后到现场装配的时候,封装脚本将自动填写。
关于将扩展代码和SDK的核心代码分离原因可以从以下三方面解释:
第一,SDK核心代码与扩展代码分离,防止核心代码升级导致的覆盖混乱。
第二,扩展代码与核心代码的分离有利于保护扩展代码的私密性,尤其是一些敏感行业不希望公开扩展代码时,可以独立进行管理。
第二,前后端代码统一封装,可以实现前后端一步到位的扩展,降低对现场实施人员技能依赖,从而减少实施成本。
1.2 代码的封装方法
代码开发完毕以后,需要封装为符合DWF规范的代码包,这个封装是通过DWF SDK中的assemble.py脚本实现的。
其位置位于SDK目录下:scripts\assemble.py下具体的用法如下:
python assemble.py generate # 为dwf-part-all中所有part打包,每个part一个zip包 python assemble.py generate part01 # 生成指定part的zip包 python assemble.py generate part01 as flok # 利用关键字as实现part名的修改并打包
运行脚本后在dwf-part-all下面会生成一个zipfiles文件夹,这个文件夹内的zip文件即为代码包,将这个代码包发到现场,可以通过dwf modeler的代码装配功能实现装配。
图-代码包上传界面
2.DWF插件简介
在DWF的前端,插件是扩展的基本单位,插件以vue组件的形式开发,保存为.vue文件
2.1 插件的规范
插件vue文件格式如下所示:
<template> //html区域,用来编写插件的视图;template内只能有一个根元素 </template> <script> import相关依赖 export default { name: //插件名 props: //插件属性[从上级组件(调用插件页面)获取的数据], (如<el-button :type="circle">里面,type就是一种prop) data() {...} methods: {...} ... } </script> <style> //css样式区域 </style>
其中,在<script>标记里,几个DWF与插件约定的参数,必须实现。
name : 插件的名称。
methods{...}:插件对外显示的方法,被不同模块调用时,从这里找到标准方法。
需要注意的是,app-web和modeler-web是两个不同的工程,所以操作插件的vue文件需要分别拷贝一份。
2.2 如何发现插件并自动装配
为让DWF的建模工具和应用前端发现插件,在SDK的 app-web(modeler-web)/src/assemble_components/form(operation)/config.js 会存储插件的注册信息。
其中,操作模块在operation/config.js注册,表单模块在form/config.js注册。config.js文件代码结构如下:
export const entries = [ ... { "name": "OprImpExtEntity", //插件的英文名 "note": "引入外部实体类", //插件的中文名/备注 "path": "operation/OprImpExtEntity.vue", //插件vue文件的相对位置 "module": "operation" //模块名称,指定以后不同的模块会调用插件 }, ... ];
其中,module的取值表示当前插件支持的DWF模块,DWF通过这个属性的取值了解可调用的扩展插件。
module取值类型有:
- “operation”:功能模型的操作扩展。
- “form”:表单模型的控件扩展。
利用DWF SDK的装配脚本,可以实现对上述文件的自动更新,使用方法如下:
cd scripts\ python assemble.py devClear #表示清空congfig.js文件,并且删除已经装配的vue文件。 python assemble.py devAssemble #表示自动扫描所有的插件,并且将其写入congfig.js。
3 小结
本章主要介绍了DWF的代码包的概念,代码包的组织形式,以及如何将代码打包。
之后,简单介绍了DWF的前端插件的概念,以及插件的发现原理。
下一章,将介绍DWF中最简单的一类前端插件,操作插件。