在线表单设计器设计原理

表单设计器设计思路
1.页面布局
分为3个部分（设计器图片已上传）
（1）组件，用来画表单的基础工具，可以用Ext的tree实现。
（2）设计区域，就是一个配上背景图片的div。
（3）右侧属性栏，每个组件都有自己的属性配置，可以用Ext的PropertyGrid来实现。
2.组件拖拽到设计区
可以通过ext自带的拖拽功能很容易实现。设定拖拽源为tree，拖拽目标位设计区div，代码如下：

	dropTarget = new Ext.dd.DropTarget(Ext.getDom('pageId'), {
        ddGroup: 'DDGroup',
        notifyEnter: function (ddSource, e, data) {
			//拖拽过程中执行
        },
        notifyDrop: function (ddSource, e, data) {
            //鼠标放开之后执行，ddSource拖拽源，e事件
            return (true);
        }
    });

3.当拖拽到设计区之后需要创建对象
定义一个全局文档对象var domObj = {};//临时存放页面所有元素的对象集合，key为标签的id，value为对象引用。
在notifyDrop函数里判断拖拽的组件类型来实例化相对应的对象，然后分别添加到设计区内和domObj中。
添加到设计区为了达到显示效果，添加到文档对象中为了读取属性回显和保存的用途。
4.面向对象设计
在这里需要以OO的思路来处理，便于维护和扩展，将所有组件的公用部分属性抽象到超类中，每个组件都有自己的类定义，代码如下：
//超类组件的公共属性

	
	//*********************继承通用方法***********************
	function extend(sub , sup){//sub子类，sup父类
		var F = function() {},		
			subclassProto,//子类的原型对象
			superclassProto = sup.prototype;//把父类的原型对象交给了superclassProto变量
		F.prototype = superclassProto;	
		subclassProto = sub.prototype = new F();	
		subclassProto.constructor = sub;		
		sub.superclass = superclassProto;
		if (superclassProto.constructor === Object.prototype.constructor) {
			superclassProto.constructor = sup;
		}	
	};
	function BaseObject(id,top,left,width,height,type){
		this.id = id;
		this.top = top;
		this.left = left;
		this.width = width;
		this.height = height;
		this.type = type;
	}
	//*********************标签***********************
	function Label(id,top,left){
		BaseObject.call(this,id,top,left,'40','20','label')
		this.value = '标签';
		this.color = '';
	}
	extend(Label,BaseObject);//继承超类
	Label.prototype.toHtml = function () {
		var obj = $("<label style='Z-INDEX: 1;POSITION: absolute;'></label>");
		obj.attr("id", this.id);
		obj.text(this.value);
		addEvent(obj,this);//添加一些事件，略...
		return obj;
	}

	
	

每次向设计区添加组件都是通过new对象，然后调用toHtml方法来添加到div中。
5.拖拽原理
通过拖拽改变div位置和大小，当鼠标按下时mousedown绑定移动事件mousemove，当鼠标抬起时mouseup接触绑定的事件。
这样一来当按下时候随着鼠标的移动不断的改变对象坐标属性就可以达到拖拽的效果了。可以考虑把拖拽函数写成jquery插件形式便于调用。
代码如下：

this.mousedown(function (e){
	var x = e.clientX - 160;
	var y = e.clientY - 27;
	var right = this.offsetLeft + this.offsetWidth;
	var bottom = this.offsetTop + this.offsetHeight;
	if((x<right&&x>=right-3)&&(y>=this.offsetTop&&y<=bottom)&&type!='Yline'){
		var domObj = {};
		domObj.x = x - this.offsetWidth;
		domObj.y = y - this.offsetHeight;
		domObj.dom = this;
		$(document).bind("mousemove", {domObj: domObj}, updateWidth).bind("mouseup", mouseUp);
		if(typeof(fn)!='undefined'){
			$(document).bind("mousemove", updatePosition).bind("mouseup", {domObj: domObj, dragType:'width'}, fn);
		}
	}
	else if((y<bottom&&y>=bottom-3)&&(x>=this.offsetLeft&&x<=right)&&type!='Xline'){
		var domObj = {};
		domObj.x = x - this.offsetWidth;
		domObj.y = y - this.offsetHeight;
		domObj.dom = this;
		$(document).bind("mousemove", {domObj: domObj}, updateHeight).bind("mouseup", mouseUp);
		if(typeof(fn)!='undefined'){
			$(document).bind("mousemove", updatePosition).bind("mouseup", {domObj: domObj, dragType:'height'}, fn);
		}
	}  
	else{
		for(var i=0;i<domArray.length;i++){
			domArray[i].x = x-parseInt($(domArray[i].dom).css('left'));	
			domArray[i].y = y-parseInt($(domArray[i].dom).css('top'));
		}
		$(document).bind("mousemove", updatePosition).bind("mouseup", mouseUp);
		if(typeof(fn)!='undefined'){
			$(document).bind("mousemove", updatePosition).bind("mouseup", {dragType:'move'}, fn);
		}
	}
	//防止默认事件发生 
	e.preventDefault();
});	
	//鼠标抬起时，解除拖拽效果的绑定
	function mouseUp(e){
		$(this).unbind("mousemove",updateWidth).unbind("mousemove",updateHeight).unbind("mousemove",updatePosition).unbind("mouseup");            
	}

