[發明專利]基于蒙版的web表單設計方法

有效

• 申請號: 201710585433.1
• 申請日: 2017-07-18
• 公開（公告）號: CN107391656B
• 公開（公告）日: 2019-01-29
• 發明（設計）人: 彭志勇;劉志鵬
• 申請（專利權）人: 彭志勇
• 主分類號: G06F16/958
• 分類號: G06F16/958;G06F3/0487;G06F3/0481
• 代理公司: 北京遠大卓悅知識產權代理事務所(普通合伙) 11369
• 代理人: 史霞

本發明提供的基于蒙版的web表單設計方法，步驟包括：構建表單所需控件的控件庫，并將控件配置在控件選擇界面上；構建與控件各自對應的屬性列表，并將屬性列表配置在屬性編輯界面上；構建表單預覽界面，表單預覽界面按照當前設計表單的內容做展現；構建位于表單預覽界面區域上方的蒙版，通過蒙版攔截對表單預覽界面的鼠標及鍵盤操作；當鼠標點擊表單預覽界面時，蒙版捕獲鼠標事件時，根據鼠標的位置匹配出該位置所在的控件，從而將該控件設置為選中狀態，并且在屬性編輯界面顯示該控件的屬性值。本發明提供了更好的用戶體驗，表單和控件完全是按照實際的效果在表單設計器的表單預覽界面顯示，所展現的樣子和實際的效果完全一致。

技術領域

本發明涉及一種基于蒙版的web表單設計方法。

背景技術

所見即所得的表單設計器，就是為用戶提供一個可即時看到表單樣子的Web HTML表單設計器。在設計器中可以向表單插入新的控件，或者修改控件的屬性，修改后的表單的樣子即時的就可以顯示出來。傳統的表單設計器主要有以下兩種：1.使用圖像等模擬控件，只能實現簡單的布局設計，這種方式的控件是用圖像模擬顯示的，并不能達到真正的所見即所得的效果，且控件的布局只能使用絕對坐標定位，對各種屏幕的分辨率支持很差；2.在表單中及控件中額外加入事件和代碼用于處理設計事件，這種設計器對原始控件對各種事件的響應會對設計器用戶造成干擾，界面友好性不高。并且由于需要在表單中添加各種輔助信息，也并不完全是所見即所得的表單設計器。

發明內容

針對所提到的問題，本發明提供了一種基于蒙版的web表單設計方法，設計界面包括控件選擇界面、屬性編輯界面和表單預覽界面，步驟包括：

1)構建表單所需控件的控件庫，并將控件按照列表的格式配置在所述控件選擇界面上；

2)構建與所述控件各自對應的屬性列表，并將屬性列表配置在所述屬性編輯界面上；

3)構建表單預覽界面，表單預覽界面按照當前設計表單的內容做展現；

4)構建位于表單預覽界面區域上方的蒙版，通過蒙版攔截對表單預覽界面的鼠標及鍵盤操作；

5)當鼠標點擊所述表單預覽界面時，鼠標事件會在蒙版上觸發，蒙版捕獲鼠標事件時，根據鼠標的位置匹配出該位置所在的控件，從而將該控件設置為選中狀態，并且在屬性編輯界面顯示該控件的屬性值；

6)當控件屬性或者表單屬性發生改變后，在所述表單預覽界面顯示修改完后即顯示最新樣式的效果。

優選方案是：所述蒙版的透明度為80～99％。

優選方案是：如果鼠標位置未匹配出對應的控件時，則在屬性編輯界面顯示表單的屬性值。

優選方案是：控件的背景顏色設置深色以達到選中的視覺效果。

本發明的有益效果如下：

1.完全所見即所得，提供更好的用戶體驗。表單和控件完全是按照實際的效果在表單設計器的預界面里顯示，所展現的樣子和實際的效果完全一致，并且能在預覽界面中看到傳統方法中無法呈現的控件控件中的文字超長而自動換行等效果。并且由于在設計的過程完全不會觸發控件的鼠標鍵盤事件響應代碼，避免了設計操作以及控件響應事件對表單界面的干擾。

2.控件的顯示代碼和設計器相關的代碼隔離，減輕了控件代碼實現的難度，實現控件在設計器中可用的難度。

附圖說明

圖1為本發明的頁面示意圖。

具體實施方式

下面對本發明做進一步的詳細說明，以令本領域技術人員參照說明書文字能夠據以實施。

應當理解，本文所使用的諸如“具有”、“包含”以及“包括”術語并不配出一個或多個其它元件或其組合的存在或添加。