sgcHTML em cinco minutos

O sgcHTML transforma Object Pascal em HTML. Você monta uma página como uma árvore de componentes, lê uma propriedade string e grava essa string em uma resposta HTTP. Esta página faz exatamente isso e depois mostra as partes que você vai querer em seguida: formulários, grids, gráficos e htmx.

Bootstrap 5 e htmx, no lado do servidor
Sem JavaScript para escrever
Windows, Linux e macOS

O que a primeira página precisa

Um componente de página que se renderiza em uma string e um servidor HTTP para entregar essa string a um navegador. Dois objetos.

O componente de página

TsgcHTMLComponent_Site, declarado em sgcHTML_Component_Site.pas e registrado na página SGC HTML da paleta. Ele renderiza um shell completo: navegação, barra lateral, tema e conteúdo.

A propriedade que importa

HTML, herdada de TsgcHTMLComponent. É somente leitura, e lê-la renderiza a árvore de componentes atual em um documento HTML completo.

O servidor

Qualquer coisa que consiga gravar uma string em uma resposta HTTP. O demo que acompanha o pacote usa TsgcWSHTTPServer de sgcWebSocket_Server.pas quando há uma compilação Professional disponível e recorre a TIdHTTPServer caso contrário.

Plataformas

Apenas desktop e servidor. SGC_HTML é definido dentro de {$IFNDEF ANDROID} e {$IFNDEF IOS}, então no celular toda unit sgcHTML compila para nada. Windows, macOS e Linux funcionam normalmente.

Requisitos e edições

A coluna de edição é o define que controla o código, com a linha em que ele aparece em Source/sgcVer.inc.

O quê Valor
IDE Do Delphi 7 ao RAD Studio 13, e do C++Builder 2007 ao 13. O Lazarus também é compatível, e acompanha um demo de ERP que já foi executado no Linux.
Cláusula uses sgcHTML_Component_Site para o shell da página, mais as units de nós que você realmente usar, por exemplo sgcHTML_Nodes, sgcHTML_Nodes_Bootstrap, sgcHTML_Nodes_Table, sgcHTML_Nodes_Forms e sgcHTML_Nodes_Charts.
Define do pacote SGC_PACK_HTML é definido na linha 871, dentro do bloco {$IFDEF SGC_EDT_ALL} que vai da linha 870 à linha 874. Na árvore de código-fonte do sgcWebSockets, isso significa que a edição All-Access o ativa. O sgcHTML também é vendido como produto próprio, com instalador e licença próprios.
Defines de recursos Dentro do bloco {$IFDEF SGC_PACK_HTML}, nas linhas 882 a 892: SGC_HTML na linha 885 e SGC_HTMX na linha 886, ambos dentro de {$IFNDEF ANDROID} na 883 e {$IFNDEF IOS} na 884. SGC_HTML_CONTROL, a superfície visual de design-time, está na linha 888 dentro de {$IFDEF MSWINDOWS} na 887.
O que isso significa no celular Toda unit sgcHTML envolve sua interface em {$IFDEF SGC_HTML}, então uma compilação para Android ou iOS as compila como units vazias. Esta é uma biblioteca do lado do servidor, e esse é o ponto: o celular recebe HTML, não Pascal.
Registro A página da paleta só é registrada quando SGC_PACK_HTML e SGC_HTML estão ambos definidos.

Quais componentes existem? Cerca de oitenta, de um grid e um agendador a gráficos, um editor rich text, um QR code e um leitor de câmera. A matriz de recursos os agrupa por área, e cada um tem sua própria página em componentes.

Instale e encontre a página da paleta

O sgcHTML acompanha como pacote próprio e também dentro da compilação All-Access do sgcWebSockets. A instalação tem o mesmo formato.

1. Descompacte

Descompacte o download em uma pasta, chamada de {$DIR} abaixo.

2. Caminho da biblioteca

Tools, Options, Library. Adicione {$DIR}\source e a pasta lib da sua IDE, por exemplo {$DIR}\libD13\$(Platform).

3. Compile os pacotes

