[发明专利]基于蒙版的web表单设计方法

说明书

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

技术领域

本发明涉及一种基于蒙版的web表单设计方法。

背景技术

所见即所得的表单设计器，就是为用户提供一个可即时看到表单样子的Web HTML表单设计器。在设计器中可以向表单插入新的控件，或者修改控件的属性，修改后的表单的样子即时的就可以显示出来。传统的表单设计器主要有以下两种：1.使用图像等模拟控件，只能实现简单的布局设计，这种方式的控件是用图像模拟显示的，并不能达到真正的所见即所得的效果，且控件的布局只能使用绝对坐标定位，对各种屏幕的分辨率支持很差；2.在表单中及控件中额外加入事件和代码用于处理设计事件，这种设计器对原始控件对各种事件的响应会对设计器用户造成干扰，界面友好性不高。并且由于需要在表单中添加各种辅助信息，也并不完全是所见即所得的表单设计器。

发明内容

针对所提到的问题，本发明提供了一种基于蒙版的web表单设计方法，设计界面包括控件选择界面、属性编辑界面和表单预览界面，步骤包括：

1)构建表单所需控件的控件库，并将控件按照列表的格式配置在所述控件选择界面上；

2)构建与所述控件各自对应的属性列表，并将属性列表配置在所述属性编辑界面上；

3)构建表单预览界面，表单预览界面按照当前设计表单的内容做展现；

4)构建位于表单预览界面区域上方的蒙版，通过蒙版拦截对表单预览界面的鼠标及键盘操作；

5)当鼠标点击所述表单预览界面时，鼠标事件会在蒙版上触发，蒙版捕获鼠标事件时，根据鼠标的位置匹配出该位置所在的控件，从而将该控件设置为选中状态，并且在属性编辑界面显示该控件的属性值；

6)当控件属性或者表单属性发生改变后，在所述表单预览界面显示修改完后即显示最新样式的效果。

优选方案是：所述蒙版的透明度为80～99％。

优选方案是：如果鼠标位置未匹配出对应的控件时，则在属性编辑界面显示表单的属性值。

优选方案是：控件的背景颜色设置深色以达到选中的视觉效果。

本发明的有益效果如下：

1.完全所见即所得，提供更好的用户体验。表单和控件完全是按照实际的效果在表单设计器的预界面里显示，所展现的样子和实际的效果完全一致，并且能在预览界面中看到传统方法中无法呈现的控件控件中的文字超长而自动换行等效果。并且由于在设计的过程完全不会触发控件的鼠标键盘事件响应代码，避免了设计操作以及控件响应事件对表单界面的干扰。

2.控件的显示代码和设计器相关的代码隔离，减轻了控件代码实现的难度，实现控件在设计器中可用的难度。

附图说明

图1为本发明的页面示意图。

具体实施方式

下面对本发明做进一步的详细说明，以令本领域技术人员参照说明书文字能够据以实施。

应当理解，本文所使用的诸如“具有”、“包含”以及“包括”术语并不配出一个或多个其它元件或其组合的存在或添加。