sgcHTML

Crea interfaces web modernas y completas directamente desde Delphi, C++ Builder y .NET. sgcHTML es un framework de componentes del lado del servidor con más de 60 widgets listos para usar — gráficos, grids, formularios, paneles, chat y mucho más — que se renderizan como marcado Bootstrap 5 y se mantienen interactivos gracias a htmx. Tú escribes Object Pascal o C#, sgcHTML escribe el HTML, el CSS y el JavaScript.

Más de 60 componentes de UI
Bootstrap 5 + htmx
Delphi / C++ Builder / .NET
No requiere JavaScript

Tú escribes Pascal o C#. sgcHTML escribe el front end.

sgcHTML convierte tu back end existente de Delphi, C++ Builder o .NET en un servidor de aplicaciones web. Cada componente es una clase nativa que emite HTML de Bootstrap 5; htmx mantiene la página interactiva y en directo sin una sola línea de JavaScript escrita a mano.

Componentes que renderizan HTML

Cada widget es una clase — TsgcHTMLComponent_Chart, TsgcHTMLComponent_Grid, TsgcHTMLComponent_Form y 60 más. Configura sus propiedades y luego lee su propiedad HTML para obtener marcado Bootstrap 5 limpio y listo para servir.

Servido por tu propio servidor

Coloca un TsgcHTMLEngine_Server (o conecta el HTML a un TsgcWebSocketHTTPServer existente). Las peticiones llegan a tu manejador OnCommandGet; respondes con una página construida a partir de componentes. Sin stack web externo.

Interactivo gracias a htmx

Añade un TsgcHTMX_Engine_Server y los clics, los envíos de formularios y las actualizaciones en directo van y vuelven a tus manejadores de eventos en Pascal/C#. El servidor intercambia fragmentos de HTML en su sitio — la sensación de una SPA, sin nada de la cadena de compilación de JavaScript.

En tiempo real sobre WebSockets

Como htmx se ejecuta sobre el servidor sgcWebSockets, puedes enviar HTML en directo a cada navegador conectado. Los paneles, los monitores y las ventanas de chat se actualizan en el instante en que cambian tus datos — impulsado por el servidor, sin sondeo.

Temas y plantillas

TsgcHTMLTemplate_Bootstrap envuelve tu contenido en un documento responsive completo; TsgcHTMLThemeController y TsgcHTMLThemeBuilder proporcionan temas claro/oscuro y una hoja de estilos compartida. Bootstrap 5.3 y htmx vienen incrustados — sin CDN en tiempo de ejecución.

Vinculación directa a base de datos

Grid, DataTable, Chart, Select, TreeView, Scheduler, Timeline y Form se vinculan directamente a un TDataSet mediante LoadFromDataSet / DataSource. Apunta un componente a una consulta y renderiza las filas.

Más de 60 componentes, ocho familias

Desde los elementos de navegación hasta los grids de datos, gráficos, formularios, superposiciones y chat con IA — todo el vocabulario de Bootstrap 5 como componentes nativos. Cada uno enlaza con su propia página con ejemplos en Delphi, C++ Builder y .NET.

NavBar, Sidebar, Breadcrumb, Tabs, Pagination, Toolbar, TreeView, Stepper, Dropdown, ButtonGroup, ListGroup, DashboardLayout.

Ver componentes →

Datos y Tablas

Grid, DataTable, Calendar, Scheduler, Timeline, KanbanBoard, Gantt — ordenables, filtrables, exportables y vinculados a datasets.

Ver componentes →

Gráficos y Visualización

Chart (Chart.js), Gauge, Diagram (flujo SVG), Map (Leaflet) — visualizaciones basadas en datos a partir de tus propios datasets.

Ver componentes →

Formularios y Entradas

Form, Edit, Memo, CheckBox, RadioGroup, Select, InputGroup, AutoComplete, DatePicker, FileUpload, RichEditor, Rating.

Ver componentes →

Contenido y Diseño

Panel, StatCard, Accordion, Carousel, Image, Avatar, Video — tarjetas, multimedia y mosaicos de KPI para paneles.

