题外话：

       最近在忙公司的云项目空闲时间不是很多，所以很久没来更新，今天补上一篇！

回顾：

       前几篇介绍了一下设计器的界面和Draw2d基础知识，这篇讲解一下本设计器如何扩展Draw2d。

 

进入主题：

       先看一下扩展的类图：

 其中有颜色标注的类即是扩展类，其中Node、Port、InputPort、OutputPort是Draw2d提供的类，其余都是扩展类。

 这里重点介绍几个核心类以及相关重要的方法，如下：

上图中黄色部分负责生成Activiti流程文件中Task对应的XML片段，所以对于不同类型Task需要实现的方法，例如UserTask，代码如下：

 

draw2d.UserTask=function(configPropCallback){draw2d.Task.call(this,configPropCallback);this.performerType=null;this.dueDate=null;this.priority=null;this.formKey = null;this.expression=null;this.isUseExpression=null;this.assignee=null;this.candidateUsers=new draw2d.ArrayList();this.candidateGroups=new draw2d.ArrayList();this.formProperties=new draw2d.ArrayList();this.taskListeners=new draw2d.ArrayList();this.setTitle("User Task");
};
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.getIconClassName = function(){return "user-task-icon";
};
draw2d.UserTask.prototype.getStartElementXML=function(){var xml='<userTask ';xml=xml+this.getGeneralXML();xml=xml+this.getPerformersXML();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.getPerformersXML=function(){var xml='';if(this.isUseExpression){if(this.expression!=null&&this.expression!=''){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+'" ';}}}else{if(this.performerType=='assignee'){if(this.assignee!=null&&this.assignee!='')xml=xml+this.assignee;}else if(this.performerType=='candidateUsers'){for(var i=0;i<this.candidateUsers.getSize();i++){var user = this.candidateUsers.get(i);xml=xml+user.sso+',';}}else if(this.performerType=='candidateGroups'){for(var i=0;i<this.candidateGroups.getSize();i++){var group = this.candidateGroups.get(i);xml=xml+group+',';}}}if(this.dueDate!=null&&this.dueDate!=''){xml=xml+'activiti:dueDate="'+this.dueDate+'" '}if(this.formKey != null && this.formKey != ""){xml=xml+'activiti:formKey="'+this.formKey+'" ';}if(this.priority!=null&&this.priority!=''){xml=xml+'activiti:priority="'+this.priority+'" '}return xml;
};
draw2d.UserTask.prototype.getExtensionElementsXML=function(){if(this.listeners.getSize()==0&&this.formProperties.getSize()==0)return '';var xml = '<extensionElements>\n';xml=xml+this.getFormPropertiesXML();xml=xml+this.getListenersXML();xml=xml+'</extensionElements>\n';return xml;
};
draw2d.UserTask.prototype.getListenersXML=function(){var xml = draw2d.Task.prototype.getListenersXML.call(this);for(var i=0;i<this.taskListeners.getSize();i++){var listener = this.taskListeners.get(i);xml=xml+listener.toXML();}return xml;
};
draw2d.UserTask.prototype.getFormPropertiesXML=function(){var xml = '';for(var i=0;i<this.formProperties.getSize();i++){var formProperty = this.formProperties.get(i);xml=xml+formProperty.toXML();}return xml;
};
draw2d.UserTask.prototype.toXML=function(){var xml=this.getStartElementXML();xml=xml+this.getDocumentationXML();xml=xml+this.getExtensionElementsXML();xml=xml+this.getMultiInstanceXML();xml=xml+this.getEndElementXML();return xml;
}
draw2d.UserTask.prototype.getCandidateUser=function(sso){for(var i=0;i<this.candidateUsers.getSize();i++){var candidate = this.candidateUsers.get(i);if(candidate.sso===sso){return candidate;}}return null;
};
draw2d.UserTask.prototype.deleteCandidateUser=function(sso){var candidate = this.getCandidateUser(sso);this.candidateUsers.remove(candidate);
};
draw2d.UserTask.prototype.addCandidateUser=function(user){if(this.getCandidateUser(user.sso)==null)this.candidateUsers.add(user);
};
draw2d.UserTask.prototype.getCandidateGroup=function(name){for(var i=0;i<this.candidateGroups.getSize();i++){var candidate = this.candidateGroups.get(i);if(candidate===name){return candidate;}}return null;
};
draw2d.UserTask.prototype.deleteCandidateGroup=function(name){var candidate = this.getCandidateGroup(name);this.candidateGroups.remove(candidate);
};
draw2d.UserTask.prototype.addCandidateGroup=function(name){if(!this.candidateGroups.contains(name))this.candidateGroups.add(name);
};
draw2d.UserTask.prototype.getTaskListener=function(id){for(var i=0;i<this.taskListeners.getSize();i++){var listener = this.taskListeners.get(i);if(listener.getId()=== id){return listener;}}
};
draw2d.UserTask.prototype.deleteTaskListener=function(id){var listener = this.getTaskListener(id);this.taskListeners.remove(listener);
};
draw2d.UserTask.prototype.addTaskListener=function(listener){this.taskListeners.add(listener);
};
draw2d.UserTask.prototype.setTaskListeners=function(listeners){this.taskListeners = listeners;
};
draw2d.UserTask.prototype.getFormProperties=function(id){for(var i=0;i<this.formProperties.getSize();i++){var prop = this.formProperties.get(i);if(prop.id== id){return prop;}}
};
draw2d.UserTask.prototype.deleteFormProperties=function(id){var prop = this.getFormProperties(id);this.formProperties.remove(prop);
};
draw2d.UserTask.prototype.addFormProperties=function(prop){this.formProperties.add(prop);
};
draw2d.UserTask.prototype.setFormProperties=function(props){this.formProperties = props;
};

 
 请注意代码中toXML方法，这个方法负责产生UserTask节点的XML代码片段，它调用了其他几个方法：getStartElementXML、getDocumentationXML、getExtensionElementsXML、getMultiInstanceXML、getEndElementXML,不同类型的Task可能不需要调用所以这些方法，可以根据需要选择性调用（当然这取决于Activiti流程文件的规范），当然对于不同类型的Task你也可以添加一些自定义的方法，如：生成操作人的方法（代码中getPerformersXML方法）等等。

由于Activiti设计的Task类型比较多，这里就不一一介绍了有兴趣可以去查看一下源代码还是很好理解的，有问题可以给我留言！

时间有限就先写到这吧！下一篇介绍一下其他扩展类，敬请关注。。。。。。