Um componente, uma página web inteira: apresentamos o TsgcHTMLComponent_Site

6 de julho de 2026 · Componentes

O sgcHTML já oferece aos desenvolvedores Delphi, C++ Builder e .NET mais de 60 componentes do lado do servidor que renderizam marcação Bootstrap 5 — grades, gráficos, formulários, chat, tudo o que você insere em uma página. Mas ainda havia uma coisa que você montava à mão em cada projeto: a própria página. A barra superior. O menu lateral. O rodapé. A parte que emoldura cada tela. Hoje esse código repetitivo ganha o seu próprio componente.

O TsgcHTMLComponent_Site cria uma página web inteira — cabeçalho, menu de navegação, conteúdo principal e rodapé — a partir de um único componente. Você define uma marca, adiciona alguns itens de menu, insere o seu conteúdo e lê a propriedade HTML. E como todo o layout é controlado por uma única propriedade Layout, você pode alternar entre seis disposições de página diferentes mudando uma única linha.

O esqueleto era o código repetitivo

Observe qualquer aplicação web real e a maioria dos pixels é decoração: um cabeçalho com um logotipo e um menu de usuário, uma barra lateral com links de navegação, uma área de conteúdo, um rodapé. Essa decoração é a mesma em cada página e, até agora, todo projeto sgcHTML a recriava — strings HTML escritas à mão para a barra de navegação, um TsgcHTMLComponent_Sidebar posicionado com CSS personalizado, um rodapé colado no final. Funcionava, mas era a parte que ninguém queria escrever duas vezes.

O TsgcHTMLComponent_Site é esse esqueleto como um componente de primeira classe. Ele compõe os já existentes TsgcHTMLComponent_NavBar e TsgcHTMLComponent_Sidebar, os envolve no modelo Bootstrap e expõe tudo isso por meio de um punhado de propriedades. Aqui está uma 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;

Essa é a página inteira: uma barra de navegação superior com a marca, uma barra lateral à esquerda construída a partir do menu, o seu conteúdo no meio, um rodapé na parte inferior, o Bootstrap 5 carregado, responsivo em dispositivos móveis.

Seis layouts, uma propriedade

O motivo para transformar o esqueleto em um componente é que o esqueleto é exatamente aquilo que você quer reestilizar sem tocar no seu conteúdo. Defina Layout e a mesma marca, menu e conteúdo se reorganizam em uma página completamente diferente:

slTopNavSidebarLeft — o layout de administração clássico: barra superior mais uma barra lateral fixa à esquerda.
slSidebarLeft / slSidebarRight — uma barra lateral no estilo de documentação ou aplicativo, sem barra superior, em qualquer um dos lados.
slTopNav — um layout de marketing / portal: navegação no topo, conteúdo centralizado, sem barra lateral.
slIconRail — um painel compacto com uma trilha estreita apenas de ícones.
slOffcanvas — voltado para dispositivos móveis: o menu se oculta atrás de um botão sanduíche e desliza para dentro.

Mude uma linha — oSite.Layout := slIconRail; — e o cabeçalho, o menu e o conteúdo se reorganizam. Nada mais no seu código muda.

Predefinições e temas

Se você prefere escolher uma aparência em vez de configurar ajustes individuais, a propriedade Preset reúne um layout e um tema em uma única atribuição — spAdmin, spDashboard, spPortal, spDocs, spLanding ou spApp. Para um controle mais refinado, o subobjeto Theme traz uma predefinição de cores (stpBlue, stpViolet, stpEmerald, stpSlate, stpDark), um Mode claro, escuro ou de sistema, e uma cor primária personalizada 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

Tudo incluído

O cabeçalho traz as partes que toda aplicação reimplementa. Ative-as com um sinalizador e o componente emite a marcação, o CSS e a pequena quantidade de JavaScript:

uma barra lateral responsiva que se recolhe em um menu off-canvas em telas pequenas, automaticamente;
menus suspensos Header.ShowThemeSwitcher e Header.ShowLanguageSwitcher;
um avatar Header.ShowUser com o nome do usuário e um controle Header.ShowLogout;
uma única coleção Menu que alimenta tanto a barra lateral quanto o menu móvel, de modo que a navegação é definida uma só vez.

A área de conteúdo continua sendo sgcHTML puro: AddContent aceita qualquer marcação e AddSection envolve um cartão com título — assim, qualquer um dos outros mais de 60 componentes (uma grade, um gráfico, um formulário) se encaixa diretamente na página.

Delphi, C++ Builder e .NET

Como o resto do sgcHTML, o componente vem com uma API idêntica nas três linguagens. As versões Delphi e C++ Builder leem a propriedade herdada HTML; a versão .NET expõe GetHTML(). A página renderizada é idêntica byte a byte. O Bootstrap é carregado a partir de uma CDN por padrão, então não há nada extra para implantar.

Como obter

O TsgcHTMLComponent_Site faz parte do sgcHTML e se instala na paleta de componentes com o seu próprio ícone. Consulte a página do componente para o passo a passo completo, a matriz de recursos para a lista completa de componentes e a ajuda online para a referência completa. Você pode experimentar tudo com a versão de teste gratuita.

Dúvidas, comentários ou ideias para outro modelo de layout? Entre em contato — você receberá uma resposta das pessoas que escreveram o código.