开源工作流引擎web设计器Activiti Modeler 5.17.0 与IE11的兼容性探究

时间：2015-06-11 00:10:03 阅读：2869 评论：0 收藏：0 [点我收藏+]

标签：

一、源码下载

　　Activiti官网：http://activiti.org/

　　github：https://github.com/Activiti/Activiti

　　官网上下载的是lib库文件、文档和网站样例，推荐使用maven管理项目，可以不用下载库文件，直接下载源码，github上源码已经是5.18.0，但是官方还没有发布，从以下网址找到5.17.0的source code下载链接下载即可：https://github.com/Activiti/Activiti/releases，大小为20.1M。解压后目录如下：

技术分享

二、导入eclipse

　　官方提供了一个名为activiti-explorer.war的web演示项目，可以直接部署到tomcat里运行，在源码文件夹的moudules下，有一个activiti-webapps-explorer2文件夹，这就是activiti-explorer.war的项目目录，项目采用maven管理，不熟悉maven的建议先学习一下。

　　在eclipse中选择 import->exit maven projects，选择activiti-wepapps-explorer2目录，导入pom.xml，等待工程自动构建，完成后会有几个错误，都是xml格式错误，不影响运行。我是在jdk1.8，tomcat8中部署的web项目。

　　在chrome下，使用kermit：kermit登陆系统，选择流程-->流程设计工作区-->新建模型，创建一个新的model，发现web设计器打不开，发现可能是代码中路径设置问题，这不是我们要解决的问题，简单处理，eclipse中右键工程，Properties--web project setting--context root ，名称改为activiti-explorer，重新部署工程（在server--tomcat8中删除工程，重新运行部署），登陆，新建model，打开模型设计器：

技术分享

三、IE测试

　　在ie11中测试web流程设计器，初步发现以下几个bug：

1. 网页出现internal error错误

　　后期要移植到自己的项目中，不会使用这些网页源码，这不是主要矛盾，打开ie兼容性设置，把localhost加入即可。

2.使用路径path后model保存错误

　　modeler作图使用svg（可缩放矢量图形），相关教程：http://www.w3school.com.cn/svg/，在ie中如果使用了箭头（即svg中的path元素），则model保存不成功，提示错误”Unexpected error: could not save model”，eclipse中提示：元素类型 "path" 必须后跟属性规范 ">" 或 "/>"。。在ie F12开启调试模式，与chrome对比发现是因为modeler.html中的path的marker-start和marker-end属性值多了引号，导致在保存时path出错。

IE：

url("#sid-7278F570-B74E-4EE6-A21A-52A3B3BF3C26end") url("#sid-7278F570-B74E-4EE6-A21A-52A3B3BF3C26start")

<path xmlns="http://www.w3.org/2000/svg" id="sid-7278F570-B74E-4EE6-A21A-52A3B3BF3C26_1" fill="none" marker-end="url(&quot;#sid-7278F570-B74E-4EE6-A21A-52A3B3BF3C26end&quot;)" marker-start="url(&quot;#sid-7278F570-B74E-4EE6-A21A-52A3B3BF3C26start&quot;)" stroke="#585858" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M 355.391 135 L 399.375 135" />

chrome：

