CN107391656A - 基于蒙版的web表单设计方法 - Google Patents

基于蒙版的web表单设计方法 Download PDF

Info

Publication number
CN107391656A
CN107391656A CN201710585433.1A CN201710585433A CN107391656A CN 107391656 A CN107391656 A CN 107391656A CN 201710585433 A CN201710585433 A CN 201710585433A CN 107391656 A CN107391656 A CN 107391656A
Authority
CN
China
Prior art keywords
list
control
masking
interface
mouse
Prior art date
Legal status (The legal status is an assumption and is not a legal conclusion. Google has not performed a legal analysis and makes no representation as to the accuracy of the status listed.)
Granted
Application number
CN201710585433.1A
Other languages
English (en)
Other versions
CN107391656B (zh
Inventor
彭志勇
刘志鹏
Current Assignee (The listed assignees may be inaccurate. Google has not performed a legal analysis and makes no representation or warranty as to the accuracy of the list.)
Individual
Original Assignee
Individual
Priority date (The priority date is an assumption and is not a legal conclusion. Google has not performed a legal analysis and makes no representation as to the accuracy of the date listed.)
Filing date
Publication date
Application filed by Individual filed Critical Individual
Priority to CN201710585433.1A priority Critical patent/CN107391656B/zh
Publication of CN107391656A publication Critical patent/CN107391656A/zh
Application granted granted Critical
Publication of CN107391656B publication Critical patent/CN107391656B/zh
Active legal-status Critical Current
Anticipated expiration legal-status Critical

Links

Classifications

    • G—PHYSICS
    • G06—COMPUTING; CALCULATING OR COUNTING
    • G06F—ELECTRIC DIGITAL DATA PROCESSING
    • G06F16/00—Information retrieval; Database structures therefor; File system structures therefor
    • G06F16/90—Details of database functions independent of the retrieved data types
    • G06F16/95—Retrieval from the web
    • G06F16/958—Organisation or management of web site content, e.g. publishing, maintaining pages or automatic linking
    • G06F16/986—Document structures and storage, e.g. HTML extensions
    • G—PHYSICS
    • G06—COMPUTING; CALCULATING OR COUNTING
    • G06F—ELECTRIC DIGITAL DATA PROCESSING
    • G06F3/00—Input arrangements for transferring data to be processed into a form capable of being handled by the computer; Output arrangements for transferring data from processing unit to output unit, e.g. interface arrangements
    • G06F3/01—Input arrangements or combined input and output arrangements for interaction between user and computer
    • G06F3/048—Interaction techniques based on graphical user interfaces [GUI]
    • G06F3/0481—Interaction techniques based on graphical user interfaces [GUI] based on specific properties of the displayed interaction object or a metaphor-based environment, e.g. interaction with desktop elements like windows or icons, or assisted by a cursor's changing behaviour or appearance
    • G—PHYSICS
    • G06—COMPUTING; CALCULATING OR COUNTING
    • G06F—ELECTRIC DIGITAL DATA PROCESSING
    • G06F3/00—Input arrangements for transferring data to be processed into a form capable of being handled by the computer; Output arrangements for transferring data from processing unit to output unit, e.g. interface arrangements
    • G06F3/01—Input arrangements or combined input and output arrangements for interaction between user and computer
    • G06F3/048—Interaction techniques based on graphical user interfaces [GUI]
    • G06F3/0487—Interaction techniques based on graphical user interfaces [GUI] using specific features provided by the input device, e.g. functions controlled by the rotation of a mouse with dual sensing arrangements, or of the nature of the input device, e.g. tap gestures based on pressure sensed by a digitiser

Landscapes

  • Engineering & Computer Science (AREA)
  • Theoretical Computer Science (AREA)
  • General Engineering & Computer Science (AREA)
  • Physics & Mathematics (AREA)
  • General Physics & Mathematics (AREA)
  • Human Computer Interaction (AREA)
  • Databases & Information Systems (AREA)
  • Data Mining & Analysis (AREA)
  • Processing Or Creating Images (AREA)

Abstract

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

Description

基于蒙版的web表单设计方法
技术领域
本发明涉及一种基于蒙版的web表单设计方法。
背景技术
所见即所得的表单设计器，就是为用户提供一个可即时看到表单样子的Web HTML表单设计器。在设计器中可以向表单插入新的控件，或者修改控件的属性，修改后的表单的样子即时的就可以显示出来。传统的表单设计器主要有以下两种：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)当控件属性或者表单属性发生改变后，在所述表单预览界面显示修改完后即显示最新样式的效果。
尽管本发明的实施方案已公开如上，但其并不仅仅限于说明书和实施方式中所列运用，它完全可以被适用于各种适合本发明的领域，对于熟悉本领域的人员而言，可容易地实现另外的修改，因此在不背离权利要求及等同范围所限定的一般概念下，本发明并不限于特定的细节。

