论坛首页 → Web前端技术论坛 →

更新：show一下Jquery开发的工作流web定制器（支持多浏览器+源码）

浏览 58868 次
锁定老帖子 主题：更新：show一下Jquery开发的工作流web定制器（支持多浏览器+源码）
精华帖 (1) :: 良好帖 (2) :: 新手帖 (0) :: 隐藏帖 (4)
作者 正文
  • lisonghua2010
  • 等级: 一星会员
  • 性别:
  • 文章: 53
  • 积分: 100
  • 来自: 大连
   发表时间：2011-05-27  
jowood 写道
draw2D是不是要收费啊？？

现在最新版是要收费，但是我用的是以前老版本，不收费。
返回顶楼
          回帖地址
0 请登录后投票
  • lisonghua2010
  • 等级: 一星会员
  • 性别:
  • 文章: 53
  • 积分: 100
  • 来自: 大连
   发表时间：2011-05-27  
Rooock 写道
厉害. 我们也有一套流程设计器.
考虑到js要跨浏览器, 存在着巨大的挑战难度.
改用flex了.

本来也打算用flex，但是需要重头学，正好发现了这个绘图库，感觉很好用，毕竟js大家都会，比较好普及。
返回顶楼
          回帖地址
0 请登录后投票
  • edisonlv2010
  • 等级: 初级会员
  • 性别:
  • 文章: 17
  • 积分: 10
  • 来自: 成都
   发表时间：2011-05-27  
只能膜拜了，这个是原创吧，牛！
返回顶楼
          回帖地址
0 请登录后投票
  • zjhlht
  • 等级: 初级会员
  • 性别:
  • 文章: 103
  • 积分: 30
  • 来自: 郑州
   发表时间：2011-05-27  
不错，关注开源，一致找不到一个用JQUERY开发比较好的工作流绘制，原来只能用在IE里用VML来画，还写起来比较麻烦。
返回顶楼
          回帖地址
0 请登录后投票
  • lai555
  • 等级: 初级会员
  • 性别:
  • 文章: 59
  • 积分: 30
  • 来自: 广州
   发表时间：2011-05-27  
draw2D是不是要收费啊？？
返回顶楼
          回帖地址
0 请登录后投票
  • Brera
  • 等级: 初级会员
  • 性别:
  • 文章: 112
  • 积分: 30
  • 来自: 火星
   发表时间：2011-05-27  
不需要源码，LZ可否提供下大致的实现思路，文档啥的
返回顶楼
          回帖地址
0 请登录后投票
  • lisonghua2010
  • 等级: 一星会员
  • 性别:
  • 文章: 53
  • 积分: 100
  • 来自: 大连
   发表时间：2011-05-27  
edisonlv2010 写道
只能膜拜了，这个是原创吧，牛！

绝对原创如假包换，
返回顶楼
          回帖地址
0 请登录后投票
  • lisonghua2010
  • 等级: 一星会员
  • 性别:
  • 文章: 53
  • 积分: 100
  • 来自: 大连
   发表时间：2011-05-27  
Brera 写道
不需要源码，LZ可否提供下大致的实现思路，文档啥的


文档还没来得及写，不过可以先给你看看代码
这个代码是User Task类型的节点，是从Draw2D的例子中扩展来的

 

