1. 最后在首页 index.html中加载js文件

添加自定义属性转换器

到目前为止，静态页面上的工作处理完毕，接下来就是后端java代码处理，

指导思想：

• 页面上的属性 ——-导出————》 bpmn2 XML 文件
• bpmn2 XML 文件 ———导入———-》 页面上的属性
• 页面上的属性 ——-保存————》 Flowable java 对象 ——-持久化—》 数据库表
• 数据库表 ——-查询————》 Flowable java 对象 ——-转换—》 页面上的属性

对于flowable 这种流程引擎架构，上面所列出的一系列数据格式的转换必定会有一个转换器角色的功能类来实现 ！

而且 转换器角色的功能类 肯定不止一个， 必定都实现或者由哪一个控制类统一管控， flowable用的最多的应该是 用户任务，UserTask，转换器的名称一般编程中都喜欢用 Converter 来表示， 因此：

使用IDEA 强大的搜索功能来找一找： UserTaskConverter ， 还真有！

org.flowable.editor.language.json.converter.UserTaskJsonConverter

当然一般 你可能是 根据前端 F12 查看，到底调用哪一个接口，然在顺藤摸瓜进行一番debug查找，最后一定能找到 UserTaskJsonConverter。

创建自定义属性转换器：
这里省略了一系列 debug的痛苦过程，直接说结果：

继承 UserTaskJsonConverter 创建名称为 CustomizeUserTaskJsonConverter 的转换器类。