Claims (4)

1.基于蒙版的web表单设计方法，设计界面包括控件选择界面、属性编辑界面和表单预览界面，其特征在于，步骤包括：
1)构建表单所需控件的控件库，并将控件按照列表的格式配置在所述控件选择界面上；
2)构建与所述控件各自对应的属性列表，并将属性列表配置在所述属性编辑界面上；
3)构建表单预览界面，表单预览界面按照当前设计表单的内容做展现；
4)构建位于表单预览界面区域上方的蒙版，通过蒙版拦截对表单预览界面的鼠标及键盘操作；
5)当鼠标点击所述表单预览界面时，鼠标事件会在蒙版上触发，蒙版捕获鼠标事件时，根据鼠标的位置匹配出该位置所在的控件，从而将该控件设置为选中状态，并且在属性编辑界面显示该控件的属性值；
6)当控件属性或者表单属性发生改变后，在所述表单预览界面显示修改完后即显示最新样式的效果。
2.根据权利要求1所述的基于蒙版的web表单设计方法，其特征在于，所述蒙版的透明度为80～99％。
3.根据权利要求1所述的基于蒙版的web表单设计方法，其特征在于，如果鼠标位置未匹配出对应的控件时，则在属性编辑界面显示表单的属性值。
4.根据权利要求1所述的基于蒙版的web表单设计方法，其特征在于，控件的背景颜色设置深色以达到选中的视觉效果。
CN201710585433.1A 2017-07-18 2017-07-18 基于蒙版的web表单设计方法 Active CN107391656B (zh)

Priority Applications (1)

Application Number Priority Date Filing Date Title
CN201710585433.1A CN107391656B (zh) 2017-07-18 2017-07-18 基于蒙版的web表单设计方法

Applications Claiming Priority (1)

Application Number Priority Date Filing Date Title
CN201710585433.1A CN107391656B (zh) 2017-07-18 2017-07-18 基于蒙版的web表单设计方法

Publications (2)

Publication Number Publication Date
CN107391656A true CN107391656A (zh) 2017-11-24
CN107391656B CN107391656B (zh) 2019-01-29

Family

ID=60340099

Family Applications (1)

Application Number Title Priority Date Filing Date
CN201710585433.1A Active CN107391656B (zh) 2017-07-18 2017-07-18 基于蒙版的web表单设计方法

Country Status (1)

Country Link
CN (1) CN107391656B (zh)

Cited By (5)

* Cited by examiner, † Cited by third party
Publication number Priority date Publication date Assignee Title
CN109597645A (zh) * 2018-12-11 2019-04-09 平安科技（深圳）有限公司 一种属性参数修改方法和相关装置
CN109783100A (zh) * 2019-01-24 2019-05-21 北京微播视界科技有限公司 查看用户界面元素属性的方法、装置及电子设备
CN110020316A (zh) * 2017-12-22 2019-07-16 航天信息股份有限公司 一种列表的显示方法及装置
CN110286908A (zh) * 2019-07-01 2019-09-27 广州凡科互联网科技股份有限公司 一种基于控件式自定义表单的方法
CN114063869A (zh) * 2021-11-30 2022-02-18 中国建设银行股份有限公司 一种表单配置方法、装置和电子设备

Citations (4)

