Un componente, un'intera pagina web: presentiamo TsgcHTMLComponent_Site

6 luglio 2026 · Componenti

sgcHTML offre già agli sviluppatori Delphi, C++ Builder e .NET oltre 60 componenti lato server che generano markup Bootstrap 5 — griglie, grafici, form, chat, tutto ciò che inserisci in una pagina. Ma c'era ancora una cosa che assemblavi a mano in ogni progetto: la pagina stessa. La barra superiore. Il menu laterale. Il footer. La parte che incornicia ogni schermata. Da oggi questo codice ripetitivo ha il suo componente.

TsgcHTMLComponent_Site costruisce un'intera pagina web — header, menu di navigazione, contenuto principale e footer — da un singolo componente. Imposti un brand, aggiungi alcune voci di menu, inserisci il tuo contenuto e leggi la proprietà HTML. E poiché l'intero layout è governato da un'unica proprietà Layout, puoi passare tra sei diverse disposizioni di pagina cambiando una sola riga.

Lo scheletro era il codice ripetitivo

Guarda una qualsiasi vera applicazione web e la maggior parte dei pixel è cornice: un header con un logo e un menu utente, una barra laterale di link di navigazione, un'area contenuti, un footer. Quella cornice è la stessa in ogni pagina e, fino ad ora, ogni progetto sgcHTML la ricreava — stringhe HTML scritte a mano per la navbar, un TsgcHTMLComponent_Sidebar posizionato con CSS personalizzato, un footer incollato alla fine. Funzionava, ma era la parte che nessuno voleva scrivere due volte.

TsgcHTMLComponent_Site è quello scheletro come componente di prima classe. Compone i già esistenti TsgcHTMLComponent_NavBar e TsgcHTMLComponent_Sidebar, li avvolge nel template Bootstrap ed espone il tutto attraverso una manciata di proprietà. Ecco una pagina completa:

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;

Questa è l'intera pagina: una navbar superiore con il brand, una barra laterale sinistra costruita dal menu, il tuo contenuto al centro, un footer in basso, Bootstrap 5 caricato, responsive su mobile.

Sei layout, una proprietà

Il motivo per rendere lo scheletro un componente è che lo scheletro è esattamente ciò che vuoi ridisegnare senza toccare il tuo contenuto. Imposta Layout e lo stesso brand, menu e contenuto si riorganizzano in una pagina completamente diversa:

slTopNavSidebarLeft — il classico layout di amministrazione: barra superiore più una barra laterale sinistra fissa.
slSidebarLeft / slSidebarRight — una barra laterale in stile documentazione o app senza barra superiore, su uno dei due lati.
slTopNav — un layout marketing / portale: navigazione superiore, contenuto centrato, nessuna barra laterale.
slIconRail — una dashboard compatta con una stretta barra di sole icone.
slOffcanvas — mobile-first: il menu si nasconde dietro un hamburger e scorre verso l'interno.

Cambia una riga — oSite.Layout := slIconRail; — e l'header, il menu e il contenuto si riorganizzano. Nient'altro nel tuo codice cambia.

Preset e temi

Se preferisci scegliere un aspetto piuttosto che configurare le singole impostazioni, la proprietà Preset raggruppa un layout e un tema in un'unica assegnazione — spAdmin, spDashboard, spPortal, spDocs, spLanding o spApp. Per un controllo più preciso, il sotto-oggetto Theme porta con sé un preset di colori (stpBlue, stpViolet, stpEmerald, stpSlate, stpDark), una Mode chiara, scura o di sistema e un colore primario personalizzato opzionale.

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

Tutto incluso

L'header porta con sé i pezzi che ogni applicazione re-implementa. Attivali con un flag e il componente emette il markup, il CSS e la piccola quantità di JavaScript:

una barra laterale responsive che collassa in un menu off-canvas su schermi piccoli, automaticamente;
i menu a discesa Header.ShowThemeSwitcher e Header.ShowLanguageSwitcher;
un avatar Header.ShowUser con il nome utente e un controllo Header.ShowLogout;
un'unica collezione Menu che alimenta sia la barra laterale sia il menu mobile, così la navigazione è definita una sola volta.

L'area contenuti è ancora puro sgcHTML: AddContent accetta qualsiasi markup e AddSection avvolge una scheda titolata — così uno qualsiasi degli altri 60+ componenti (una griglia, un grafico, un form) si inserisce direttamente nella pagina.

Delphi, C++ Builder e .NET

Come il resto di sgcHTML, il componente è distribuito con un'API identica in tutti e tre i linguaggi. Le versioni Delphi e C++ Builder leggono la proprietà ereditata HTML; la versione .NET espone GetHTML(). La pagina generata è identica byte per byte. Bootstrap viene caricato da una CDN per impostazione predefinita, quindi non c'è nulla di aggiuntivo da distribuire.

Come ottenerlo

TsgcHTMLComponent_Site fa parte di sgcHTML e si installa sulla palette dei componenti con la propria icona. Consulta la pagina del componente per la guida completa, la matrice delle funzionalità per l'elenco completo dei componenti e l'aiuto online per il riferimento completo. Puoi provare tutto con la prova gratuita.

Domande, feedback o idee per un altro template di layout? Contattaci — riceverai una risposta dalle persone che hanno scritto il codice.