基于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代码

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

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

 // 工具栏的命令集成

Js代码

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

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

 

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

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

 

Js代码

1. //初始化palette   
2.     $('#application-palette').palette({   
3.         drop:function(event,ui){   
4.             var offset = {   
5.         left:event.pageX-ui.drop.offset().left+ui.drop.scrollLeft(),   
6.         top:event.pageY-ui.drop.offset().top+ui.drop.scrollTop()   
7.                 },   
8.                 text = ui.text;   
9.             $('body',document).application('executeCommand','addNode',{text:text,offset:offset,type:text});   
10.         }   
11.     });  

//初始化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代码

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

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

Js代码

1. //注册颜色选择的dialog   
2. $.youi.editorFactory.registDialog('color',{   
3.         width:370,   
4.         height:258,title:'选择颜色',   
5.         initContent:function(container){   
6.             var colorpicker = $('<div id="color-picker"/>');   
7.             container.append(colorpicker);   
8.             colorpicker.ColorPicker({   
9.                     flat: true  
10.             });   
11.         },   
12.         getValue:function(){   
13.             var color = $("#color-picker").find('.colorpicker_hex input').val()||'000000';   
14.             return '<b style="color:#'+color+'">'+color+'</b>';   
15.         },   
16.         setValue:function(value){   
17.             $("#color-picker").ColorPickerSetColor(value);   
18.         }   
19. });  

//注册颜色选择的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、工作区间树的联动

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