Abra o grupo de pacotes da versão da sua IDE em {$DIR}\Packages\. Compile primeiro o .dpk de runtime e depois instale o de design-time, o dcl. O Lazarus usa o .lpk.

4. Confira a paleta

Aparece uma página chamada SGC HTML, com cerca de oitenta componentes. Se ela não aparecer em um destino Android ou iOS, é o esperado, porque SGC_HTML é excluído ali.

5. Execute um demo primeiro

Abra {$DIR}\Demos\60.HTML\01.RunTime\07.Site, compile e execute. É um servidor de console, imprime a própria URL e é de onde vem o código abaixo.

Uma página em Pascal, servida por HTTP

Monte a página, leia a propriedade HTML, grave-a na resposta. A primeira aba é a página, a segunda é o servidor, a terceira é o programa de console completo.

sgcSiteDemo_Pages.pas
uses
  SysUtils, Classes,
  // sgc
  sgcHTML_Component_Site;

class function TsgcSiteDemoPages.BuildPage: string;
var
  oSite: TsgcHTMLComponent_Site;
begin
  oSite := TsgcHTMLComponent_Site.Create(nil);
  try
    oSite.Title := 'sgcHTML Site Layouts';
    oSite.Layout := slSidebarLeft;

    oSite.AddMenu('Dashboard', '/');
    oSite.AddMenu('Customers', '/?page=customers');

    oSite.AddSection('Welcome', '<p>Served from Delphi.</p>');

    // reading HTML is what runs the render
    Result := oSite.HTML;
  finally
    oSite.Free;
  end;
end;

Layout recebe um TsgcHTMLSiteLayout: slSidebarLeft, slSidebarRight, slTopNav, slTopNavSidebarLeft, slIconRail ou slOffcanvas. O padrão é slTopNavSidebarLeft, então a linha acima só está ali para mostrar a troca.

sgcSiteDemo_Server.pas
uses
  SysUtils, Classes,
  // sgc
  sgcWebSocket_Server,
{$IFDEF SGC_INDY}
  sgcIdContext, sgcIdCustomHTTPServer;
{$ELSE}
  IdContext, IdCustomHTTPServer;
{$ENDIF}

constructor TsgcSiteDemoServer.Create;
begin
  inherited Create;
  FPort := 8092;
  FHTTP := TsgcWSHTTPServer.Create(nil);
  FHTTP.Port := FPort;
  FHTTP.OnCommandGet := HandleCommandGet;
end;

procedure TsgcSiteDemoServer.Start;
begin
  FHTTP.Active := True;
end;

procedure TsgcSiteDemoServer.SendHTML(AResponseInfo: TIdHTTPResponseInfo;
  const aHTML: string);
begin
  AResponseInfo.ResponseNo := 200;
  AResponseInfo.ContentType := 'text/html; charset=utf-8';
  AResponseInfo.ContentText := aHTML;
end;

As units do Indy são condicionais porque uma compilação com a biblioteca Indy personalizada as enxerga como sgcIdContext e sgcIdCustomHTTPServer, e uma compilação com o Indy padrão como IdContext e IdCustomHTTPServer. O demo que acompanha o pacote traz exatamente essa condicional. Qualquer servidor que consiga gravar uma string serve. O demo escolhe TsgcWSHTTPServer quando há uma compilação Professional disponível e recorre a TIdHTTPServer caso contrário, e é por isso que o demo tem uma condicional ali e este trecho não.

sgcSiteDemoServer.dpr
program sgcSiteDemoServer;

{$APPTYPE CONSOLE}

uses
  SysUtils,
  sgcSiteDemo_Server in 'sgcSiteDemo_Server.pas',
  sgcSiteDemo_Pages in 'sgcSiteDemo_Pages.pas';

var
  oServer: TsgcSiteDemoServer;
begin
  oServer := TsgcSiteDemoServer.Create;
  try
    oServer.Start;
    WriteLn('sgcHTML Site Layouts Demo - http://localhost:' +
      IntToStr(oServer.Port));
    WriteLn('Press Enter to stop.');
    ReadLn;
    oServer.Stop;
  finally
    oServer.Free;
  end;
