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的雏形界面

 

 

 

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

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

 

 

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值