package com.xxx.bbb.aaa.convert;
import com.fasterxml.jackson.databind.JsonNode;
import com.fasterxml.jackson.databind.node.ArrayNode;
import com.fasterxml.jackson.databind.node.BooleanNode;
import com.fasterxml.jackson.databind.node.ObjectNode;
import com.fasterxml.jackson.databind.node.TextNode;
import com.middol.flowable.modeler.utils.ExtensionAttributeUtils;
import org.flowable.bpmn.model.*;
import org.flowable.editor.language.json.converter.ActivityProcessor;
import org.flowable.editor.language.json.converter.BaseBpmnJsonConverter;
import org.flowable.editor.language.json.converter.UserTaskJsonConverter;
import org.slf4j.Logger;
import org.slf4j.LoggerFactory;
import org.springframework.util.StringUtils;
import java.util.Collections;
import java.util.List;
import java.util.Map;
/** * 新建自定义userTaskjson解析器CustomizeUserTaskJsonConverter * * @author guzt */
public class CustomizeUserTaskJsonConverter extends UserTaskJsonConverter { 
    private static final Logger LOGGER = LoggerFactory.getLogger(CustomizeUserTaskJsonConverter.class);
    private static final String NODE_TYPE_KEY = "nodetype";
    private static final String REVOKE_FLAG_KEY = "revokeflag";
    private static final String END_FLAG_KEY = "endflag";
    /** * 覆盖原 UserTaskJsonConverter 中的 fillTypes 方法 * * @param convertersToBpmnMap map * @param convertersToJsonMap map * @see org.flowable.editor.language.json.converter.BpmnJsonConverter 中的静态代码块 */
    public static void fillTypes(Map<String, Class<? extends BaseBpmnJsonConverter>> convertersToBpmnMap,
                                 Map<Class<? extends BaseElement>, Class<? extends BaseBpmnJsonConverter>> convertersToJsonMap) { 
        fillJsonTypes(convertersToBpmnMap);
        fillBpmnTypes(convertersToJsonMap);
    }
    /** * 覆盖原 UserTaskJsonConverter 中的 fillBpmnTypes 方法 * * @param convertersToJsonMap map * @see org.flowable.editor.language.json.converter.BpmnJsonConverter 中的静态代码块 */
    public static void fillBpmnTypes(
            Map<Class<? extends BaseElement>, Class<? extends BaseBpmnJsonConverter>> convertersToJsonMap) { 
        convertersToJsonMap.put(UserTask.class, CustomizeUserTaskJsonConverter.class);
    }
    /** * 覆盖原 UserTaskJsonConverter 中的 fillJsonTypes 方法 * * @param convertersToBpmnMap map * @see org.flowable.editor.language.json.converter.BpmnJsonConverter 中的静态代码块 */
    public static void fillJsonTypes(Map<String, Class<? extends BaseBpmnJsonConverter>> convertersToBpmnMap) { 
        convertersToBpmnMap.put(STENCIL_TASK_USER, CustomizeUserTaskJsonConverter.class);
    }
    // 主要用于 外部 xml 导入到 flowable画图页面中
    @Override
    public void convertToJson(BaseElement baseElement, ActivityProcessor processor, BpmnModel model, FlowElementsContainer container, ArrayNode shapesArrayNode, double subProcessX, double subProcessY) { 
        super.convertToJson(baseElement, processor, model, container, shapesArrayNode, subProcessX, subProcessY);
        if (baseElement instanceof UserTask) { 
            LOGGER.debug("userTaskId = {} 扩展属性 = {}", baseElement.getId(), baseElement.getAttributes());
            Map<String, List<ExtensionAttribute>> stringListMap = baseElement.getAttributes();
            String nodetype = stringListMap.get(NODE_TYPE_KEY).get(0).getValue();
            String revokeflag = stringListMap.get(REVOKE_FLAG_KEY).get(0).getValue();
            String endflag = stringListMap.get(END_FLAG_KEY).get(0).getValue();
            shapesArrayNode.forEach(node -> { 
                if (baseElement.getId().equals(node.get("resourceId").textValue())) { 
                    ObjectNode properties = (ObjectNode) node.get("properties");
                    properties.set(NODE_TYPE_KEY, new TextNode(nodetype));
                    properties.set(REVOKE_FLAG_KEY, BooleanNode.valueOf(Boolean.parseBoolean(revokeflag)));
                    properties.set(END_FLAG_KEY, BooleanNode.valueOf(Boolean.parseBoolean(endflag)));
                }
            });
        }
    }
    // 主要用于 页面属性加载和导出 xml使用
    @Override
    protected FlowElement convertJsonToElement(JsonNode elementNode, JsonNode modelNode,
                                               Map<String, JsonNode> shapeMap) { 
        FlowElement flowElement = super.convertJsonToElement(elementNode, modelNode, shapeMap);
        if (flowElement instanceof UserTask) { 
            LOGGER.debug("进入自定义属性解析CustomizeUserTaskJsonConverter...");
            Map<String, List<ExtensionAttribute>> attributes = flowElement.getAttributes();
            String nodetype = getPropertyValueAsString(NODE_TYPE_KEY, elementNode);
            if (StringUtils.isEmpty(nodetype)) { 
                LOGGER.debug("nodetype 属性为空，设置为默认值");
                nodetype = "commit";
            }
            attributes.put(NODE_TYPE_KEY, Collections.singletonList(
                    ExtensionAttributeUtils.generate(NODE_TYPE_KEY, nodetype)));
            String revokeflag = getPropertyValueAsString(REVOKE_FLAG_KEY, elementNode);
            if (StringUtils.isEmpty(revokeflag)) { 
                LOGGER.debug("revokeflag 属性为空，设置为默认值");
                revokeflag = "false";
            }
            attributes.put(REVOKE_FLAG_KEY, Collections.singletonList(
                    ExtensionAttributeUtils.generate(REVOKE_FLAG_KEY, revokeflag)));
            String endflag = getPropertyValueAsString(END_FLAG_KEY, elementNode);
            if (StringUtils.isEmpty(endflag)) { 
                LOGGER.debug("endflag 属性为空，设置为默认值");
                endflag = "false";
            }
            attributes.put(END_FLAG_KEY, Collections.singletonList(
                    ExtensionAttributeUtils.generate(END_FLAG_KEY, endflag)));
            LOGGER.debug("自定义属性解析CustomizeUserTaskJsonConverter 完成");
            LOGGER.debug("当前 attributes 为 {}", attributes);
        }
        return flowElement;
    }
}

