Eén component, een hele webpagina: maak kennis met TsgcHTMLComponent_Site

6 juli 2026 · Componenten

sgcHTML geeft Delphi-, C++ Builder- en .NET-ontwikkelaars al 60+ serverside componenten die Bootstrap 5-markup renderen — grids, grafieken, formulieren, chat, alles wat je op een pagina zet. Maar er was nog steeds één ding dat je bij elk project met de hand in elkaar zette: de pagina zelf. De bovenbalk. Het zijmenu. De footer. Het stuk dat elk scherm omkadert. Vandaag krijgt die standaardcode zijn eigen component.

TsgcHTMLComponent_Site bouwt een complete webpagina — header, navigatiemenu, hoofdinhoud en footer — uit één enkele component. Je stelt een merk in, voegt een paar menu-items toe, plaatst je inhoud en leest de HTML-eigenschap uit. En omdat de hele lay-out wordt aangestuurd door één Layout-eigenschap, kun je tussen zes verschillende pagina-indelingen wisselen door één regel te veranderen.

De schil was de standaardcode

Kijk naar een willekeurige echte webapplicatie en de meeste pixels zijn chrome: een header met een logo en een gebruikersmenu, een zijbalk met navigatielinks, een inhoudsgebied, een footer. Die chrome is op elke pagina hetzelfde, en tot nu toe bouwde elk sgcHTML-project die opnieuw — met de hand geschreven HTML-strings voor de navbar, een TsgcHTMLComponent_Sidebar gepositioneerd met eigen CSS, een footer die er aan het eind aan werd geplakt. Het werkte, maar het was het stuk dat niemand tweemaal wilde schrijven.

TsgcHTMLComponent_Site is die schil als volwaardige component. Het stelt de bestaande TsgcHTMLComponent_NavBar en TsgcHTMLComponent_Sidebar samen, verpakt ze in het Bootstrap-sjabloon en ontsluit het geheel via een handvol eigenschappen. Hier is een complete pagina:

uses
  sgcHTML_Component_Site;

var
  oSite: TsgcHTMLComponent_Site;
begin
  oSite := TsgcHTMLComponent_Site.Create(nil);
  try
    oSite.Title       := 'Acme Admin';
    oSite.Layout      := slTopNavSidebarLeft;
    oSite.Theme.Preset := stpBlue;

    oSite.Brand.Text  := 'Acme';
    oSite.Brand.Href  := '/';

    // one menu drives the sidebar (and the mobile off-canvas)
    oSite.AddMenu('Dashboard', '/',          'bi-speedometer2').Active := True;
    oSite.AddMenu('Customers', '/customers',  'bi-people');
    oSite.AddMenu('Invoices',  '/invoices',   'bi-receipt');

    oSite.AddContent('<h1 class="h3">Welcome back</h1>');
    oSite.Footer.Text := '(c) 2026 Acme';

    Response := oSite.HTML;   // a complete <!DOCTYPE html> page
  finally
    oSite.Free;
  end;
end;

Dat is de hele pagina: een bovenste navbar met het merk, een linker zijbalk gebouwd uit het menu, jouw inhoud in het midden, een footer onderaan, Bootstrap 5 geladen, responsief op mobiel.

Zes lay-outs, één eigenschap

De reden om van de schil een component te maken, is dat de schil precies het ding is dat je wilt herstijlen zonder je inhoud aan te raken. Stel Layout in en hetzelfde merk, menu en dezelfde inhoud herschikken zich tot een volledig andere pagina:

slTopNavSidebarLeft — de klassieke admin-lay-out: bovenbalk plus een vaste linker zijbalk.
slSidebarLeft / slSidebarRight — een docs- of app-achtige zijbalk zonder bovenbalk, aan weerszijden.
slTopNav — een marketing- / portal-lay-out: bovenste navigatie, gecentreerde inhoud, geen zijbalk.
slIconRail — een compact dashboard met een smalle rail met alleen pictogrammen.
slOffcanvas — mobile-first: het menu verbergt zich achter een hamburger en schuift in.

Verander één regel — oSite.Layout := slIconRail; — en de header, het menu en de inhoud herschikken zich. Verder verandert er niets in je code.

Presets en thema's

Als je liever een look kiest dan afzonderlijke instellingen te bekabelen, bundelt de Preset-eigenschap een lay-out en een thema in één toewijzing — spAdmin, spDashboard, spPortal, spDocs, spLanding of spApp. Voor fijnere controle draagt het Theme-subobject een kleurpreset (stpBlue, stpViolet, stpEmerald, stpSlate, stpDark), een Mode van licht, donker of systeem, en een optionele aangepaste primaire kleur.

oSite.Preset      := spDashboard;   // icon rail + violet + dark
oSite.Theme.Mode  := stmSystem;     // follow the OS colour scheme
oSite.Theme.Primary := '#0057B8';   // or override the accent directly

Batterijen inbegrepen

De header draagt de onderdelen die elke applicatie opnieuw implementeert. Zet ze aan met een vlag en de component genereert de markup, de CSS en de kleine hoeveelheid JavaScript:

een responsieve zijbalk die op kleine schermen automatisch inklapt tot een off-canvas menu;
Header.ShowThemeSwitcher- en Header.ShowLanguageSwitcher-dropdowns;
een Header.ShowUser-avatar met de gebruikersnaam, en een Header.ShowLogout-besturingselement;
één enkele Menu-collectie die zowel de zijbalk als het mobiele menu voedt, zodat navigatie één keer wordt gedefinieerd.

Het inhoudsgebied is nog steeds pure sgcHTML: AddContent neemt willekeurige markup aan, en AddSection verpakt een kaart met titel — zodat elk van de andere 60+ componenten (een grid, een grafiek, een formulier) rechtstreeks in de pagina valt.

Delphi, C++ Builder en .NET

Net als de rest van sgcHTML wordt de component geleverd met een identieke API in alle drie de talen. De Delphi- en C++ Builder-versies lezen de overgeërfde HTML-eigenschap; de .NET-versie ontsluit GetHTML(). De gerenderde pagina is byte-voor-byte hetzelfde. Bootstrap wordt standaard vanaf een CDN geladen, dus er is niets extra's om te deployen.

Waar je het krijgt

TsgcHTMLComponent_Site maakt deel uit van sgcHTML en installeert zich met een eigen pictogram op het componentenpalet. Zie de componentpagina voor de volledige uitleg, de functiematrix voor de complete componentlijst, en de online help voor de volledige referentie. Je kunt alles uitproberen met de gratis proefversie.

Vragen, feedback of ideeën voor nog een lay-outsjabloon? Neem contact op — je krijgt antwoord van de mensen die de code hebben geschreven.