6.多选和键盘事件
以按住ctrl多选为例，需要定义2个全局对象。

	var keyFalg = false;//判断是否按下ctrl键
	var domArray = [];  //存放当前选中的对象数组
	//绑定整个文档键盘事件，判断键盘是否按下
	$(document).keydown(function(event){
		keyFalg = true;
	});
	$(document).keyup(function(event){
		keyFalg = false;
	});

当对象点击事件被执行时判断keyFalg状态，来决定数组内容。
当执行拖拽等操作时，来通过数组对象循环改变每个对象属性值来达到同时拖拽多个对象的效果。
7.保存
分开两种保存，html和json或xml。
html用于给填表单的人使用，json数据用于给开发人员修改表单用。
保存html通过jquery的html()方法来实现。
保存json通过Ext.util.JSON.encode()方法来实现。
源码地址：http://item.taobao.com/item.htm?spm=a1z10.5.w4002-5308542543.10.tBIcCP&id=37074279659
图片效果在附件中。。。

评论

7 楼 ghpaas 2014-06-30  

web可视化自定义表单推荐使用GForms开发平台（http://blog.csdn.net/ghpaas/article/details/30222989），GForms开发平台让开发人员甚至非技术人员在短短几分钟内创建全功能的展现服务，让开发团队更加适应客户和市场的需求，从而提高客户服务和速度实现收益。该开发平台提供可视化的设计器、运行时，设计器基于eclipse开发，非常的简单，完全实现xforms1.1标准，并且支持开发人员编写样式、javascript处理函数等。

6 楼 mikab 2014-03-26  

我也搞了套纯JS的表单设计器，

大家有兴趣可以看看，http://freedap.duapp.com/freedap/loader.htm?{application:'shell_templatemgmt',action:'templates_add'}

里面不光是文本框之类的控件，还可以通过几个容器类的控件实现负责的布局和样式设计。

5 楼 依山傍水 2014-01-13  

你好。可以发一份源码吗？[e-mail]

4 楼 mengqingyu 2013-01-20  

xingchensuifeng 写道

您好，问个问题，添加元素到画布后，选中一个或多个控件是怎么做的？比如说按钮，单击时，属性窗格显示了属性，按钮本身被选中，恩，要能看到选中效果，我用了jqueryeasyui的拖拽和重置大小，但是那个选中的效果不知道怎么实现，能不能解释个？我的邮件[e-mail],邮件联系，谢谢！

全中的效果就是当点击时候改变点击对象的css样式，选中多个就是把点击的对象放到数组里循环改变CSS拖拽源我用的ext tree，toHtml方法是自定义的，就是为了将对象转换成html标签字符串，addEvent是自己定义的方法，有疑问可以给我发站内信。

3 楼 xingchensuifeng 2013-01-10  

您好，问个问题，添加元素到画布后，选中一个或多个控件是怎么做的？比如说按钮，单击时，属性窗格显示了属性，按钮本身被选中，恩，要能看到选中效果，我用了jqueryeasyui的拖拽和重置大小，但是那个选中的效果不知道怎么实现，能不能解释个？我的邮件[e-mail],邮件联系，谢谢！

2 楼 xingchensuifeng 2013-01-07  

您好，参考了这个思路，写的时候有些问题，求解，首先，怎么设置拖拽源是tree？我设置后变成整棵树是拖拽的，而不是树的单一项。然后，那个toHtml()方法，怎么用？里面有用到jquery吧，没明白你的addEvent是哪里来的，又做了些什么，我无法把元素拖拽到面板内，或者说，我创建了元素后，不知道如何追加的面板中，纯菜鸟，希望您能花点时间帮忙解释下，谢谢！

1 楼 xingchensuifeng 2013-01-04  

有木有完整的例子源码打包个参考，谢谢，不用所有，只要你图片上那些就行，[e-mail]