表單的本質是業(yè)務，沒有表單是無法完成業(yè)務系統(tǒng)的，而動態(tài)表單使業(yè)務系統(tǒng)更高級。動態(tài)表單是什么呢？它是如何工作的？應用場景有哪些？一起來看一下吧。

如何設計一個表單引擎？（如何設計一個表單引擎）

一、表單

表單在網(wǎng)頁中主要負責數(shù)據(jù)采集功能，是提交數(shù)據(jù)的一切形式。表單的本質是提交數(shù)據(jù)，不僅僅包含輸入框、下拉選擇框等這些控件，常見的按鈕空間也屬于一個表單。

1. 動態(tài)表單

動態(tài)表單（Dynamic Form），指在前端運行過程中可依賴某些業(yè)務邏輯發(fā)生表單項變化的表單，還包括表單布局、表單數(shù)據(jù)管理、表單校驗、表單交互、表單項聯(lián)動邏輯等原本由前端編程完成的表單開發(fā)，轉由后端通過 API 接口輸出表單描述自動完成上述所有內(nèi)容的表單開發(fā)形式。

如何設計一個表單引擎？（如何設計一個表單引擎）

（動態(tài)表單原理示意圖）

2. 動態(tài)表單的特點優(yōu)勢

表單的本質是業(yè)務，而動態(tài)表單使業(yè)務系統(tǒng)更高級。

普通表單是一個表單寫一份前端的代碼，代碼全部由前端開發(fā)者完成（后端配合接口輸出）。而動態(tài)表單則是一個表單對應一個 JSON（由后端輸出），所有表單由一份代碼（動態(tài)表單引擎）進行加載和渲染。

所以，動態(tài)表單具有以下優(yōu)勢：

客戶端運行的代碼量更少；
每個表單的JSON按需加載；
表單需求變化時，無需前端修改發(fā)版，只需編輯數(shù)據(jù)庫中的JSON。

二、表單控件

表單控件是提供一組允許用戶操作的對象，從而接收用戶輸入的數(shù)據(jù)，用戶可操作該對象來執(zhí)行對表單設計，修改等操作。

1. HTML表單種常見的13個控件

input元素無疑是一個龐大和復雜的元素，但它并不是唯一的表單控件。還有button、select、option、label、optgroup、textarea、fieldset、legend這八個傳統(tǒng)表單控件，datalist、progress、meter、output、keygen這五個新增表單控件。

如何設計一個表單引擎？（如何設計一個表單引擎）

2. 動態(tài)表單控件

動態(tài)表單是老廠商天翎核心技術之一，也是天翎公司核心產(chǎn)品MyApps的重要組成部分。通過對于動態(tài)表單的應用，可以避免在電子流程系統(tǒng)中硬編碼的數(shù)據(jù)采集及處理表單，提高系統(tǒng)的可維護性。

如何設計一個表單引擎？（如何設計一個表單引擎）

說明：

Form，動態(tài)表單實現(xiàn)的基本入口，描述了DynaForm的最基本屬性，比如名稱、ID、以及最核心的TemplateContext。TemplateContext中保存的是Form的描述XML，通過此XML描述兩類信息：

Form中所具有的Field以及Field的類型、名稱、長度、計算代碼等等，XML；
Form的格式，比如排列次序、表格定列化的過程當中，系統(tǒng)自動解析XML的內(nèi)容并將其轉換為Java Object并由此具備Object的行為特性；位等。Form作為一個ValueObject存儲在數(shù)據(jù)庫中。

FormElement，接口，表示Form中的基本元素；

FormField，動態(tài)表單的最基本元素，在myApps/OBPM中被聲明為Abstract，具體Object行為依賴于具體的SubClass實現(xiàn)；

TextField，單行文本框，繼承FormField；

SelectField，下拉選擇框，繼承FormField；

TextareaField，多行文本框，繼承FormField；

CheckBoxField，復選框，繼承FormField；

RadioBoxField，單選框，繼承FormField；

Textpart，靜態(tài)文本段，除各種Field以外的靜態(tài)文本部分，繼承FormElement；

ComponentField，自定義組件，繼承FormField；

AttachmentUploadField，附件上傳組件，繼承FormField；

ImageUploadField，圖片上傳組件，繼承FormField；

ViewDialogField，視圖組件，用于實現(xiàn)主從結構的表單，繼承FormField；

CalctextField，計算文本組件，用于實現(xiàn)需要計算的文本，繼承FormField；

IncludeField，實現(xiàn)SubForm的包含，繼承FormField；

WordField，Word組件，繼承FormField；

OcrField，為將來預留的接口，系統(tǒng)暫未實現(xiàn)；

三、表單引擎

表單引擎是為快速實施項目研發(fā)的輕量級表單設計工具。采用表單引擎工具可在不開發(fā)和新增加代碼的情況下設計出新表單樣式，同比程序開發(fā)可省掉程序員差不多70%的開發(fā)工作量，并且后期維護相對簡單，管理方便。

1. 工作原理

在了解了表單的基本機構后，進一步看看表單引擎是如何工作的。

從客戶端（Client）輸入數(shù)據(jù)（Document），比如一個excel文件，表單（Form）結合excel文件自動生成HTML，如下圖：

如何設計一個表單引擎？（如何設計一個表單引擎）

（表單結合文檔生成HTML過程）

如何設計一個表單引擎？（如何設計一個表單引擎）

（XML解析為表單對象的過程）

如何設計一個表單引擎？（如何設計一個表單引擎）

（表單轉為HTML過程）

如何設計一個表單引擎？（如何設計一個表單引擎）

（表單生成數(shù)據(jù)庫）

2. 應用場景

天翎Myapps低代碼開發(fā)平臺的表單引擎是基于Web界面上可視化編輯的表單設計系統(tǒng)，同時支持印刷模式和拖拽模式兩種設計方式，形象可見，操作方便。印刷模式可以做一些復雜的表單配置，同時還支持word表格的導入；拖拽模式：基于Vue的表單設計器，采用可視化拖拉拽的模式進行表單的設計。

如何設計一個表單引擎？（如何設計一個表單引擎）