Jeden komponent, cała strona internetowa: przedstawiamy TsgcHTMLComponent_Site

6 lipca 2026 · Komponenty

sgcHTML już teraz daje programistom Delphi, C++ Builder i .NET ponad 60 komponentów serwerowych, które renderują znaczniki Bootstrap 5 — siatki, wykresy, formularze, czat, wszystko, co umieszczasz na stronie. Ale wciąż była jedna rzecz, którą składałeś ręcznie w każdym projekcie: sama strona. Górny pasek. Menu boczne. Stopka. Element, który obramowuje każdy ekran. Dziś ten szablonowy kod zyskuje własny komponent.

TsgcHTMLComponent_Site tworzy całą stronę internetową — nagłówek, menu nawigacyjne, główną treść i stopkę — z jednego komponentu. Ustawiasz markę, dodajesz kilka pozycji menu, umieszczasz swoją treść i odczytujesz właściwość HTML. A ponieważ cały układ jest sterowany jedną właściwością Layout, możesz przełączać się między sześcioma różnymi rozmieszczeniami strony, zmieniając pojedynczy wiersz.

Powłoka była szablonowym kodem

Spójrz na dowolną rzeczywistą aplikację internetową, a większość pikseli to elementy interfejsu: nagłówek z logo i menu użytkownika, pasek boczny z odnośnikami nawigacyjnymi, obszar treści, stopka. Te elementy są takie same na każdej stronie i do tej pory każdy projekt sgcHTML tworzył je od nowa — ręcznie pisane ciągi HTML dla paska nawigacyjnego, TsgcHTMLComponent_Sidebar pozycjonowany za pomocą własnego CSS, stopka doklejona na końcu. Działało to, ale była to część, której nikt nie chciał pisać dwa razy.

TsgcHTMLComponent_Site to ta powłoka jako pełnoprawny komponent. Łączy istniejące TsgcHTMLComponent_NavBar i TsgcHTMLComponent_Sidebar, opakowuje je w szablon Bootstrap i udostępnia całość przez garść właściwości. Oto kompletna strona:

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;

To cała strona: górny pasek nawigacyjny z marką, lewy pasek boczny zbudowany z menu, twoja treść pośrodku, stopka na dole, załadowany Bootstrap 5, responsywność na urządzeniach mobilnych.

Sześć układów, jedna właściwość

Powodem, dla którego warto uczynić powłokę komponentem, jest to, że powłoka to dokładnie ta rzecz, której styl chcesz zmienić bez dotykania treści. Ustaw Layout, a ta sama marka, menu i treść zostaną przearanżowane w zupełnie inną stronę:

slTopNavSidebarLeft — klasyczny układ administracyjny: górny pasek plus stały lewy pasek boczny.
slSidebarLeft / slSidebarRight — pasek boczny w stylu dokumentacji lub aplikacji, bez górnego paska, po dowolnej stronie.
slTopNav — układ marketingowy / portalowy: górna nawigacja, wyśrodkowana treść, brak paska bocznego.
slIconRail — kompaktowy pulpit z wąskim panelem zawierającym tylko ikony.
slOffcanvas — podejście mobile-first: menu chowa się za przyciskiem hamburger i wysuwa się.

Zmień jeden wiersz — oSite.Layout := slIconRail; — a nagłówek, menu i treść przepływają na nowo. Nic więcej w twoim kodzie się nie zmienia.

Ustawienia wstępne i motywy

Jeśli wolisz wybrać wygląd niż konfigurować poszczególne ustawienia, właściwość Preset łączy układ i motyw w jednym przypisaniu — spAdmin, spDashboard, spPortal, spDocs, spLanding lub spApp. Dla dokładniejszej kontroli podobiekt Theme zawiera ustawienie wstępne koloru (stpBlue, stpViolet, stpEmerald, stpSlate, stpDark), Mode jasny, ciemny lub systemowy oraz opcjonalny niestandardowy kolor podstawowy.

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

Wszystko w zestawie

Nagłówek zawiera elementy, które każda aplikacja implementuje na nowo. Włącz je flagą, a komponent wygeneruje znaczniki, CSS i niewielką ilość kodu JavaScript:

responsywny pasek boczny, który automatycznie zwija się do menu off-canvas na małych ekranach;
rozwijane menu Header.ShowThemeSwitcher i Header.ShowLanguageSwitcher;
awatar Header.ShowUser z nazwą użytkownika oraz element sterujący Header.ShowLogout;
pojedyncza kolekcja Menu, która zasila zarówno pasek boczny, jak i menu mobilne, dzięki czemu nawigacja jest zdefiniowana raz.

Obszar treści to nadal czysty sgcHTML: AddContent przyjmuje dowolne znaczniki, a AddSection opakowuje kartę z tytułem — więc dowolny z pozostałych 60+ komponentów (siatka, wykres, formularz) trafia prosto na stronę.

Delphi, C++ Builder i .NET

Podobnie jak reszta sgcHTML, komponent jest dostarczany z identycznym API we wszystkich trzech językach. Wersje Delphi i C++ Builder odczytują odziedziczoną właściwość HTML; wersja .NET udostępnia GetHTML(). Wyrenderowana strona jest identyczna co do bajta. Bootstrap jest domyślnie ładowany z CDN, więc nie ma nic dodatkowego do wdrożenia.

Jak to zdobyć

TsgcHTMLComponent_Site jest częścią sgcHTML i instaluje się na palecie komponentów z własną ikoną. Zobacz stronę komponentu, aby zapoznać się z pełnym przewodnikiem, macierz funkcji, aby zobaczyć kompletną listę komponentów, oraz pomoc online, aby uzyskać pełny opis. Możesz wypróbować wszystko dzięki bezpłatnej wersji próbnej.

Pytania, uwagi lub pomysły na kolejny szablon układu? Skontaktuj się z nami — otrzymasz odpowiedź od osób, które napisały ten kod.