sgcHTMLAplicaciones web,escritas en Pascal.Sin JavaScript.
Crea interfaces web completas y modernas directamente desde Delphi, C++ Builder y .NET. sgcHTML es un framework de componentes del lado del servidor con 110 widgets listos para usar: gráficos, cuadrículas, formularios, paneles, chat y más. Muchos se enlazan directamente a un TDataSet, generan marcado Bootstrap 5 y se mantienen interactivos mediante htmx. Tú escribes Object Pascal o C#, sgcHTML escribe el HTML, el CSS y el JavaScript.
Demo ERP | un único exe de Delphi sirviendo su propia interfaz web
Punto de ventaMonitor en vivoServicio de campo
110Componentes de UI en diez familias
3Lenguajes: Delphi, C++ Builder y .NET
17Idiomas de UI integrados, incluidos los de derecha a izquierda
15Aplicaciones reales funcionando en línea
0Líneas de JavaScript escritas a mano
Míralas funcionar
Dieciocho vídeos. Sin diapositivas.
Cada clip es una grabación de pantalla de una aplicación real en funcionamiento, narrada y con subtítulos. Elige uno de la lista. No se descarga nada hasta que pulses reproducir.
sgcHTML en dos minutos
Crea una interfaz web completa desde Delphi con componentes del lado del servidor, marcado Bootstrap 5 y htmx, sin ningún paso de compilación de JavaScript.
Cuadrículas, gráficos, planificadores, mapas y paneles de las aplicaciones de demostración, cada uno producido por componentes que configuras en código.
Un generador de tablas dinámicas ad hoc sobre un conjunto de datos en vivo
Un generador de tablas dinámicas ad hoc sobre un dataset en vivo
Los mismos componentes, en un escáner de mano
Los mismos componentes, en un escáner portátil
Cómo funciona
Tú escribes Pascal o C#. sgcHTML escribe el front end.
Un panel web en unas pocas líneas
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
}
Inicia un servidor, adjunta htmxUn TsgcWSHTTPServer atiende las peticiones y un TsgcHTMX_Engine_Server mantiene la página interactiva y en vivo sobre WebSocket.
Construye la página a partir de componentesDefine las propiedades de un gráfico, una cuadrícula o un formulario y lee después su HTML. TsgcHTMLTemplate_Bootstrap lo envuelve en un documento responsive completo.
Sírvela y envía actualizacionesLos clics y los envíos de formularios llegan a tus manejadores de eventos y el servidor intercambia fragmentos HTML en el sitio. Sin cadena de compilación de JavaScript.
Los mismos bloques, a mayor escala
El panel de la demo ERP: tarjetas de KPI, un gráfico de ingresos y una cuadrícula de facturas recientes, todo creado con componentes.
sgcHTML convierte tu back end actual de Delphi, C++ Builder o .NET en un servidor de aplicaciones web. Cada componente es una clase nativa que genera HTML de Bootstrap 5, y htmx mantiene la página interactiva y en vivo sin una sola línea de JavaScript escrita a mano.
Componentes que generan HTML
Cada widget es una clase: TsgcHTMLComponent_Chart, TsgcHTMLComponent_Grid, TsgcHTMLComponent_Form y 86 más. Define sus propiedades y lee después su propiedad HTML para obtener marcado Bootstrap 5 limpio, listo para servir.
Servido por tu propio servidor
Coloca un TsgcHTMLEngine_Server (o conecta el HTML a un TsgcWebSocketHTTPServerexistente). Las peticiones llegan a tu evento OnCommandGet y respondes con una página construida a partir de componentes. Sin pila web externa.
Alojamiento en WebBroker y DataSnap
sgcHTML no está atado al servidor de sgcWebSockets. Sirve las mismas páginas construidas con componentes desde cualquier aplicación Embarcadero WebBroker mediante TsgcHTMX_Engine_Server_WebBroker, o desde un servidor DataSnap con envío WebSocket en vivo en el mismo puerto que tus endpoints REST.
Añade un TsgcHTMX_Engine_Server y los clics, los envíos de formularios y las actualizaciones en vivo llegan a tus manejadores de eventos en Pascal o C#. El servidor intercambia fragmentos HTML en el sitio. La sensación de una SPA, sin la cadena de compilación de JavaScript.
Tiempo real sobre WebSockets
Como htmx funciona sobre el servidor de sgcWebSockets, puedes enviar HTML en vivo a todos los navegadores conectados. Los paneles, los monitores y las ventanas de chat se actualizan en el instante en que cambian tus datos, dirigidos por el servidor y sin sondeo. Donde un proxy bloquea los WebSockets, la misma página puede recibir sus actualizaciones mediante eventos enviados por el servidor.
Temas y plantillas
TsgcHTMLTemplate_Bootstrap envuelve tu contenido en un documento responsive completo. TsgcHTMLThemeController y TsgcHTMLThemeBuilder ofrecen temas claro y oscuro y una hoja de estilos compartida. Bootstrap 5.3 y htmx se entregan integrados, sin CDN en tiempo de ejecución.
Enlace directo a la base de datos
Grid, DataTable, Chart, Select, TreeView, Scheduler, Timeline y Form se enlazan directamente a un TDataSet mediante LoadFromDataSet / DataSource. Apunta un componente a una consulta y él genera las filas.
Interfaz localizada, 17 idiomas
Textos de interfaz integrados (botones, etiquetas, mensajes de validación) en inglés, español, francés, alemán, portugués, italiano, neerlandés, sueco, noruego, polaco, checo, turco, ruso, chino, japonés, coreano y árabe. Elige uno con sgcHTMLSetLanguage. El árabe y el hebreo voltean toda la página de derecha a izquierda automáticamente: dir="rtl", la hoja de estilos RTL de Bootstrap y componentes reflejados, sin cambios de código.
Salida segura por defecto
Cada componente pasa su texto dinámico, sus atributos, su JavaScript en línea y sus URL por una codificación automática y una sanitización de URL (sgcHTMLEncode, sgcHTMLAttrEncode, sgcJSEncode, sgcHTMLSanitizeURL), de modo que los datos del usuario no pueden salirse de su contexto ni inyectar scripts.
Biblioteca de componentes
110 componentes, diez familias.
Desde la navegación hasta las cuadrículas de datos, los gráficos, los formularios, las superposiciones y el chat con IA, todo el vocabulario de Bootstrap 5 como componentes nativos. Cada uno enlaza a su propia página con ejemplos para Delphi, C++ Builder y .NET.
Cada novedad está desactivada hasta que la uses, así que una página que no use ninguna se genera exactamente igual que antes. La lista completa está en la matriz de características.
Tu página dentro de ChatGPT y Claude
Una herramienta MCP responde con una página en lugar de texto, construida con los mismos componentes que usas en cualquier página web y mostrada por ChatGPT, Claude y VS Code. Requiere la edición Enterprise o All-Access, o el pack sgcAI.
Describe una página o entrega una captura de pantalla al diseñador, y construye la página con tus propios componentes. Responde a partir de un esquema construido desde tu registro, por lo que no puede nombrar una clase que no le hayas ofrecido, y no se aplica nada hasta que lo aceptes. Necesita las unidades de IA de la edición Enterprise o All-Access, o el pack sgcAI.
El listado, la búsqueda, la paginación, el formulario, el borrado y la ruta de escritura de una tabla como un único componente, sobre un dataset o sobre tu propio SQL. Un asistente del IDE lo crea.
Una pregunta en lenguaje natural se convierte en filtros, ordenaciones, agrupaciones y resaltados, validados contra tus propias columnas antes de aplicar nada. Funciona sin clave de API mediante un analizador integrado, y con siete proveedores cuando las unidades de IA están en tu edición.
Eventos enviados por el servidor para redes que bloquean los WebSockets, Web Push para un navegador que no está en ejecución, una bandeja de notificaciones y una tabla de preferencias. Web Push requiere la edición Enterprise o All-Access.
Sesiones por cookie, tokens CSRF, limitación de intentos de inicio de sesión y protección de rutas por rol. Parámetros de ruta y filtros de método en las rutas, navegación de página única desde la plantilla de página y helpers para probar el marcado que generas.
Si creas aplicaciones ASP.NET Core MVC o Razor Pages al estilo de Telerik o DevExpress, sgcHTML ahora habla el mismo idioma. Tag Helpers como <sgc-grid>, <sgc-form>, <sgc-dialog> y <sgc-chart>, y sus gemelos fluidos en Html.Sgc(), generan HTML Bootstrap 5 en el servidor y se comunican con tus controladores mediante htmx. No hay que aprender ningún framework de JavaScript ni escribir ningún origen de datos JSON. La capa Razor se distribuye en el paquete esegece.sgcHTML.AspNetCore NuGet, edición Community incluida, y llegará en la próxima versión.
// 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"));
}
}
}
Una cuadrícula sobre IQueryable
<sgc-grid> pagina, ordena, filtra (texto y rango), busca y exporta a XLSX y PDF en el servidor. El controlador responde con this.SgcGrid(request, query), y EF Core convierte cada clic en SQL parametrizado. push-url mantiene la página, la ordenación y los filtros en la barra de direcciones, de modo que la recarga y el botón de retroceso funcionan.
Formularios enlazados con asp-for
<sgc-textbox>, <sgc-select>, <sgc-datepicker>, <sgc-checkbox> y <sgc-autocomplete> se enlazan a tu modelo con asp-for y muestran los errores de ModelState bajo cada entrada. <sgc-form hx="true"> envía por htmx, y this.SgcRedirect(url) navega tras un guardado válido.
Edición en un diálogo
Cualquier elemento con sgc-dialog="name" carga su URL en un <sgc-dialog>. Tras un envío válido, this.SgcCloseDialog("edit-order", refresh: "orders") cierra el diálogo y recarga la cuadrícula, el patrón de edición emergente sin ningún script propio.
Gráficos en vivo, sin SignalR
<sgc-chart> muestra datos estáticos, sondea una acción con refresh-every="5s", o pasa a live="true": un servicio en segundo plano llama a hub.BroadcastChartAsync(...) y todos los navegadores abiertos se redibujan mediante el WebSocket de sgcHTML. Los gráficos de Telerik y DevExpress necesitan infraestructura SignalR para el envío desde el servidor, sgcHTML lo trae integrado.
¿Vienes de Telerik UI for ASP.NET Core o de DevExpress? [DataSourceRequest] pasa a ser SgcDataRequest, ToDataSourceResult pasa a ser this.SgcGrid(request, query) (o query.ToSgcDataResult(request) solo para los datos), y Html.Kendo().TextBoxFor(m => m.X) pasa a ser Html.Sgc().TextBoxFor(m => m.X). La demo MVC ejecutable, 22.RazorMvc, es el ejemplo de pedidos de Telerik escrito con sgcHTML sobre EF Core.
Dos capas de API
Componentes de alto nivel o nodos de bajo nivel.
Componentes de alto nivel o nodos de bajo nivel
Capa de componentes
Los 110 TsgcHTMLComponent_* widgets. Configura las propiedades, enlaza opcionalmente un dataset y lee HTML. Muchos exponen además un helper estático Build(...) para uso en línea de una sola línea.
Capa de nodos / composición
Primitivas como TsgcHTMLContainer (con un indicador Void para etiquetas autocerradas), TsgcHTMLCard, TsgcHTMLForm, TsgcHTMLField, TsgcHTMLButton y TsgcHTMLTable se componen en cualquier diseño y se renderizan después con TsgcHTMLTemplate_Bootstrap. El conjunto de nodos incluye también bloques de construcción de Bootstrap como TsgcHTMLModal, TsgcHTMLOffcanvas, TsgcHTMLAccordion, TsgcHTMLCarousel, TsgcHTMLToast, TsgcHTMLProgress, TsgcHTMLSpinner, TsgcHTMLListGroupNode, TsgcHTMLInputGroup, TsgcHTMLButtonGroupNode, TsgcHTMLRadio, TsgcHTMLBreadcrumb, TsgcHTMLNavbarNode y TsgcHTMLImage.
Constructor visual de páginas
TsgcHTMLPageBuilder con su editor en tiempo de diseño permite montar páginas en el IDE, mientras que TsgcHTMLThemeController gestiona los temas claro y oscuro en toda la aplicación.
Tres formas de empezar
Empieza desde donde estás.
¿No quieres construirlo tú mismo?
Con sgcCustomization HTML describes la aplicación que necesitas y el equipo de eSeGeCe la construye por ti con los componentes sgcHTML + sgcWebSockets. Tres paquetes de pago único desde €149, y recibes un proyecto completo que puedes compilar, ampliar y restilizar con tus componentes con licencia.
Sirve las mismas páginas construidas con componentes desde cualquier aplicación Embarcadero WebBroker, o desde un servidor DataSnap con envío WebSocket en vivo en el mismo puerto que tus endpoints REST.
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