jbpm4设计器 Application化的雏形

对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方法进行注册

 // 菜单的命令集成

$('#application-menu').menu({
    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节点的拖动与命令的集成

 

//初始化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验证版本中有体现

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

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

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

 

//设计器实现的demo的雏形界面

 

 

 

这个一时心血来潮的东西并没有如愿的写下去，现在源码都难得找到了，

找到部分代码上传，里面的代码的写法很多不舒服的地方，欠考虑的东西太多,代码也比较乱，参考价值不大。

 

 

评论

4 楼 errise 2009-05-14  

正在研究这个，希望交流交流，看来楼主的JS功力深厚，还需学习

3 楼 j2093 2009-05-14  

lz加油了

2 楼 zhyi_12 2009-05-14  

首先谢谢你的建议
最终的连线实现会包括类似于jbpm插件的方式，不过
目前还没有想好使用什么样的方式实现。
现阶段主要是进行一些技术实现上进的验证性工作，下一步准备进行功能的规划。

1 楼 frankjiang1985 2009-05-13  

最近比较关注这个，不过我现在还是在用jbpm3，也想做个在线的流程设计器。
以前用过filenet bpm的在线流程设计器，包括了流程的定义，发布和验证。
有一点建议，你的transition能不能也实现拖动式？
我的MSN：[e-mail]
我对js不熟悉，仰慕一下英雄