sgcWebSockets 2026.9.0 incorpora cuatro nuevos componentes sgcHTML y, en lugar de mostrarlos de forma aislada, hemos construido con ellos cinco aplicaciones completas: un sistema de gestión de almacenes, una caja de punto de venta, un portal de informes y análisis, un panel de control SaaS multiinquilino y una aplicación de despacho de servicio de campo. Las cinco funcionan en vivo hoy en el servidor de demostraciones de eSeGeCe, junto a las demos de ERP, Admin CRUD, Live Monitor, Portal de clientes y Helpdesk que ya estaban ahí.
Los nuevos componentes son CameraScanner (escaneo de códigos de barras y QR en vivo a través de la propia cámara del navegador, sin necesidad de añadir ninguna librería), NumPad (un teclado numérico táctil pensado para el punto de venta), CommandPalette (el patrón de lanzador rápido Ctrl+K, para tu propia aplicación) y EmptyState (el panel que muestra una tabla o un resultado de búsqueda cuando no hay nada que mostrar). Este artículo repasa cada uno de ellos y luego las cinco demos que los ponen en práctica.
CameraScanner — escaneo de códigos de barras y QR, sin librería que añadir
TsgcHTMLComponent_CameraScanner abre la cámara del navegador y decodifica códigos de barras y QR utilizando la propia API nativa BarcodeDetector del navegador. No incluye ningún decodificador empaquetado ni nada descargado de una CDN: cuando BarcodeDetector no está disponible, el panel lo indica y sigue funcionando mediante entrada manual y captura de foto, que en ningún momento dependieron de esa API. La cámara se cierra en cada posible salida (pestaña oculta, navegación fuera de la página, botón atrás), de modo que el indicador luminoso de la cámara siempre se apaga.
uses
sgcHTML_Component_CameraScanner;
var
oScanner: TsgcHTMLComponent_CameraScanner;
begin
oScanner := TsgcHTMLComponent_CameraScanner.Create(nil);
try
oScanner.ScannerID := 'receiving_scan';
oScanner.Mode := smBoth; // scan barcodes AND capture a photo
oScanner.Formats := 'qr_code,ean_13,code_128';
oScanner.FieldName := 'sku';
oScanner.ContinuousScan := True;
oScanner.BeepOnScan := True;
WebModule.Response := oScanner.HTML; // camera panel + hidden fields + inline script
finally
oScanner.Free;
end;
end;NumPad — un teclado que nunca envía el separador decimal equivocado
TsgcHTMLComponent_NumPad es un teclado numérico y de moneda táctil, pensado para la introducción de datos en el punto de venta. El detalle de ingeniería que merece destacarse: cada número que este componente escribe, tanto en el marcado como en su propio script, pasa por un formateador independiente del idioma, nunca por una rutina que respete la configuración regional del navegador. El campo oculto que envía siempre lleva un número como 12.50, nunca 12,50, de modo que el mismo formulario envía los mismos bytes desde un navegador español, alemán o inglés.
uses
sgcHTML_Component_NumPad;
var
oPad: TsgcHTMLComponent_NumPad;
begin
oPad := TsgcHTMLComponent_NumPad.Create(nil);
try
oPad.PadID := 'till_amount';
oPad.FieldName := 'amount';
oPad.Mode := npCurrency;
oPad.CurrencySymbol := '$';
oPad.DecimalPlaces := 2;
oPad.QuickAmounts.CommaText := '5,10,20,50'; // tender shortcut buttons
WebModule.Response := oPad.HTML; // display + calculator-style keys + quick amounts
finally
oPad.Free;
end;
end;CommandPalette — Ctrl+K para tu propia aplicación
TsgcHTMLComponent_CommandPalette es el lanzador superpuesto Ctrl+K / Cmd+K que ya conoces de VS Code, Slack y Linear: permanece oculto hasta que la combinación de teclas lo abre, se cierra con Esc o al hacer clic en el fondo, y se filtra mientras escribes con una primera pasada por subcadena seguida de una pasada de coincidencia difusa por subsecuencia, de modo que nu sigue encontrando “New User”. Las entradas se generan como marcado en el servidor, no se envían al navegador como JSON para filtrarlas del lado del cliente, de modo que cada título se codifica en HTML exactamente una vez.
uses
sgcHTML_Component_CommandPalette;
var
oPalette: TsgcHTMLComponent_CommandPalette;
begin
oPalette := TsgcHTMLComponent_CommandPalette.Create(nil);
try
oPalette.PaletteID := 'app_commands';
oPalette.AddItem('New Invoice', '/invoices/new', 'invoice:new', 'Create', 'Ctrl+N');
oPalette.AddItem('Customer Search', '/customers', '', 'Navigate');
with oPalette.Items.Add do
begin
Caption := 'Export Report';
Icon := 'bi bi-download';
DataAction := 'report:export';
Category := 'Actions';
end;
WebModule.Response := oPalette.HTML; // hidden overlay + inline script
finally
oPalette.Free;
end;
end;EmptyState — la forma correcta de decir que aquí todavía no hay nada
TsgcHTMLComponent_EmptyState es el panel que muestra una tabla, una lista o un resultado de búsqueda cuando no tiene filas: un icono o una imagen, un título, una descripción y hasta dos botones. No emite ningún script, lo que permite enviarlo de forma segura como fragmento fuera de banda tantas veces como una página lo necesite. Una nota de seguridad que merece repetirse: Icon acepta tanto una clase de icono CSS como marcado SVG en línea, y el marcado en línea se emite tal cual tras una comprobación de seguridad limitada, por lo que nunca debe enlazarse a datos introducidos por el usuario final; para texto no confiable, enlázalo en su lugar a Title y Description, que siempre se codifican en HTML.
uses
sgcHTML_Enums, sgcHTML_Component_EmptyState;
var
oEmpty: TsgcHTMLComponent_EmptyState;
begin
oEmpty := TsgcHTMLComponent_EmptyState.Create(nil);
try
oEmpty.Icon := 'bi bi-inbox';
oEmpty.Title := 'No results';
oEmpty.Description := 'Try a different search, or clear your filters.';
oEmpty.ActionCaption := 'Clear filters';
oEmpty.ActionHref := '/orders';
oEmpty.ActionStyle := bsPrimary;
WebModule.Response := oEmpty.HTML;
finally
oEmpty.Free;
end;
end;
// Or the one-line static helper for the simple case:
WebModule.Response := TsgcHTMLComponent_EmptyState.Build('No results', 'Try a different search.');Cinco nuevas demos, construidas con ellos
Los ejemplos de código solo llegan hasta cierto punto a la hora de mostrar para qué sirve un componente. Por eso, junto a los cuatro nuevos componentes, hemos construido cinco aplicaciones completas, cada una con su propio inicio de sesión, una base de datos SQLite real e informes imprimibles, todo con sgcHTML. Las cinco funcionan en vivo ahora mismo en el servidor de demostraciones de eSeGeCe.
Almacén (WMS) — recepción, picking, empaquetado, expedición y conteos cíclicos, además de un terminal portátil que usa CameraScanner para escanear un código de barras directamente en la lista de picking. Abrir la demo en vivo →
Punto de venta — una caja registradora minorista construida alrededor de NumPad: productos, promociones, clientes, cierre de turno e informes de ventas. Abrir la demo en vivo →
Informes y análisis — paneles de ventas, márgenes y operaciones, un generador de tablas dinámicas, vistas guardadas y tareas de exportación programadas, poblado con unas 25.000 líneas de pedido para que las cifras en pantalla sean reales. Abrir la demo en vivo →
SaaS multiinquilino — alta de inquilinos, facturación, gestión de equipos y roles (construida sobre el mismo componente RolesPermissions, ahora con una opción de envío de formulario normal junto a su canal WebSocket) y una consola de administración de la plataforma para planes y feature flags. Abrir la demo en vivo →
Servicio de campo — despacho de trabajos, un mapa de técnicos en vivo, planificación Gantt, clientes, activos y piezas, de nuevo con CameraScanner para escanear una pieza directamente en un trabajo. Abrir la demo en vivo →
Pruébalas
Las diez demos en vivo, incluidas las cinco anteriores, están enlazadas desde la navegación superior en sgcHTML › Demos en línea, y las referencias completas de propiedades, métodos y eventos de CameraScanner, NumPad, CommandPalette y EmptyState están en la ayuda en línea.
¿Tienes preguntas, comentarios o quieres que añadamos un escenario de demo concreto? Ponte en contacto — recibirás respuesta de las personas que escribieron el código.