基于jquery、canvas开发的jbpm-web设计器的雏形

对jbpm4的web设计器做了进一步的整合验证，主要是为了寻找实现方案的可行性。

遵循css2的规范，大量的使用css的 > 选择器语法，所以浏览器的支持在ie7以上以及其他的主流浏览器。

在ie7，opera9.6、firefox3.0.10 以及chrome 1.0.154.65稍微跑了下，问题不少，勉强可以跑起来，速度还比较慢。

1、以application为依托（editor）

实现命令的注册、执行、撤销、重做。

2、集成了菜单和工具栏

工具栏和菜单的动作调用分为 command 和 action 两种：

command为在application中注册的可撤销的动作

action 为普通的动作，通过$.actionFactory.register方法进行注册

// 菜单的命令集成

Js代码



$('#application-menu').menu({

command:function(event,ui){

$('body',document).application('executeCommand',ui.command);//

}

});

$('#application-menu').menu({
command:function(event,ui){
$('body',document).application('executeCommand',ui.command);//
}
});

// 工具栏的命令集成

Js代码



$('#application-toolbar').toolbar({

command:function(event,ui){

$('body',document).application('executeCommand',ui.command);

}

});

$('#application-toolbar').toolbar({
command:function(event,ui){
$('body',document).application('executeCommand',ui.command);
}
});

3、集成浮动palette的支持,预支持选择和拖到两种方式

在drop方法中实现palette节点的拖动与命令的集成

Js代码



//初始化palette

$('#application-palette').palette({

drop:function(event,ui){

var offset = {

left:event.pageX-ui.drop.offset().left+ui.drop.scrollLeft(),

top:event.pageY-ui.drop.offset().top+ui.drop.scrollTop()

},

text = ui.text;

$('body',document).application('executeCommand','addNode',{text:text,offset:offset,type:text});

}

});

//初始化palette
$('#application-palette').palette({
drop:function(event,ui){
var offset = {
left:event.pageX-ui.drop.offset().left+ui.drop.scrollLeft(),
top:event.pageY-ui.drop.offset().top+ui.drop.scrollTop()
},
text = ui.text;
$('body',document).application('executeCommand','addNode',{text:text,offset:offset,type:text});
}
});

4、初步的propertyTable的集成方案

在上一个的demo验证版本中有体现

Js代码



//注册下拉选择框

$.youi.editorFactory.registSelect('fontSize',{src:'demo/datas/users.data'});

//注册下拉选择框
$.youi.editorFactory.registSelect('fontSize',{src:'demo/datas/users.data'});

Js代码



//注册颜色选择的dialog

$.youi.editorFactory.registDialog('color',{

width:370,

height:258,title:'选择颜色',

initContent:function(container){

var colorpicker = $('<div id="color-picker"/>');

container.append(colorpicker);

colorpicker.ColorPicker({

flat: true

});

},

getValue:function(){

var color = $("#color-picker").find('.colorpicker_hex input').val()||'000000';

return '<b style="color:#'+color+'">'+color+'</b>';

},

setValue:function(value){

$("#color-picker").ColorPickerSetColor(value);

}

});

//注册颜色选择的dialog
$.youi.editorFactory.registDialog('color',{
width:370,
height:258,title:'选择颜色',
initContent:function(container){
var colorpicker = $('<div id="color-picker"/>');
container.append(colorpicker);
colorpicker.ColorPicker({
flat: true
});
},
getValue:function(){
var color = $("#color-picker").find('.colorpicker_hex input').val()||'000000';
return '<b style="color:#'+color+'">'+color+'</b>';
},
setValue:function(value){
$("#color-picker").ColorPickerSetColor(value);
}
});

5、工作区间树的联动

在命令中同时调用树的相关操作，修改文本和增加节点等。