sgcHTMLAplicações web,escritas em Pascal.Sem JavaScript.
Crie UIs web completas e modernas diretamente do Delphi, C++ Builder e .NET. O sgcHTML é um framework de componentes server-side com 110 widgets prontos: gráficos, grids, formulários, dashboards, chat e muito mais. Muitos se vinculam diretamente a um TDataSet, geram markup Bootstrap 5 e permanecem interativos por meio do htmx. Você escreve Object Pascal ou C#, e o sgcHTML escreve o HTML, o CSS e o JavaScript.
Cada tela abaixo é uma aplicação Delphi servindo seu próprio HTML através do sgcHTML. Sem etapa de build de JavaScript, sem projeto de front end separado. Faça login com as credenciais já preenchidas em cada página de login.
O planejador Gantt, as séries do Chart.js, medidores, sparklines, tree maps e mapas de calor são todos produzidos a partir do seu código Pascal ou C#. Você define os dados, o sgcHTML emite o markup e a integração no lado do cliente.
Um construtor de pivôs ad hoc sobre um dataset ao vivo
Os usuários escolhem dimensões, medidas e uma agregação, e a tabela cruzada é reconstruída a partir de um TFDQuery. Não há camada REST no meio, a página lê o banco de dados diretamente no próprio processo.
Os mesmos componentes, em um coletor de dados portátil
Cada componente renderiza markup responsivo do Bootstrap 5, então o layout do terminal de armazém é a mesma biblioteca de componentes na largura de um celular, não uma base de código mobile separada.
Como funciona
Você escreve Pascal ou C#. O sgcHTML escreve o front end.
Inicie um servidor HTTP, anexe o motor htmx e responda às requisições com uma página construída a partir de componentes. A mesma API em Delphi, C++ Builder e .NET.
uses
sgcWebSocket_Server, sgcHTMX_Engine_Server,
sgcHTML_Template_Bootstrap, sgcHTML_Component_Chart;
// 1. Start a server and attach the htmx engine
FServer := TsgcWSHTTPServer.Create(nil);
FServer.Port := 8080;
FServer.OnCommandGet := HandleGet;
FHTMX := TsgcHTMX_Engine_Server.Create(nil);
FHTMX.Server := FServer; // realtime htmx over WebSocket
FServer.Active := True;
// 2. Build the page from componentsfunction TForm1.BuildDashboard: string;
var
oChart: TsgcHTMLComponent_Chart;
oPage: TsgcHTMLTemplate_Bootstrap;
begin
oChart := TsgcHTMLComponent_Chart.Create(nil);
oPage := TsgcHTMLTemplate_Bootstrap.Create(nil);
try
oChart.ChartType := ctBar;
oChart.AddLabel('Q1'); oChart.AddLabel('Q2'); oChart.AddLabel('Q3');
oChart.AddDataset('Revenue', [1200, 1900, 1500],
'#7C3AED', 'rgba(124,58,237,.25)', True);
oPage.Title := 'Dashboard';
oPage.BodyContent := oChart.HTML; // component -> HTML
Result := oPage.GetHTML; // full Bootstrap documentfinally
oPage.Free;
oChart.Free;
end;
end;
// includes: sgcWebSocket_Server.hpp, sgcHTMX_Engine_Server.hpp,// sgcHTML_Template_Bootstrap.hpp, sgcHTML_Component_Chart.hpp// 1. Start a server and attach the htmx engine
FServer = new TsgcWSHTTPServer(this);
FServer->Port = 8080;
FServer->OnCommandGet = HandleGet;
FHTMX = new TsgcHTMX_Engine_Server(this);
FHTMX->Server = FServer; // realtime htmx over WebSocket
FServer->Active = true;
// 2. Build the page from components
String __fastcall TForm1::BuildDashboard()
{
TsgcHTMLComponent_Chart *oChart = new TsgcHTMLComponent_Chart(NULL);
TsgcHTMLTemplate_Bootstrap *oPage = new TsgcHTMLTemplate_Bootstrap(NULL);
try
{
oChart->ChartType = ctBar;
oChart->AddLabel("Q1"); oChart->AddLabel("Q2"); oChart->AddLabel("Q3");
oChart->AddDataset("Revenue", OPENARRAY(double, (1200, 1900, 1500)),
"#7C3AED", "rgba(124,58,237,.25)", true);
oPage->Title = "Dashboard";
oPage->BodyContent = oChart->HTML; // component -> HTMLreturn oPage->GetHTML(); // full Bootstrap document
}
__finally
{
delete oPage;
delete oChart;
}
}
using esegece.sgcWebSockets;
// 1. Start a server and attach the htmx enginevar server = new TsgcWebSocketHTTPServer();
server.Port = 8080;
server.OnCommandGet += HandleGet;
var htmx = new TsgcHTMX_Engine_Server();
htmx.Server = server; // realtime htmx over WebSocket
server.Active = true;
// 2. Build the page from componentsstring BuildDashboard()
{
var chart = new TsgcHTMLComponent_Chart();
chart.ChartType = TsgcHTMLChartType.ctBar;
chart.AddLabel("Q1"); chart.AddLabel("Q2"); chart.AddLabel("Q3");
chart.AddDataset("Revenue", newdouble[] { 1200, 1900, 1500 },
"#7C3AED", "rgba(124,58,237,.25)", true);
var page = new TsgcHTMLTemplate_Bootstrap();
page.Title = "Dashboard";
page.BodyContent = chart.HTML; // component -> HTMLreturn page.GetHTML(); // full Bootstrap document
}
Inicie um servidor, anexe o htmxUm TsgcWSHTTPServer responde às requisições, e um TsgcHTMX_Engine_Server mantém a página interativa e ao vivo via WebSocket.
Monte a página a partir de componentesDefina as propriedades de um gráfico, de um grid ou de um formulário e depois leia o seu HTML. O TsgcHTMLTemplate_Bootstrap o envolve em um documento responsivo completo.
Sirva a página e envie atualizaçõesCliques e envios de formulário percorrem seus manipuladores de eventos, e o servidor troca fragmentos de HTML no lugar. Sem cadeia de build de JavaScript.
Os mesmos blocos de construção, em maior escala
O dashboard da demo de ERP: cartões de KPI, um gráfico de receita e um grid de faturas recentes, tudo criado a partir de componentes.
O sgcHTML transforma seu back end Delphi, C++ Builder ou .NET existente em um servidor de aplicações web. Cada componente é uma classe nativa que gera HTML Bootstrap 5, e o htmx mantém a página interativa e ao vivo sem uma única linha de JavaScript escrita à mão.
Componentes que renderizam HTML
Cada widget é uma classe: TsgcHTMLComponent_Chart, TsgcHTMLComponent_Grid, TsgcHTMLComponent_Form e mais 86. Defina suas propriedades e então leia a propriedade HTML para obter markup Bootstrap 5 limpo, pronto para servir.
Servido pelo seu próprio servidor
Adicione um TsgcHTMLEngine_Server (ou conecte o HTML a um TsgcWebSocketHTTPServerexistente). As requisições chegam ao seu handler OnCommandGet e você responde com uma página montada a partir de componentes. Sem pilha web externa.
Hospedagem em WebBroker & DataSnap
O sgcHTML não está preso ao servidor sgcWebSockets. Sirva as mesmas páginas construídas a partir de componentes em qualquer aplicação WebBroker da Embarcadero via TsgcHTMX_Engine_Server_WebBroker, ou em um servidor DataSnap com push ao vivo por WebSocket na mesma porta dos seus endpoints REST.
Adicione um TsgcHTMX_Engine_Server e cliques, envios de formulário e atualizações ao vivo percorrem seus manipuladores de eventos em Pascal ou C#. O servidor troca fragmentos de HTML no lugar. A sensação de SPA, sem a cadeia de build de JavaScript.
Tempo real sobre WebSockets
Como o htmx roda sobre o servidor sgcWebSockets, você pode enviar HTML ao vivo a todos os navegadores conectados. Dashboards, monitores e janelas de chat se atualizam no instante em que seus dados mudam, dirigidos pelo servidor, sem polling. Onde um proxy bloqueia WebSockets, a mesma página pode receber suas atualizações por server-sent events.
Temas & templates
TsgcHTMLTemplate_Bootstrap envolve seu conteúdo em um documento responsivo completo. TsgcHTMLThemeController e TsgcHTMLThemeBuilder oferecem temas claro e escuro e uma folha de estilos compartilhada. O Bootstrap 5.3 e o htmx acompanham embutidos, sem CDN em tempo de execução.
Vinculação direta a banco de dados
Grid, DataTable, Chart, Select, TreeView, Scheduler, Timeline e Form se vinculam diretamente a um TDataSet via LoadFromDataSet / DataSource. Aponte um componente para uma consulta e ele renderiza as linhas.
UI localizada, 17 idiomas
Textos de UI integrados (botões, rótulos, mensagens de validação) em inglês, espanhol, francês, alemão, português, italiano, holandês, sueco, norueguês, polonês, tcheco, turco, russo, chinês, japonês, coreano e árabe. Escolha um com sgcHTMLSetLanguage. O árabe e o hebraico invertem a página inteira para a direita para a esquerda automaticamente: dir="rtl", a folha de estilos RTL do Bootstrap e componentes espelhados, sem alterações no código.
Saída segura por padrão
Cada componente passa seus textos dinâmicos, atributos, JavaScript embutido e URLs por codificação automática e sanitização de URL (sgcHTMLEncode, sgcHTMLAttrEncode, sgcJSEncode, sgcHTMLSanitizeURL), de modo que os dados do usuário não escapam do seu contexto nem injetam script.
Biblioteca de componentes
110 componentes, dez famílias.
Da navegação a grids de dados, gráficos, formulários, sobreposições e chat de IA, todo o vocabulário do Bootstrap 5 como componentes nativos. Cada um tem a sua própria página, com exemplos em Delphi, C++ Builder e .NET.
Todo acréscimo vem desativado até que você o use, então uma página que não usa nenhum é renderizada exatamente como antes. A lista completa está na matriz de recursos.
A sua página dentro do ChatGPT e do Claude
Uma ferramenta MCP responde com uma página em vez de texto, montada com os mesmos componentes que você usa em qualquer página web e renderizada pelo ChatGPT, pelo Claude e pelo VS Code. Requer a edição Enterprise ou All-Access, ou o pacote sgcAI.
Descreva uma página ou entregue uma captura de tela ao designer, e ele constrói a página com os seus próprios componentes. Ele responde a partir de um esquema construído a partir do seu registro, então não consegue nomear uma classe que você não ofereceu, e nada é aplicado até que você aceite. Exige as units de IA da edição Enterprise ou All-Access, ou o pacote sgcAI.
A listagem, a busca, a paginação, o formulário, a exclusão e a gravação de uma tabela como um único componente, sobre um dataset ou sobre o seu próprio SQL. Um assistente da IDE o cria.
Uma pergunta em linguagem natural vira filtros, ordenações, agrupamentos e destaques, validados contra as suas próprias colunas antes de qualquer aplicação. Funciona sem chave de API por meio de um parser integrado, e com sete provedores quando as units de IA fazem parte da sua edição.
Server-sent events para redes que bloqueiam WebSockets, Web Push para um navegador que não está em execução, uma caixa de notificações e uma tabela de preferências. O Web Push requer a edição Enterprise ou All-Access.
Sessões por cookie, tokens CSRF, limitação de tentativas de login e proteção de rotas por perfil. Parâmetros de caminho e filtros de método nas rotas, navegação de página única a partir do template da página e auxiliares para testar o markup gerado.
Se você cria aplicações ASP.NET Core MVC ou Razor Pages no estilo Telerik ou DevExpress, o sgcHTML agora fala a mesma língua. Tag Helpers como <sgc-grid>, <sgc-form>, <sgc-dialog> e <sgc-chart>, e seus equivalentes fluentes em Html.Sgc(), geram HTML Bootstrap 5 no servidor e conversam com seus controllers via htmx. Não há framework JavaScript para aprender nem fonte de dados JSON para escrever. A camada Razor acompanha o pacote NuGet esegece.sgcHTML.AspNetCore , incluindo a edição Community, e chega na próxima versão.
// Program.cs
builder.Services.AddControllersWithViews();
builder.Services.AddSgcHtml(o => o.ServeRootPage = false); // the MVC app owns "/"
builder.Services.AddSgcHtmlRazor(); // SgcDataRequest binder, grid state, /sgcHTML.css// ...
app.UseWebSockets(); // before UseSgcHtml, needed by live charts
app.UseSgcHtml();
app.MapDefaultControllerRoute();
// Controllers/OrdersController.cspublic class OrdersController : Controller
{
private readonly ShopDb FDb;
public OrdersController(ShopDb db) { FDb = db; }
// An IQueryable projection: EF Core turns paging, sort and filters into SQL.private IQueryable<OrderRow> Rows() =>
FDb.Orders.AsNoTracking().Select(o => new OrderRow
{
Id = o.Id, Reference = o.Reference, Customer = o.Customer.Name,
OrderDate = o.OrderDate, Total = o.Total, Paid = o.Paid
});
public IActionResult Index() => View(Rows());
// Every page, sort, filter and search click of the grid lands here.public IActionResult Read(SgcDataRequest request) => this.SgcGrid(request, Rows());
// The toolbar export links: the filtered and sorted rows as XLSX or PDF.public IActionResult Export(SgcDataRequest request) =>
this.SgcGridExport(request, Rows(), "orders");
}
@* The same grid with the fluent builder, the twin of Html.Kendo().Grid<T>() *@
@(Html.Sgc().Grid<OrderRow>("orders")
.Key(o => o.Id)
.Columns(c =>
{
c.Bound(o => o.Reference).Searchable();
c.Bound(o => o.Customer).Searchable();
c.Bound(o => o.OrderDate).Title("Date").Format("{0:yyyy-MM-dd}").Filter(SgcGridFilterKind.Range);
c.Bound(o => o.Total).Format("{0:N2}").Align("right").Filter(SgcGridFilterKind.Range);
c.Bound(o => o.Paid);
})
.Items(Model)
.Read("Read")
.Export(SgcExportFormat.Xlsx, SgcExportFormat.Pdf)
.ExportAction("Export")
.Pageable(15)
.Sortable().Filterable().Searchable().PushUrl())
@* _Layout.cshtml: live="ws" opens the WebSocket that live charts listen to *@
<sgc-scripts live="ws" />
@* The view *@
<sgc-chart name="live-orders" type="line" height="260" live="true">
<sgc-series name="Orders / s" data="new double[] { 0 }" color="#dc3545" />
</sgc-chart>
// builder.Services.AddHostedService<LiveSalesFeed>();public sealed class LiveSalesFeed : BackgroundService
{
private readonly ISgcHtmlHub FHub;
private readonly Queue<string> FLabels = new Queue<string>();
private readonly Queue<double> FValues = new Queue<double>();
public LiveSalesFeed(ISgcHtmlHub hub) { FHub = hub; }
protected override async Task ExecuteAsync(CancellationToken stoppingToken)
{
var oRandom = new Random();
while (!stoppingToken.IsCancellationRequested)
{
await Task.Delay(1000, stoppingToken);
FLabels.Enqueue(DateTime.Now.ToString("HH:mm:ss"));
FValues.Enqueue(oRandom.Next(0, 20));
if (FValues.Count > 20) { FLabels.Dequeue(); FValues.Dequeue(); }
// One WebSocket message redraws the chart in every open browser.await FHub.BroadcastChartAsync("live-orders", FLabels.ToArray(),
new SgcChartSeries("Orders / s", FValues.ToArray(), "#dc3545"));
}
}
}
Um grid sobre IQueryable
<sgc-grid> pagina, ordena, filtra (texto e intervalo), pesquisa e exporta para XLSX e PDF no servidor. O controller responde com this.SgcGrid(request, query), e o EF Core transforma cada clique em SQL parametrizado. push-url mantém a página, a ordenação e os filtros na barra de endereços, então recarregar a página e o botão Voltar funcionam.
Formulários vinculados com asp-for
<sgc-textbox>, <sgc-select>, <sgc-datepicker>, <sgc-checkbox> e <sgc-autocomplete> vinculam-se ao seu modelo com asp-for e exibem os erros do ModelState sob cada campo. <sgc-form hx="true"> envia via htmx, e this.SgcRedirect(url) navega depois de uma gravação válida.
Edição em um diálogo
Qualquer elemento com sgc-dialog="name" carrega sua URL em um <sgc-dialog>. Após um post válido, this.SgcCloseDialog("edit-order", refresh: "orders") fecha o diálogo e recarrega o grid, o padrão de edição em popup sem nenhum script seu.
Gráficos atualizados ao vivo, sem SignalR
<sgc-chart> renderiza dados estáticos, consulta uma action com refresh-every="5s", ou funciona com live="true": um serviço em segundo plano chama hub.BroadcastChartAsync(...) e todo navegador aberto redesenha o gráfico pelo WebSocket do sgcHTML. Os gráficos do Telerik e do DevExpress precisam de infraestrutura SignalR para o push do servidor, o sgcHTML já traz isso embutido.
Vindo do Telerik UI for ASP.NET Core ou do DevExpress? [DataSourceRequest] vira SgcDataRequest, ToDataSourceResult vira this.SgcGrid(request, query) (ou query.ToSgcDataResult(request) só para os dados), e Html.Kendo().TextBoxFor(m => m.X) vira Html.Sgc().TextBoxFor(m => m.X). A demo MVC executável, 22.RazorMvc, é o exemplo de pedidos da Telerik escrito com sgcHTML sobre o EF Core.
Duas camadas de API
Componentes de alto nível ou nós de baixo nível.
Use componentes prontos quando quiser um widget em uma linha, ou desça para a camada de nós quando precisar de controle total sobre o markup.
Camada de componentes
Os 110 widgets TsgcHTMLComponent_* . Configure as propriedades, opcionalmente vincule um dataset, leia HTML. Muitos também expõem um helper estático Build(...) para uso inline em uma linha.
Camada de nós / composição
Primitivas como TsgcHTMLContainer (com um flag Void para tags autofechadas), TsgcHTMLCard, TsgcHTMLForm, TsgcHTMLField, TsgcHTMLButton e TsgcHTMLTable compõem qualquer layout e depois são renderizadas com TsgcHTMLTemplate_Bootstrap. O conjunto de nós também inclui blocos de construção do Bootstrap como TsgcHTMLModal, TsgcHTMLOffcanvas, TsgcHTMLAccordion, TsgcHTMLCarousel, TsgcHTMLToast, TsgcHTMLProgress, TsgcHTMLSpinner, TsgcHTMLListGroupNode, TsgcHTMLInputGroup, TsgcHTMLButtonGroupNode, TsgcHTMLRadio, TsgcHTMLBreadcrumb, TsgcHTMLNavbarNode e TsgcHTMLImage.
Construtor visual de páginas
TsgcHTMLPageBuilder com seu editor em tempo de design permite montar páginas na IDE, enquanto TsgcHTMLThemeController gerencia os temas claro e escuro em toda a aplicação.
Três formas de começar
Comece de onde você está.
Não quer construir você mesmo?
Com o sgcCustomization HTML você descreve a aplicação de que precisa e a equipe eSeGeCe a constrói para você com os componentes sgcHTML + sgcWebSockets. Três pacotes únicos a partir de €149, e você recebe um projeto completo que pode compilar, estender e reestilizar com seus componentes licenciados.
Já tem uma aplicação web construída com IntraWeb, uniGUI, TMS WEB Core, Elevate Web Builder ou D2Bridge? Guias passo a passo mostram como movê-la para o sgcHTML, com um mapeamento de conceitos para cada framework. Há também um formulário de assistência à migração se você quiser que nossa equipe ajude a planejar ou faça a mudança.
Sirva as mesmas páginas montadas com componentes a partir de qualquer aplicação WebBroker da Embarcadero, ou de um servidor DataSnap com push WebSocket ao vivo na mesma porta dos seus endpoints REST.
Confiado por desenvolvedores Delphi, C++ Builder, Lazarus e .NET que constroem aplicativos em tempo real ao redor do mundo.
A biblioteca sgcWebSockets de vocês é muito útil e fácil de configurar. Continuem com o ótimo trabalho!
Simone MorettiDesenvolvedor Delphi
O sgcWebSockets é incrível e o suporte de vocês é o melhor!
Christian MeyerFundador & CTO
Muito obrigado pela ajuda e pelo suporte, eu adoro os componentes de vocês.
Mark SteinfeldCTO
Entregue uma UI web sem sair da sua IDE.
Adicione gráficos, grids, formulários, dashboards e páginas em tempo real à sua aplicação Delphi, C++ Builder ou .NET, com a linguagem que você já usa.