sgcHTML bietet Delphi-, C++ Builder- und .NET-Entwicklern bereits über 60 serverseitige Komponenten, die Bootstrap-5-Markup erzeugen — Grids, Diagramme, Formulare, Chat, alles, was Sie in eine Seite einbauen. Aber eine Sache mussten Sie in jedem Projekt noch von Hand zusammensetzen: die Seite selbst. Die obere Leiste. Das Seitenmenü. Die Fußzeile. Der Teil, der jeden Bildschirm einrahmt. Heute erhält dieser Standardcode seine eigene Komponente.
TsgcHTMLComponent_Site erstellt eine komplette Webseite — Kopfzeile, Navigationsmenü, Hauptinhalt und Fußzeile — aus einer einzigen Komponente. Sie legen eine Marke fest, fügen ein paar Menüpunkte hinzu, setzen Ihren Inhalt ein und lesen die HTML-Eigenschaft aus. Und weil das gesamte Layout von einer einzigen Layout-Eigenschaft gesteuert wird, können Sie durch das Ändern einer einzigen Zeile zwischen sechs verschiedenen Seitenanordnungen wechseln.
Das Grundgerüst war der Standardcode
Betrachten Sie eine beliebige echte Webanwendung, und die meisten Pixel sind Rahmenwerk: eine Kopfzeile mit Logo und Benutzermenü, eine Seitenleiste mit Navigationslinks, ein Inhaltsbereich, eine Fußzeile. Dieses Rahmenwerk ist auf jeder Seite gleich, und bisher hat jedes sgcHTML-Projekt es neu erstellt — handgeschriebene HTML-Strings für die Navbar, eine TsgcHTMLComponent_Sidebar, die mit eigenem CSS positioniert wird, eine am Ende angeklebte Fußzeile. Es funktionierte, aber es war der Teil, den niemand zweimal schreiben wollte.
TsgcHTMLComponent_Site ist dieses Grundgerüst als vollwertige Komponente. Sie kombiniert die vorhandenen TsgcHTMLComponent_NavBar und TsgcHTMLComponent_Sidebar, umschließt sie mit der Bootstrap-Vorlage und stellt das Ganze über eine Handvoll Eigenschaften bereit. Hier ist eine komplette Seite:
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;Das ist die gesamte Seite: eine obere Navbar mit der Marke, eine linke Seitenleiste aus dem Menü, Ihr Inhalt in der Mitte, eine Fußzeile unten, Bootstrap 5 geladen, responsiv auf Mobilgeräten.
Sechs Layouts, eine Eigenschaft
Der Grund, das Grundgerüst zu einer Komponente zu machen, ist, dass das Grundgerüst genau das ist, was Sie umgestalten möchten, ohne Ihren Inhalt anzurühren. Setzen Sie Layout, und dieselbe Marke, dasselbe Menü und derselbe Inhalt ordnen sich zu einer völlig anderen Seite an:
slTopNavSidebarLeft— das klassische Admin-Layout: obere Leiste plus feste linke Seitenleiste.slSidebarLeft/slSidebarRight— eine Seitenleiste im Dokumentations- oder App-Stil ohne obere Leiste, auf beiden Seiten.slTopNav— ein Marketing- / Portal-Layout: obere Navigation, zentrierter Inhalt, keine Seitenleiste.slIconRail— ein kompaktes Dashboard mit einer schmalen, reinen Symbolleiste.slOffcanvas— Mobile-First: Das Menü verbirgt sich hinter einem Hamburger-Symbol und schiebt sich ein.
Ändern Sie eine Zeile — oSite.Layout := slIconRail; — und Kopfzeile, Menü und Inhalt fließen neu um. Nichts anderes in Ihrem Code ändert sich.
Presets und Themes
Wenn Sie lieber einen Look auswählen, als einzelne Einstellungen zu verdrahten, bündelt die Preset-Eigenschaft ein Layout und ein Theme in einer einzigen Zuweisung — spAdmin, spDashboard, spPortal, spDocs, spLanding oder spApp. Für feinere Kontrolle trägt das Theme-Unterobjekt ein Farb-Preset (stpBlue, stpViolet, stpEmerald, stpSlate, stpDark), einen Mode für hell, dunkel oder System und eine optionale benutzerdefinierte Primärfarbe.
oSite.Preset := spDashboard; // icon rail + violet + dark
oSite.Theme.Mode := stmSystem; // follow the OS colour scheme
oSite.Theme.Primary := '#0057B8'; // or override the accent directlyAlles inklusive
Die Kopfzeile enthält die Bausteine, die jede Anwendung neu implementiert. Schalten Sie sie mit einem Flag ein, und die Komponente gibt das Markup, das CSS und die kleine Menge JavaScript aus:
- eine responsive Seitenleiste, die auf kleinen Bildschirmen automatisch zu einem Off-Canvas-Menü zusammenklappt;
Header.ShowThemeSwitcher- undHeader.ShowLanguageSwitcher-Dropdowns;- ein
Header.ShowUser-Avatar mit dem Benutzernamen und einHeader.ShowLogout-Steuerelement; - eine einzige
Menu-Sammlung, die sowohl die Seitenleiste als auch das mobile Menü speist, sodass die Navigation nur einmal definiert wird.
Der Inhaltsbereich ist weiterhin reines sgcHTML: AddContent nimmt beliebiges Markup entgegen, und AddSection umschließt eine Karte mit Titel — sodass sich jede der über 60 anderen Komponenten (ein Grid, ein Diagramm, ein Formular) direkt in die Seite einfügen lässt.
Delphi, C++ Builder und .NET
Wie der Rest von sgcHTML wird die Komponente mit einer identischen API in allen drei Sprachen geliefert. Die Delphi- und C++ Builder-Versionen lesen die geerbte HTML-Eigenschaft; die .NET-Version stellt GetHTML() bereit. Die gerenderte Seite ist Byte für Byte identisch. Bootstrap wird standardmäßig von einem CDN geladen, sodass nichts zusätzlich bereitgestellt werden muss.
So erhalten Sie es
TsgcHTMLComponent_Site ist Teil von sgcHTML und wird mit einem eigenen Symbol in der Komponentenpalette installiert. Die Komponentenseite bietet die vollständige Anleitung, die Funktionsmatrix die komplette Komponentenliste und die Online-Hilfe die vollständige Referenz. Mit der kostenlosen Testversion können Sie alles ausprobieren.
Fragen, Feedback oder Ideen für eine weitere Layout-Vorlage? Nehmen Sie Kontakt auf — Sie erhalten eine Antwort von den Menschen, die den Code geschrieben haben.