Quatro Novos Componentes sgcHTML, Cinco Novas Demos ao Vivo

O sgcWebSockets 2026.9.0 adiciona quatro novos componentes sgcHTML e, em vez de mostrá-los isoladamente, construímos cinco aplicações completas com eles: um sistema de gerenciamento de armazém, um caixa de ponto de venda, um portal de relatórios e análises, um painel de controle SaaS multi-tenant e um aplicativo de despacho de serviço de campo. Todos os cinco rodam ao vivo no servidor de demonstração da eSeGeCe hoje, ao lado das demos de ERP, Admin CRUD, Live Monitor, Customer Portal e Helpdesk que já estavam lá.

Os novos componentes são CameraScanner (leitura de código de barras e QR ao vivo pela própria câmera do navegador, sem biblioteca para adicionar), NumPad (um teclado numérico touch construído para ponto de venda), CommandPalette (o padrão de lançador rápido Ctrl+K, para sua própria aplicação) e EmptyState (o painel que uma grade ou um resultado de busca exibe quando não há nada para mostrar). Este post percorre cada um deles e, em seguida, as cinco demos que os colocam em ação.

CameraScanner — leitura de código de barras e QR, sem biblioteca para adicionar

TsgcHTMLComponent_CameraScanner abre a câmera do navegador e decodifica códigos de barras e QR codes usando a própria API nativa BarcodeDetector do navegador. Não há decodificador embutido nem nada obtido de um CDN: quando o BarcodeDetector não está disponível, o painel avisa e continua funcionando por meio de entrada manual e captura de foto, que nunca dependeram dele. A câmera é desligada em todos os caminhos de saída (aba oculta, navegação para outra página, botão voltar), então a luz indicadora da câmera sempre 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 — um teclado que nunca envia o separador decimal errado

TsgcHTMLComponent_NumPad é um teclado numérico e de moeda touch construído para entrada em ponto de venda. O ponto de engenharia que vale destacar: todo número que este componente escreve, tanto na marcação quanto em seu próprio script, passa por um formatador independente de localidade, nunca por uma rotina que respeita as configurações regionais do navegador. O campo oculto que ele envia sempre traz um número como 12.50, nunca 12,50, de modo que o mesmo formulário envia os mesmos bytes a partir de um navegador em espanhol, alemão ou 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 sua própria aplicação

TsgcHTMLComponent_CommandPalette é o lançador em sobreposição Ctrl+K / Cmd+K familiar do VS Code, Slack e Linear: oculto até que a tecla de atalho o abra, fechado com Esc ou um clique no fundo, filtrado conforme você digita com uma passagem de substring seguida de uma passagem de subsequência fuzzy, de modo que nu ainda encontra “New User”. As entradas são renderizadas como marcação no servidor, não enviadas ao navegador como JSON para filtrar no lado do cliente, então cada legenda é codificada em HTML exatamente uma 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 — a forma certa de dizer que ainda não há nada aqui

TsgcHTMLComponent_EmptyState é o painel que uma grade, uma lista ou um resultado de busca exibe quando não há linhas: um ícone ou uma imagem, um título, uma descrição e até dois botões. Ele não emite nenhum script, o que o torna seguro para enviar como fragmento fora de banda quantas vezes a página precisar. Uma observação de segurança que vale reforçar: Icon aceita uma classe de ícone CSS ou marcação SVG inline, e a marcação inline é emitida literalmente após uma verificação de segurança restrita, então nunca deve ser vinculada a entrada do usuário final; vincule texto não confiável a Title e Description em vez disso, ambos sempre codificados em 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 Novas Demos, Construídas Com Eles

Trechos de código só mostram até certo ponto para que serve um componente. Por isso, além dos quatro novos componentes, construímos cinco aplicações completas, cada uma com seu próprio login, um banco de dados SQLite real e relatórios imprimíveis, inteiramente com sgcHTML. Todas as cinco rodam ao vivo no servidor de demonstração da eSeGeCe agora mesmo.

Armazém (WMS) — recebimento, separação, embalagem, expedição e contagens cíclicas, além de um terminal portátil que usa o CameraScanner para escanear um código de barras diretamente na lista de separação. Abrir a demo ao vivo →

Ponto de Venda — um caixa de varejo construído em torno do NumPad: produtos, promoções, clientes, fechamento de turno e relatórios de vendas. Abrir a demo ao vivo →

Relatórios & Análises — painéis de vendas, margem e operações, um construtor de tabelas dinâmicas, visualizações salvas e tarefas de exportação agendadas, semeado com cerca de 25.000 linhas de pedidos para que os números na tela sejam reais. Abrir a demo ao vivo →

SaaS Multi-Tenant — integração de inquilinos, faturamento, gestão de equipes e papéis (construída sobre o mesmo componente RolesPermissions, agora com uma opção de envio de formulário simples além do seu canal WebSocket) e um console de administração da plataforma para planos e feature flags. Abrir a demo ao vivo →

Serviço de Campo — despacho de ordens de serviço, um mapa de técnicos ao vivo, agendamento em Gantt, clientes, ativos e peças, novamente com o CameraScanner para escanear uma peça diretamente em uma ordem de serviço. Abrir a demo ao vivo →

Experimente

Todas as dez demos ao vivo, incluindo as cinco acima, estão vinculadas na navegação superior em sgcHTML › Demos online, e as referências completas de propriedades, métodos e eventos para CameraScanner, NumPad, CommandPalette e EmptyState estão na ajuda online.

Dúvidas, feedback ou quer um cenário de demo específico adicionado? Entre em contato — você receberá uma resposta de quem escreveu o código.