当前位置: 首页 > 专利查询>彭志勇专利>正文

基于蒙版的web表单设计方法技术

技术编号:16644808 阅读:43 留言:0更新日期:2017-11-26 17:16
本发明专利技术提供的基于蒙版的web表单设计方法,步骤包括:构建表单所需控件的控件库,并将控件配置在控件选择界面上;构建与控件各自对应的属性列表,并将属性列表配置在属性编辑界面上;构建表单预览界面,表单预览界面按照当前设计表单的内容做展现;构建位于表单预览界面区域上方的蒙版,通过蒙版拦截对表单预览界面的鼠标及键盘操作;当鼠标点击表单预览界面时,蒙版捕获鼠标事件时,根据鼠标的位置匹配出该位置所在的控件,从而将该控件设置为选中状态,并且在属性编辑界面显示该控件的属性值。本发明专利技术提供了更好的用户体验,表单和控件完全是按照实际的效果在表单设计器的表单预览界面显示,所展现的样子和实际的效果完全一致。

Design method of web form based on mask

The invention provides a web form design method based on mask comprises the following steps: to build the form required control library, and configure the control in the control selection interface; a list of attributes corresponding construction and control, and the configuration in the attribute list attribute editing interface; construction form preview interface, form preview interface according to the current design of the contents of the form do show; construction is on the form preview interface area above the mask, intercept the form preview interface keyboard and mouse operation through the mask; when the mouse click form preview interface, mask capture mouse events, according to the location of the mouse, the location of the control, which will the control set is selected, and in the editing interface display of the control value. The present invention provides a better user experience, and forms and controls are displayed in the form preview interface of the form designer in full accordance with the actual effect, and the appearance and the actual effect of the control are exactly the same.

【技术实现步骤摘要】
基于蒙版的web表单设计方法
本专利技术涉及一种基于蒙版的web表单设计方法。
技术介绍
所见即所得的表单设计器,就是为用户提供一个可即时看到表单样子的WebHTML表单设计器。在设计器中可以向表单插入新的控件,或者修改控件的属性,修改后的表单的样子即时的就可以显示出来。传统的表单设计器主要有以下两种:1.使用图像等模拟控件,只能实现简单的布局设计,这种方式的控件是用图像模拟显示的,并不能达到真正的所见即所得的效果,且控件的布局只能使用绝对坐标定位,对各种屏幕的分辨率支持很差;2.在表单中及控件中额外加入事件和代码用于处理设计事件,这种设计器对原始控件对各种事件的响应会对设计器用户造成干扰,界面友好性不高。并且由于需要在表单中添加各种辅助信息,也并不完全是所见即所得的表单设计器。
技术实现思路
针对所提到的问题,本专利技术提供了一种基于蒙版的web表单设计方法,设计界面包括控件选择界面、属性编辑界面和表单预览界面,步骤包括:1)构建表单所需控件的控件库,并将控件按照列表的格式配置在所述控件选择界面上;2)构建与所述控件各自对应的属性列表,并将属性列表配置在所述属性编辑界面上;3)构建表单预览界面,表单预览界面按照当前设计表单的内容做展现;4)构建位于表单预览界面区域上方的蒙版,通过蒙版拦截对表单预览界面的鼠标及键盘操作;5)当鼠标点击所述表单预览界面时,鼠标事件会在蒙版上触发,蒙版捕获鼠标事件时,根据鼠标的位置匹配出该位置所在的控件,从而将该控件设置为选中状态,并且在属性编辑界面显示该控件的属性值;6)当控件属性或者表单属性发生改变后,在所述表单预览界面显示修改完后即显示最新样式的效果。优选方案是:所述蒙版的透明度为80~99%。优选方案是:如果鼠标位置未匹配出对应的控件时,则在属性编辑界面显示表单的属性值。优选方案是:控件的背景颜色设置深色以达到选中的视觉效果。本专利技术的有益效果如下:1.完全所见即所得,提供更好的用户体验。表单和控件完全是按照实际的效果在表单设计器的预界面里显示,所展现的样子和实际的效果完全一致,并且能在预览界面中看到传统方法中无法呈现的控件控件中的文字超长而自动换行等效果。并且由于在设计的过程完全不会触发控件的鼠标键盘事件响应代码,避免了设计操作以及控件响应事件对表单界面的干扰。2.控件的显示代码和设计器相关的代码隔离,减轻了控件代码实现的难度,实现控件在设计器中可用的难度。附图说明图1为本专利技术的页面示意图。具体实施方式下面对本专利技术做进一步的详细说明,以令本领域技术人员参照说明书文字能够据以实施。应当理解,本文所使用的诸如“具有”、“包含”以及“包括”术语并不配出一个或多个其它元件或其组合的存在或添加。本专利技术提供了一种基于蒙版的web表单设计方法,如图1所述,设计界面包括位于左侧的控件选择界面、位于右侧的属性编辑界面和位于中部的表单预览界面,步骤包括:1)构建表单所需控件的控件库,并将控件按照列表的格式配置在所述控件选择界面上,所述控件包括:插入组件、文件标签、文本框、日期录入、下拉选择、是否选择、多项选择、单项选择、列表选择、文件上传、地区编码、机构编码、地图坐标、表间关联、矩阵容器、单行容器、多行容器和字表容器,在表单设计中,为每一种支持的控件设计一组辅助代码,用于设计器的一些事件在控件上的处理:比如选中状态时,可以将控件的背景色设置某个深色以达到选中的视觉效果;用户改变了属性区控件的某属性时,辅助代码应用这些属性的修改并且重新渲染表单或者控件等;2)构建与所述控件各自对应的属性列表,并将属性列表配置在所述属性编辑界面上;属性列表包括:字段编号、显示名、数据类型、字段长度、文本行数、格式、数据字段和宽度;3)构建表单预览界面,表单预览界面按照当前设计表单的内容做展现;4)构建位于表单预览界面区域上方的蒙版,通过蒙版拦截对表单预览界面的鼠标及键盘操作,所述蒙版的透明度为80~99%,web系统中通过CSS的z-index,opacity等属性设置HTML对象的层叠关系和透明度;5)当鼠标点击所述表单预览界面时,鼠标事件会在蒙版上触发,蒙版捕获鼠标事件时,根据鼠标的位置匹配出该位置所在的控件,从而将该控件设置为选中状态,并且在属性编辑界面显示该控件的属性值,如果鼠标位置未匹配出对应的控件时,则在属性编辑界面显示表单的属性值;6)当控件属性或者表单属性发生改变后,在所述表单预览界面显示修改完后即显示最新样式的效果。尽管本专利技术的实施方案已公开如上,但其并不仅仅限于说明书和实施方式中所列运用,它完全可以被适用于各种适合本专利技术的领域,对于熟悉本领域的人员而言,可容易地实现另外的修改,因此在不背离权利要求及等同范围所限定的一般概念下,本专利技术并不限于特定的细节。本文档来自技高网...
基于蒙版的web表单设计方法