end.

Um aplicativo de console, então não há formulário nem VCL para configurar. Esse é o menor programa sgcHTML possível, e é o que o demo que acompanha o pacote realmente é.

As três abas vêm do demo que acompanha o pacote, Demos\60.HTML\01.RunTime\07.Site, reduzido às partes que importam. O projeto completo também troca layout, tema e esquema de cores a partir da query string, o que vale a leitura assim que a primeira página for renderizada.

Confirme que a página foi renderizada

O programa imprime a URL em que está escutando. Abra-a e depois experimente as opções.

A URL que ele imprime

O programa grava http://localhost:8092 no console ao iniciar. Abra-a. Uma página com navegação, barra lateral e o seu conteúdo significa que a renderização e o servidor estão funcionando.

Active

FHTTP.Active := True ou funciona ou gera uma exceção. Se outra coisa já for dona da porta 8092, você descobre aqui.

O tipo de conteúdo

Um navegador que mostra a marcação bruta em vez de uma página significa que a resposta saiu sem text/html. Defina ContentType antes de atribuir ContentText.

Troque um layout

O demo que acompanha o pacote lê layout, theme e mode da query string, então ?layout=topnav&mode=dark renderiza a mesma página de outra forma. É a maneira mais rápida de ver o que o componente faz.

O que costuma dar errado na primeira vez

Seis problemas respondem por quase toda primeira tentativa que não renderiza.

A página da paleta nunca aparece

O registro precisa de SGC_PACK_HTML e de SGC_HTML. O primeiro é definido na linha 871, dentro do bloco All-Access, e o segundo na linha 885, dentro do bloco do pacote. Em um destino Android ou iOS, o segundo está ausente de propósito.

A página está em branco

Você montou a árvore, mas nunca leu HTML. Essa propriedade é o que executa a renderização. Lê-la é todo o passo de renderização, e ela retorna um documento completo, não um fragmento.

Nada muda quando você edita a página

O demo monta um TsgcHTMLComponent_Site novo a cada requisição e o libera depois. Se você mantiver o objeto em cache e reutilizá-lo, lembre-se de limpar o conteúdo com ClearContent antes de remontar.

O navegador mostra a marcação bruta

O tipo de conteúdo da resposta nunca foi definido. O demo define ContentType := 'text/html; charset=utf-8' antes de gravar o corpo, e sem isso alguns clientes exibirão o HTML como texto.

Você está escrevendo strings HTML à mão

Não precisa. Há units de nós para layout Bootstrap, tabelas, formulários e gráficos, e o objetivo da biblioteca é justamente você compor esses nós em vez de concatenar marcação.

A porta já está ocupada

O demo escuta na 8092. Se outra coisa for dona dessa porta, o servidor não inicia, então troque a porta antes de procurar um problema mais profundo.

O que as pessoas constroem depois da primeira página

Quatro direções, todas dentro do mesmo pacote.

Formulários que enviam dados de volta

A unit de nós de formulários monta campos, selects, validação e layout, e o htmx os envia sem recarregar a página. O escape é tratado para você quando você monta nós em vez de strings.

Componentes de formulário

Dados na página

Um grid com ordenação, filtragem e paginação, além de gráficos, cartões de estatísticas, um agendador, um gráfico de Gantt e um componente de diagramas.

Matriz de recursos

Aplicativos completos

Acompanham doze demos de runtime, de um painel de ERP a um ponto de venda, um helpdesk, um armazém e um aplicativo de serviço de campo. São a maneira mais rápida de ver a biblioteca em escala real.

Galeria de demos

Traga sua camada web existente

Há componentes para WebBroker e DataSnap, de modo que um aplicativo web Delphi existente pode renderizar páginas sgcHTML sem ser reescrito.

WebBroker e DataSnap

Referência, demos e documentação

O catálogo lista cada componente com uma pré-visualização. Os projetos de demo acompanham o download, em Demos\60.HTML.

