Quattro nuovi componenti sgcHTML, cinque nuove demo live

sgcWebSockets 2026.9.0 aggiunge quattro nuovi componenti sgcHTML e, invece di mostrarli isolatamente, li abbiamo usati per costruire cinque applicazioni complete: un sistema di gestione magazzino, una cassa punto vendita, un portale di reportistica e analisi, un pannello di controllo SaaS multi-tenant e un'app di dispatch per l'assistenza sul campo. Tutte e cinque sono attive oggi sul server demo di eSeGeCe, accanto alle demo ERP, Admin CRUD, Live Monitor, Customer Portal e Helpdesk già presenti.

I nuovi componenti sono CameraScanner (scansione live di codici a barre e QR tramite la fotocamera del browser, senza librerie da aggiungere), NumPad (un tastierino numerico touch pensato per il punto vendita), CommandPalette (il pattern del lanciatore rapido Ctrl+K, per la tua applicazione) ed EmptyState (il pannello che una griglia o un risultato di ricerca mostra quando non c'è nulla da visualizzare). Questo articolo illustra ciascuno di essi, poi le cinque demo che li mettono al lavoro.

CameraScanner — scansione di codici a barre e QR, senza librerie da aggiungere

TsgcHTMLComponent_CameraScanner apre la fotocamera del browser e decodifica codici a barre e QR usando l'API nativa BarcodeDetector del browser stesso. Non c'è alcun decoder incluso e nulla viene scaricato da un CDN: dove BarcodeDetector non è disponibile, il pannello lo segnala e continua a funzionare tramite inserimento manuale e cattura foto, funzionalità che non ne sono mai dipese. La fotocamera viene chiusa a ogni percorso di uscita (scheda nascosta, navigazione fuori pagina, pulsante indietro), così la spia della fotocamera si spegne sempre.

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 tastierino che non invia mai il separatore decimale sbagliato

TsgcHTMLComponent_NumPad è un tastierino touch numerico e valutario pensato per l'inserimento al punto vendita. Il punto tecnico degno di nota: ogni numero che questo componente scrive, nel markup e nel proprio script, passa attraverso un formattatore indipendente dalla locale, mai attraverso una routine che rispetti le impostazioni regionali del browser. Il campo nascosto che invia riporta sempre un numero come 12.50, mai 12,50, così lo stesso form invia gli stessi byte da un browser spagnolo, tedesco o inglese.

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 per la tua applicazione

TsgcHTMLComponent_CommandPalette è il lanciatore overlay Ctrl+K / Cmd+K familiare da VS Code, Slack e Linear: nascosto finché la scorciatoia non lo apre, chiuso con Esc o con un clic sullo sfondo, filtrato mentre digiti con un passaggio per sottostringa seguito da un passaggio fuzzy per sottosequenza, così nu trova comunque “New User”. Le voci sono renderizzate come markup sul server, non inviate al browser come JSON da filtrare lato client, così ogni didascalia viene codificata in HTML esattamente una volta.

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 — il modo giusto per dire che non c'è ancora nulla

TsgcHTMLComponent_EmptyState è il pannello che una griglia, un elenco o un risultato di ricerca mostra quando non ha righe: un'icona o un'immagine, un titolo, una descrizione e fino a due pulsanti. Non emette alcuno script, il che lo rende sicuro da inviare come frammento out-of-band tutte le volte che una pagina ne ha bisogno. Una nota di sicurezza da tenere presente: Icon accetta una classe icona CSS oppure markup SVG inline, e il markup inline viene emesso testualmente dopo un controllo di sicurezza limitato, quindi non dovrebbe mai essere collegato a input dell'utente finale; collega invece il testo non attendibile a Title e Description, entrambi sempre codificati in 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.');

Cinque nuove demo, costruite con essi

Gli esempi di codice possono mostrare solo fino a un certo punto a cosa serve un componente. Così, insieme ai quattro nuovi componenti, abbiamo costruito cinque applicazioni complete, ciascuna con il proprio accesso, un vero database SQLite e report stampabili, interamente con sgcHTML. Tutte e cinque sono attive in questo momento sul server demo di eSeGeCe.

Magazzino (WMS) — ricevimento, picking, imballaggio, spedizione e conteggi ciclici, oltre a un terminale palmare che usa CameraScanner per scansionare un codice a barre direttamente nella lista di prelievo. Apri la demo live →

Punto vendita — una cassa retail costruita attorno a NumPad: prodotti, promozioni, clienti, chiusura turno e reportistica vendite. Apri la demo live →

Report e analisi — dashboard su vendite, margini e operazioni, un generatore di tabelle pivot, viste salvate e job di export pianificati, popolata con circa 25.000 righe d'ordine così i numeri a schermo sono reali. Apri la demo live →

SaaS multi-tenant — onboarding dei tenant, fatturazione, gestione di team e ruoli (costruita sullo stesso componente RolesPermissions, ora con un'opzione di invio tramite form semplice accanto al suo canale WebSocket) e una console di amministrazione della piattaforma per piani e feature flag. Apri la demo live →

Assistenza sul campo — dispatch dei lavori, una mappa live dei tecnici, pianificazione Gantt, clienti, asset e ricambi, di nuovo con CameraScanner per scansionare un ricambio direttamente su un lavoro. Apri la demo live →

Provale

Tutte e dieci le demo live, incluse le cinque sopra, sono collegate dalla navigazione in alto sotto sgcHTML › Demo online, e i riferimenti completi di proprietà, metodi ed eventi per CameraScanner, NumPad, CommandPalette ed EmptyState si trovano nella guida online.

Domande, feedback o vuoi che aggiungiamo uno scenario demo specifico? Contattaci — riceverai una risposta da chi ha scritto il codice.