js 流程设计器

２０１３年第２２卷第ｌ０期　ｈｔｔｐ：／／ｗｗｗ．ｃ—Ｓ—ａ．ｏｒｇ．ｃｎ　计算机系统应用　

基于ＪＢＰＭ流程设计器①　

董崇杰　

（东莞职业技术学院计算机工程系，东莞５２３８０８）　

摘要：针对目前开发工作中需要把业务办理流程设计成一个个配置页面，配置的页面不直观也很繁琐等问题．　本文在开源工作流ＪＢＰＭ的基础上进行二次开发，采用ｅｃｌｉｐｓｅ　ＳＷＴ＋ＧＥＦ（［￣编辑框架）技术开发流程设计器，　

它提供了流程图的可视化设计功能，通过拖放及对各相关属性的编辑完成流程图的设计．并且采用ＪＷＳ（Ｊａｖａ　ｗｅｂ　ｓｔａｒｔ）技术将该ｅｃｌｉｐｓｅ　ｐｌｕｇｉｎｓ改造成ＲＣＰ应用以脱离ｅｃｌｉｐｓｅ环境运行．　关键词：ＪＢＰＭ；流程设计器：ＧＥＦ；ＲＣＰ　

Ｐｒｏｃｅｓｓ　Ｄｅｓｉｇｎｅｒ　Ｂａｓｅｄ　ｏｎ　ＪＢＰＭ　

ＤＯＮＧ　Ｃｈｏｎｇ—Ｊｉｅ　

（Ｄｅｐａｒｔｍｅｎｔ　ｏｆＣｏｍｐｕｔｅｒ　Ｅｎｇｉｎｅｅｒｉｎｇ，Ｄｏｎｇｇｕａｎ　Ｐｏｌｙｔｅｃｈｎｉｃ，Ｄｏｎｇｇｕａｎ　５２３８０８，Ｃｈｉｎａ）　

Ａｂｓｔｒａｃｔ：Ｉｎ　ｖｉｅｗ　ｏｆ　ｔｈｅ　ｎｅｅｄ　ｆｏｒ　ｔｈｅ　ｄｅｖｅｌｏｐｍｅｎｔ　ｏｆ　ｂｕｓｉｎｅｓｓ　ｐｒｏｃｅｓｓｅｓ　ｄｅｓｉｇｎｅｄ　ｔｏ　ｈａｎｄｌｅ　ｅａｃｈ　ｃｏｎｆｉｇｕｒａｔｉｏｎ　ｐａｇｅ，　ｃｏｎｆｉｇｕｒａｔｉｏｎ　ｐａｇｅ　ｉｓ　ｎｏｔ　ｉｎｔｕｉｔｉｖｅ　ａｎｄ　ｖｅｒｙ　ｃｕｍｂｅｒｓｏｍｅ　ａｎｄ　ＳＯ　ｏｎ．Ｉｎ　ｔｈｉｓ　ｐａｐｅｒ，ｔｈｅ　ｏｐｅｎ　ｓｏｕｒｃｅ　ＪＢＰＭ　ｗｏｒｋｆｌｏｗ　ｂａｓｅｄ　ｏｎ　ｔｈｅ　ｓｅｃｏｎｄａｒｙ　ｄｅｖｅｌｏｐｍｅｎｔ，ｕｓｉｎｇ　ｅｃｌｉｐｓｅ　ＳＷＴ　ａｎｄ　ＧＥＦ（Ｇｒａｐｈｉｃａｌ　Ｅｄｉｔｉｎｇ　Ｆｒａｍｅｗｏｒｋ）ｔｅｃｈｎｏｌｏｇｙ　ｔｏ　ｄｅｖｅｌｏｐ　ｐｒｏｃｅｓｓ　ｄｅｓｉｇｎｅｒ，ｉｔ　ｐｒｏｖｉｄｅｓ　ａ　ｆｌｏｗ　ｃｈａｒｔ　ｏｆ　ｔｈｅ　ｖｉｓｕａｌ　ｄｅｓｉｇｎ　ｆｅａｔｕｒｅｓ，ｔｈｒｏｕｇｈ　ｄｒａｇ—ａｎｄ－ｄｒｏｐ　ａｎｄ　ｅｄｉｔ　ｔｈｅ　ｒｅｌｅｖａｎｔ　

FLEX WEB流程设计器线条、箭头的绘制

流程设计器里面，最复杂的其实不是拖来拖去的图片，而是线条的绘制包括锚点、箭头，如果把线条绘制好了，那设计器就没什么难度了。

绘制线条会涉及到一些数学知识，主要是三角函数、极坐标等，如果不记得了，赶紧恶补一下吧，这个是必须的。

线条绘制又分多种场景：

1 在一个节点和鼠标所在坐标之间绘制（寻找目标节点过程），这个线条要跟随鼠标的移动而不断重绘。线条的起点为节点中心点坐标与鼠标位置的连线再与节点边缘的交点（有点抽象，等会看图就明白）