Página do TsgcHTMLComponent_Site O shell de página em que este início rápido se baseia, propriedade por propriedade.
Matriz de recursos Layout, formulários, dados, gráficos, autenticação, chat e o resto, agrupados por área.
Galeria de demos Os demos de runtime que acompanham o pacote, cada um com um vídeo curto.
WebBroker e DataSnap Renderização de páginas sgcHTML a partir de uma camada web Delphi existente.
Baixe a versão de avaliação O mesmo instalador da versão de produção, com tempo limitado.
Ajuda online A referência gerada, sempre alinhada com a versão atual.

Leitura relacionada: o componente Site, componentes de interface web em Delphi, formulários mais inteligentes e tabelas de dados. Cada produto tem seu próprio início rápido, listado na página de primeiros passos.

Perguntas sobre o início rápido do sgcHTML

TsgcHTMLComponent_Site, da unit sgcHTML_Component_Site.pas. Ele renderiza um shell de página completo, então você obtém navegação, barra lateral, tema e uma área de conteúdo sem montá-los por conta própria. Monte-o, chame AddMenu e AddContent ou AddSection e depois leia a propriedade HTML. O demo Site que acompanha o pacote faz exatamente isso.
Você mesmo o grava em uma resposta HTTP. HTML é uma propriedade string simples, então qualquer servidor serve. O demo que acompanha o pacote usa TsgcWSHTTPServer em uma compilação Professional e recorre a TIdHTTPServer caso contrário, define ResponseNo := 200 e ContentType := 'text/html; charset=utf-8' e atribui a string a ContentText.
O controle é SGC_PACK_HTML, definido na linha 871 de sgcVer.inc, dentro do bloco {$IFDEF SGC_EDT_ALL} que vai da linha 870 à linha 874. Nessa árvore de código-fonte, a edição All-Access é o que o define. O sgcHTML também é vendido como produto próprio, com instalador próprio, então consulte a página de preços do sgcHTML para ver as licenças atuais em vez de deduzi-las a partir do define.
Não, e isso é proposital. SGC_HTML é definido na linha 885, dentro de {$IFNDEF ANDROID} na linha 883 e {$IFNDEF IOS} na linha 884, então nesses destinos toda unit sgcHTML compila como uma unit vazia. É uma biblioteca do lado do servidor: o celular recebe HTML pela rede, e é por isso que o destino móvel não precisa do renderizador. Windows, macOS e Linux são todos compatíveis.
Não. A biblioteca emite marcação Bootstrap 5 e atributos htmx, e o htmx é o que faz um botão enviar dados de volta e trocar parte da página sem recarregar. Você descreve a interação em Pascal e os atributos são gerados para você. Você ainda pode adicionar seu próprio script quando quiser, por meio de CustomHead e BodyEndHTML.
Sim. Layout recebe um TsgcHTMLSiteLayout, cujos membros são slSidebarLeft, slSidebarRight, slTopNav, slTopNavSidebarLeft, slIconRail e slOffcanvas, e o padrão é slTopNavSidebarLeft. Preset recebe um TsgcHTMLSitePreset com membros que incluem spAdmin, spDashboard, spPortal, spDocs, spLanding e spApp. As cores e o modo claro ou escuro ficam no objeto Theme.
Quando você monta a página como nós, sim, porque o nó escreve o texto e faz o escape. O risco aparece quando você ignora os nós e concatena a marcação por conta própria, por exemplo por meio de AddContent com uma string montada a partir de entrada do usuário. Prefira as units de nós para qualquer coisa que carregue dados do usuário.
O download traz dezessete demos de runtime em Demos\60.HTML\01.RunTime, incluindo um painel de ERP, um helpdesk, um ponto de venda, um armazém, um aplicativo de relatórios e um aplicativo de serviço de campo. A galeria tem um vídeo curto de cada um.
Melhor custo-benefício: All-AccessTodos os produtos da eSeGeCe, com Suporte Premium incluído, a partir de €1,059/ano.
Ver preços do All-Access

Pronto para construir uma interface web em Pascal?

Baixe a versão de avaliação e execute o demo Site antes de escrever uma linha de marcação.