基础环境搭建完成，接下来就该正式着手代码编写了，在说代码之前。我认为有必要先说明一下activit自己定义流程的操作。
抛开自己定义的表单不谈。通过之前的了解，我们知道一个新的流程開始。是在启动流程实例（processIntence）的时候，而流程实例依赖于流程定义（processDefinition）。流程定义又依赖于流程模型（model）。
我们用到的自己定义表单须要在创建模型，画模型图的时候就指定表单的名称formKey。须要保证这个formKey和我们创建的表单名称一致。
表单并不在创建模型的时候使用。而是在部署的时候用到，因此仅仅要是在部署流程定义之前创建自己定义表单，那么不管是先创建模型还是先创建表单。仅仅要名称一致即可。
那么我这里就先创建表单。由于我认为这种话，在创建模型时能够预览，更能保证创建模型的正确性（尽管模型也能够改动）；
与之前的自己定义表单稍有不同的是，在这个整合的样例中，我用的是angularjs，同一时候预览时也用到了jquery中的dialog对话框的功能，也就须要比之前导入很多其它前端的js。他们例如以下图所看到的。
须要注意的是，dialog的样式在jquery-ui.js中控制。这个也是网上下载的。
前端首页index.html代码例如以下，由于angular js为单页面应用，因此实际上仅仅有一个html声明，全部的js以及css文件也都须要在index.html中一開始就导入进来：
-
<!DOCTYPE html>
-
<html ng-app="activitiApp">
-
<head>
-
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
-
<link href="./activi_css/activi.css" rel="stylesheet"/>
-
<script type="text/javascript">
-
var _root=‘http://form/index.php?s=/‘,_controller = ‘index‘;
-
</script>
-
<script src="./angular-1.4.0-rc.2/angular.js"></script>
-
<script src=‘./angular-1.4.0-rc.2/angular-ui-router.js‘></script>
-
<script src=‘./activi_js/app.js‘></script>
-
<script src=‘./activi_js/createCtr.js‘></script>
-
<script src=‘./activi_js/modelCtr.js‘></script>
-
<script src=‘./activi_js/processCtr.js‘></script>
-
<script src=‘./activi_js/taskCtr.js‘></script>
-
<script src=‘./activi_js/findFirstTaskCtr.js‘></script>
-
<script src=‘./activi_js/loginCtr.js‘></script>
-
<script src=‘./activi_js/hisTaskCtr.js‘></script>
-
<script src=‘./activi_js/completeTaskCtr.js‘></script>
-
<script src=‘./activi_js/completeTaskTo1Ctr.js‘></script>
-
<script src="./my_js/updateFormCtr.js"></script>
-
<script src="./my_js/formListCtr.js"></script>
-
-
<!-- <meta name="viewport" content="width=device-width, initial-scale=1.0">
-
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
-
<link href="form_css/bootstrap/css/bootstrap.css?2023" rel="stylesheet" type="text/css" />
-
<link href="form_css/site.css?2023" rel="stylesheet" type="text/css" />-->
-
<link href="form_css/jquery-ui.css" rel="stylesheet" type="text/css" />
-
<link href="my_css/a.css" rel="stylesheet" type="text/css" />
-
<script type="text/javascript">
-
var _root=‘http://form/index.php?s=/‘,_controller = ‘index‘;
-
</script>
-
<script src="form_js/jquery-1.7.2.min.js?2023"></script>
-
<script src="form_js/common.js"></script>
-
<script src="form_js/jquery-ui.js"></script>
-
<script src="form_js/jquery.form.js"></script>
-
<script src="form_js/ajax.js"></script>
-
<script src="form_js/common/plugins/validate/jquery.validate.pack.js"></script>
-
<script src="form_js/jquery.datetimepicker.js"></script>
-
<script src="form_js/ueditor/ueditor.config.js?2023"></script>
-
<script src="form_js/ueditor/ueditor.all.js?2023"> </script>
-
<script src="form_js/ueditor/lang/zh-cn/zh-cn.js?2023"></script>
-
<script src="form_js/ueditor/formdesign/leipi.formdesign.v4.js?2023"></script>
-
-
</head>
-
<body style="width:100%;height:400px;margin:0;background-color:#fff">
-
<div style="height:70px;width:100%;border:1px solid #ccf">
-
<img id="rdiv" src="./images/activiti.png" style="width:30%;height:98%"/>
-
<a href="script:;" ng-show="userName!=undefined" style="margin-right:10px;float:right;margin-top:25px;" ng-click="logOut();">
-
[退出登陆]
-
</a>
-
<font ng-show="userName!=undefined" style="margin-right:10px;float:right;margin-top:25px;">当前登陆用户：{{userName}}</font>
-
</div>
-
<div style="width:100%;position: absolute;height:auto">
-
<div style="height:630px;width:12%;font-size:36px;position:relative;float:left;border:1px solid #ccf" ng-show="userName!=undefined">
-
<table style="width:100%;text-align:center;margin-top:0px" cellSpacing="5px" cellPadding="0px">
-
<tr>
-
<td style="background-color:#aac;"><a href="#/create">创建模型</a></td>
-
</tr>
-
<tr>
-
<td style="background-color:#acd;"> <a href="#/modelList">模型列表</a></td>
-
</tr>
-
<tr>
-
<td style="background-color:#aac;"><a href="#/processList">流程列表</a></td>
-
</tr>
-
<tr>
-
<td style="background-color:#acd;"><a href="#/findFirstTask">我的申请</a></td>
-
</tr>
-
<tr>
-
<td style="background-color:#aac;"><a href="#/taskList">我的任务</a></td>
-
</tr>
-
<tr>
-
<td style="background-color:#acd;"><a href="#/hisTask">历史任务</a></td>
-
</tr>
-
<tr>
-
<td style="background-color:#aac;"><a href="#/createForm">创建表单</a></td>
-
</tr>
-
<tr>
-
<td style="background-color:#acd;"><a href="#/formList">表单列表</a></td>
-
</tr>
-
</table>
-
</div>
-
-
<div ui-view="view" ></div>
-
</div>
-
</body>
-
</html>
Angular js 控制路由跳转app.js代码：
-
var app=angular.module(‘activitiApp‘,[‘ui.router‘]);
-
app.run(function($rootScope) {
-
$rootScope.logOut=function(){
-
$http.post("./loginOut.do").success(function(loginOutResult){
-
$rootScope.userName=undefined;
-
$location.path("/login");
-
});
-
}
-
});
-
app.config(function($stateProvider,$urlRouterProvider){
-
$stateProvider
-
.state(‘createForm‘, {
-
url: "/createForm",
-
views: {
-
‘view‘: {
-
templateUrl: ‘my_views/updateForm.html‘,
-
controller: ‘updateFormCtr‘
-
}
-
}
-
});
-
-
-
});
新增form表单的页面updateForm.html代码例如以下，要注意的是。这个页面也是有ueditor插件中的index.html改变过来的：
-
<div id="formDiv" style="margin-top:20px;margin-left:50px;height:550px;width:70%;font-size:18px;position:relative;float:left;">
-
<div class="container">
-
<form method="post" id="saveform" name="saveform" action="/index.php?s=/index/parse.html">
-
<input type="hidden" name="fields" id="fields" value="0">
-
<div style="width:98%;height:500px;margin-top:20px;border:3px solid grey">
-
<p style="margin-top:10px;font-size:30px" >表单名称：<input type="text" id="formType"></input></p>
-
<hr style="height:5px;border:none;border-top:5px ridge green;"/>
-
<p style="margin-top:10px;font-size:30px" >表单设计：</p>
-
<div >
-
<p style="left:30px">
-
<button type="button" ng-click="leipiFormDesign.exec(‘text‘);" class="btn btn-info">文本框</button>
-
<button type="button" ng-click="leipiFormDesign.exec(‘textarea‘);" class="btn btn-info">多行文本</button>
-
<button type="button" ng-click="leipiFormDesign.exec(‘select‘);" class="btn btn-info">下拉菜单</button>
-
<button type="button" ng-click="leipiFormDesign.exec(‘radios‘);" class="btn btn-info">单选框</button>
-
<button type="button" ng-click="leipiFormDesign.exec(‘checkboxs‘);" class="btn btn-info">复选框</button>
-
<button type="button" ng-click="leipiFormDesign.exec(‘listctrl‘);" class="btn btn-info">列表控件</button>
-
<button type="button" ng-click="leipiFormDesign.findForm();" class="btn btn-info">form</button>
-
</p>
-
</div>
-
-
<div >
-
<script id="myFormDesign" type="text/plain" style="width:99.8%;">
-
</script>
-
</div>
-
</div>
-
-
<div class="row">
-
</div>
-
</form>
-
</div>
-
</div>
相应的js代码updateFormCtr.js。这里尤其须要注意的是leipiFormDesign.exec这种方法原本是ueditor插件中的，假设不做改动直接拿过来的话，在上便的页面中是无法调用的。angularjs须要注意作用域的问题。因此在相应的js中须要改成$scope. leipiFormDesign；除此之外，在保存和预览时基本没有什么变化。dialog对话框也是在兴许流程中使用到：
-
angular.module(‘activitiApp‘)
-
.controller(‘updateFormCtr‘, [‘$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");
-
}
-
});
-
-
-
UE.registerUI(‘button_preview‘,function(editor,uiName){
-
if(!this.options.toolleipi)
-
{
-
return false;
-
}
-
-
editor.registerCommand(uiName,{
-
execCommand:function(){
-
try {
-
$scope.leipiFormDesign.fnReview();
-
} catch ( e ) {
-
alert(‘leipiFormDesign.fnReview 预览异常‘);
-
}
-
}
-
});
-
-
var btn = new UE.ui.Button({
-
-
name:uiName,
-
-
title:"预览",
-
-
cssRules :‘background-position: -420px -19px;‘,
-
-
onclick:function () {
-
-
editor.execCommand(uiName);
-
}
-
});
-
-
-
-
return btn;
-
});
-
-
UE.registerUI(‘button_save‘,function(editor,uiName){
-
if(!this.options.toolleipi)
-
{
-
return false;
-
}
-
-
editor.registerCommand(uiName,{
-
execCommand:function(){
-
try {
-
$scope.leipiFormDesign.fnCheckForm(‘save‘);
-
} catch ( e ) {
-
alert(‘leipiFormDesign.fnCheckForm("save") 保存异常‘);
-
}
-
-
}
-
});
-
-
var btn = new UE.ui.Button({
-
-
name:uiName,
-
-
title:"保存表单",
-
-
cssRules :‘background-position: -481px -20px;‘,
-
-
onclick:function () {
-
-
editor.execCommand(uiName);
-
}
-
});
-
-
-
-
return btn;
-
});
-
-
-
-
-
-
var leipiEditor = UE.getEditor(‘myFormDesign‘,{
-
toolleipi:true,
-
textarea: ‘design_content‘,
-
-
toolbars:[[
-
]],
-
-
wordCount:false,
-
-
elementPathEnabled:false,
-
-
initialFrameHeight:260
-
-
-
});
-
-
-
$scope.leipiFormDesign = {
-
findForm : function(){
-
window.location.href="my_views/formList.html";
-
},
-
-
exec : function (method) {
-
leipiEditor.execCommand(method);
-
},
-
-
-
-
-
-
parse_form:function(template,fields)
-
{
-
-
var preg = /(\|-<span(((?
!<span).)*leipiplugins=\
"(radios|checkboxs|select)\".*?)>(.*?)<\/span>-\||<(img|input|textarea|select).*?(<\/select>|<\/textarea>|\/>))/gi,preg_attr =/(\w+)=\"(.?|.+?)\"
/gi,preg_group =/<input.*?\/>/gi; -
if(!fields) fields = 0;
-
var template_parse = template,template_data = new Array(),add_fields=new Object(),checkboxs=0;
-
var pno = 0;
-
template.replace(preg, function(plugin,p1,p2,p3,p4,p5,p6){
-
var parse_attr = new Array(),attr_arr_all = new Object(),name = ‘‘, select_dot = ‘‘ , is_new=false;
-
var p0 = plugin;
-
var tag = p6 ? p6 : p4;
-
-
if(tag == ‘radios‘ || tag == ‘checkboxs‘)
-
{
-
plugin = p2;
-
}else if(tag == ‘select‘)
-
{
-
plugin = plugin.replace(‘|-‘,‘‘);
-
plugin = plugin.replace(‘-|‘,‘‘);
-
}
-
plugin.replace(preg_attr, function(str0,attr,val) {
-
if(attr==‘name‘)
-
{
-
if(val==‘leipiNewField‘)
-
{
-
is_new=true;
-
fields++;
-
val = ‘data_‘+fields;
-
}
-
name = val;
-
}
-
-
if(tag==‘select‘ && attr==‘value‘)
-
{
-
if(!attr_arr_all[attr]) attr_arr_all[attr] = ‘‘;
-
attr_arr_all[attr] += select_dot + val;
-
select_dot = ‘,‘;
-
}else
-
{
-
attr_arr_all[attr] = val;
-
}
-
var oField = new Object();
-
oField[attr] = val;
-
parse_attr.push(oField);
-
})
-
-
if(tag ==‘checkboxs‘)
-
{
-
plugin = p0;
-
plugin = plugin.replace(‘|-‘,‘‘);
-
plugin = plugin.replace(‘-|‘,‘‘);
-
var name = ‘checkboxs_‘+checkboxs;
-
attr_arr_all[‘parse_name‘] = name;
-
attr_arr_all[‘name‘] = ‘‘;
-
attr_arr_all[‘value‘] = ‘‘;
-
-
attr_arr_all[‘content‘] = ‘<span leipiplugins="checkboxs" title="‘+attr_arr_all[‘title‘]+‘">‘;
-
var dot_name =‘‘, dot_value = ‘‘;
-
p5.replace(preg_group, function(parse_group) {
-
var is_new=false,option = new Object();
-
parse_group.replace(preg_attr, function(str0,k,val) {
-
if(k==‘name‘)
-
{
-
if(val==‘leipiNewField‘)
-
{
-
is_new=true;
-
fields++;
-
val = ‘data_‘+fields;
-
}
-
-
-
attr_arr_all[‘name‘] += dot_name + val;
-
dot_name = ‘,‘;
-
-
-
}
-
else if(k==‘value‘)
-
{
-
attr_arr_all[‘value‘] += dot_value + val;
-
dot_value = ‘,‘;
-
-
-
}
-
option[k] = val;
-
});
-
-
if(!attr_arr_all[‘options‘]) attr_arr_all[‘options‘] = new Array();
-
attr_arr_all[‘options‘].push(option);
-
-
var checked = option[‘checked‘] !=undefined ? ‘checked="checked"‘ : ‘‘;
-
attr_arr_all[‘content‘] +=‘<input type="checkbox" name="‘+option[‘name‘]+‘" value="‘+option[‘value‘]+‘" ‘+checked+‘/>‘+option[‘value‘]+‘ ‘;
-
-
-
if(is_new)
-
{
-
var arr = new Object();
-
arr[‘name‘] = option[‘name‘];
-
arr[‘leipiplugins‘] = attr_arr_all[‘leipiplugins‘];
-
add_fields[option[‘name‘]] = arr;
-
}
-
});
-
attr_arr_all[‘content‘] += ‘</span>‘;
-
-
-
-
template = template.replace(plugin,attr_arr_all[‘content‘]);
-
template_parse = template_parse.replace(plugin,‘{‘+name+‘}‘);
-
template_parse = template_parse.replace(‘{|-‘,‘‘);
-
template_parse = template_parse.replace(‘-|}‘,‘‘);
-
template_data[pno] = attr_arr_all;
-
checkboxs++;
-
-
-
}else if(name)
-
{
-
if(tag ==‘radios‘)
-
{
-
plugin = p0;
-
plugin = plugin.replace(‘|-‘,‘‘);
-
plugin = plugin.replace(‘-|‘,‘‘);
-
attr_arr_all[‘value‘] = ‘‘;
-
attr_arr_all[‘content‘] = ‘<span leipiplugins="radios" name="‘+attr_arr_all[‘name‘]+‘" title="‘+attr_arr_all[‘title‘]+‘">‘;
-
var dot=‘‘;
-
p5.replace(preg_group, function(parse_group) {
-
var option = new Object();
-
parse_group.replace(preg_attr, function(str0,k,val) {
-
if(k==‘value‘)
-
{
-
attr_arr_all[‘value‘] += dot + val;
-
dot = ‘,‘;
-
}
-
option[k] = val;
-
});
-
option[‘name‘] = attr_arr_all[‘name‘];
-
if(!attr_arr_all[‘options‘]) attr_arr_all[‘options‘] = new Array();
-
attr_arr_all[‘options‘].push(option);
-
-
var checked = option[‘checked‘] !=undefined ? ‘checked="checked"‘ : ‘‘;
-
attr_arr_all[‘content‘] +=‘<input type="radio" name="‘+attr_arr_all[‘name‘]+‘" value="‘+option[‘value‘]+‘" ‘+checked+‘/>‘+option[‘value‘]+‘ ‘;
-
-
-
});
-
attr_arr_all[‘content‘] += ‘</span>‘;
-
-
-
}else
-
{
-
attr_arr_all[‘content‘] = is_new ?
plugin.replace(/leipiNewField/,name) : plugin;
-
}
-
template = template.replace(plugin,attr_arr_all[‘content‘]);
-
template_parse = template_parse.replace(plugin,‘{‘+name+‘}‘);
-
template_parse = template_parse.replace(‘{|-‘,‘‘);
-
template_parse = template_parse.replace(‘-|}‘,‘‘);
-
if(is_new)
-
{
-
var arr = new Object();
-
arr[‘name‘] = name;
-
arr[‘leipiplugins‘] = attr_arr_all[‘leipiplugins‘];
-
add_fields[arr[‘name‘]] = arr;
-
}
-
template_data[pno] = attr_arr_all;
-
}
-
pno++;
-
})
-
var parse_form = new Object({
-
‘fields‘:fields,
-
‘template‘:template,
-
‘parse‘:template_parse,
-
‘data‘:template_data,
-
‘add_fields‘:add_fields
-
});
-
return JSON.stringify(parse_form);
-
},
-
-
fnCheckForm : function ( type ) {
-
var formType=document.getElementById("formType").value;
-
if(leipiEditor.queryCommandState( ‘source‘ ))
-
leipiEditor.execCommand(‘source‘);
-
if(leipiEditor.hasContents()){
-
leipiEditor.sync();
-
-
var type_value=‘‘,formid=0,fields=$("#fields").val(),formeditor=‘‘;
-
-
-
if( typeof type!==‘undefined‘ ){
-
type_value = type;
-
}
-
console.log(document.getElementById("formType"));
-
-
formeditor=leipiEditor.getContent();
-
-
var parse_form = this.parse_form(formeditor,fields);
-
-
$.ajax({
-
type: ‘POST‘,
-
url : ‘./addForm.do‘,
-
dataType : ‘html‘,
-
async:false,
-
-
data : {‘type‘ : type_value,‘formid‘:formid,‘parse_form‘:parse_form,"formType":formType},
-
success : function(data){
-
alert("保存成功");
-
window.location.href ="#/formList";
-
}
-
});
-
-
} else {
-
alert(‘表单内容不能为空！
‘
) -
$(‘#submitbtn‘).button(‘reset‘);
-
return false;
-
}
-
} ,
-
-
fnReview : function (){
-
console.log("111");
-
if(leipiEditor.queryCommandState( ‘source‘ ))
-
leipiEditor.execCommand(‘source‘);
-
if(leipiEditor.hasContents()){
-
console.log("222");
-
leipiEditor.sync();
-
-
-
var type_value=‘‘,formid=0,fields=$("#fields").val(),formeditor=‘‘;
-
var formType=document.getElementById("formType").value;
-
if( typeof type!==‘undefined‘ ){
-
type_value = type;
-
}
-
console.log("333");
-
-
formeditor=leipiEditor.getContent();
-
-
var parse_form = this.parse_form(formeditor,fields);
-
var forms=JSON.parse(parse_form);
-
console.log(forms);
-
console.log(typeof forms);
-
console.log(forms.template);
-
var forms1=forms.template;
-
win_parse=window.open(‘‘,‘‘,‘width=800,height=400,alwaysRaised=yes,top=100,left=200‘);
-
-
var str=‘<div style="width:500px;height:300px;border:1px solid grey">‘+forms1+‘</div>‘;
-
win_parse.document.write(forms1);
-
win_parse.focus();
-
} else {
-
alert(‘表单内容不能为空！‘);
-
return false;
-
}
-
}
-
};
-
}])
相对于前台而言。后台在这里就没有什么变化了。能够參考之前的自己定义表单。代码便不再罗列。
