sgcWebSockets 2026.9.0 voegt een nieuwe manier toe om sgcHTML-pagina's te bouwen: de Design Surface. Tot nu toe werd elke pagina in code samengesteld: de componenten aanmaken, hun eigenschappen instellen, de resulterende HTML uitlezen. Dat werkt nog steeds en blijft de primaire manier om een pagina te bouwen. Nieuw is een tweede, visuele weg: plaats dezelfde componenten rechtstreeks op een gewoon VCL-formulier, rangschik ze, stel hun eigenschappen af in de Object Inspector en render dezelfde pagina die u anders met de hand had geschreven.
Twee manieren om een pagina te bouwen
De runtime-aanpak is niet veranderd. Maak de componenten aan of plaats ze, stel hun eigenschappen in en koppel gegevens in Pascal-, C#- of .NET-code, en lees vervolgens de HTML-eigenschap van het component uit:
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;De Design Surface voegt een tweede optie toe voor dezelfde componenten: plaats ze op een formulier en laat de structuur van de pagina voortkomen uit de eigen lay-out van het formulier in plaats van uit constructoraanroepen.
De Design Surface
De positie en breedte van een component op het formulier bepalen de Bootstrap-rij en -kolom, en de gepubliceerde eigenschappen worden afgesteld in de Object Inspector in plaats van in code. Een TsgcHTMLDesignSurface-component dat aan het formulier is toegevoegd, leest die lay-out. Roep sgcHTMLDesignBuildFromControls eenmalig aan, doorgaans bij het opstarten, om de op het formulier geplaatste componenten in de nodeboom van het surface om te zetten, en lees vervolgens Surface.GetBodyHTML uit om de pagina te renderen:
uses
sgcHTMLDesign_Surface;
procedure TfrmDashboard.Build;
begin
sgcHTMLDesignBuildFromControls(Surface, Self);
end;
function TfrmDashboard.BodyHTML: string;
begin
Surface.Invalidate;
Result := Surface.GetBodyHTML;
end;Voor opmaak die het componentenpalet niet dekt, voegt Surface.AddHTML een vaste HTML-node toe aan dezelfde boom, gepositioneerd met de Order-eigenschap van de node, of ingevoegd in de eigen body van een geplaatst component met Slot := 'Body'.
Dezelfde componenten, dezelfde output
De Design Surface verandert alleen hoe de structuur van een pagina wordt uitgedrukt, niet de componenten zelf of hun gedrag. Een component dat op een ontworpen formulier is geplaatst, is een gewone componentinstantie: Grid1.LoadFromDataSet(qry) werkt precies zoals op een pagina die volledig in code is gebouwd. De twee ontwerpstijlen kunnen ook vrij worden gemengd op dezelfde pagina, en beide leveren componenten op die na het bouwen identiek compileren en draaien.
Wanneer welke gebruiken
Runtime-samenstelling past nog steeds het best wanneer de structuur van een pagina zelf dynamisch of datagedreven is — in een lus gegenereerde rijen, voorwaardelijke secties, inhoud die afhangt van een status die pas tijdens runtime bekend is — en voor één broncode die wordt gedeeld over Delphi 7–13 zonder IDE-afhankelijkheid. De Design Surface past het best wanneer een grotendeels statische paginastructuur visueel wordt uitgelegd, waarbij u de vorm van de pagina ziet terwijl u ze bouwt, en eigenschappen afstelt via de Object Inspector in plaats van in code. Geen van beide is een verschil in runtime-mogelijkheden: de keuze tussen de twee is puur een voorkeur op ontwerptijd.
Blijft groeien
Het componentenpalet van de Design Surface breidt actief uit, en er blijven vandaag nog enkele hiaten bestaan. De eigen omhullende opmaak van sommige componenten, zoals de kaartomlijsting van TsgcHTMLComponent_Panel, heeft nog geen eigenschap om die te onderdrukken. Velden van TsgcHTMLComponent_Form passen momenteel geen kolomklassen of -breedtes toe zoals handgeschreven opmaak dat kan. Niet elke eigenschap bestaat op elk verwant component — UseColorClass bestaat bijvoorbeeld op Panel, maar niet op Login of StatCard. En TsgcHTMLComponent_Grid biedt nog geen sorteerbare kolomkoppen als ontwerptijdeigenschap. Niets hiervan raakt het runtime-pad, en het palet dicht deze hiaten met elke release verder.
In actie zien
De duidelijkste manier om beide benaderingen naast elkaar te zien, is de map Demos\60.HTML die bij sgcWebSockets wordt geleverd. 01.RunTime bevat de oorspronkelijke, in code gebouwde demo's; 02.DesignTime bevat elk daarvan — AdminCRUD, LiveMonitor, Portal, HTMX, Grid, Site, Components, Helpdesk, ShopAssistant, WebBroker en WebBrokerHTML, samen met de ERP-demo die het patroon in gang zette — volledig herbouwd op formulieren met de Design Surface. Vergelijk de twee mappen voor dezelfde demo en u krijgt dezelfde pagina vanuit twee verschillende ontwerpstijlen.
Upgraden
De Design Surface wordt geleverd als onderdeel van het sgcHTML-pack in sgcWebSockets 2026.9.0, zonder dat migratie nodig is voor bestaande, tijdens runtime gebouwde pagina's. Download de gratis proefversie om het uit te proberen, en blader door de volledige set componenten op de componentenhub.
Vragen, feedback of hulp bij migratie? Neem contact op — u krijgt antwoord van de mensen die de code hebben geschreven.