draw2d.UserTask=function(){
	draw2d.Task.call(this);
	this.setTitle("User Task");
	this.setIcon();
};
draw2d.UserTask.prototype=new draw2d.Task();
draw2d.UserTask.prototype.type="draw2d.UserTask";
draw2d.UserTask.newInstance=function(userTaskXMLNode){
	var task = new draw2d.UserTask;
	task.id=userTaskXMLNode.attr('id');
	task.taskId=userTaskXMLNode.attr('id');
	task.taskName=userTaskXMLNode.attr('name');
	task.setContent(userTaskXMLNode.attr('name'));
	return task;
};
draw2d.UserTask.prototype.setWorkflow=function(_5019){
	draw2d.Task.prototype.setWorkflow.call(this,_5019);
};
draw2d.UserTask.prototype.getContextMenu=function(){
	var menu = draw2d.Task.prototype.getContextMenu.call(this);
  return menu;
};
draw2d.UserTask.prototype.setIcon = function(){
	var icon=draw2d.Task.prototype.setIcon.call(this);
	icon.className="user-task-icon";
};
draw2d.UserTask.prototype.getStartElementXML=function(){
	var name = this.taskId;
	var taskName = trim(this.taskName);
	if(taskName != null && taskName != "")
		name = taskName;
	var xml='<userTask id="'+this.taskId+'" name="'+name+'" ';
	if(this.performerType=='assignee'){
		xml=xml+'activiti:assignee="'+this.expression+'" ';
	}else if(this.performerType=='candidateUsers'){
		xml=xml+'activiti:candidateUsers="'+this.expression+'" ';
	}else if(this.performerType=='candidateGroups'){
		xml=xml+'activiti:candidateGroups="'+this.expression+'" ';
	}
	if(this.formKey != null && this.formKey != ""){
		xml=xml+'activiti:formKey="'+this.formKey+'" ';
	}
	xml=xml+'>\n';
	return xml;
};
draw2d.UserTask.prototype.getEndElementXML=function(){
	var xml = '</userTask>\n';
	return xml;
};
draw2d.UserTask.prototype.getDocumentationXML=function(){
	if(this.documentation==null||this.documentation=='')return '';
	var xml='<documentation>';
	xml=xml+this.documentation;
	xml=xml+'</documentation>';
	return xml;
};
draw2d.UserTask.prototype.getExtensionElementsXML=function(){
	if(this.listeners.getSize()==0)return '';
	var xml = '<extensionElements>\n';
	xml=xml+this.getListenersXML();
	xml=xml+'</extensionElements>\n';
	return xml;
};
draw2d.UserTask.prototype.getListenersXML=function(){
	var xml = '';
	for(var i=0;i<this.listeners.getSize();i++){
		var listener = this.listeners.get(i);
		xml=xml+listener.toXML();
	}
	return xml;
};
draw2d.UserTask.prototype.toXML=function(){
	var xml=this.getStartElementXML();
	xml=xml+this.getDocumentationXML();
	xml=xml+this.getExtensionElementsXML();
	xml=xml+this.getEndElementXML();
	return xml;
};
draw2d.UserTask.prototype.toBpmnDI=function(){
	var w=this.getWidth();
	var h=this.getHeight();
	var x=this.getAbsoluteX();
	var y=this.getAbsoluteY();
	var xml='<bpmndi:BPMNShape bpmnElement="'+this.taskId+'" id="BPMNShape_'+this.taskId+'">\n';
	xml=xml+'<omgdc:Bounds height="'+h+'" width="'+w+'" x="'+x+'" y="'+y+'"/>\n';
	xml=xml+'</bpmndi:BPMNShape>\n';
	return xml;
};

 

Draw2D本身提供了对Workflow定制的支持，内置了一些图形，比如Line、Port、Node等等，需要特殊的直接继承扩展即可，在定制时可以使用easyUI的draggable和droppable实现绘制，只要将创建的形状add到Draw2D的canvas上就可以了，然后在每个形状上实现toXML方法，提交时将canvas中的图形遍历一下执行toXML就可以形成XML

 
返回顶楼
          回帖地址
0 请登录后投票
  • Brera
  • 等级: 初级会员
  • 性别:
  • 文章: 112
  • 积分: 30
  • 来自: 火星
   发表时间：2011-05-27  
lisonghua2010 写道
Brera 写道
不需要源码，LZ可否提供下大致的实现思路，文档啥的


文档还没来得及写，不过可以先给你看看代码
这个代码是User Task类型的节点，是从Draw2D的例子中扩展来的

 

