Web版可视化工作流设计器的设计与实现 跨平台跨手机跨PC

工作流通常会使用xml进行管理与配置,之间流转关系使用不同的xml节点进行配置,看着xml文件,很难直接Get到流程之间的流转关系。如果使用可视化的呈现来展现工作流,则很好的解决这个问题。更好的管理与维护。

可视化呈现,自然离不开图形的操作。Github上找以2个非常有价值的工程 ,分别是:

https://github.com/jifuwei/workflow-designer-web

https://github.com/freegroup/draw2d

都fork到仓库里了,不用担心找不到主

https://github.com/Lancker/draw2d

https://github.com/Lancker/workflow-designer-web

实现的思路:

首先,查看workflow-designer-web,这个工具有一个简单的工作流设计器,可以体验,能画节点,并用线条连接上。存在的问题是:节点类型不足以覆盖我所想要达到的效果。如果拿visio来比的话,操作流程度也是一个问题。阅读workflow-designer-web,图形操作相关的组件主要是draw2d。

紧接着,转战draw2d,这个是开源的,能做什么不能做什么可以通过官网及demo查看,主要是以下2个网址:

官网 http://www.draw2d.org/

Demo示例:https://freegroup.github.io/draw2d/index.html

非常开心的可以看到,draw2d采用MIT协议,官方网站上提到了Draw2D的用途之一就是workflow设计器的开发,有图有真像,来看看官网是怎么说的:

宜信星火理财红包

宜信星火理财红包

Draw2D touch is a modern HTML 5 JavaScript library for visualization and interaction with diagrams and graphs. Draw2D touch makes it easy to create visual languages & tools of various kinds.

在示例代码中可以看到不少workflow的影子,github仓库的介绍里也有一个BrainBox的实际应用,开发者使用Draw2D做的电路可视化工具箱。

有了Draw2D,如何开发一个工作流可视化编辑器呢?开源大神还是很贴心的给了一个Shape Designer。如果没有这个东东,做可视化设计器会有些让人“恶心”,因为画一个图,可是一堆线条组成的啊~想想都够,还好,有这个Shape Designer!

如何享受宜信星火金服宜心理财实现财富增值。:
扫码二维码
通过宜信星火金服活动链接 http://www.ixinghuo.com/qcode.php?yixinqcode
通过宜信星火金服理财师店铺链接:https://xinghuo.yixin.com/yiidea
通过宜信星火金服理财师移动端邀请页面https://xinghuo.yixin.com/mobile/activityPage/shareShop/yiidea
5.通过宜信星火金服理财师店铺宜心理财团队短链接:
http://yixin.hk
http://yixin.ceo
http://yue.ma
通过宜信星火金服宜心理财团队网站页面
http://www.yixinlicai.com.cn
通过 宜信.公司 | 宜信.网络 | 宜信.net

Shape Designer能帮我们设计好各种基础的Workflow组件,用来设计不同的任务节点!再回到https://github.com/Lancker/workflow-designer-web,这个是工作流半成品,少了组件,正好使用Shape Designer设计满足自身需求的组件!

简单小结一下设计器开发流程:

  1. 使用Shape Designer设计工作流节点
  2. 参考workflow-designer-web,更换节点组件

就这么结束了?没有没有。流程文件的导出与加载还是空白,给大家留一个悬念,下次再分解!

游戏主线副本故事引擎长研发设想?工作流&游戏主线副本故事&Storm Topology相互推导,看游戏圈与传统企业的千丝万缕情怀

技术岛公众号
技术岛公众号

进入到经典大型互联网免费回制游戏《问道》,会看到很多游戏的主线故事,副本故事,故事大概是这样子:先去干什么,再去干什么,再去干什么。主线玩着玩着,还可以做副本故事。结合工作流、Storm Topology的经典,发起这些长得非常像,之间可以相互推导出来。

简化出来,游戏的故事情节可以这么表示:

storm与财富增值
storm与财富增值

​今天的工作流&游戏主线副本故事&Storm Topology相互推导,看游戏圈与传统企业的千丝万缕情怀,先来看看工作流简化表示吧。

