sgcHTML: Crie UIs Web Modernas em Delphi Sem Escrever JavaScript

· Componentes

Desenvolvedores Delphi constroem aplicações de negócios há trinta anos. O back-end é sólido: acesso a banco de dados, lógica de negócios, geração de relatórios, integração com serviços. O problema sempre foi o front-end. No momento em que um cliente solicita uma interface baseada em navegador, a abordagem clássica do Delphi se torna ineficiente. Você pode recorrer ao IntraWeb (poderoso, mas com estado e envelhecendo), tentar o TMS WEB Core (que compila Pascal para JavaScript, mas impõe um modelo de implantação do lado do cliente) ou entregar o front-end a uma equipe JavaScript e manter dois codebases completamente separados.

sgcHTML adota uma abordagem diferente. É uma biblioteca com mais de 60 componentes do lado do servidor que geram HTML Bootstrap 5 diretamente a partir do seu código Delphi, C++ Builder ou .NET. Você configura as propriedades, lê a propriedade HTML e serve o resultado. A interatividade vem do htmx, uma pequena biblioteca JavaScript que permite ao servidor trocar fragmentos de página em resposta a cliques e envios de formulários — sem nenhum JavaScript que você precise escrever. O resultado é uma aplicação web moderna e responsiva, construída inteiramente em Object Pascal ou C#.

O problema que o sgcHTML resolve

A arquitetura VCL padrão do Delphi pressupõe um cliente robusto: formulários, grids e caixas de diálogo rodando no Windows. Esse modelo funciona bem para ferramentas internas. Ele se torna insuficiente quando o cliente quer um portal acessível por navegador em qualquer dispositivo, ou quando a política de TI proíbe a instalação de aplicações desktop.

As alternativas antes do sgcHTML todas tinham suas dificuldades:

O sgcHTML preenche essa lacuna: uma biblioteca de componentes Delphi nativa cuja saída é HTML Bootstrap 5 padrão e moderno, compreendido por qualquer navegador, mantido dinâmico pelo htmx, tudo controlado a partir de um único codebase em Pascal ou C#.

Como funciona

A arquitetura possui três camadas.

Primeiro, um componente como TsgcHTMLComponent_Chart, TsgcHTMLComponent_DataTable ou TsgcHTMLComponent_StatCard sabe como se descrever como HTML Bootstrap 5. Você o configura por meio de propriedades publicadas normais e chama sua propriedade HTML para obter a marcação.

Segundo, um construtor de páginas (TsgcHTMLPageBuilder) monta componentes em um grid responsivo. Você atribui a cada componente uma Section, um SectionTitle, um SectionOrder e um ColumnWidth (o grid de 1–12 colunas do Bootstrap). O construtor de páginas os organiza automaticamente.

Terceiro, um motor de servidor (TsgcHTMLEngine_Server) conecta tudo a um TsgcWSHTTPServer do sgcWebSockets. As requisições chegam ao seu handler OnCommandGet e você responde com uma página HTML completa construída a partir dos seus componentes. O CSS e o JavaScript do Bootstrap são recursos incorporados dentro da biblioteca, portanto não há nada a implantar junto ao binário.

uses
  sgcWebSocket_Server, sgcHTML_Engine_Server,
  sgcHTML_Template_Bootstrap, sgcHTML_Page,
  sgcHTML_Component_StatCard, sgcHTML_Component_Chart;

var
  oServer:   TsgcWSHTTPServer;
  oEngine:   TsgcHTMLEngine_Server;
  oTemplate: TsgcHTMLTemplate_Bootstrap;
  oPage:     TsgcHTMLPage;
  oStat:     TsgcHTMLComponent_StatCard;
  oChart:    TsgcHTMLComponent_Chart;
begin
  oServer := TsgcWSHTTPServer.Create(nil);
  oServer.Port := 8080;

  oEngine   := TsgcHTMLEngine_Server.Create(nil);
  oEngine.Server := oServer;

  oTemplate := TsgcHTMLTemplate_Bootstrap.Create(nil);
  oTemplate.Title := 'My Dashboard';

  oPage := TsgcHTMLPage.Create(nil);

  // KPI card: total revenue
  oStat := TsgcHTMLComponent_StatCard.Create(nil);
  oStat.PageBuilder := oPage.PageBuilder;
  oStat.Section := 'kpi';
  oStat.SectionOrder := 1;
  oStat.ColumnWidth := cw3;
  oStat.Title := 'Total Revenue';
  oStat.Value := '$128,450';
  oStat.Trend := stUp;
  oStat.TrendValue := '+12%';

  // Revenue trend chart
  oChart := TsgcHTMLComponent_Chart.Create(nil);
  oChart.PageBuilder := oPage.PageBuilder;
  oChart.Section := 'charts';
  oChart.SectionOrder := 1;
  oChart.ColumnWidth := cw8;
  oChart.ChartType := ctLine;
  oChart.Title := 'Monthly Revenue';
  oChart.AddLabel('Jan'); oChart.AddLabel('Feb'); oChart.AddLabel('Mar');
  oChart.AddDataset('2026', [42000, 58000, 64000], '#0d6efd', '', True);

  oServer.Active := True;
