TsgcHTMLComponent_FormBuilder: un designer visuale di moduli che gira nel browser, così gli utenti della tua applicazione progettano i propri moduli. Ciò che pubblicano è un normale TsgcHTMLComponent_Form, con le sue regole di validazione, maschere di input, campi condizionali e validazione in tempo reale, in Delphi, C++ Builder e .NET.
Collegalo a un TsgcHTMLComponent_Form e visualizzalo. Gli utenti trascinano i campi da una casella degli strumenti su una tela a 12 colonne, li configurano in un ispettore e premono Salva. OnSave ti consegna la definizione come JSON da memorizzare e, con AutoApply, il modulo collegato mostra subito il nuovo progetto.
TsgcHTMLComponent_FormBuilder, che modifica la definizione di un TsgcHTMLComponent_Form collegato
Una casella degli strumenti, una tela di progettazione, un ispettore, un'anteprima e una vista JSON, in puro JavaScript e CSS senza librerie esterne
Delphi, C++ Builder, .NET
Il builder modifica la definizione del modulo collegato. OnSave riceve il JSON da memorizzare e la pagina pubblica lo carica in un modulo proprio con LoadFromJSON. All'invio, Validate controlla i valori inviati e GetValuesJSON li restituisce come un unico oggetto JSON tipizzato.
uses
sgcHTML_Component_Form, sgcHTML_Component_FormBuilder;
// Sul modulo: un TsgcHTMLComponent_Form (Form1) e un
// TsgcHTMLComponent_FormBuilder (FormBuilder1) con Form = Form1
procedure TMainModule.FormBuilder1Save(Sender: TObject; const aJSON: string;
var aAccept: Boolean; var aErrorMessage: string);
begin
// aJSON è la definizione normalizzata, già verificata dal server
StoreDefinition('contact', aJSON); // il tuo archivio: un file, una tabella
end;
// La pagina pubblica: un modulo per richiesta, caricato dal progetto memorizzato
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;
// All'invio: validare, poi conservare i valori tipizzati
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: il designer di un modulo *@
@model FormsModel
<sgc-form-builder name="builder" form="@Model.Form"
max-fields="50" css-height="720px"
on-save="Model.SaveDefinition" />using esegece.sgcWebSockets;
// OnSave del builder: aJSON è la definizione normalizzata
public void SaveDefinition(object Sender, string aJSON, ref bool aAccept,
ref string aErrorMessage)
{
store.Save("contact", aJSON);
}
// Il modulo pubblico, 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 dei datiUn designer per chi non è sviluppatore e un modulo che si comporta esattamente come uno scritto in codice.
La casella degli strumenti raggruppa i campi in Base, Scelte, Avanzati e Layout. Trascina un campo sulla tela, oppure premi Invio per aggiungerlo dopo la selezione. La tela è una griglia a 12 colonne con l'aspetto reale dei controlli: imposta una larghezza di 3, 4, 6, 8, 9 o 12 colonne, sposta un campo trascinandolo o con Alt+Su e Alt+Giù, duplicalo o eliminalo. Annulla e Ripristina funzionano con Ctrl+Z e Ctrl+Y.
La scheda Campo imposta l'etichetta, un nome generato dall'etichetta e mantenuto univoco, il segnaposto, il testo di aiuto, il valore predefinito, obbligatorio, sola lettura, le opzioni una per riga, minimo e massimo, righe e la maschera di input. La scheda Modulo imposta il titolo, la descrizione, un layout verticale o orizzontale, il testo di invio e il pulsante di reset.
Ogni campo accetta un elenco di regole: lunghezza, intervallo, pattern, email e personalizzata, ciascuna con il proprio messaggio di errore. Sono le regole di TsgcHTMLComponent_Form, quindi il modulo pubblicato valida nel browser, con LiveValidation mentre l'utente digita, e di nuovo sul server con Validate.
Mostra un campo solo finché un campo precedente è uguale a un valore, è diverso, lo contiene, è vuoto o non vuoto, oppure è maggiore o minore di un numero. Browser e server applicano le stesse regole: un campo nascosto non viene inviato, un campo obbligatorio nascosto dalla sua condizione non fallisce mai e un campo che dipende da un campo nascosto è nascosto a sua volta.
Testo, email, password, numero, textarea, select, radio, checkbox, switch, data, ora, colore, intervallo, file e nascosto, più titolo, paragrafo e divisore per impaginare il modulo. FieldTypes stabilisce quali la casella degli strumenti offre.
Anteprima renderizza il progetto sul server come un vero modulo con l'aspetto di quello collegato, quindi validazione, maschere e condizioni funzionano e l'invio non spedisce mai nulla. La vista JSON mostra la definizione da vedere, copiare, modificare e applicare. ShowPreview e ShowJSON attivano o disattivano le viste.
Modelli contiene una riga Caption=JSON per modello e la barra degli strumenti li offre per iniziare un nuovo modulo. Nuovo modulo chiede conferma prima di scartare le modifiche non salvate, e anche uscire dalla pagina con modifiche non salvate genera un avviso.
Ogni azione funziona da tastiera. La casella degli strumenti e la tela sono listbox WAI-ARIA, e una regione live cortese annuncia i campi aggiunti, eliminati, spostati e salvati, e gli errori. Il builder segue il tema della pagina (data-bs-theme), si specchia con dir="rtl" e rispetta la riduzione del movimento.
I membri che usi più spesso.
Form è il TsgcHTMLComponent_Form in fase di progettazione. Con AutoApply (attivo di default) un salvataggio carica in esso la nuova definizione dentro Form.Lock, così una pagina che renderizza il modulo nello stesso momento non vede mai metà progetto. ReadOnly mostra il progetto e rifiuta Salva.
OnSave(Sender, aJSON, aAccept, aErrorMessage) riceve la definizione normalizzata: il JSON inviato caricato in un modulo temporaneo e riscritto. Memorizzala dove conservi i tuoi dati. Imposta aAccept su False per rifiutarla, con il tuo testo in aErrorMessage.
OnGetForm(Sender, aForm) restituisce il modulo dell'utente che ha fatto la richiesta. Viene chiamato al momento del rendering e a ogni richiesta, e il builder non libera mai il modulo che restituisci. Il builder non conserva stato tra le richieste, quindi un solo componente serve tutti gli utenti.
Il browser controlla i nomi e i limiti prima dell'invio, e il server ricontrolla ogni definizione inviata: la dimensione rispetto a MaxSize (256 KB di default), il numero di campi rispetto a MaxFields (100 di default), i tipi di campo, nomi validi e univoci, le larghezze di colonna, le regole e le condizioni. Una definizione che non passa viene rifiutata con il motivo, prima che OnSave venga eseguito.
SaveToJSON e LoadFromJSON del modulo scrivono e leggono la definizione: titolo, descrizione, layout, pulsanti e campi, con le loro regole e condizioni. Delphi e .NET la scrivono byte per byte identica, quindi un progetto salvato dall'uno si carica nell'altro. LoadFromJSON legge anche l'array di campi di LoadFieldsFromJSON.
GetJSONSchema esporta un JSON Schema 2020-12 dei dati inviati, con tipi, formati, opzioni, limiti e i campi obbligatori. GetValuesJSON(aParams) restituisce i valori inviati come un unico oggetto JSON nell'ordine dei campi: i numeri come numeri, checkbox e switch come true o false, e i campi nascosti dalla loro condizione omessi.
Il builder invia all'endpoint degli eventi dei componenti del motore HTMX, oppure a ActionURL. Senza nessuno dei due progetta comunque, e Salva invia l'evento DOM sgc-form-builder-save sul builder con il JSON nel suo detail. Con un URL l'evento segue anche un salvataggio riuscito.
In una vista Razor, il Tag Helper <sgc-form-builder> renderizza il builder, e le sue richieste di salvataggio e anteprima sono gestite dal middleware sgcHTML di UseSgcHtml. Gli eventi sono gestori C# e il modulo che modifica è la stessa classe TsgcHTMLComponent_Form.
Demos\60.HTML\01.RunTime\34.FormBuilder è sgc Forms Studio, un server sulla porta 8136 con quattro moduli che fanno anche da modelli: un'iscrizione a un evento, un sondaggio sui clienti, una candidatura di lavoro e una richiesta di supporto IT. Ogni modulo ha una pagina pubblica con validazione in tempo reale e una pagina delle risposte con una griglia, un grafico, un'esportazione in Excel e il JSON Schema. Le versioni design time, Lazarus e .NET lo replicano.
| Provalo onlineGuardalo nella demo Generatore di moduli, in esecuzione dal vivo sul server demo di eSeGeCe. | Apri | |
| Guida in lineaRiferimento API completo e guida all'uso di questo componente. | Apri | |
| Componente FormIl modulo che il builder progetta: campi, layout, regole e collegamento ai dataset. | Apri | |
| Tutti i componenti sgcHTMLEsplora la matrice completa delle funzionalità di oltre 80 componenti. | Apri | |
| Scarica la Prova GratuitaLa prova di 30 giorni include i progetti demo 60.HTML. | Apri | |
| PrezziLicenze Single, Team e Site con codice sorgente completo. | Apri |