页面树结构

版本比较

标识

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

...

当装配脚本开始执行的时候,其会将文件拷贝到 app-web\src\assemble_components或者modeler-web\src\assemble_components内的文件夹里,并且自动修改config.js文件,从而扩展新的功能。

1.1 代码包目录结构

当开发者打开样例工程的时候,已经安排了一个名为part01的文件夹,用来代表需要独立打包的代码,开发者可以根据自己的偏好将part01修改为其他名称,用来代表自己或者自己小组开发的代码。当开发者打开SDK样例工程的时候,已经预制了一个名为part01的文件夹,用来代表需要独立打包的代码,开发者可以根据自己的偏好将part01修改为其他名称,用来代表自己或者自己小组开发的代码。

part01内部的结构由三部分组成:

  • part-model:表示代码运行需要提供的基础模型,例如:数据模型,表单模型等,内部保存一个或者多个模型包,关于模型如何打包,详见: 第十章 应用发布管理
  • part-web:前端扩展的代码,分为app, common和modeler三个模块,每个模块又分forms和operations两个子模块,用户在子模块中开发对应的前端控件。
    • public:存放前端需要使用的资源文件,可将插件包所需前端资源文件上传至此目录,注意:同名文件会被覆盖!建议在文件夹内单独创建以插件包命名的文件夹,以免被其他项目插件覆盖
  • part-svc:后端扩展的代码,后端分为app,common和modeler三个模块,每个模块又分controller,entity和service三个子模块,用户在子模块中开发对应的后端接口。
    • lib:如果需要在插件里带入一些jar包,可以将这些jar包放到这个lib文件夹中。

目录结构如图:

图-代码包的典型结构

最后,在每一个代码包的结构中有一个asemble-part.yaml用于描述代码包的元信息,在代码开发完成,封装完毕后到现场装配的时候,封装脚本将自动填写。

信息

关于将扩展代码和SDK的核心代码分离原因可以从以下三方面解释:

第一,SDK核心代码与扩展代码分离,防止核心代码升级导致的覆盖混乱。

第二,扩展代码与核心代码的分离有利于保护扩展代码的私密性,尤其是一些敏感行业不希望公开扩展代码时,可以独立进行管理。

第二,前后端代码统一封装,可以实现前后端一步到位的扩展,降低对现场实施人员技能依赖,从而减少实施成本。

1.2

...

DWF如何识别源文件

为让DWF发现插件,并将正确的插件文件装配到目标系统之中,SDK会在上述源码的文件夹,预先创建一个装配描述文件assemble-to.yaml,如下面的文件夹结构里面所示:

Image Added

图-装配文件assemble-to.yaml

下面是一个assemble-to.yaml内容的例子,如图中所示,在dwf-part-all\part01\part-web\modeler文件夹下有建模工具、应用前端和手机表单对应的vue文件,在assemble-to.yaml内部通过如下的配置方式即可指示DWF进行自动装配。

Image Added

利用DWF SDK的装配脚本,可以实现对上述文件的自动更新,使用方法如下:

代码块
languagebash
linenumberstrue
cd scripts\
python assemble.py devClear #表示清空congfig.js文件,并且删除已经装配的vue文件。
python assemble.py devAssemble #表示自动扫描所有的插件,并且将其写入congfig.js。

1.3 插件的封装方法

代码开发完毕以后,需要封装为符合DWF规范的代码包,这个封装是通过DWF SDK中的assemble.py脚本实现的。

...

信息

需要注意的是,app-web和modeler-web是两个不同的工程,所以操作插件的vue文件,需要考虑分别在两个不同的前端对应不同的实现,最简单的做法是放在common文件夹里,自动拷贝一份。

2.2  如何发现插件并自动装配

为让DWF的建模工具和应用前端发现插件,在SDK的 app-web(modeler-web)/src/assemble_components/form(operation)/config.js 会存储插件的注册信息。

其中,操作模块在operation/config.js注册,表单模块在form/config.js注册。config.js文件代码结构如下:

代码块
languagejs
linenumberstrue
export const entries = [
...
    {
        "name": "OprImpExtEntity", 					//插件的英文名
        "note": "引入外部实体类",  					//插件的中文名/备注
        "path": "operation/OprImpExtEntity.vue",	//插件vue文件的相对位置
        "module": "operation"						//模块名称,指定以后不同的模块会调用插件
    },
...
];

module的取值表示当前插件支持的DWF模块,DWF通过这个属性的取值了解可调用的扩展插件。

module取值类型有:

  • “operation”:功能模型的操作扩展。
  • “form”:表单模型的控件扩展。

利用DWF SDK的装配脚本,可以实现对上述文件的自动更新,使用方法如下:

true
代码块
languagebash
linenumbers

cd scripts\
python assemble.py devClear #表示清空congfig.js文件,并且删除已经装配的vue文件。
python assemble.py devAssemble #表示自动扫描所有的插件,并且将其写入congfig.js。

3

...

小结

本章主要介绍了DWF的代码包的概念,代码包的组织形式,以及如何将代码打包。

...