Un seul composant, une page web complète : découvrez TsgcHTMLComponent_Site

6 juillet 2026 · Composants

sgcHTML offre déjà aux développeurs Delphi, C++ Builder et .NET plus de 60 composants côté serveur qui produisent du balisage Bootstrap 5 — grilles, graphiques, formulaires, chat, tout ce que vous déposez dans une page. Mais il restait une chose que vous assembliez à la main sur chaque projet : la page elle-même. La barre supérieure. Le menu latéral. Le pied de page. La partie qui encadre chaque écran. Aujourd'hui, ce code répétitif obtient son propre composant.

TsgcHTMLComponent_Site construit une page web entière — en-tête, menu de navigation, contenu principal et pied de page — à partir d'un seul composant. Vous définissez une marque, ajoutez quelques éléments de menu, déposez votre contenu et lisez la propriété HTML. Et parce que toute la mise en page est pilotée par une seule propriété Layout, vous pouvez basculer entre six agencements de page différents en changeant une seule ligne.

La structure, c'était le code répétitif

Regardez n'importe quelle application web réelle et la plupart des pixels sont de l'habillage : un en-tête avec un logo et un menu utilisateur, une barre latérale de liens de navigation, une zone de contenu, un pied de page. Cet habillage est identique sur chaque page, et jusqu'à présent chaque projet sgcHTML le recréait — des chaînes HTML écrites à la main pour la barre de navigation, un TsgcHTMLComponent_Sidebar positionné avec du CSS personnalisé, un pied de page collé à la fin. Ça fonctionnait, mais c'était la partie que personne ne voulait écrire deux fois.

TsgcHTMLComponent_Site est cette structure en tant que composant à part entière. Il compose les TsgcHTMLComponent_NavBar et TsgcHTMLComponent_Sidebar existants, les enveloppe dans le modèle Bootstrap et expose l'ensemble à travers une poignée de propriétés. Voici une page complète :

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;

Voilà la page entière : une barre de navigation supérieure avec la marque, une barre latérale gauche construite à partir du menu, votre contenu au centre, un pied de page en bas, Bootstrap 5 chargé, adapté au mobile.

Six mises en page, une seule propriété

La raison de faire de la structure un composant, c'est que la structure est justement ce que vous voulez restyliser sans toucher à votre contenu. Définissez Layout et la même marque, le même menu et le même contenu se réorganisent en une page complètement différente :

slTopNavSidebarLeft — la mise en page admin classique : barre supérieure plus une barre latérale gauche fixe.
slSidebarLeft / slSidebarRight — une barre latérale de style docs ou application sans barre supérieure, d'un côté ou de l'autre.
slTopNav — une mise en page marketing / portail : navigation supérieure, contenu centré, pas de barre latérale.
slIconRail — un tableau de bord compact avec une barre étroite composée uniquement d'icônes.
slOffcanvas — mobile d'abord : le menu se cache derrière un bouton hamburger et se déploie latéralement.

Changez une ligne — oSite.Layout := slIconRail; — et l'en-tête, le menu et le contenu se réagencent. Rien d'autre dans votre code ne change.

Préréglages et thèmes

Si vous préférez choisir un style plutôt que de configurer des réglages individuels, la propriété Preset regroupe une mise en page et un thème en une seule affectation — spAdmin, spDashboard, spPortal, spDocs, spLanding ou spApp. Pour un contrôle plus fin, le sous-objet Theme porte un préréglage de couleur (stpBlue, stpViolet, stpEmerald, stpSlate, stpDark), un Mode clair, sombre ou système, et une couleur primaire personnalisée optionnelle.

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

Tout est inclus

L'en-tête porte les éléments que chaque application réimplémente. Activez-les avec un indicateur et le composant émet le balisage, le CSS et la petite quantité de JavaScript :

une barre latérale responsive qui se replie automatiquement en un menu off-canvas sur les petits écrans ;
des menus déroulants Header.ShowThemeSwitcher et Header.ShowLanguageSwitcher ;
un avatar Header.ShowUser avec le nom de l'utilisateur, et un contrôle Header.ShowLogout ;
une seule collection Menu qui alimente à la fois la barre latérale et le menu mobile, de sorte que la navigation est définie une seule fois.

La zone de contenu reste du pur sgcHTML : AddContent accepte n'importe quel balisage, et AddSection enveloppe une carte avec titre — ainsi n'importe lequel des 60+ autres composants (une grille, un graphique, un formulaire) se dépose directement dans la page.

Delphi, C++ Builder et .NET

Comme le reste de sgcHTML, le composant est livré avec une API identique dans les trois langages. Les versions Delphi et C++ Builder lisent la propriété HTML héritée ; la version .NET expose GetHTML(). La page rendue est identique octet par octet. Bootstrap est chargé depuis un CDN par défaut, il n'y a donc rien de plus à déployer.

Comment l'obtenir

TsgcHTMLComponent_Site fait partie de sgcHTML et s'installe sur la palette de composants avec sa propre icône. Consultez la page du composant pour la présentation complète, la matrice de fonctionnalités pour la liste complète des composants, et l'aide en ligne pour la référence complète. Vous pouvez tout essayer avec la version d'essai gratuite.

Des questions, des retours ou des idées pour un autre modèle de mise en page ? Contactez-nous — vous recevrez une réponse des personnes qui ont écrit le code.