【技术保护点】
基于蒙版的web表单设计方法,设计界面包括控件选择界面、属性编辑界面和表单预览界面,其特征在于,步骤包括:1)构建表单所需控件的控件库,并将控件按照列表的格式配置在所述控件选择界面上;2)构建与所述控件各自对应的属性列表,并将属性列表配置在所述属性编辑界面上;3)构建表单预览界面,表单预览界面按照当前设计表单的内容做展现;4)构建位于表单预览界面区域上方的蒙版,通过蒙版拦截对表单预览界面的鼠标及键盘操作;5)当鼠标点击所述表单预览界面时,鼠标事件会在蒙版上触发,蒙版捕获鼠标事件时,根据鼠标的位置匹配出该位置所在的控件,从而将该控件设置为选中状态,并且在属性编辑界面显示该控件的属性值;6)当控件属性或者表单属性发生改变后,在所述表单预览界面显示修改完后即显示最新样式的效果。

【技术特征摘要】
1.基于蒙版的web表单设计方法,设计界面包括控件选择界面、属性编辑界面和表单预览界面,其特征在于,步骤包括:1)构建表单所需控件的控件库,并将控件按照列表的格式配置在所述控件选择界面上;2)构建与所述控件各自对应的属性列表,并将属性列表配置在所述属性编辑界面上;3)构建表单预览界面,表单预览界面按照当前设计表单的内容做展现;4)构建位于表单预览界面区域上方的蒙版,通过蒙版拦截对表单预览界面的鼠标及键盘操作;5)当鼠标点击所述表单预览界面时,鼠标事件会在蒙版上触发,蒙版捕获鼠标事件时,根据鼠标的位置匹配出该...

【专利技术属性】
技术研发人员:彭志勇刘志鹏
申请(专利权)人:彭志勇
类型:发明
国别省市:北京,11

网友询问留言 已有0条评论
  • 还没有人留言评论。发表了对其他浏览者有用的留言会获得科技券。

1