Activiti Modeler引入web项目

在使用Activiti Modeler时候先从Activiti获得你所要的，新版的是使用anguarjs写的，比原来好多了，操作也比较人性化。
spring的包不说了，我现在就讲maven依赖放入

 <dependency>
        	<groupId>org.activiti</groupId>
        	<artifactId>activiti-engine</artifactId>
        	<version>5.18.0</version>
        </dependency>
        <dependency>
        	<groupId>org.activiti</groupId>
        	<artifactId>activiti-spring</artifactId>
        	<version>5.18.0</version>
        	<exclusions>
        		<exclusion>
        			<artifactId>commons-dbcp</artifactId>
        			<groupId>commons-dbcp</groupId>
        		</exclusion>
        	</exclusions>
        </dependency>
        <dependency>
        	<groupId>org.activiti</groupId>
        	<artifactId>activiti-diagram-rest</artifactId>
        	<version>5.18.0</version>
        </dependency>
<dependency>
        	<groupId>org.activiti</groupId>
        	<artifactId>activiti-json-converter</artifactId>
        	<version>5.18.0</version>
        	<exclusions>
        		<exclusion>
        			<artifactId>commons-collections</artifactId>
        			<groupId>commons-collections</groupId>
        		</exclusion>
        	</exclusions>
        </dependency>

在SpringMVC中加载这些包，注意，SpringMvc需要为4.0以上的，这样才能比较好支持RestController的注解方式，否则，请用旧的方式来支持这种Rest URL访问。


<context:component-scan base-package="com.redxun.bpm.rest.diagram"/>
<context:component-scan base-package="com.redxun.bpm.rest.editor"/>

在web.xml中配置拦截这些访问路径

 
   <servlet-mapping>
    	<servlet-name>springMvc</servlet-name>
    	<url-pattern>/service/*</url-pattern>
</servlet-mapping>

修改process-editor下的一些配置文件，以支持我们的在线流程设计

A)去掉Activiti Afresco的logo标题栏，并且把样式上的空白栏去掉
修改modeler.html中的以下内容，注意不要把该文本删除，建议加style=”display:none”,删除后其会造成底层下的一些内容有40个像数的东西显示不出来。

<div class="navbar navbar-fixed-top navbar-inverse" role="navigation" id="main-header">
	    <div class="navbar-header">
            <a href="" ng-click="backToLanding()" class="navbar-brand"
               title="{{'GENERAL.MAIN-TITLE' | translate}}"><span
                    class="sr-only">{{'GENERAL.MAIN-TITLE' | translate}}</span></a>
        </div>
	</div>

B)在editor-app/css/style-common.css中，把以下样式的padding-top部分改为0px;

.wrapper.full {
    padding: 40px 0px 0px 0px;
    overflow: hidden;
    max-width: 100%;
    min-width: 100%;
}

在modeler.html中加上CloseWindow的函数

<script type="text/javascript">
		function CloseWindow(action) {
		    if (window.CloseOwnerWindow) return window.CloseOwnerWindow(action);
		    else window.close();            
		}
	</script>

目的是为了保存模型时，可以关闭当前的弹出的mini窗口，修改保存后弹出的窗口的保存及关闭动作，如下所示：

<script type="text/javascript">
		function CloseWindow(action) {
		    if (window.CloseOwnerWindow) return window.CloseOwnerWindow(action);
		    else window.close();            
		}
	</script>

目的是为了保存模型时，可以关闭当前的弹出的mini窗口，修改保存后弹出的窗口的保存及关闭动作，如下所示，把editor-app/configuration/toolbar-default-action.js的以下函数：

   $scope.saveAndClose = function () {
    	$scope.save(function() {
    		window.location.href = "./";
    	});
};

改成以下：

$scope.saveAndClose = function () {
    	$scope.save(function() {
    		CloseWindow('ok');
    	});
    };

修改editor-app编辑器的根目录，如app-cfg.js

ACTIVITI.CONFIG = {
		'contextRoot' : '/activiti-explorer/service',
};

改成自己的根目录：

ACTIVITI.CONFIG = {
	'contextRoot' : '/redxun_web/service',
};

在实际的项目中，可以把这些ContextRoot改成动态的获值方式

至此，重启你的应用后，可直接进入目录访问modeler.html页面。直接访问该页面时，框架会出现，但是没有出现你想要的内容。这是因为后台出错了，这个页面要能正常访问要求必须传入Activiti的设计Model的Id，即act_re_model表中的主键，访问路径如：
Myroot/process-editor/modeler.html?modelId=12312312。
但这个表的记录怎么产生，这里需要调用一下Acitiviti的API来创建，如下代码片段可以实现该功能。

String descp=request.getParameter("description");
            ObjectMapper objectMapper = new ObjectMapper();
            ObjectNode editorNode = objectMapper.createObjectNode();
            editorNode.put("id", "canvas");
            editorNode.put("resourceId", "canvas");
            ObjectNode stencilSetNode = objectMapper.createObjectNode();
            stencilSetNode.put("namespace", "http://b3mn.org/stencilset/bpmn2.0#");
            editorNode.set("stencilset", stencilSetNode);
            Model modelData = repositoryService.newModel();
            
            ObjectNode modelObjectNode = objectMapper.createObjectNode();
            modelObjectNode.put(MODEL_NAME, actReModel.getName());
            modelObjectNode.put(MODEL_REVISION, 1);
            //String description = null;
           
            modelObjectNode.put(MODEL_DESCRIPTION, descp);
            modelData.setMetaInfo(modelObjectNode.toString());
            modelData.setName(actReModel.getName());
            
            repositoryService.saveModel(modelData);
            repositoryService.addModelEditorSource(modelData.getId(), editorNode.toString().getBytes("utf-8"));

最后在保存时候tomcat下angular保存不了，由于不支持put的提交，所以将angular的$Http({})修改为POST就好了，jetty不存在put提交不了得情况。

Activiti Modeler引入web项目

猜你喜欢