activiti自定义流程之整合(三):整合自定义表单创建模型
本来在创建了表单之后应该是表单列表和预览功能,但是我看了看整合的代码,和之前没有用angularjs的基本没有什么变化,一些极小的变动也只是基于angularjs的语法,因此完全可以参考之前说些的表单列表展示相关的内容,这里也就直接进入到下一个步骤,创建流程模型了。
在之前的创建流程模型一节里,我讲代码比较多,实际上在这里还有很重要的一个环节没有细说,那就是自定义流程图,画流程图的过程也是有不少需要注意的事项的,在这一节我会适当的以截图加解释进行说明。
而在创建流程模型的过程中,因为之前也是用java、spring、angularjs等,所以在代码上实际上并没有什么变化,不同之处就在流程图制作上,还有就是activiti内部自己实现,我们不用管他,那么这里着重要讲的就是调用activiti-modeler来画流程图。
我们的创建模型首先是在自己制作的页面填好模型的name、key、description等,然后提交到后台,进而跳转到activiti-modeler流程图制作界面。自定义的页面如下图:
填写数据的这个页面代码如下:
- <div id="create"style="margin-top:100px;margin-left:290px;background-color:#9cc;height:350px;width:40%;font-size:26px;position:relative;float:left;">
- <p style="font-size:30px">创建模型</p>
- Name :<input type="text" name="name"ng-model="activiti.name"/>
- </br>
- </br>
- Key :<input type="text" name="key"ng-model="activiti.key"/>
- </br>
- </br>
- Description:<input type="text" name="description"ng-model="activiti.description"/>
- </br>
- </br>
- <input style="font-size:28px;cursor:pointerborder:1px solid;border-radius:0.5em;" type="button"value="创建模型" ng-click="createTo(activiti);"/>
- <input style="font-size:28px;cursor:pointer;cursor:pointerborder:1px solid;border-radius:0.5em;" type="button"value="返回"/>
- </div>
在我们填好相关数据以后,点击提交,便会触动createTo方法进入到js代码中,对应的整个js代码如下:
- angular.module('activitiApp')
- .controller('createCtr', ['$rootScope','$scope','$http','$location','$state', function($rootScope,$scope,$http,$location,$state){
- //创建模型
- $http.post("createFlush.do").success(function(result){
- if(result.isLogin==="yes"){
- $rootScope.userName=result.userName;
- }else{
- $location.path("/login");
- }
- });
- $scope.createTo=function(activiti){
- //向后台提交数据
- $http.post("./create.do",activiti,{headers:'Content-Type:application/json'}).success(function(createResult){
- console.log(createResult);
- $location.path("/modelList");
- window.open("http://localhost:8080/activitiTest1"+createResult.path+createResult.modelId);
- });
- }
- }])
在上述的代码中可以看到createTo方法是直接调用$http向后台发送post请求,然后把页面中的数据对象直接传到后台,并没有多做处理,这里涉及到angularjs的双向数据绑定,如果有不明白的,可以自己去了解以下。
需要注意的是,发送请求并接收后台返回数据后,从返回数据中拿到path和modelid然后跳转到activiti-model流程图设计页面,这里可以先看一下下边的后台代码再返回来看。
经过http请求,操作便运行到后台,相应的后台代码如下:
- /**
- * 创建模型
- *
- * @author:tuzongxun
- * @Title: create
- * @param@param activiti
- * @param@param request
- * @param@param response
- * @param@return
- * @return Object
- * @date Mar 17, 201612:30:29 PM
- * @throws
- */
- @RequestMapping(value = "/create.do", method = RequestMethod.POST, produces = "application/json;charset=utf-8")
- @ResponseBody
- public Object create(@RequestBody ActivitiModel activiti,
- HttpServletRequest request, HttpServletResponse response) {
- Map<String, String> map = new HashMap<String, String>();
- Boolean isLogin = this.isLogin(request);
- if (isLogin) {
- Model newModel = repositoryService.newModel();
- try {
- ObjectMapper objectMapper = new ObjectMapper();
- ObjectNode modelObjectNode = objectMapper.createObjectNode();
- modelObjectNode.put(ModelDataJsonConstants.MODEL_NAME,
- activiti.getName());
- modelObjectNode.put(ModelDataJsonConstants.MODEL_REVISION, 1);
- modelObjectNode.put(ModelDataJsonConstants.MODEL_DESCRIPTION,
- StringUtils.defaultString(activiti.getDescription()));
- newModel.setMetaInfo(modelObjectNode.toString());
- newModel.setName(activiti.getName());
- newModel.setKey(StringUtils.defaultString(activiti.getKey()));
- repositoryService.saveModel(newModel);
- 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.put("stencilset", stencilSetNode);
- repositoryService.addModelEditorSource(newModel.getId(),
- editorNode.toString().getBytes("utf-8"));
- } catch (Exception e) {
- e.getStackTrace();
- }
- //response.sendRedirect(request.getContextPath() +
- //"/service/editor?id="
- // +newModel.getId());
- map.put("isLogin", "yes");
- map.put("userName",
- (String) request.getSession().getAttribute("userName"));
- map.put("path", "/service/editor?id=");
- map.put("modelId", newModel.getId());
- } else {
- map.put("isLogin", "no");
- }
- return map;
- }
这一段代码里涉及到的东西还比较多,有一些我也不是很理解,只是这段代码基本上就是这样不怎么会变了,我也暂时没有深入理解,可以看到这段代码跟之前说列的也是一样,那么这里我要说的是最后走完这段代码返回数据给前台。
可以看到其中有一个path属性和modelId,正是这两个属性返回给前台后,前台angularjs再控制路由跳转到activiti-model流程图设计页面(这个页面完全整合而来,非自己创造)。根据path和modelId跳转后的界面如下:
这个界面是整合而来,在跳转的过程中会自动把之前我们填写的数据带入过来,当然了,还有modelId,这个时候数据库实际上已经有了数据。
进入到这个界面,那么下边就要正式开始设计流程图了,首先如下图所示的创建开始节点,创建方法是找到StartEvent按钮,按住鼠标左键拖拽到右方空白处即可。
然后在这个开始节点后边有许多按钮可以点击,我们选择下图中箭头所指的个人任务,然后便新建了一个任务节点,当然了,如果能学到自定义流程图这一步,我想大家应该已经对流程图的基础有一定了解了,起码在eclipse中画流程图应该已经没有问题,所以这里大家应该不难理解,否则的话,不如先用eclipse中的插件了解一下。
这样的话,依照上边的步骤我们就可以创建出如下图的流程图雏形,包含开始节点、两个任务节点,然后是结束节点:
那么接下来就是比较重要的了,开始进入自定义表单整合的环节。
在上图中可以看到右方我用箭头指了一个地方,attributes,顾名思义,就是属性,这里是可以点开的,假如大家能走到这一步来,就可以看到在不同情况下这里显示的不一样。
首先我们不选中任何节点,可以看到属性如下:
而我们选中开始节点和任务节点是属性又分别如下图1和图2:
图2:
但是不管是开始节点还是任务节点,都有Formkey这个属性,在这里我们就可以指定每个节点需要使用的自定义表单文件的名称,通常是xxx.form的形式。指定好formkey以后就可以点击保存,也可以设置其他的属性,如任务中的assignment和name、key等等。
而这里的整个页面都不是自己写的,保存相关的方法也不是自己写的,只要数据库配置正确,activiti-modeler就会自动把这些数据保存到数据库中,模型创建完毕。
activiti自定义流程之整合(三):整合自定义表单创建模型的更多相关文章
- activiti自己定义流程之整合(三):整合自己定义表单创建模型
本来在创建了表单之后应该是表单列表和预览功能.可是我看了看整合的代码,和之前没实用angularjs的基本没有什么变化,一些极小的变动也仅仅是基于angularjs的语法,因此全然能够參考之前说些的表 ...
- activiti自定义流程之自定义表单(三):表单列表及预览和删除
注:(1)环境配置:activiti自定义流程之自定义表单(一):环境配置 (2)创建表单:activiti自定义流程之自定义表单(二):创建表单 自定义表单创建成功,要拿到activiti中使用,自 ...
- 用dedecms自定义表单创建简易自助预约系统
建站往往需要根据客户的需求来增加相应的功能,比如预约.平时用比较多的是织梦系统,那么如何用dedecms自定义表单创建简易自助预约系统呢? 进入dedecms后台,左侧菜单中依次点击“核心” - 频道 ...
- [MVC]自定义模型绑定器,从表单对模型进行赋值
一.奇葩的问题 之前自己造轮子的时候,遇到一个很奇怪的问题,虽然需求很奇葩,但是还是尝试解决了一下 当提交的表单里包含多个重复名称的字段的时候,例如 <form action="/Te ...
- HTML第三章:表单
第三章:表单 表单标签form:<form></form>//相当于一张记录用户信息的单子 常用属性:method:表单的提交方式,常用的值有两个 ...
- Angular11 模板表单、响应式表单(自定义验证器)、HTTP、表单元素双向绑定
1 模板表单 模型通过指令隐式创建 技巧01:需要在模块级别引入 FormsModule ,通常在共享模块中引入再导出,然后在需要用到 FormsModule 的模块中导入共享模块就可以啦 impor ...
- struts2(三)之表单参数自动封装与参数类型自动转换
前言 对struts2的使用不外乎这几点,参数自动封装,拦截器的使用,数据校验,ognl表达(值栈和actionContext的讲解),struts2的标签,struts2的国际化, struts2的 ...
- CoreData 从入门到精通(三)关联表的创建
上篇博客中讲了 CoreData 里增删改查的使用,学到这里已经可以应对简单的数据存储需求了.但是当数据模型复杂起来时,例如你的模型类中除了要存储 CoreData 里支持的数据类型外,还有一些自定义 ...
- 第三章 XHTML 表单
1.表单的主要作用在于在网页上提供一个图形用户界面,以采集和提交用户输入的数据. 2.HTML表单元素和属性可以分为两种类型:定义表单整体结构,使浏览器知道如何处理表单数据的元素:创建输入控件的元素. ...
随机推荐
- transfer between javabean and map
1. java bean 转化成 map import java.beans.BeanInfo; import java.beans.Introspector; import java.beans.P ...
- C# 分支语句
选择语句 if,else if是如果的意思,else是另外的意思,if后面跟()括号内为判断条件,如果符合条件则进入if语句执行命令.如果不符合则不进入if语句.else后不用加条件,但是必须与if配 ...
- mac下用ruby安装sass && webstorm下给scss文件添加watch
1.安装rvm 先安装 [Xcode](http://developer.apple.com/xcode/) 开发工具,它将帮你安装好 Unix 环境需要的开发包 sudo curl -L https ...
- ASP.NET MVC 微信公共平台开发之获取用户消息并处理
ASP.NET MVC 微信公共平台开发 获取用户消息并处理 获取用户消息 用户发送的消息是在微信服务器发送的一个HTTP POST请求中包含的,获取用户发送的消息要从POST请求的数据流中获取 微信 ...
- ASP.NET数据绑定技术
1.DataBinder.Eval()方法 DataBinder.Eval()方法是ASP.NET框架支持的一个静态方法,用来计算Late_Bound(后期绑定)数据绑定表达式,并随时将结果转换为字符 ...
- ArcGIS Add-in——自动保存编辑
需求:由于初次使用ArcGIS编辑器不习惯.数据量大造成经常程序未响应.计算机断电等因素,造成编辑的数据没有保存,影响了生产效率,本人根据草色静然的博文,总结了自动保存编辑的实现方法. 分析:自动保存 ...
- SharePoint 2013 对象模型操作"网站设置"菜单
在SharePoint的开发中,经常会有客户提到网站操作上的栏目过多,其实,我们除了可以通过Feature的方式添加,还可以通过服务器端对象模型的方式添加:下面,让我用简单的例子,给大家介绍一下: 1 ...
- SharePoint 2010 文档管理之点击次数
前言:很多场景下,我们都需要对一篇文章或者文档的点击次数进行统计,然而SharePoint本身并没有给我们设计这样一个字段,所以我们需要通过简单的字段开发来实现这样一个功能. 一.创建项目: 1. 创 ...
- Microsoft Dynamics 2013 --Social Pane
Microsoft Dynamics 2013 有一个新的东西--Social Pane (图1) 进入窗体设置,发现改选项卡的详细设置如下 (图2) Tab键的选项有3种[活动][公告][注释],若 ...
- IOS真机测试(用证书进行真机测试)
真机测试需要准备 1.证书 2.Iphone或者Ipad 3.到developer.apple.com注册开发者账号(不用money的) ------------------------------- ...