sgcHTML Design Surface — Crie Páginas Visualmente, Não Apenas em Código

O sgcWebSockets 2026.9.0 adiciona uma nova forma de criar páginas sgcHTML: o Design Surface. Até agora, toda página era composta em código — criar os componentes, definir suas propriedades, ler o HTML resultante. Isso continua funcionando e continua sendo a forma principal de criar uma página. O que é novo é um segundo caminho, visual: soltar os mesmos componentes diretamente em um formulário VCL comum, organizá-los, ajustar suas propriedades no Object Inspector e renderizar a página idêntica àquela que, de outra forma, você teria escrito manualmente.

Duas Formas de Criar uma Página

A abordagem em tempo de execução (runtime) não mudou. Crie ou solte os componentes, defina suas propriedades e vincule os dados em código Pascal, C# ou .NET e, em seguida, leia a propriedade HTML do componente:

uses
  sgcHTML_Component_Grid;

var
  oGrid: TsgcHTMLComponent_Grid;
begin
  oGrid := TsgcHTMLComponent_Grid.Create(nil);
  try
    oGrid.Columns.Add.Title := 'Customer';
    oGrid.Columns.Add.Title := 'Total';
    oGrid.Clear;
    oGrid.AddRow(['Acme Corp', '1,240.00']);
    Response.Write(oGrid.HTML);
  finally
    oGrid.Free;
  end;
end;

O Design Surface adiciona uma segunda opção para os mesmos componentes: soltá-los em um formulário e deixar que a estrutura da página venha do próprio layout do formulário, em vez de chamadas de construtor.

O Design Surface

A posição e a largura de um componente no formulário inferem sua linha e coluna no Bootstrap, e suas propriedades publicadas são ajustadas no Object Inspector em vez de em código. Um componente TsgcHTMLDesignSurface adicionado ao formulário lê esse layout. Chame sgcHTMLDesignBuildFromControls uma vez, tipicamente na inicialização, para percorrer os componentes soltos no formulário e montar a árvore de nós da surface, depois leia Surface.GetBodyHTML para renderizá-la:

uses
  sgcHTMLDesign_Surface;

procedure TfrmDashboard.Build;
begin
  sgcHTMLDesignBuildFromControls(Surface, Self);
end;

function TfrmDashboard.BodyHTML: string;
begin
  Surface.Invalidate;
  Result := Surface.GetBodyHTML;
end;

Para marcação que a paleta de componentes não cobre, Surface.AddHTML adiciona um nó HTML fixo na mesma árvore, posicionado pela propriedade Order do nó, ou encaixado dentro do corpo de um componente solto usando Slot := 'Body'.

Mesmos Componentes, Mesma Saída

O Design Surface muda apenas a forma como a estrutura de uma página é expressa, não os componentes em si nem seu comportamento. Um componente solto em um formulário desenhado é uma instância de componente comum — Grid1.LoadFromDataSet(qry) funciona exatamente como funcionaria em uma página construída inteiramente em código. Os dois estilos de criação também podem ser livremente combinados na mesma página, e ambos produzem componentes que compilam e são executados de forma idêntica após a compilação.

Quando Usar Cada Um

A composição em tempo de execução ainda é a mais indicada quando a estrutura da página é, em si, dinâmica ou orientada a dados — linhas geradas em loop, seções condicionais, conteúdo que depende de um estado conhecido apenas em tempo de execução — e para uma única fonte compartilhada entre Delphi 7–13 sem dependência de IDE. O Design Surface é mais indicado ao montar visualmente uma estrutura de página majoritariamente estática, ao ver a forma da página enquanto ela é construída, e ao ajustar propriedades pelo Object Inspector em vez de em código. Nenhuma das duas opções representa uma diferença de capacidade em tempo de execução: escolher uma ou outra é puramente uma preferência de momento de criação.

Ainda em Crescimento

A paleta de componentes do Design Surface está em expansão ativa, e algumas lacunas ainda existem hoje. A marcação de envoltório de alguns componentes, como o invólucro de card do TsgcHTMLComponent_Panel, ainda não tem uma propriedade para suprimi-la. Os campos de TsgcHTMLComponent_Form atualmente não aplicam classes ou spans de coluna da forma que uma marcação escrita à mão consegue. Nem toda propriedade existe em todo componente irmão — UseColorClass, por exemplo, existe em Panel, mas não em Login ou StatCard. E o TsgcHTMLComponent_Grid ainda não expõe cabeçalhos de coluna ordenáveis como propriedade em tempo de design. Nada disso afeta o caminho em tempo de execução, e a paleta continua fechando essas lacunas a cada versão.

Veja em Ação

A forma mais clara de ver as duas abordagens lado a lado é a pasta Demos\60.HTML que acompanha o sgcWebSockets. 01.RunTime contém os demos originais, construídos em código; 02.DesignTime contém cada um deles — AdminCRUD, LiveMonitor, Portal, HTMX, Grid, Site, Components, Helpdesk, ShopAssistant, WebBroker e WebBrokerHTML, além do demo ERP que deu início ao padrão — reconstruídos inteiramente em formulários com o Design Surface. Compare as duas pastas para o mesmo demo e você obtém a mesma página a partir de dois estilos de criação diferentes.

Atualizando

O Design Surface é distribuído como parte do pacote sgcHTML no sgcWebSockets 2026.9.0, sem necessidade de migração para páginas existentes construídas em tempo de execução. Baixe o teste gratuito para experimentá-lo e conheça o conjunto completo de componentes no hub de componentes.

Dúvidas, feedback ou ajuda com a migração? Fale conosco — você receberá uma resposta das pessoas que escreveram o código.