# DWF3.0_addin_devdoc

**Repository Path**: zhangzhenbang/DWF3.0_addin_devdoc

## Basic Information

- **Project Name**: DWF3.0_addin_devdoc
- **Description**: a brief documentation for addin development in DWF 3.0
- **Primary Language**: 其他
- **License**: MIT
- **Default Branch**: master
- **Homepage**: None
- **GVP Project**: No

## Statistics

- **Stars**: 0
- **Forks**: 0
- **Created**: 2020-05-06
- **Last Updated**: 2020-12-19

## Categories & Tags

**Categories**: Uncategorized

**Tags**: None

## README

# DWF插件开发指南

[TOC]

## 前言

插件开发，是DWF系统定制的第三阶段。当系统原生组件无法实现所需效果，而所需效果又确实需要时，则应考虑进行插件开发。这是一种源代码层面的功能扩充，相比前两阶段，对编写代码的能力有了更高的要求。

总的来说，插件开发充分利用了Vue框架的**运行时挂载**以及**MVVM**的架构，使得装配后的插件可以与原生组件以相同方式被使用/调用。经过精心设计的插件，可以满足各种新的功能需求，同时又能被很方便地复用，而依托DWF实现这些强大功能，仅需要**遵守代码约定，引入一系列模版代码**。

模版代码的想法，应当说在简洁性与灵活性之间取得了巧妙的平衡，是一个值得参考的设计。同时，随着Vue的不断发展，可以期待插件开发会有越来越流畅的体验。本文将为读者提供有关DWF插件开发的技术指导。

### 预备知识

以下内容为必备知识

- `javascript（es6）`
- `vuejs(v2.6)`：一个前端响应式的渐进开发框架
- `iview`：一个基于`vuejs`的视图组件库

以下内容需有基本了解

- `node`，`webpack`：编译打包使用
- `npm`, `git`：包管理与代码管理工具
- `echarts`：一个数据可视化图表工具，某些可视化插件会需要

### 环境搭建

#### 项目结构一览

```
- app-web 应用端（插件展示端）
- modeler-web 开发端（插件配置端）
- dwf-app 应用端后台
- dwf-modeler 开发端后台
- dwf-common dwf-app和dwf-modeler共有部分
- dwf-part-all （设计中）插件开发的预定位置，暂无法使用
- scripts 用于打包、部署、运行的脚本
```

#### 系统要求

- 开发语言 node
- 包管理器 npm
- 代码管理 git

- 代码编辑器 vscode （或其他）
- 浏览器 chrome 80 / firefox 75
- _可能需要python3，用于运行打包脚本_

#### 搭建步骤

下面以modeler-web为例，展示搭建的步骤。app-web同理。

```bash
git clone <the-dwf-sdk-git-repo> dwf-sdk
cd dwf-sdk
# 子项目
cd modeler-web
# 安装子项目的依赖
npm install
```

待依赖安装完毕，去`src/views/global.vue`修改后台的地址

```diff
<script>
import global from "../../global";
var ip = location.host;
var idx = ip.indexOf(":");
ip = idx == -1 ? ip : ip.substring(0, idx);

let offsetHost = parseInt(location.port) - 8180;
let versionTime = '20200414-769864a83'
let developMode = global.developMode;

// offsetHost = 0;

// let baseUrl = global.baseUrl || `${location.protocol}//${ip}:${location.port}/modeler-api/dwf/v1`
// let baseUrlOther = global.baseUrlOther || `${location.protocol}//${ip}:${location.port}/monitor-api/dwf/v1`
// let baseObjOther = global.baseObjOther || `${location.protocol}//${ip}:${location.port}/app-api/dwf/v1`
// let tomcatUrl = global.tomcatUrl || `${location.protocol}//${ip}:${location.port}`
// let wsBaseUrl = global.wsBaseUrl || `ws://${ip}:${location.port}/app-api`

+ let baseUrl = `http://192.168.130.41:6060/dwf/v1`;
+ let baseUrlOther = `http://192.168.130.41:7070/dwf/v1`
+ let baseObjOther = `http://192.168.130.41:9090/dwf/v1`
+ let tomcatUrl = `http://192.168.130.41:8180`;
+ let wsBaseUrl = `ws://192.168.130.41:9090`;

console.log(baseUrl, baseObjOther, baseUrlOther, versionTime, tomcatUrl, wsBaseUrl, developMode)

- let baseUrl = `http://localhost:6060/dwf/v1`;
- let baseUrlOther = `http://127.0.0.1:7070/dwf/v1`
- let baseObjOther = `http://127.0.0.1:9090/dwf/v1`
- let tomcatUrl = `http://localhost:8180`;
- let wsBaseUrl = `ws://127.0.0.1:9090`;

export default {
  baseUrl, baseObjOther, baseUrlOther, versionTime, tomcatUrl, wsBaseUrl, developMode
};
</script>

```

然后即可在本地启动插件开发端

```bash
npm run dev
```

启动过程会需要一段时间。启动完成后，默认将打开http://localhost:8080/modeler-web/，输入用户名密码，登录到modeler-web

> 用户名：admin
>
> 密码：123456

依次点击左侧表单模型->实体类表单管理->展开某一个实体类，选择表单，编辑……
**如果没有实体类，那么就去数据模型->实体类管理，或数据模型->外部实体类下创建实体类，再重复以上操作**

至此，即进入插件开发的页面。

> todo: 插件开发页面功能介绍

## 插件开发

DWF的插件有两类，**表单插件**和**操作插件**。本文所指的插件，是表单插件。它在modeler端表现为一个可拖拽的按钮，拖放到编辑区之后，变成页面上的组件；在app端则不具有按钮的形态，只是页面上的组件。同名的插件，app端和modeler端各有一个，形似镜像又有所不同。下面将具体介绍插件开发的步骤。

### 步骤总览

1. 在modeler端创建空白的插件文件
2. 使插件在modeler端可见
3. 编写modeler端插件代码
4. 在app端创建镜像插件
5. 验证插件功能
6. 移动至特定目录，准备打包装配

### 例子

我们通过一个实例来看看插件是如何开发的。假设我们需要制作一个仪表盘插件

> todo: working example of dynamic gauge, with code and images

### 插件的生命周期

> todo: flow chart of addin life cycle

### 提供的支持

> todo: sdk support for addin

## 已知问题及解决方案

> todo: known issues and common pitfalls

## 未来的方向

由于DWF插件定制的功能仍在开发中，部分功能/调用还存在不确定性，所以了解未来的发展方向是有必要的。这将勾勒出DWF插件定制的关键部分，以便维护一个更稳定的最佳实践。

### 使用vue3.0配合composition API，对项目进行重构

> todo: vue composition api and code example

### 使用脚手架（addin_scaffold）辅助插件开发

> todo: project structure for addin scaffold

### 新的项目包结构，新的代码管理方式

> todo: monorepo with yarn2 and lerna




## 文件版本

- v0.1：（2020-05-06）初稿

## 维护者

zhangzhenbang@k2data.com.cn