* Cited by examiner, † Cited by third party
Publication number Priority date Publication date Assignee Title
US20070242607A1 (en) * 2006-04-13 2007-10-18 Tellabs Operations, Inc. Method and system for controlling distribution of network topology information
CN105487858A (zh) * 2015-11-25 2016-04-13 深圳联友科技有限公司 一种基于html5的在线表单设计系统
CN106021211A (zh) * 2016-05-18 2016-10-12 山东达创网络科技股份有限公司 一种智能表单系统及其生成方法
CN106843904A (zh) * 2017-02-20 2017-06-13 深圳市医诺智能科技发展有限公司 界面动态布局方法及其系统

Patent Citations (4)

* Cited by examiner, † Cited by third party
Publication number Priority date Publication date Assignee Title
US20070242607A1 (en) * 2006-04-13 2007-10-18 Tellabs Operations, Inc. Method and system for controlling distribution of network topology information
CN105487858A (zh) * 2015-11-25 2016-04-13 深圳联友科技有限公司 一种基于html5的在线表单设计系统
CN106021211A (zh) * 2016-05-18 2016-10-12 山东达创网络科技股份有限公司 一种智能表单系统及其生成方法
CN106843904A (zh) * 2017-02-20 2017-06-13 深圳市医诺智能科技发展有限公司 界面动态布局方法及其系统

Cited By (6)

* Cited by examiner, † Cited by third party
Publication number Priority date Publication date Assignee Title
CN110020316A (zh) * 2017-12-22 2019-07-16 航天信息股份有限公司 一种列表的显示方法及装置
CN109597645A (zh) * 2018-12-11 2019-04-09 平安科技（深圳）有限公司 一种属性参数修改方法和相关装置
CN109597645B (zh) * 2018-12-11 2022-02-01 平安科技（深圳）有限公司 一种属性参数修改方法和相关装置
CN109783100A (zh) * 2019-01-24 2019-05-21 北京微播视界科技有限公司 查看用户界面元素属性的方法、装置及电子设备
CN110286908A (zh) * 2019-07-01 2019-09-27 广州凡科互联网科技股份有限公司 一种基于控件式自定义表单的方法
CN114063869A (zh) * 2021-11-30 2022-02-18 中国建设银行股份有限公司 一种表单配置方法、装置和电子设备

Also Published As

Publication number Publication date
CN107391656B (zh) 2019-01-29

Similar Documents

Publication Publication Date Title
CN107391656B (zh) 基于蒙版的web表单设计方法
US11256403B2 (en) Computer aided systems and methods for creating custom products
CN104216691B (zh) 一种创建应用的方法及装置
US20060174199A1 (en) Web-based design system
JP5209113B2 (ja) 表形式データの階層的提示
JP4434343B2 (ja) 文字生成装置及び文字生成方法
JP2004005568A (ja) レガシー・アプリケーションの高速ｇｕｉ体裁更新
JPH01223560A (ja) 文書作成システムとその使用方法
CN111881662A (zh) 表单生成方法、装置、处理设备及存储介质
US8207984B2 (en) Method and system for typesetting with multiple-color characters using layer fonts
US20160314502A1 (en) System and method for streamlining the design and development process of multiple advertising units
CN112328252A (zh) 基于web网页的在线设计数据可视化大屏方法
CN112364496B (zh) 基于html5和vue技术的航电仿真面板生成系统
CN107515748A (zh) 报表管理界面生成方法及文件共享方法
CN112927314B (zh) 一种图像数据处理方法、装置以及计算机设备
CN110275996B (zh) 数据可视化开发为内容开发提供页面框架的装置及方法
CN115691772A (zh) 运营可视化系统及相应计算机设备和存储介质
US20220004700A1 (en) System and method for producing transferable, modular web pages
CN116229029A (zh) 一种基于ar技术的产品使用手册设计方法
Krahenbuhl Learning Axure RP interactive prototypes
Libby et al. Responsive Web Design with HTML5 and CSS3 Essentials
Meyer Smashing CSS: professional techniques for modern layout
CN116034368A (zh) 用于驱动查看器的网络平台的操作方法及网络服务器
Padova et al. Working with Graphics
Bardzell et al. Macromedia Studio MX 2004: Training from the Source

Legal Events

Date Code Title Description
PB01 Publication
PB01 Publication
SE01 Entry into force of request for substantive examination
SE01 Entry into force of request for substantive examination
GR01 Patent grant
GR01 Patent grant