Ver componentes →

Superposiciones y Avisos

Modal, Offcanvas, Popover, Toast, Snackbar, Notification, Spinner, Placeholder — diálogos y superficies de estado.

Ver componentes →

Chat e IA

ChatBox, Chat (estilo WhatsApp), AIChat con selector de proveedor, streaming de tokens y citas de fuentes RAG.

Ver componentes →

Autenticación

Login, SocialLogin (OAuth), OAuthCallback, WebAuthnLogin (passkeys) — flujos de inicio de sesión listos para usar.

Ver componentes →

Ver la matriz de características completa →

Un panel web en unas pocas líneas

Inicia un servidor HTTP, conecta el motor htmx y responde a las peticiones con una página construida a partir de componentes. La misma API en Delphi, C++ Builder y .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 components
function 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 document
  finally
    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 -> HTML
    return oPage->GetHTML();             // full Bootstrap document
  }
  __finally
  {
    delete oPage;
    delete oChart;
  }
}
using esegece.sgcWebSockets;

// 1. Start a server and attach the htmx engine
var 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 components
string BuildDashboard()
{
    var chart = new TsgcHTMLComponent_Chart();
    chart.ChartType = TsgcHTMLChartType.ctBar;
    chart.AddLabel("Q1"); chart.AddLabel("Q2"); chart.AddLabel("Q3");
    chart.AddDataset("Revenue", new double[] { 1200, 1900, 1500 },
        "#7C3AED", "rgba(124,58,237,.25)", true);

    var page = new TsgcHTMLTemplate_Bootstrap();
    page.Title = "Dashboard";
    page.BodyContent = chart.HTML;   // component -> HTML
    return page.GetHTML();            // full Bootstrap document
}

Componentes de alto nivel o nodos de bajo nivel

Recurre a los componentes listos para usar cuando quieras un widget en una sola línea, o baja a la capa de nodos cuando necesites control total sobre el marcado.

Capa de componentes

Los más de 60 widgets TsgcHTMLComponent_*. Configura propiedades, opcionalmente vincula un dataset y lee HTML. Muchos también exponen un método estático Build(...) para un uso en línea de una sola línea.

Capa de nodos / composición

Primitivas como TsgcHTMLContainer, TsgcHTMLCard, TsgcHTMLForm, TsgcHTMLField, TsgcHTMLButton, TsgcHTMLTable se componen en cualquier diseño y luego se renderizan con TsgcHTMLTemplate_Bootstrap.

Constructor visual de páginas

TsgcHTMLPageBuilder con su editor en tiempo de diseño te permite ensamblar páginas en el IDE, mientras que TsgcHTMLThemeController gestiona los temas claro/oscuro en toda la aplicación.

3,000+Developers
20+Years
761+Components
30+API Integrations
5Platforms
Garantía de devolución de 30 días¿No estás satisfecho? Solicita un reembolso completo en los 30 días posteriores a la compra. Ver política de reembolso

Lanza una UI web sin salir de tu IDE

Añade gráficos, grids, formularios, paneles y páginas en tiempo real a tu aplicación de Delphi, C++ Builder o .NET — con el lenguaje que ya usas.

Otros productos de eSeGeCe

Combina sgcHTML con nuestras otras bibliotecas de componentes para Delphi, C++ Builder y .NET.

sgcWebSockets

Componentes empresariales de WebSocket, HTTP/2/3, MQTT, AMQP, WebRTC e IA/LLM. sgcHTML se sirve sobre los mismos servidores HTTP y WebSocket de alto rendimiento.

Más información →

sgcSign

Firmas digitales empresariales — XAdES, PAdES, CAdES y ASiC con 10 proveedores de claves y 21 perfiles por país de la UE.

Más información →

sgcOpenAPI

Parser de OpenAPI 3.0 y generador de SDK. Convierte cualquier especificación OpenAPI en un cliente Delphi fuertemente tipado en segundos.

Más información →

sgcBiometrics

Componentes nativos de Windows Hello, huella dactilar y Windows Biometric Framework para Delphi y C++ Builder.

Más información →