Un componente, una página web completa: presentamos TsgcHTMLComponent_Site

6 de julio de 2026 · Componentes

sgcHTML ya ofrece a los desarrolladores de Delphi, C++ Builder y .NET más de 60 componentes del lado del servidor que renderizan marcado Bootstrap 5 — rejillas, gráficos, formularios, chat, todo lo que colocas en una página. Pero todavía quedaba una cosa que ensamblabas a mano en cada proyecto: la página en sí. La barra superior. El menú lateral. El pie de página. La parte que enmarca cada pantalla. Hoy ese código repetitivo obtiene su propio componente.

TsgcHTMLComponent_Site construye una página web completa — cabecera, menú de navegación, contenido principal y pie de página — desde un único componente. Estableces una marca, añades unos cuantos elementos de menú, colocas tu contenido y lees la propiedad HTML. Y como todo el diseño está gobernado por una única propiedad Layout, puedes cambiar entre seis disposiciones de página diferentes modificando una sola línea.

El armazón era el código repetitivo

Observa cualquier aplicación web real y la mayoría de los píxeles son elementos de estructura: una cabecera con un logotipo y un menú de usuario, una barra lateral de enlaces de navegación, un área de contenido, un pie de página. Esa estructura es la misma en cada página, y hasta ahora cada proyecto sgcHTML la recreaba — cadenas HTML escritas a mano para la barra de navegación, un TsgcHTMLComponent_Sidebar posicionado con CSS personalizado, un pie de página pegado al final. Funcionaba, pero era la parte que nadie quería escribir dos veces.

TsgcHTMLComponent_Site es ese armazón convertido en un componente de primera clase. Compone los ya existentes TsgcHTMLComponent_NavBar y TsgcHTMLComponent_Sidebar, los envuelve en la plantilla de Bootstrap y expone el conjunto a través de un puñado de propiedades. Aquí tienes una página 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;

Esa es la página completa: una barra de navegación superior con la marca, una barra lateral izquierda construida a partir del menú, tu contenido en el medio, un pie de página abajo, Bootstrap 5 cargado y adaptable en móvil.

Seis diseños, una propiedad

La razón para convertir el armazón en un componente es que el armazón es exactamente lo que quieres reestilizar sin tocar tu contenido. Establece Layout y la misma marca, menú y contenido se reorganizan en una página completamente diferente:

slTopNavSidebarLeft — el diseño de administración clásico: barra superior más una barra lateral izquierda fija.
slSidebarLeft / slSidebarRight — una barra lateral estilo documentación o aplicación sin barra superior, a un lado u otro.
slTopNav — un diseño de marketing / portal: navegación superior, contenido centrado, sin barra lateral.
slIconRail — un panel compacto con un carril estrecho de solo iconos.
slOffcanvas — primero móvil: el menú se oculta tras una hamburguesa y se desliza al abrirse.

Cambia una línea — oSite.Layout := slIconRail; — y la cabecera, el menú y el contenido se reorganizan. Nada más en tu código cambia.

Preajustes y temas

Si prefieres elegir un aspecto en lugar de configurar ajustes individuales, la propiedad Preset agrupa un diseño y un tema en una sola asignación — spAdmin, spDashboard, spPortal, spDocs, spLanding o spApp. Para un control más fino, el subobjeto Theme lleva un preajuste de color (stpBlue, stpViolet, stpEmerald, stpSlate, stpDark), un Mode claro, oscuro o de sistema, y un color primario personalizado opcional.

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

Todo incluido

La cabecera lleva las piezas que toda aplicación reimplementa. Actívalas con un indicador y el componente emite el marcado, el CSS y la pequeña cantidad de JavaScript:

una barra lateral adaptable que se contrae a un menú off-canvas en pantallas pequeñas, automáticamente;
desplegables Header.ShowThemeSwitcher y Header.ShowLanguageSwitcher;
un avatar Header.ShowUser con el nombre del usuario, y un control Header.ShowLogout;
una única colección Menu que alimenta tanto la barra lateral como el menú móvil, de modo que la navegación se define una sola vez.

El área de contenido sigue siendo sgcHTML puro: AddContent acepta cualquier marcado, y AddSection envuelve una tarjeta con título — así que cualquiera de los otros 60+ componentes (una rejilla, un gráfico, un formulario) encaja directamente en la página.

Delphi, C++ Builder y .NET

Como el resto de sgcHTML, el componente se distribuye con una API idéntica en los tres lenguajes. Las versiones de Delphi y C++ Builder leen la propiedad heredada HTML; la versión de .NET expone GetHTML(). La página renderizada es byte por byte la misma. Bootstrap se carga desde una CDN de forma predeterminada, así que no hay nada más que desplegar.

Cómo obtenerlo

TsgcHTMLComponent_Site forma parte de sgcHTML y se instala en la paleta de componentes con su propio icono. Consulta la página del componente para el recorrido completo, la matriz de características para la lista completa de componentes, y la ayuda en línea para la referencia completa. Puedes probarlo todo con la versión de prueba gratuita.

¿Preguntas, comentarios o ideas para otra plantilla de diseño? Ponte en contacto — recibirás una respuesta de las personas que escribieron el código.