Tek Bir Bileşen, Eksiksiz Bir Web Sayfası: TsgcHTMLComponent_Site ile Tanışın

6 Temmuz 2026 · Bileşenler

sgcHTML, Delphi, C++ Builder ve .NET geliştiricilerine Bootstrap 5 işaretlemesi oluşturan 60'tan fazla sunucu tarafı bileşeni zaten sunuyor — ızgaralar, grafikler, formlar, sohbet, bir sayfaya bıraktığınız her şey. Ancak her projede elle bir araya getirdiğiniz hâlâ bir şey vardı: sayfanın kendisi. Üst çubuk. Yan menü. Alt bilgi. Her ekranı çerçeveleyen kısım. Bugün o basmakalıp kod kendi bileşenine kavuşuyor.

TsgcHTMLComponent_Site, tek bir bileşenden eksiksiz bir web sayfası oluşturur — başlık, gezinme menüsü, ana içerik ve alt bilgi. Bir marka belirler, birkaç menü öğesi eklersiniz, içeriğinizi bırakır ve HTML özelliğini okursunuz. Ve tüm yerleşim tek bir Layout özelliğiyle yönetildiği için, tek bir satırı değiştirerek altı farklı sayfa düzeni arasında geçiş yapabilirsiniz.

Kabuk basmakalıp koddu

Gerçek bir web uygulamasına bakın; piksellerin çoğu çerçevedir: bir logo ve kullanıcı menüsü içeren bir başlık, gezinme bağlantılarından oluşan bir kenar çubuğu, bir içerik alanı, bir alt bilgi. O çerçeve her sayfada aynıdır ve şimdiye kadar her sgcHTML projesi onu yeniden oluşturuyordu — gezinme çubuğu için elle yazılmış HTML dizeleri, özel CSS ile konumlandırılmış bir TsgcHTMLComponent_Sidebar, sona yapıştırılmış bir alt bilgi. İşe yarıyordu ama kimsenin iki kez yazmak istemediği kısımdı.

TsgcHTMLComponent_Site, o kabuğun birinci sınıf bir bileşen hâlidir. Mevcut TsgcHTMLComponent_NavBar ve TsgcHTMLComponent_Sidebar bileşenlerini bir araya getirir, onları Bootstrap şablonuyla sarar ve tüm bunları bir avuç özellik aracılığıyla açığa çıkarır. İşte eksiksiz bir sayfa:

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;

İşte bütün sayfa bu: markayı taşıyan bir üst gezinme çubuğu, menüden oluşturulmuş bir sol kenar çubuğu, ortada içeriğiniz, altta bir alt bilgi, yüklenmiş Bootstrap 5, mobilde duyarlı.

Altı yerleşim, tek bir özellik

Kabuğu bir bileşen hâline getirmenin nedeni, kabuğun tam da içeriğinize dokunmadan yeniden biçimlendirmek istediğiniz şey olmasıdır. Layout özelliğini ayarlayın ve aynı marka, menü ve içerik tamamen farklı bir sayfaya yeniden düzenlensin:

slTopNavSidebarLeft — klasik yönetim yerleşimi: üst çubuk artı sabit bir sol kenar çubuğu.
slSidebarLeft / slSidebarRight — üst çubuğu olmayan, iki taraftan birinde belge veya uygulama tarzı bir kenar çubuğu.
slTopNav — bir pazarlama / portal yerleşimi: üst gezinme, ortalanmış içerik, kenar çubuğu yok.
slIconRail — dar, yalnızca simgeden oluşan bir rayla kompakt bir gösterge paneli.
slOffcanvas — önce mobil: menü bir hamburgerin arkasına gizlenir ve içeri kayar.

Tek bir satırı değiştirin — oSite.Layout := slIconRail; — ve başlık, menü ve içerik yeniden akar. Kodunuzda başka hiçbir şey değişmez.

Ön ayarlar ve temalar

Tek tek ayarları bağlamak yerine bir görünüm seçmeyi tercih ediyorsanız, Preset özelliği bir yerleşimi ve bir temayı tek bir atamada paketler — spAdmin, spDashboard, spPortal, spDocs, spLanding veya spApp. Daha ince denetim için, Theme alt nesnesi bir renk ön ayarı (stpBlue, stpViolet, stpEmerald, stpSlate, stpDark), açık, koyu veya sistem Mode değeri ve isteğe bağlı özel bir birincil renk taşır.

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

Piller dahil

Başlık, her uygulamanın yeniden uyguladığı parçaları taşır. Bir bayrakla onları açın; bileşen işaretlemeyi, CSS'yi ve az miktardaki JavaScript'i yaysın:

küçük ekranlarda otomatik olarak bir off-canvas menüye daraltılan duyarlı bir kenar çubuğu;
Header.ShowThemeSwitcher ve Header.ShowLanguageSwitcher açılır menüleri;
kullanıcı adını içeren bir Header.ShowUser avatarı ve bir Header.ShowLogout denetimi;
hem kenar çubuğunu hem de mobil menüyü besleyen tek bir Menu koleksiyonu, böylece gezinme yalnızca bir kez tanımlanır.

İçerik alanı hâlâ saf sgcHTML'dir: AddContent herhangi bir işaretlemeyi alır ve AddSection başlıklı bir kartı sarar — böylece diğer 60'tan fazla bileşenden herhangi biri (bir ızgara, bir grafik, bir form) doğrudan sayfaya bırakılır.

Delphi, C++ Builder ve .NET

sgcHTML'nin geri kalanı gibi, bileşen de üç dilin tümünde aynı API ile gelir. Delphi ve C++ Builder sürümleri devralınan HTML özelliğini okur; .NET sürümü GetHTML() yöntemini açığa çıkarır. Oluşturulan sayfa bayt bayt aynıdır. Bootstrap varsayılan olarak bir CDN'den yüklenir, bu yüzden dağıtılacak fazladan bir şey yoktur.

Nasıl edinilir

TsgcHTMLComponent_Site, sgcHTML'nin bir parçasıdır ve kendi simgesiyle bileşen paletine kurulur. Tam kılavuz için bileşen sayfasına, eksiksiz bileşen listesi için özellik matrisine ve tam başvuru için çevrimiçi yardıma bakın. Her şeyi ücretsiz deneme ile deneyebilirsiniz.

Başka bir yerleşim şablonu için sorularınız, geri bildirimleriniz veya fikirleriniz mi var? Bize ulaşın — kodu yazan kişilerden bir yanıt alacaksınız.