<path id="sid-CB6F9DD4-D150-4072-8EF6-75B5AE54E9BF_1" d="M210.609375 135L254.15625 135 " stroke="#585858" fill="none" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" marker-start="url(#sid-CB6F9DD4-D150-4072-8EF6-75B5AE54E9BFstart)" marker-end="url(#sid-CB6F9DD4-D150-4072-8EF6-75B5AE54E9BFend)"></path>

　　进一步跟踪发现，在oryx.debug.js中有如下代码：

                    markerUrl = markerUrl.strip();
                    markerUrl = markerUrl.replace(/^url\(#/, ‘‘);
                    
                    var markerStartId = this.getValidMarkerId(markerUrl);
                    path.setAttributeNS(null, "marker-start", "url(#" + markerStartId + ")");
                    
                    markersByThisPath.push(this._markers[markerStartId]);

chrome中的setAttributeNS函数不会对url()做特殊处理，而IE中会对url()中的字符用引号包裹，y！在此设置断点重新画一个path后，发现引号删不掉（nodevalue无法修改为无引号），把值设置为url(AAAA)会自动变为url("AAAA")！setAttributeNS地址：http://www.w3school.com.cn/xmldom/met_element_setattributens.asp

　　技术分享　　

而且这个js显然也有考虑到了这种情况，replace考虑到了ie，但是保存为什么不考虑啊。

    getValidMarkerId: function(markerUrl) {
        if(markerUrl.indexOf("url(\"#") >= 0) {
            // Fix for IE9, additional quotes are added to the <id
            var rawId = markerUrl.replace(/^url\(\"#/, "").replace(/\"\)$/, ‘‘);
            return this.id + rawId;
          } else {
            markerUrl = markerUrl.replace(/^url\(#/, ‘‘);
            return this.id.concat(markerUrl.replace(/\)$/, ‘‘));
          }
    },

最简单的做法，我们也来字符串替换，在toolbar-default-actions.js中有如下函数：

$scope.save = function (successCallback) {

        if (!$scope.saveDialog.name || $scope.saveDialog.name.length == 0) {
            return;
        }

        // Indicator spinner image
        $scope.status = {
            loading: true
        };
        
        modelMetaData.name = $scope.saveDialog.name;
        modelMetaData.description = $scope.saveDialog.description;

        var json = $scope.editor.getJSON();
        json = JSON.stringify(json);
        
        var selection = $scope.editor.getSelection();
        $scope.editor.setSelection([]);
        
        // Get the serialized svg image source
        var svgClone = $scope.editor.getCanvas().getSVGRepresentation(true);
        $scope.editor.setSelection(selection);
        if ($scope.editor.getCanvas().properties["oryx-showstripableelements"] === false) {
            var stripOutArray = jQuery(svgClone).find(".stripable-element");
            for (var i = stripOutArray.length - 1; i >= 0; i--) {
                stripOutArray[i].remove();
            }
        }

        // Remove all forced stripable elements
        var stripOutArray = jQuery(svgClone).find(".stripable-element-force");
        for (var i = stripOutArray.length - 1; i >= 0; i--) {
            stripOutArray[i].remove();
        }

        // Parse dom to string
        var svgDOM = DataManager.serialize(svgClone);

        var params = {
            json_xml: json,
            svg_xml: svgDOM,
            name: $scope.saveDialog.name,
            description: $scope.saveDialog.description
        };

        // Update
        $http({    method: ‘PUT‘,
            data: params,
            ignoreErrors: true,
            headers: {‘Accept‘: ‘application/json‘,
                      ‘Content-Type‘: ‘application/x-www-form-urlencoded; charset=UTF-8‘},
            transformRequest: function (obj) {
                var str = [];
                for (var p in obj) {
                    str.push(encodeURIComponent(p) + "=" + encodeURIComponent(obj[p]));
                }
                return str.join("&");
            },
            url: KISBPM.URL.putModel(modelMetaData.modelId)})

            .success(function (data, status, headers, config) {
                $scope.editor.handleEvents({
                    type: ORYX.CONFIG.EVENT_SAVED
                });
                $scope.modelData.name = $scope.saveDialog.name;
                $scope.modelData.lastUpdated = data.lastUpdated;
                
                $scope.status.loading = false;
                $scope.$hide();

                // Fire event to all who is listening
                var saveEvent = {
                    type: KISBPM.eventBus.EVENT_TYPE_MODEL_SAVED,
                    model: params,
                    modelId: modelMetaData.modelId,
                    eventType: ‘update-model‘
                };
                KISBPM.eventBus.dispatch(KISBPM.eventBus.EVENT_TYPE_MODEL_SAVED, saveEvent);

                // Reset state
                $scope.error = undefined;
                $scope.status.loading = false;

                // Execute any callback
                if (successCallback) {
                    successCallback();
                }

            })
            .error(function (data, status, headers, config) {
                $scope.error = {};
                console.log(‘Something went wrong when updating the process model:‘ + JSON.stringify(data));
                $scope.status.loading = false;
            });
    };

　　我们将svgDOM中的引号删除掉，然后ie清除缓存（重启？），maven重新构建（alt+F5，可能还需要改一次名），tomcat删除项目，重新部署运行，保存成功！

  // Parse dom to string
        var svgDOM = DataManager.serialize(svgClone);
        svgDOM = svgDOM.replace(/marker-start="url\("#/g,"marker-start=\"url(#").replace(/start"\)"/g,"start\)\"");
        svgDOM = svgDOM.replace(/marker-mid="url\("#/g,"marker-mid=\"url(#").replace(/mid"\)"/g,"mid\)\"");
        svgDOM = svgDOM.replace(/marker-end="url\("#/g,"marker-end=\"url(#").replace(/end"\)"/g,"end\)\"");

技术分享

3. 保存后再点击编辑模型，仍然显示保存前的模型图

　　初步诊断为IE对json做了缓存，可以在目录C:\Users\{Your name}\AppData\Local\Microsoft\Windows\Temporary Internet Files下看到json的缓存，只需在以后的项目移植过程中调用json时设置不取缓存即可，在此可以清除IE缓存或者重启IE，不是主要矛盾，不过特殊修改。

4.某些情况下path的箭头消失

情况一：编辑模型，在未做任何操作时点击作图面板空白处；

情况二：完全使用快捷方式生成model后（即除start使用拖拽外，其他组件通过父组件的右下角点击生成），在未做任何操作时点击作图面板空白处；

技术分享

　　这只是显示的问题，若拖动任意组件或者点击path后，箭头会恢复显现。这是ui的渲染问题，可能由于渲染顺序或者透明度吧，这个问题想要解决需要十分熟悉svg作图，可是我不太懂啊。还有一个思路就是移动某个节点，让页面重新渲染，比如把start左移10再右移10。

开源工作流引擎web设计器Activiti Modeler 5.17.0 与IE11的兼容性探究

标签：

原文地址：http://www.cnblogs.com/ksmile/p/4567009.html

踩

(0)

评论一句话评论（0）

分享档案

更多>

2021年07月29日 (22)
2021年07月28日 (40)
2021年07月27日 (32)
2021年07月26日 (79)
2021年07月23日 (29)
2021年07月22日 (30)
2021年07月21日 (42)
2021年07月20日 (16)
2021年07月19日 (90)
2021年07月16日 (35)

周排行