sgcHTML: Crea Interfaces Web Modernas desde Delphi Sin Escribir JavaScript

· Componentes

Los desarrolladores de Delphi llevan treinta años construyendo aplicaciones de negocio. El back end es sólido: acceso a bases de datos, lógica de negocio, generación de informes e integración de servicios. El problema siempre ha sido el front end. En el momento en que un cliente solicita una interfaz basada en navegador, el enfoque clásico de Delphi se rompe. O bien se recurre a IntraWeb (potente, pero con estado y envejecido), se intenta con TMS WEB Core (que compila Pascal a JavaScript pero impone un modelo de despliegue del lado del cliente), o se cede el front end a un equipo de JavaScript y se mantienen dos bases de código completamente separadas.

sgcHTML adopta un enfoque diferente. Es una biblioteca de más de 60 componentes del lado del servidor que generan HTML Bootstrap 5 directamente desde tu código Delphi, C++ Builder o .NET. Configuras las propiedades, lees la propiedad HTML y sirves el resultado. La interactividad proviene de htmx, una pequeña biblioteca JavaScript que permite al servidor intercambiar fragmentos de página en respuesta a clics y envíos de formularios — sin necesidad de escribir JavaScript. El resultado es una aplicación web moderna y responsiva construida íntegramente en Object Pascal o C#.

El problema que resuelve sgcHTML

La arquitectura VCL estándar de Delphi asume un cliente pesado: formularios, cuadrículas y diálogos ejecutándose en Windows. Ese modelo funciona bien para herramientas internas. Se rompe cuando el cliente quiere un portal accesible desde un navegador en cualquier dispositivo, o cuando la política de TI prohíbe instalar aplicaciones de escritorio.

Las alternativas anteriores a sgcHTML conllevaban fricciones:

sgcHTML cubre esa brecha: una biblioteca de componentes nativa de Delphi cuya salida es HTML Bootstrap 5 estándar y moderno que cualquier navegador comprende, mantenido activo por htmx, todo controlado desde una única base de código en Pascal o C#.

Cómo funciona

La arquitectura tiene tres capas.

Primera, un componente como TsgcHTMLComponent_Chart, TsgcHTMLComponent_DataTable o TsgcHTMLComponent_StatCard sabe cómo describirse a sí mismo como HTML Bootstrap 5. Lo configuras a través de propiedades publicadas normales y llamas a su propiedad HTML para obtener el marcado.

Segunda, un constructor de páginas (TsgcHTMLPageBuilder) ensambla los componentes en una cuadrícula responsiva. Asignas a cada componente una Section, un SectionTitle, un SectionOrder y un ColumnWidth (la cuadrícula de 1–12 columnas de Bootstrap). El constructor de páginas los organiza automáticamente.

Tercera, un motor de servidor (TsgcHTMLEngine_Server) conecta todo a un TsgcWSHTTPServer de sgcWebSockets. Las solicitudes llegan a tu controlador OnCommandGet y respondes con una página HTML completa construida a partir de tus componentes. Los recursos CSS y JavaScript de Bootstrap están integrados como recursos binarios dentro de la biblioteca, por lo que no hay nada que desplegar junto al binario.

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;

Más de 60 componentes listos para usar

sgcHTML incluye una amplia paleta de componentes que cubre los patrones de interfaz web más comunes. Cada componente es una clase Delphi estándar que puedes colocar en un formulario o crear mediante código:

Enlace a DataSource

Cada componente de sgcHTML admite una propiedad DataSource que lo vincula a cualquier TDataSource de tu aplicación. Establece DataAutoRefresh := True y el componente se vuelve a renderizar automáticamente cuando el conjunto de datos subyacente cambia. Para un control más preciso, llama a LoadFromDataSet directamente:

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

El componente de gráfico tiene un método LoadFromDataSet equivalente que acepta un nombre de campo de etiqueta y uno o más nombres de campos de valor, de modo que una consulta de ingresos por mes se convierte en un gráfico de barras en tres líneas:

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

Interactividad mediante htmx — sin JavaScript requerido

El HTML estático es útil. El HTML interactivo es necesario. sgcHTML logra la interactividad mediante htmx: una pequeña biblioteca (14 KB comprimida) que intercepta clics y envíos de formularios, envía una solicitud HTTP a tu servidor e inserta el HTML de respuesta en la página. Tu controlador OnCommandGet o OnCommandOther de Delphi recibe la solicitud, reconstruye el componente relevante y devuelve su HTML. Sin recarga de página. Sin 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;

El gráfico en el navegador lleva un atributo hx-get que apunta al endpoint del fragmento. Cuando el usuario selecciona un rango diferente en un menú desplegable, htmx intercambia el div del gráfico en su lugar — la página circundante no se recarga.

Actualizaciones en tiempo real mediante WebSocket

Dado que sgcHTML está construido sobre sgcWebSockets, la notificación push en tiempo real es una característica de primer nivel. Cuando llegan nuevos datos — un nuevo pedido, una cotización de precio, una lectura de sensor — tu servidor envía un fragmento HTML a través de WebSocket y htmx lo inserta en el elemento DOM correcto. El cliente se suscribe a un endpoint WebSocket; el servidor llama a SendMessage. Sin sondeo, sin long-polling, sin intermediario de mensajes 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;

Sin cadena de construcción JavaScript, sin npm, sin Node.js

Todos los recursos JavaScript y CSS que necesita sgcHTML (Bootstrap 5, Chart.js, htmx) están integrados como recursos binarios dentro del ejecutable Delphi compilado. Tu despliegue es un único archivo .exe. No hay directorio node_modules, ni configuración de webpack, ni cadena Babel, ni conflictos de versiones entre un gestor de paquetes del front end y tu back end. Instalas sgcHTML como un paquete Delphi, compilas y distribuyes.

Primeros pasos

sgcHTML se incluye como parte de las ediciones sgcWebSockets Enterprise y All-Access, y también está disponible como compra independiente. Hay una versión de prueba gratuita disponible para descarga. La versión de prueba incluye todos los más de 60 componentes sin restricciones de funcionalidades durante el período de prueba.

La biblioteca es compatible con Delphi 10.2 Tokyo hasta Delphi 13 y C++ Builder 10.2 hasta 13, y la edición .NET es compatible con .NET 6 y versiones posteriores. El código fuente completo está incluido en todos los niveles de pago.

¿Tienes preguntas o consultas previas a la compra? Ponte en contacto. Recibirás una respuesta de las personas que escribieron el código.