draw2d.UserTask=function(){
	draw2d.Task.call(this);
	this.setTitle("User Task");
	this.setIcon();
};
draw2d.UserTask.prototype=new draw2d.Task();
draw2d.UserTask.prototype.type="draw2d.UserTask";
draw2d.UserTask.newInstance=function(userTaskXMLNode){
	var task = new draw2d.UserTask;
	task.id=userTaskXMLNode.attr('id');
	task.taskId=userTaskXMLNode.attr('id');
	task.taskName=userTaskXMLNode.attr('name');
	task.setContent(userTaskXMLNode.attr('name'));
	return task;
};
draw2d.UserTask.prototype.setWorkflow=function(_5019){
	draw2d.Task.prototype.setWorkflow.call(this,_5019);
};
draw2d.UserTask.prototype.getContextMenu=function(){
	var menu = draw2d.Task.prototype.getContextMenu.call(this);
  return menu;
};
draw2d.UserTask.prototype.setIcon = function(){
	var icon=draw2d.Task.prototype.setIcon.call(this);
	icon.className="user-task-icon";
};
draw2d.UserTask.prototype.getStartElementXML=function(){
	var name = this.taskId;
	var taskName = trim(this.taskName);
	if(taskName != null && taskName != "")
		name = taskName;
	var xml='<userTask id="'+this.taskId+'" name="'+name+'" ';
	if(this.performerType=='assignee'){
		xml=xml+'activiti:assignee="'+this.expression+'" ';
	}else if(this.performerType=='candidateUsers'){
		xml=xml+'activiti:candidateUsers="'+this.expression+'" ';
	}else if(this.performerType=='candidateGroups'){
		xml=xml+'activiti:candidateGroups="'+this.expression+'" ';
	}
	if(this.formKey != null && this.formKey != ""){
		xml=xml+'activiti:formKey="'+this.formKey+'" ';
	}
	xml=xml+'>\n';
	return xml;
};
draw2d.UserTask.prototype.getEndElementXML=function(){
	var xml = '</userTask>\n';
	return xml;
};
draw2d.UserTask.prototype.getDocumentationXML=function(){
	if(this.documentation==null||this.documentation=='')return '';
	var xml='<documentation>';
	xml=xml+this.documentation;
	xml=xml+'</documentation>';
	return xml;
};
draw2d.UserTask.prototype.getExtensionElementsXML=function(){
	if(this.listeners.getSize()==0)return '';
	var xml = '<extensionElements>\n';
	xml=xml+this.getListenersXML();
	xml=xml+'</extensionElements>\n';
	return xml;
};
draw2d.UserTask.prototype.getListenersXML=function(){
	var xml = '';
	for(var i=0;i<this.listeners.getSize();i++){
		var listener = this.listeners.get(i);
		xml=xml+listener.toXML();
	}
	return xml;
};
draw2d.UserTask.prototype.toXML=function(){
	var xml=this.getStartElementXML();
	xml=xml+this.getDocumentationXML();
	xml=xml+this.getExtensionElementsXML();
	xml=xml+this.getEndElementXML();
	return xml;
};
draw2d.UserTask.prototype.toBpmnDI=function(){
	var w=this.getWidth();
	var h=this.getHeight();
	var x=this.getAbsoluteX();
	var y=this.getAbsoluteY();
	var xml='<bpmndi:BPMNShape bpmnElement="'+this.taskId+'" id="BPMNShape_'+this.taskId+'">\n';
	xml=xml+'<omgdc:Bounds height="'+h+'" width="'+w+'" x="'+x+'" y="'+y+'"/>\n';
	xml=xml+'</bpmndi:BPMNShape>\n';
	return xml;
};

 

Draw2D本身提供了对Workflow定制的支持，内置了一些图形，比如Line、Port、Node等等，需要特殊的直接继承扩展即可，在定制时可以使用easyUI的draggable和droppable实现绘制，只要将创建的形状add到Draw2D的canvas上就可以了，然后在每个形状上实现toXML方法，提交时将canvas中的图形遍历一下执行toXML就可以形成XML

 

收藏了，端午节有空的话学习下，最近做的工作流没有做页面设计器，想自己做个试试
返回顶楼
          回帖地址
0 请登录后投票
  • 诗词吾爱
  • 等级: 初级会员
  • 性别:
  • 文章: 5
  • 积分: 30
  • 来自: 大连
   发表时间：2011-05-27  
不错，不错，最近我在修改XiorkFlow，我想问一下楼主，在设计器里面，那个直角的直线是如何实现的？关键是对这条直线信息的存储是如何实现的？PS:您的画图是利用VML的吗？
返回顶楼
          回帖地址
0 请登录后投票
论坛首页 → Web前端技术版

跳转论坛:
Global site tag (gtag.js) - Google Analytics