TsgcHTMLComponent_FormBuilder: ein visueller Formular-Designer, der im Browser läuft, sodass die Benutzer Ihrer Anwendung ihre eigenen Formulare entwerfen. Was sie veröffentlichen, ist ein gewöhnliches TsgcHTMLComponent_Form mit seinen Validierungsregeln, Eingabemasken, bedingten Feldern und Live-Validierung, in Delphi, C++ Builder und .NET.
Binden Sie ihn an ein TsgcHTMLComponent_Form und rendern Sie ihn. Die Benutzer ziehen Felder aus einer Toolbox auf eine Zeichenfläche mit 12 Spalten, richten sie in einem Inspektor ein und klicken auf Speichern. OnSave übergibt Ihnen die Definition als JSON zum Speichern, und mit AutoApply zeigt das verknüpfte Formular das neue Design sofort an.
TsgcHTMLComponent_FormBuilder, das die Definition eines verknüpften TsgcHTMLComponent_Form bearbeitet
Eine Toolbox, eine Entwurfsfläche, ein Inspektor, eine Vorschau und eine JSON-Ansicht, in reinem JavaScript und CSS ohne externe Bibliothek
Delphi, C++ Builder, .NET
Der Builder bearbeitet die Definition des verknüpften Formulars. OnSave erhält das zu speichernde JSON, und die öffentliche Seite lädt es mit LoadFromJSON in ein eigenes Formular. Beim Absenden prüft Validate die übermittelten Werte, und GetValuesJSON liefert sie als ein einzelnes typisiertes JSON-Objekt zurück.
uses
sgcHTML_Component_Form, sgcHTML_Component_FormBuilder;
// Auf dem Formular: ein TsgcHTMLComponent_Form (Form1) und ein
// TsgcHTMLComponent_FormBuilder (FormBuilder1) mit Form = Form1
procedure TMainModule.FormBuilder1Save(Sender: TObject; const aJSON: string;
var aAccept: Boolean; var aErrorMessage: string);
begin
// aJSON ist die normalisierte Definition, bereits vom Server geprüft
StoreDefinition('contact', aJSON); // Ihr eigener Speicher: eine Datei, eine Tabelle
end;
// Die öffentliche Seite: ein Formular pro Anfrage, geladen aus dem gespeicherten Design
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;
// Beim Absenden: validieren und dann die typisierten Werte behalten
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: der Designer eines Formulars *@
@model FormsModel
<sgc-form-builder name="builder" form="@Model.Form"
max-fields="50" css-height="720px"
on-save="Model.SaveDefinition" />using esegece.sgcWebSockets;
// OnSave des Builders: aJSON ist die normalisierte Definition
public void SaveDefinition(object Sender, string aJSON, ref bool aAccept,
ref string aErrorMessage)
{
store.Save("contact", aJSON);
}
// Das öffentliche Formular, 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 der DatenEin Designer für Menschen, die keine Entwickler sind, und ein Formular, das sich genau wie eines verhält, das Sie im Code geschrieben haben.
Die Toolbox gruppiert die Felder in Grundlagen, Auswahl, Erweitert und Layout. Ziehen Sie ein Feld auf die Zeichenfläche oder drücken Sie die Eingabetaste, um es nach der Auswahl einzufügen. Die Zeichenfläche ist ein Raster mit 12 Spalten, das die echten Steuerelemente live darstellt: Legen Sie eine Breite von 3, 4, 6, 8, 9 oder 12 Spalten fest, verschieben Sie ein Feld per Ziehen oder mit Alt+Auf und Alt+Ab, duplizieren oder löschen Sie es. Rückgängig und Wiederholen funktionieren mit Strg+Z und Strg+Y.
Die Registerkarte Feld legt die Beschriftung fest, einen aus der Beschriftung erzeugten und eindeutig gehaltenen Namen, Platzhalter, Hilfetext, Standardwert, Pflichtfeld, schreibgeschützt, die Optionen eine pro Zeile, Minimum und Maximum, Zeilen und die Eingabemaske. Die Registerkarte Formular legt den Titel, die Beschreibung, ein vertikales oder horizontales Layout, den Text zum Absenden und die Schaltfläche zum Zurücksetzen fest.
Jedes Feld nimmt eine Liste von Regeln auf: Länge, Bereich, Muster, E-Mail und benutzerdefiniert, jeweils mit eigener Fehlermeldung. Es sind die Regeln von TsgcHTMLComponent_Form, daher validiert das veröffentlichte Formular im Browser, mit LiveValidation während der Eingabe, und erneut auf dem Server mit Validate.
Zeigen Sie ein Feld nur an, solange ein früheres Feld einem Wert entspricht, nicht entspricht oder ihn enthält, leer oder nicht leer ist oder größer oder kleiner als eine Zahl ist. Browser und Server wenden dieselben Regeln an: Ein verborgenes Feld wird nicht übermittelt, ein durch seine Bedingung verborgenes Pflichtfeld schlägt nie fehl, und ein Feld, das von einem verborgenen Feld abhängt, ist ebenfalls verborgen.
Text, E-Mail, Passwort, Zahl, Textarea, Select, Radio, Kontrollkästchen, Schalter, Datum, Uhrzeit, Farbe, Bereich, Datei und verborgen, dazu Überschrift, Absatz und Trennlinie zur Gestaltung des Formulars. FieldTypes legt fest, welche davon die Toolbox anbietet.
Die Vorschau rendert den Entwurf auf dem Server als echtes Formular im Look des verknüpften, sodass Validierung, Masken und Bedingungen laufen und das Absenden nie etwas übermittelt. Die JSON-Ansicht zeigt die Definition zum Ansehen, Kopieren, Bearbeiten und Anwenden. ShowPreview und ShowJSON schalten die Ansichten ein oder aus.
Vorlagen enthält pro Vorlage eine Zeile Caption=JSON, und die Symbolleiste bietet sie an, um ein neues Formular zu beginnen. Neues Formular fragt nach, bevor ungespeicherte Änderungen verworfen werden, und auch das Verlassen der Seite mit ungespeicherten Änderungen löst eine Warnung aus.
Jede Aktion funktioniert per Tastatur. Die Toolbox und die Zeichenfläche sind WAI-ARIA-Listboxen, und ein höflicher Live-Bereich meldet hinzugefügte, gelöschte, verschobene und gespeicherte Felder sowie Fehler. Der Builder folgt dem Seitenthema (data-bs-theme), spiegelt sich unter dir="rtl" und respektiert reduzierte Bewegung.
Die Member, zu denen Sie am häufigsten greifen.
Form ist das TsgcHTMLComponent_Form, das entworfen wird. Mit AutoApply (standardmäßig aktiv) lädt ein Speichern die neue Definition innerhalb von Form.Lock hinein, sodass eine Seite, die das Formular gleichzeitig rendert, nie einen halben Entwurf sieht. ReadOnly zeigt den Entwurf an und lehnt Speichern ab.
OnSave(Sender, aJSON, aAccept, aErrorMessage) erhält die normalisierte Definition: das übermittelte JSON, in ein temporäres Formular geladen und wieder zurückgeschrieben. Speichern Sie sie dort, wo Sie Ihre Daten ablegen. Setzen Sie aAccept auf False, um sie abzulehnen, mit Ihrem eigenen Text in aErrorMessage.
OnGetForm(Sender, aForm) liefert das Formular des Benutzers hinter der Anfrage. Es wird beim Rendern und bei jeder Anfrage aufgerufen, und der Builder gibt das von Ihnen zurückgegebene Formular nie frei. Der Builder behält zwischen Anfragen keinen Zustand, sodass eine Komponente alle Benutzer bedient.
Der Browser prüft die Namen und die Grenzen, bevor er sendet, und der Server prüft jede übermittelte Definition erneut: ihre Größe gegen MaxSize (standardmäßig 256 KB), die Anzahl der Felder gegen MaxFields (standardmäßig 100), die Feldtypen, gültige und eindeutige Namen, die Spaltenbreiten, die Regeln und die Bedingungen. Eine Definition, die durchfällt, wird mit Begründung abgelehnt, bevor OnSave läuft.
SaveToJSON und LoadFromJSON des Formulars schreiben und lesen die Definition: den Titel, die Beschreibung, das Layout, die Schaltflächen und die Felder mit ihren Regeln und Bedingungen. Delphi und .NET schreiben sie Byte für Byte gleich, sodass ein von einem gespeicherter Entwurf im anderen geladen wird. LoadFromJSON liest auch das Feld-Array von LoadFieldsFromJSON.
GetJSONSchema exportiert ein JSON Schema 2020-12 der übermittelten Daten, mit Typen, Formaten, Optionen, Grenzen und den Pflichtfeldern. GetValuesJSON(aParams) liefert die übermittelten Werte als ein JSON-Objekt in Feldreihenfolge: Zahlen als Zahlen, Kontrollkästchen und Schalter als true oder false, und die durch ihre Bedingung verborgenen Felder fehlen.
Der Builder sendet an den Komponentenereignis-Endpunkt der HTMX-Engine oder an ActionURL. Ohne beides entwirft er trotzdem, und Speichern löst das DOM-Ereignis sgc-form-builder-save auf dem Builder aus, mit dem JSON in seinem Detail. Mit einer URL folgt das Ereignis auch auf ein erfolgreiches Speichern.
In einer Razor-View rendert der Tag Helper <sgc-form-builder> den Builder, und seine Speicher- und Vorschauanfragen beantwortet die sgcHTML-Middleware von UseSgcHtml. Die Ereignisse sind C#-Handler, und das Formular, das er bearbeitet, ist dieselbe Klasse TsgcHTMLComponent_Form.
Demos\60.HTML\01.RunTime\34.FormBuilder ist sgc Forms Studio, ein Server auf Port 8136 mit vier Formularen, die zugleich als Vorlagen dienen: eine Veranstaltungsanmeldung, eine Kundenumfrage, eine Bewerbung und eine IT-Supportanfrage. Jedes Formular hat eine öffentliche Seite mit Live-Validierung und eine Antwortenseite mit einem Grid, einem Diagramm, einem Excel-Export und dem JSON Schema. Die Entwurfszeit-, Lazarus- und .NET-Versionen spiegeln es wider.
| Online ausprobierenSehen Sie es in der Demo Formular-Builder, live auf dem eSeGeCe-Demoserver. | Öffnen | |
| Online-HilfeVollständige API-Referenz und Verwendungshandbuch für diese Komponente. | Öffnen | |
| Form-KomponenteDas Formular, das der Builder entwirft: Felder, Layouts, Regeln und Dataset-Bindung. | Öffnen | |
| Alle sgcHTML-KomponentenDurchsuchen Sie die vollständige Funktionsmatrix von über 80 Komponenten. | Öffnen | |
| Kostenlose Testversion herunterladenDie 30-Tage-Testversion enthält die 60.HTML-Demoprojekte. | Öffnen | |
| PreiseSingle-, Team- und Site-Lizenzen mit vollständigem Quellcode. | Öffnen |