基于easyui开发Web版Activiti流程定制器详解（六）——Draw2d的扩展（三）

题外话：

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

回顾：

       前几篇介绍了一下设计器的界面和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+'>
';
    return xml;
};
draw2d.UserTask.prototype.getEndElementXML=function(){
    var xml = '</userTask>
';
    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>
';
    xml=xml+this.getFormPropertiesXML();
    xml=xml+this.getListenersXML();
    xml=xml+'</extensionElements>
';
    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类型比较多，这里就不一一介绍了有兴趣可以去查看一下源代码还是很好理解的，有问题可以给我留言！

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

 定制器下载地址

http://lisonghua2010.iteye.com/admin/blogs/1490165

为了大家下载方便，最近开通的Github下载地址：

https://github.com/lisonghua/activiti-designer

Activit官方文档地址

http://activiti.org/userguide/index.html

-------------------------------------------------华丽分割线---------------------------------------------------------------------

温馨提示，下面是广告时间（不喜请绕行）

推广一下本人的小店：

http://tianya-zahuopu.taobao.com/