可能很多人都以为是在拖动线条，其实这是一个假象，当鼠标移动时，会先擦除线条，然后重新绘制一条节点和鼠标当前位置的连线，当鼠标移动一段距离后，实际上重绘了无数次，这样线条的“拖动”就有连贯性，如果只在鼠标移动结束之后再绘制一条也可以，这样只需要重绘一次，但视觉上的效果要查很多。

2 在两个节点之间绘制，起点和终点坐标分别为两个节点中心点坐标之间的连线分别与节点边缘的交点。

3 拖动锚点（一条线条被分成几段时，子线条之间的交点）绘制，和第1点有些类似，稍微复杂点。

下面举第1种场景中节点在鼠标左上方的例子进行说明：

上图中x的坐标即为线条的起点

X坐标的计算过程：

X横坐标X.x3=O.x+len

根据相似三角形，存在关系 (x2-x1)/(len/2)=(y2-y1)/H

H=(len/2)(y2-y1)/(x2-x1)

X点的纵坐标X.y3=O.y+len/2+H

计算X坐标的代码如下（考虑了各种场景）：

Actionscript代码

1. /**

2. * 获取起始点与图片边框的交点坐标

3. * 需按矩形对角线划分四个区域(此处为正方形,每90度为一个边界)

4. * acrossNode 参照节点对象(为上图中的节点对象)

5. */

6. public static function

getLinkPoint(fromPoint:Point,targetPoint:Point,acrossNode:BaseNode):Point

好程序员web前端培训分享Node Js流程

1，项目前期准备：

以express 框架为例

npm i express-generator -g //全局安装express框架

express -e //生成express应用骨架

npm i //安装依赖

npm start //在3000端口监听

拓展：目前最市面上最流行的node框架有：

--Sail.js

Sails.js 就像是 Node.js 平台上的 Rails 框架。这是一个可靠可伸缩的开发框架，面向服务的架构，提供数据驱动的 API 集合。用来开发多玩家游戏、聊天应用和实时面板引用非常方便，也可用于开发企业级 Node.js 应用。

Sails.js 基于 Node.js, Connect, Express 和 Socket.io 构建。

--Koa.js

koa.js是下一代的 Node.js 的 Web 框架。由 Express 团队设计。旨在提供一个更小型、更富有表现力、更可靠的 Web 应用和 API 的开发基础。

Koa可以通过生成器摆脱回调，极大地改进错误处理。Koa核心不绑定任何中间件，但提供了优雅的一组可以快速和愉悦地编写服务器应用的方法。 2,项目开始

--利用bootstrap完成布局(或者使用bulma前端css框架也很方便)

--把需要复用的小组件放在一个文件夹在,这里我新建了一个commjs目录

--构造函数中加载DOM结构(面向对象思想)

--把一切需要重复使用的组件模块化，哪里需要哪里引入，代码复用

3，理解mvc

--控制器Controller：

是应用程序中处理用户交互的部分。

通常控制器负责从视图读取数据，控制用户输入，并向模型发送数据。

作用：根据路由中设置的路径不同，调用控制器中对应的方法(函数)，

企业微信开发-⽹页授权及JS-SDK计⼊流程

企业微信开发之授权登录注意事项：

1.⽹页授权及JS-SDK需要在企业微信上配置可信域名

2.企业微信授权登录⾥⾯填写你的可信域名

调⽤流程为：A) ⽤户访问第三⽅服务，第三⽅服务通过构造OAuth2链接（参数包括当前第三⽅服务的⾝份ID，以及重定向URI），将⽤户引导到认证服

务器的授权页B) ⽤户选择是否同意授权

C) 若⽤户同意授权，则认证服务器将⽤户重向到第⼀步指定的重定向URI，同时附上⼀个授权码。

D) 第三⽅服务收到授权码，带上授权码来源的重定向URI，向认证服务器申请凭证。

E) 认证服务器检查授权码和重定向URI的有效性，通过后颁发AccessToken（调⽤凭证）

OAuth2接⼊流程

使⽤OAuth2前须知

关于⽹页授权的可信域名REDIRECT_URL中的域名，需要先配置⾄应⽤的“可信域名”，否则跳转时会提⽰“redirect_uri参数错误”。

要求配置的可信域名，必须与访问链接的域名完全⼀致。举个例⼦：

假定重定向访问的链接是：:8080/cgi-bin/helloworld：

配置域名 是否正确 原因:8080 配置域名与访问域名完全⼀致

配置域名必须与访问域名完全⼀致

配置域名必须与访问域名完全⼀致

* 不⽀持泛域名设置

配置域名必须与访问域名完全⼀致，包括端⼝号

假定配置的可信域名是 ：

访问链接 是否正确 原因https:///cgi-bin/helloworld 配置域名与访问域名完全⼀致

/cgi-bin/redirect 配置域名与访问域名完全⼀致，与协议头/链接路径⽆关

https:///cgi-bin/helloworld 配置域名必须与访问域名完全⼀致