表单设计器设计思路
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
图片效果在附件中。。。
- 大小: 124.5 KB
分享到:
相关推荐
元素UI表单设计及代码生成器,可将生成的代码直接运行在基于元素的vue项目中;也可生成JSON表单,使用配套的解析器将JSON解析成真实的表单。 【】【】 【 】【】 友情链接 vue-admin-beautiful- vue-admin-...
它是一种图形化的HTML表单设计器。其用户界面有点类似VS.NET的WEB窗体设计器,但原理截然不同。VS.NET的Web窗体设计器可能是基于IE,而本设计器是基于WinForm和GDI+的,全部采用绝对坐标定位方式。本设计器的主要...
通过分析动态表单的实现原理和运行机制,采用MVC架构,运用Struts,Spring和iBATIS整合的轻量级J2EE的多层软件架构和模块化思想,结合Fckeditor在线编辑器和FreeMarker组件,设计并实现了一个B/S结构的、可视化的动态表单...
系统提供在线流程设计器,在线表单设计器,代码生成器,结合BPMX3的基础组件,以实现复杂的流程业务应用。基础组件包括: Spring基础组件库,报表引擎,数据库访问模块,短信模块,后台定时任务调用组件,短信访问...
描述了基于PXA250tf入式系统硬件设计原理,多进 程和多线程并发连接嵌入式H P网络服务器软件算法和程序设计。程序设计基于卜rFTI'协议作为软件开发的基础,主要包括3个关键内容: ‘ 个标准lI 1’M L 页的发送和接收...
4.1 使用查询设计器创建视图100 4.2 顺序查询语句104 4.3 关系数据库标准语言SQL105 本章小结113 关键概念113 典型例题精讲114 能力训练117 模块5 程序设计122 学习目标与教学重点122 5.1 程序文件的建立124 5.2 ...
" "5.2.1 标签向导 " " "5.2.2 标签设计器 " "6 表单和控件 "8.4.1 子程序及调用 " "6.1 表单的创建 "8.4.2 过程定义及调用 " "6.2 表单的基本操作 "8.4.3 定义和调用自定义函数 " "6.2.1 表单的基本设置 "8.4.4 ...
表单生成器的核心思想是使用模式在UI中呈现表单。 表单架构是一个JSON结构,是一个对象数组,每个对象代表表单上的一个输入字段。 生成器将这个JSON结构作为输入,并返回一个React组件列表,每个组件都对应于该位置...
它附带了一个编辑器,该编辑器提供了拖放功能,使非技术用户更容易维护表单,还提供了可扩展的api,允许开发人员使用自定义组件扩展功能。,Angularjs于2016年发布,是Angularjs的重写版。它专注于良好的移动开发、...
CSS模块涵盖了CSS选择器和属性、各种布局技术,包括Flexbox和Grid,以及响应式设计原理。JavaScript模块包含了JavaScript语法和数据类型、DOM操作和事件处理,以及异步编程的重要概念,包括Promise和Async/Await。...
JAVA期末大作业课程设计基于SSH框架的管理系统。 基本原理 1. 相关技术 Structs 一、Structs1原理 1.Structs1原理图 输入图片说明 2.Structs1原理步骤 用户在视图层输入数据。 第一步:Structs框架总控制器,...
19_过滤器验证用户登录_原理分析.mp4 12_实现文件的上传mp4 13_上传视频_保存数据mp4 14_老师分页查看师生交流模块_原理分析.mp4 09_上传时手动接受表单参数mp4 11_获取上传表单部分数据mp4 10_上传的API介绍以及...
本书共分为两卷。 第1章 Spring简介 1 ...14.3 用简单的表单控制器处理portlet表单 561 14.3.1 问题 561 14.3.2 解决方案 561 14.3.3 工作原理 561 14.4 小结 569 第15章 数据访问 570 ...
本书共分为两卷。 第1章 Spring简介 1 ...14.3 用简单的表单控制器处理portlet表单 561 14.3.1 问题 561 14.3.2 解决方案 561 14.3.3 工作原理 561 14.4 小结 569 第15章 数据访问 570 ...
程序设计教程.pdf>>人民邮电出版社的教程哦,所以,好书,你懂的!! 第1章web应用开发简介 1 1.1何为web应用 1 1.1.1web的概念及发展 1 1.1.2web应用程序 2 1.2使用java开发web应用 3 1.2.1面向对象的编程语言...
第01讲_背景介绍及项目基础简介.mp4 第02讲_springboot及MVC...第14讲_登录页面表单验证设计实现及设计公用验证方法.mp4 第15讲_登录表单ajax异步请求方式讲_解.mp4 第16讲_错误码信息采用单例模式统1定义.mp4 第17讲_
ASP.NET 4高级程序设计(第4版)》【原版书为:Pro ASP.NET 4 in C# 2010】是ASP.NET领域的鸿篇巨制,全面讲解了ASP.NET4的各种特性及其背后的工作原理,并给出了许多针对如何构建复杂、可扩展的网站从实践中得出的...