Form Builder
TsgcHTMLComponent_FormBuilder：一个在浏览器中运行的可视化表单设计器，让应用程序的用户自行设计表单。他们发布的是普通的 TsgcHTMLComponent_Form，带有验证规则、输入掩码、条件字段和实时验证，适用于 Delphi、C++ Builder 和 .NET。
TsgcHTMLComponent_FormBuilder：一个在浏览器中运行的可视化表单设计器，让应用程序的用户自行设计表单。他们发布的是普通的 TsgcHTMLComponent_Form，带有验证规则、输入掩码、条件字段和实时验证，适用于 Delphi、C++ Builder 和 .NET。
将其链接到 TsgcHTMLComponent_Form 并进行渲染。用户从工具箱把字段拖到 12 列画布上，在检查器中设置，然后按 保存。OnSave 以 JSON 形式交给您要保存的定义，使用 AutoApply 时，链接的表单会立即显示新设计。
TsgcHTMLComponent_FormBuilder，用于编辑所链接的 TsgcHTMLComponent_Form 的定义
工具箱、设计画布、检查器、预览和 JSON 视图，使用纯 JavaScript 和 CSS，不依赖任何外部库
Delphi, C++ Builder, .NET
构建器编辑所链接表单的定义。OnSave 接收要保存的 JSON，公开页面则用 LoadFromJSON 把它加载到自己的表单中。提交时，Validate 检查提交的值，GetValuesJSON 将其作为一个带类型的 JSON 对象返回。
uses
sgcHTML_Component_Form, sgcHTML_Component_FormBuilder;
// 在窗体上放置一个 TsgcHTMLComponent_Form (Form1) 和
// 一个 TsgcHTMLComponent_FormBuilder (FormBuilder1)，并设置 Form = Form1
procedure TMainModule.FormBuilder1Save(Sender: TObject; const aJSON: string;
var aAccept: Boolean; var aErrorMessage: string);
begin
// aJSON 是已规范化的定义，服务器已完成检查
StoreDefinition('contact', aJSON); // 您自己的存储：文件、表等
end;
// 公开页面：每个请求一个表单，从已保存的设计加载
function TMainModule.ContactPage: string;
var
oForm: TsgcHTMLComponent_Form;
begin
oForm := TsgcHTMLComponent_Form.Create(nil);
try
oForm.Action := '/f/contact';
oForm.LoadFromJSON(ReadDefinition('contact'));
Result := oForm.HTML;
finally
oForm.Free;
end;
end;
// 提交时：先验证，然后保存带类型的值
function TMainModule.ContactPost(const aParams: TStrings): string;
var
oForm: TsgcHTMLComponent_Form;
oErrors: TStringList;
begin
oForm := TsgcHTMLComponent_Form.Create(nil);
oErrors := TStringList.Create;
try
oForm.LoadFromJSON(ReadDefinition('contact'));
if oForm.Validate(aParams, oErrors) then
begin
StoreResponse('contact', oForm.GetValuesJSON(aParams));
Result := ThankYouPage;
end
else
Result := oForm.GetValidationResponse(oErrors);
finally
oErrors.Free;
oForm.Free;
end;
end;@* Views/Forms/Builder.cshtml：单个表单的设计器 *@
@model FormsModel
<sgc-form-builder name="builder" form="@Model.Form"
max-fields="50" css-height="720px"
on-save="Model.SaveDefinition" />using esegece.sgcWebSockets;
// 构建器的 OnSave：aJSON 是已规范化的定义
public void SaveDefinition(object Sender, string aJSON, ref bool aAccept,
ref string aErrorMessage)
{
store.Save("contact", aJSON);
}
// 公开表单，POST /f/contact
var form = new TsgcHTMLComponent_Form();
form.Action = "/f/contact";
form.LoadFromJSON(store.Load("contact"));
var fields = Request.Form.Select(f => f.Key + "=" + f.Value).ToList();
var errors = new List<string>();
if (form.Validate(fields, errors))
responses.Add("contact", form.GetValuesJSON(fields));
string schema = form.GetJSONSchema(); // 数据的 JSON Schema 2020-12为非开发人员准备的设计器，以及与手写代码完全一致的表单。
工具箱把字段分为基础、选择、高级和布局。将字段拖到画布上，或按 Enter 键把它添加到所选项之后。画布是一个 12 列网格，实时呈现真实控件的外观：可将宽度设为 3、4、6、8、9 或 12 列，通过拖动或 Alt+上箭头和 Alt+下箭头移动字段，也可以复制或删除。撤销和重做可用 Ctrl+Z 和 Ctrl+Y 操作。
“字段”选项卡用于设置标签、由标签生成并保持唯一的名称、占位符、帮助文本、默认值、必填、只读、每行一个的选项、最小值和最大值、行数以及输入掩码。“表单”选项卡用于设置标题、说明、纵向或横向布局、提交按钮文本和重置按钮。
每个字段都可以设置一组规则：长度、范围、模式、电子邮件和自定义，每条规则都有各自的错误消息。它们就是 TsgcHTMLComponent_Form 的规则，因此发布的表单会在浏览器中于用户输入时通过 LiveValidation 进行验证，并在服务器上再通过 Validate 验证一次。
仅当前面的某个字段等于、不等于或包含某个值、为空或不为空、大于或小于某个数字时，才显示该字段。浏览器和服务器应用相同的规则：隐藏的字段不会被提交，因条件而隐藏的必填字段永远不会验证失败，依赖于隐藏字段的字段也会被隐藏。
文本、电子邮件、密码、数字、多行文本、选择、单选、复选框、开关、日期、时间、颜色、范围、文件和隐藏字段，另有标题、段落和分隔线用于排版表单。FieldTypes 决定工具箱提供其中的哪些类型。
预览会在服务器上把设计渲染成一个外观与所链接表单一致的真实表单，因此其验证、掩码和条件都会运行，而提交它永远不会真正发送数据。JSON 视图用于查看、复制、编辑和应用定义。ShowPreview 和 ShowJSON 用于打开或关闭这些视图。
模板 为每个模板保存一行 Caption=JSON，工具栏会提供这些模板，用于开始新表单。新建表单在丢弃未保存的更改之前会先询问，带着未保存的更改离开页面时也会提醒。
所有操作都可以通过键盘完成。工具箱和画布是 WAI-ARIA 列表框，一个 polite 实时区域会播报字段的添加、删除、移动、保存以及错误。构建器遵循页面主题（data-bs-theme），在 dir="rtl" 下会镜像显示，并遵守减少动态效果的设置。
最常用到的成员。
Form 是正在设计的 TsgcHTMLComponent_Form。使用 AutoApply（默认开启）时，保存会在 Form.Lock 内把新定义加载到其中，因此同时渲染该表单的页面永远不会看到只设计了一半的内容。ReadOnly 显示设计并拒绝保存。
OnSave(Sender, aJSON, aAccept, aErrorMessage) 接收规范化后的定义：即把提交的 JSON 加载到一个临时表单后再写回的结果。请将其存放在您保存数据的地方。将 aAccept 设为 False 即可拒绝，并可在 aErrorMessage 中给出您自己的文本。
OnGetForm(Sender, aForm) 返回发出请求的用户的表单。它在渲染时以及每次请求时被调用，构建器不会释放您返回的表单。构建器在请求之间不保留任何状态，因此一个组件即可为所有用户服务。
浏览器在提交前会检查名称和限制，服务器则会再次检查每个提交的定义：大小对照 MaxSize（默认 256 KB），字段数量对照 MaxFields（默认 100），此外还有字段类型、有效且唯一的名称、列宽、规则和条件。未通过检查的定义会在 OnSave 运行之前连同原因一起被拒绝。
表单上的 SaveToJSON 和 LoadFromJSON 负责写出和读取定义：标题、说明、布局、按钮和字段，以及它们的规则和条件。Delphi 与 .NET 写出的内容逐字节相同，因此一方保存的设计可以在另一方加载。LoadFromJSON 也能读取 LoadFieldsFromJSON 的字段数组。
GetJSONSchema 会导出所提交数据的 JSON Schema 2020-12，包含类型、格式、选项、限制和必填字段。GetValuesJSON(aParams) 将提交的值按字段顺序作为一个 JSON 对象返回：数字保持为数字，复选框和开关为 true 或 false，因条件而隐藏的字段则不包含在内。
构建器会提交到 HTMX 引擎的组件事件端点，或提交到 ActionURL。两者都没有时仍可设计，此时保存会在构建器上触发 DOM 事件 sgc-form-builder-save，并在其 detail 中携带 JSON。设置了 URL 时，该事件也会在保存成功后触发。
在 Razor 视图中，<sgc-form-builder> Tag Helper 负责渲染构建器，其保存和预览请求由 UseSgcHtml 的 sgcHTML 中间件响应。事件是 C# 处理程序，所编辑的表单仍是同一个 TsgcHTMLComponent_Form 类。
Demos\60.HTML\01.RunTime\34.FormBuilder 是 sgc Forms Studio，一个运行在 8136 端口的服务器，包含四个同时可作为模板的表单：活动报名、客户调查、求职申请和 IT 支持请求。每个表单都有一个带实时验证的公开页面，以及一个带有表格、图表、Excel 导出和 JSON Schema 的回复页面。设计时、Lazarus 和 .NET 版本与之一致。