[發明專利]在線表單設計器的實現方法及其系統

有效

• 申請號: 201610074587.X
• 申請日: 2016-02-02
• 公開（公告）號: CN105760440B
• 公開（公告）日: 2019-06-04
• 發明（設計）人: 吳仰歡;都志會;王達城
• 申請（專利權）人: 廣州市科南軟件有限公司
• 主分類號: G06F16/958
• 分類號: G06F16/958
• 代理公司: 廣州華進聯合專利商標代理有限公司 44224
• 代理人: 李巍;李繡君

本發明涉及一種在線表單設計器的實現方法及其系統，其中，在線表單設計器的實現方法，包括以下步驟：對在線表單設計器進行指令封裝，得到第一HTML和表單JSON數據，并將第一HTML和表單JSON數據發送給服務器；指令封裝包括對指令設置高度和內容以及進行相關信息的初始化；接收服務器根據第一HTML和表單JSON數據解析得到的表單HTML代碼；調用預設的手動編譯指令對表單HTML代碼進行手動編譯，得到手動編譯后的表單HTML代碼，將手動編譯后的表單HTML代碼展示到頁面上。本發明提供了一種能夠與AngularJS框架相結合的在線表單設計器。

技術領域

本發明涉及WEB開發領域技術，特別是涉及一種在線表單設計器的實現方法及其系統。

背景技術

目前，市面存在的在線表單設計器主要利用HTML(HyperText Markup Language：超文本標記語言)、JavaScript、JSON(JavaScript Object Notation：JavaScript對象表示法)和XML(Extensible Markup Language：可擴展標記語言)技術實現；HTML技術用于在頁面上展示表單，JavaScript技術用于對表單進行編輯和設計，而JSON和XML技術則是用于存儲設計的表單。當需要展示表單時，在服務器端對JSON或XML按照一定的規則轉換成HTML，再傳輸到客戶端展示表單。當前并沒有一款與AngularJS框架相結合的在線表單設計器。

使用AngularJS技術的應用相當于一個單頁面應用，并不像普通的Web應用會有頁面渲染完的觸發時機，這就導致純粹使用JavaScript技術去操作頁面的DOM(DocumentObject Model：文檔對象模型)元素來設計表單時，會出現獲取不到DOM元素對象的情況，導致系統出錯。因此，AngularJS官方文檔并不推薦直接使用JavaScript技術直接操作DOM元素。如果需要對DOM元素進行操作的動作時，則推薦使用AngularJS特有的“指令”來實現。但使用“指令”時，在錯過編譯過程以后，無法將表單設計擴展組件重新編譯展示到頁面上。并且對于一些特殊的指令而言，相比于HTML中表單常規的表單控件，“指令”并不能以常規的方式賦值并展示。

因此，發明人發現在以AngularJS為框架的應用中使用在線表單設計器主要存在以下問題：

AngularJS為框架的應用中，使用JavaScript選擇器來獲取DOM對象可能會失敗；AngularJS特有的“指令”不能在頁面渲染后展示到頁面；對于一些特殊的表單控件“指令”，JavaScript并不能對其進行賦值和取值。此外，市面上的在線表單設計器需要用戶自行對表單樣式進行控制和布局，操作復雜。

發明內容

基于此，有必要針對傳統技術中缺少能夠與AngularJS框架相結合的在線表單設計器的問題，提供一種在線表單設計器的實現方法及其系統。

為了實現上述目的，本發明技術方案的實施例為：

一方面，提供了一種在線表單設計器的實現方法，包括以下步驟：

對在線表單設計器進行指令封裝，得到第一HTML和表單JSON數據，并將第一HTML和表單JSON數據發送給服務器；指令封裝包括對指令設置高度和內容以及進行相關信息的初始化；

接收服務器根據第一HTML和表單JSON數據解析得到的表單HTML代碼；

調用預設的手動編譯指令對表單HTML代碼進行手動編譯，得到手動編譯后的表單HTML代碼，將手動編譯后的表單HTML代碼展示到頁面上。

一方面，還提供了一種在線表單設計器的實現方法，包括以下步驟：

接收第一HTML和表單JSON數據；第一HTML和表單JSON數據為瀏覽器客戶端通過對在線表單設計器進行指令封裝得到的數據；指令封裝包括對指令設置高度和內容以及進行相關信息的初始化；