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;
// 公開ページ: リクエストごとに 1 つのフォームを、保存されたデザインから読み込みます
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: 1 つのフォームのデザイナー *@
@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 で動作します。
「フィールド」タブでは、ラベル、ラベルから生成され一意に保たれる名前、プレースホルダー、ヘルプテキスト、既定値、必須、読み取り専用、1 行に 1 つの選択肢、最小値と最大値、行数、入力マスクを設定します。「フォーム」タブでは、タイトル、説明、縦または横のレイアウト、送信ボタンのテキスト、リセットボタンを設定します。
各フィールドにはルールの一覧を設定できます。長さ、範囲、パターン、メール、カスタムがあり、それぞれ独自のエラーメッセージを持ちます。これらは TsgcHTMLComponent_Form のルールそのものなので、公開されたフォームはブラウザー上で、ユーザーの入力中は LiveValidation で検証され、サーバー上でも Validate で再び検証されます。
前にあるフィールドが、ある値と等しい、等しくない、含む、空である、空でない、ある数値より大きい、または小さい場合にだけ、フィールドを表示します。ブラウザーとサーバーは同じルールを適用します。非表示のフィールドは送信されず、条件で非表示になった必須フィールドが失敗することはなく、非表示のフィールドに依存するフィールドも非表示になります。
テキスト、メール、パスワード、数値、テキストエリア、セレクト、ラジオ、チェックボックス、スイッチ、日付、時刻、色、範囲、ファイル、非表示に加え、フォームのレイアウトを整える見出し、段落、区切り線があります。FieldTypes で、ツールボックスに表示するものを指定します。
「プレビュー」は、リンクされたフォームと同じ見た目の実際のフォームとしてデザインをサーバー側でレンダリングするので、検証、マスク、条件が動作し、送信しても実際には何も送られません。JSON ビューでは定義を表示、コピー、編集、適用できます。ShowPreview と ShowJSON で、各ビューのオンとオフを切り替えます。
テンプレート にはテンプレートごとに Caption=JSON の 1 行を記述し、ツールバーから新しいフォームの出発点として選べます。「新規フォーム」は、未保存の変更を破棄する前に確認し、未保存の変更があるままページを離れる場合にも警告します。
すべての操作をキーボードで行えます。ツールボックスとキャンバスは WAI-ARIA のリストボックスで、ポライトなライブリージョンがフィールドの追加、削除、移動、保存とエラーを通知します。ビルダーはページのテーマ (data-bs-theme) に従い、dir="rtl" では左右反転し、動きの軽減設定を尊重します。
最もよく使うメンバーです。
Form は設計対象の TsgcHTMLComponent_Form です。AutoApply (既定でオン) を使うと、保存時に Form.Lock の中で新しい定義がそれに読み込まれるため、同時にそのフォームをレンダリングしているページが中途半端なデザインを目にすることはありません。ReadOnly はデザインを表示し、「保存」を拒否します。
OnSave(Sender, aJSON, aAccept, aErrorMessage) は正規化された定義を受け取ります。送信された JSON を一時的なフォームに読み込んで書き戻したものです。データを保管している場所に保存してください。aAccept を False にすると拒否でき、aErrorMessage に独自のメッセージを設定できます。
OnGetForm(Sender, aForm) は、リクエストを送ったユーザーのフォームを返します。レンダリング時とすべてのリクエストで呼ばれ、ビルダーが返されたフォームを解放することはありません。ビルダーはリクエスト間で状態を保持しないため、1 つのコンポーネントがすべてのユーザーに対応します。
ブラウザーは送信前に名前と上限をチェックし、サーバーは送信されたすべての定義を再度チェックします。サイズは 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 サポート依頼の 4 つのフォームを備え、これらはテンプレートも兼ねています。各フォームには、リアルタイム検証付きの公開ページと、グリッド、グラフ、Excel エクスポート、JSON Schema を備えた回答ページがあります。デザイン時、Lazarus、.NET の各バージョンも同じ内容です。
| オンラインで試すeSeGeCe デモサーバーでライブ動作する フォームビルダー デモをご覧ください。 | 開く | |
| オンラインヘルプこのコンポーネントの完全な API リファレンスと使い方ガイドです。 | 開く | |
| Form コンポーネントビルダーが設計するフォームです。フィールド、レイアウト、ルール、データセットバインディングを備えています。 | 開く | |
| すべての sgcHTML コンポーネント80 以上のコンポーネントの機能マトリックスをすべてご覧いただけます。 | 開く | |
| 無料体験版のダウンロード30 日間の体験版には 60.HTML のデモプロジェクトが含まれます。 | 開く | |
| 価格完全なソースコード付きの Single、Team、Site ライセンス。 | 開く |