看到里面的 三个属性了吗，就是一开始我们在js文件中添加的3个自定义属性的 id值

private static final String NODE_TYPE_KEY = "nodetype";
    private static final String REVOKE_FLAG_KEY = "revokeflag";
    private static final String END_FLAG_KEY = "endflag";

生效自定义属性转换器：
让 CustomizeUserTaskJsonConverter 在运行期间替换 UserTaskJsonConverter 还需要做如下事情：

创建一个 spring Bean 名称叫什么无所谓，暂且为 CustomBpmnJsonConverter ，必须 继承 BpmnJsonConverter，
为什么要继承 BpmnJsonConverter ？ 因为没办法，convertersToBpmnMap convertersToJsonMap 是 protected 类型，而正是这两个Map 来存储当解析用户任务节点时用哪一个转换器。

package com.xxx.bbb.aaa.convert;
import org.flowable.editor.language.json.converter.BpmnJsonConverter;
import org.springframework.stereotype.Component;
/** * 目的是将BpmnJsonConverter中的 UserTaskJsonConverter 设置替换成 CustomizeUserTaskJsonConverter。 * 为什么要继承 BpmnJsonConverter ？ 因为没办法，convertersToBpmnMap convertersToJsonMap 是 protected 类型 * * @author guzt * @see org.flowable.editor.language.json.converter.BpmnJsonConverter 中的静态代码块 */
@Component
public class CustomBpmnJsonConverter extends BpmnJsonConverter { 
  static { 
      CustomizeUserTaskJsonConverter.fillTypes(convertersToBpmnMap, convertersToJsonMap);
  }
}

上面用到的工具类 ExtensionAttributeUtils 代码如下：

package com.xxx.bbb.aaa.convert;
import org.flowable.bpmn.model.ExtensionAttribute;
import org.flowable.editor.language.json.converter.BpmnJsonConverter;
/** * @author guzt */
public class ExtensionAttributeUtils { 
    public static ExtensionAttribute generate(String key, String val) { 
        ExtensionAttribute ea = new ExtensionAttribute();
        ea.setNamespace(BpmnJsonConverter.MODELER_NAMESPACE);
        ea.setName(key);
        ea.setNamespacePrefix("custom");
        ea.setValue(val);
        return ea;
    }
}

自此，准备工作全部结束，然后编译项目，重新启动看看，是否有3个自定义属性，而且可以导入，而且可以将外部的xml 文件导入进去也能解析出自定义属性值。

获取自定义属性值

我们调用 flowable 中查询 userTask 接口获得 用户任务列表时 或者 查询流程定义的属性信息时，总之是 org.flowable.bpmn.model.UserTask 类或其子类。

UserTask 可以 通过调用 getAttributes(); 方法获得自定义属性值。

protected static final String NODE_TYPE_KEY = "nodetype";
    protected static final String REVOKE_FLAG_KEY = "revokeflag";
    protected static final String END_FLAG_KEY = "endflag";
  Map<String, List<ExtensionAttribute>> attributes = task.getAttributes();
        List<ExtensionAttribute> att1 = attributes.get(NODE_TYPE_KEY);
        if (CollectionUtil.isNotEmpty(att1)) { 
           System.out.println("nodetype 的值为：" + att1.get(0).getValue()); 
        }
        List<ExtensionAttribute> att2 = attributes.get(REVOKE_FLAG_KEY);
        if (CollectionUtil.isNotEmpty(att1)) { 
           System.out.println("revokeflag的值为：" + att1.get(0).getValue()); 
        }
        List<ExtensionAttribute> att3 = attributes.get(END_FLAG_KEY);
        if (CollectionUtil.isNotEmpty(att1)) { 
           System.out.println("endflag的值为：" + att1.get(0).getValue()); 
        }

Over , Thanks 如有不对地方请指正