一个工作流的表示,就是今天的封面啦。从开始结节出发,经过一些节点处理,到达结束。

有没有感觉非常像游戏里面的故事主线,先干什么,再干什么?是的,至少我觉得是很像了。不现的主线,可以当成是不同的工作流,玩家进入不同的故事,相当于进入不同的工作流。相比之下,游戏的故事节点会比较长,节点处理更加单一,基本上是下一个节点,下一个节点,工作流中的节点处理则更加丰富。如果比较节点处理的可视化呈现,那自然是游戏更加直观了。

Storm Topolgy的处理,我经常喜欢画成横向的,基本上是长成这样子:

为了把三者归到一个体系中来,我画了一个竖版的,长得是这样子的:

再比较工作流、游戏主线副本故事、Storm Topology,三者确实有着异曲同工的像。Storm Topology目前看到的实现形式是通过代码设置,如果做成配置模板,那这三者就统一成一类流程引擎中来了。

在传统企业中玩工作流,在大数据领域玩Storm Topology,都可以尝试实现一个游戏故事引擎。没有坐过飞机,还没有见过飞机飞。对于回合制游戏,有了故事引擎,感觉就有了一个核心啦!感觉兴趣的小伙伴,赶紧行动起来吧!

巧妙拆分bolt提升Storm集群吞吐量

技术岛公众号
技术岛公众号

签名这么整,别人想踩坑都踩不到!SortedMap、LinkedHashMap、HashMap小实验大发现

最近同事发现有接口签名验证通不过,查了许久,发现,两边的验签规则不一样。最大的差异在于时间戳是否参与参数的排序。使用较多的版本是时间戳参与参数排序,而突然出一个接口中的时间戳不参与排序,导致算出来的签名值不一样。让我们使用一段main方法来感受一下其中的差异。

宜信星火理财红包

宜信星火理财红包

public static void main(String[] args) {

System.out.println(“SortedMap”);

SortedMap<String, String> sortedDict = new TreeMap<>(Collator.getInstance());

sortedDict.put(“B”, “B”);

sortedDict.put(“A”, “A”);

sortedDict.put(“C”, “C”);

System.out.println(sortedDict);

 

System.out.println(“LinkedHashMap”);

Map<String, String> dic = new LinkedHashMap<>();

dic.put(“B”, “B”);

dic.put(“A”, “A”);

dic.put(“C”, “C”);

System.out.println(dic);

 

System.out.println(“HashMap”);

Map<String, String> hashMapDic = new HashMap<>();

hashMapDic.put(“B”, “B”);

hashMapDic.put(“A”, “A”);

hashMapDic.put(“C”, “C”);

System.out.println(hashMapDic);

}

输出的结果:

SortedMap

{A=A, B=B, C=C}

LinkedHashMap

{B=B, A=A, C=C}

HashMap

{A=A, B=B, C=C}

很显然,当我们使用SortedMap、HashMap来处理签名参数的时候,参数自动排序了,而当我们使用LinkedHashMap处理的时候参数则不会排序。

造成问题产生的原因,看起来是使用了LinkedHashMap导致的,仔细分析,完全是两种签名处理思路导致的。

推荐思路一:使用SortedMap、HashMap做预处理,与顺序无关

不推荐思路二,没有对url中的query参数做任何预处理,直接在尾部附加上了时间戳,省了一步参数预处理。

思路二的问题在于,参数的顺序会影响最终签名,调用方需要知晓参数顺序。如果大家都知道并严格执行签名顺序,思路二其实也是正常的可行的。但是一般来讲,团队成员可能不断变化,一不留神就掉进这个洞里了。推荐使用思路一进行签名验证。

思路一与思路二的验证方式如何对接上呢?

在思路一追加时间戳之前,需要创建一个LinkedHashMap,将处理过的参数put进去,再将时间戳put进去,之后生成的签名URL就与思路二是一致的。

小结:当我们设计接口签名规则时,可以遵循一下一个重要的规则,参数顺序无关。

签名参考流程:

1.参数提取,记得使用SortedMap或HashMap

2.过滤处理

3.生成待签名URL

4.签名

5.生成签名后的URL