end;

Mais de 60 componentes prontos para uso

O sgcHTML acompanha uma ampla paleta de componentes que cobre os padrões de UI web mais comuns. Cada componente é uma classe Delphi padrão que você pode soltar em um formulário ou criar por código:

Vinculação com DataSource

Cada componente sgcHTML suporta uma propriedade DataSource que o conecta a qualquer TDataSource na sua aplicação. Defina DataAutoRefresh := True e o componente se re-renderiza automaticamente quando o dataset subjacente muda. Para um controle mais preciso, chame LoadFromDataSet diretamente:

uses
  sgcHTML_Component_DataTable;

// Populate a data table from a FireDAC query
oTable := TsgcHTMLComponent_DataTable.Create(nil);
oTable.PageBuilder := oPage.PageBuilder;
oTable.Section := 'invoices';
oTable.Title := 'Recent Invoices';
oTable.ShowSearch := True;
oTable.ShowExport := True;
oTable.LoadFromDataSet(FDQuery1, 20); // 20 rows per page

O componente de gráfico possui um método LoadFromDataSet equivalente que aceita um nome de campo para rótulos e um ou mais nomes de campos de valores, de modo que uma consulta de receita por mês se torna um gráfico de barras em três linhas:

oChart.LoadFromDataSet(fdqRevenue, 'month', ['revenue', 'cost']);

Interatividade via htmx — sem JavaScript necessário

HTML estático é útil. HTML interativo é indispensável. O sgcHTML alcança interatividade por meio do htmx: uma pequena biblioteca (14 KB comprimida) que intercepta cliques e envios de formulários, envia uma requisição HTTP ao servidor e substitui o HTML de resposta na página. Seu handler OnCommandGet ou OnCommandOther em Delphi recebe a requisição, reconstrói o componente relevante e retorna seu HTML. Sem recarregamento de página. Sem framework JavaScript.

// Server-side handler: update the chart fragment when the user changes the date range
procedure TMyServer.HandleChartFragment(aReq: TIdHTTPRequestInfo;
  aResp: TIdHTTPResponseInfo);
var
  oChart: TsgcHTMLComponent_Chart;
  vRange: string;
begin
  vRange := aReq.Params.Values['range']; // 'week', 'month', 'year'
  oChart := TsgcHTMLComponent_Chart.Create(nil);
  try
    oChart.ChartType := ctBar;
    LoadRevenueData(oChart, vRange); // your data-loading procedure
    aResp.ContentText := oChart.HTML;
    aResp.ContentType := 'text/html';
  finally
    oChart.Free;
  end;
end;

O gráfico no navegador carrega um atributo hx-get apontando para o endpoint de fragmento. Quando o usuário seleciona um intervalo diferente em um dropdown, o htmx substitui a div do gráfico no lugar — a página ao redor não é recarregada.

Atualizações em tempo real via WebSocket

Como o sgcHTML é construído sobre o sgcWebSockets, o push em tempo real é um recurso de primeira classe. Quando novos dados chegam — um novo pedido, uma cotação de preço, uma leitura de sensor — seu servidor envia um fragmento HTML via WebSocket e o htmx o insere no elemento DOM correto. O cliente se inscreve em um endpoint WebSocket; o servidor chama SendMessage. Sem polling, sem long-polling, sem broker de mensagens externo.

// Push an updated stat card to all connected clients
procedure TDashboardServer.PushRevenueUpdate(aNewRevenue: Double);
var
  oCard: TsgcHTMLComponent_StatCard;
begin
  oCard := TsgcHTMLComponent_StatCard.Create(nil);
  try
    oCard.CardID := 'kpi-revenue';
    oCard.Title := 'Total Revenue';
    oCard.Value := FormatCurr('$#,##0', aNewRevenue);
    oCard.Trend := stUp;
    // Send the HTML fragment to all clients subscribed to this channel
    FWSServer.Broadcast(oCard.HTML);
  finally
    oCard.Free;
  end;
end;

Sem cadeia de build JavaScript, sem npm, sem Node.js

Todos os assets JavaScript e CSS que o sgcHTML necessita (Bootstrap 5, Chart.js, htmx) são incorporados como recursos binários dentro do executável Delphi compilado. Sua implantação é um único arquivo .exe. Não há diretório node_modules, nenhuma configuração de webpack, nenhum pipeline Babel e nenhum conflito de versões entre um gerenciador de pacotes front-end e seu back-end. Você instala o sgcHTML como um pacote Delphi, compila e distribui.

Primeiros passos

O sgcHTML é fornecido como parte das edições Enterprise e All-Access do sgcWebSockets, e também como compra avulsa. Uma versão de avaliação gratuita está disponível para download. A versão de avaliação inclui todos os mais de 60 componentes sem restrições de funcionalidades durante o período de teste.

A biblioteca suporta Delphi 10.2 Tokyo até Delphi 13 e C++ Builder 10.2 até 13, e a edição .NET tem como alvo .NET 6 e versões posteriores. O código-fonte completo está incluído em todas as edições pagas.

Dúvidas ou consultas pré-venda? Entre em contato. Você receberá uma resposta das pessoas que escreveram o código.