sgcWebSockets 2026.9.0 aggiunge un nuovo modo per costruire pagine sgcHTML: la Design Surface. Finora, ogni pagina veniva composta nel codice — creare i componenti, impostare le loro proprietà, leggere l'HTML risultante. Questo continua a funzionare, e resta il modo principale per costruire una pagina. Ciò che è nuovo è un secondo percorso, visivo: trascinare gli stessi componenti direttamente su un normale form VCL, disporli, regolare le loro proprietà nell'Object Inspector e generare la stessa identica pagina che altrimenti avresti scritto a mano.
Due Modi per Costruire una Pagina
L'approccio a runtime non è cambiato. Crea o trascina i componenti, imposta le loro proprietà e collega i dati in codice Pascal, C# o .NET, quindi leggi la proprietà HTML del componente:
uses
sgcHTML_Component_Grid;
var
oGrid: TsgcHTMLComponent_Grid;
begin
oGrid := TsgcHTMLComponent_Grid.Create(nil);
try
oGrid.Columns.Add.Title := 'Customer';
oGrid.Columns.Add.Title := 'Total';
oGrid.Clear;
oGrid.AddRow(['Acme Corp', '1,240.00']);
Response.Write(oGrid.HTML);
finally
oGrid.Free;
end;
end;La Design Surface aggiunge una seconda opzione per gli stessi componenti: trascinali su un form e lascia che la struttura della pagina derivi dal layout stesso del form invece che da chiamate al costruttore.
La Design Surface
La posizione e la larghezza di un componente sul form determinano la sua riga e colonna Bootstrap, e le sue proprietà pubblicate vengono regolate nell'Object Inspector invece che nel codice. Un componente TsgcHTMLDesignSurface aggiunto al form legge quel layout. Chiama sgcHTMLDesignBuildFromControls una volta, tipicamente all'avvio, per far confluire i componenti trascinati sul form nell'albero di nodi della surface, quindi leggi Surface.GetBodyHTML per renderizzarlo:
uses
sgcHTMLDesign_Surface;
procedure TfrmDashboard.Build;
begin
sgcHTMLDesignBuildFromControls(Surface, Self);
end;
function TfrmDashboard.BodyHTML: string;
begin
Surface.Invalidate;
Result := Surface.GetBodyHTML;
end;Per il markup non coperto dalla palette dei componenti, Surface.AddHTML aggiunge un nodo HTML fisso allo stesso albero, posizionato tramite la proprietà Order del nodo, oppure inserito nel body di un componente trascinato con Slot := 'Body'.
Stessi Componenti, Stesso Output
La Design Surface cambia solo il modo in cui viene espressa la struttura di una pagina, non i componenti stessi né il loro comportamento. Un componente trascinato su un form progettato è una normale istanza di componente — Grid1.LoadFromDataSet(qry) funziona esattamente come farebbe su una pagina costruita interamente nel codice. I due stili di creazione possono anche essere combinati liberamente sulla stessa pagina, ed entrambi producono componenti che compilano ed eseguono in modo identico una volta costruiti.
Quando Usare Ciascuno
La composizione a runtime resta la scelta migliore quando la struttura di una pagina è essa stessa dinamica o guidata dai dati — righe generate in loop, sezioni condizionali, contenuto che dipende da uno stato noto solo a runtime — e per un'unica fonte condivisa tra Delphi 7–13 senza dipendenza dall'IDE. La Design Surface è la scelta migliore quando si tratta di disporre visivamente una struttura di pagina perlopiù statica, vedere la forma della pagina mentre la si costruisce, e regolare le proprietà tramite l'Object Inspector invece che nel codice. Nessuna delle due comporta una differenza di capacità a runtime: scegliere l'una o l'altra è puramente una preferenza in fase di creazione.
Ancora in Crescita
La palette di componenti della Design Surface è in continua espansione, e oggi restano ancora alcune lacune. Il markup wrapper proprio di alcuni componenti, come il guscio a card di TsgcHTMLComponent_Panel, non ha ancora una proprietà per sopprimerlo. I campi di TsgcHTMLComponent_Form non applicano attualmente classi o span di colonna come può fare il markup scritto a mano. Non tutte le proprietà esistono su ogni componente fratello — UseColorClass, per esempio, esiste su Panel ma non su Login o StatCard. E TsgcHTMLComponent_Grid non espone ancora le intestazioni di colonna ordinabili come proprietà a design-time. Nulla di tutto ciò riguarda il percorso a runtime, e la palette continua a colmare queste lacune release dopo release.
Vedilo in Azione
Il modo più chiaro per vedere entrambi gli approcci fianco a fianco è la cartella Demos\60.HTML inclusa con sgcWebSockets. 01.RunTime contiene le demo originali, costruite nel codice; 02.DesignTime le contiene tutte — AdminCRUD, LiveMonitor, Portal, HTMX, Grid, Site, Components, Helpdesk, ShopAssistant, WebBroker e WebBrokerHTML, insieme alla demo ERP che ha dato inizio al modello — ricostruite interamente su form con la Design Surface. Confronta le due cartelle per la stessa demo e ottieni la stessa pagina da due stili di creazione diversi.
Aggiornamento
La Design Surface è inclusa nel pacchetto sgcHTML in sgcWebSockets 2026.9.0, nessuna migrazione necessaria per le pagine esistenti costruite a runtime. Scarica la prova gratuita per provarla, e sfoglia l'intero set di componenti nell'hub dei componenti.
Domande, feedback o serve aiuto con la migrazione? Contattaci — riceverai una risposta dalle persone che hanno scritto il codice.