Seis Novos Componentes de Feedback do sgcHTML: Badge, PDFViewer, ContextMenu, ProgressBar, JobProgress e LogViewer

Quarto post desta série sobre os 25 novos componentes do sgcHTML. Este grupo trata de mostrar ao visitante o que está acontecendo agora: uma contagem em um ícone de sino, um documento aberto embutido na página, um menu de clique com o botão direito e três formas diferentes de exibir trabalho em andamento — uma barra única, uma lista de tarefas em segundo plano e um log com rolagem. Os seis são componentes Delphi/C++Builder/.NET renderizados no servidor; nenhum deles precisa de uma biblioteca de gráficos ou de PDF do lado do cliente que você tenha que configurar por conta própria.

Badge — um rótulo, uma pílula ou um ponto de notificação

TsgcHTMLComponent_Badge renderiza um único <span class="badge"> do Bootstrap 5. Defina Positioned e ele se transforma em um ponto de notificação posicionado de forma absoluta, ancorado a qualquer elemento position-relative que o envolva, o clássico contador sobre o ícone de sino.

uses
  sgcHTML_Enums, sgcHTML_Component_Badge;

var
  oBadge: TsgcHTMLComponent_Badge;
begin
  oBadge := TsgcHTMLComponent_Badge.Create(nil);
  try
    oBadge.Text := '3';
    oBadge.Color := bgDanger;
    oBadge.Pill := True;
    oBadge.Positioned := True;

    WebModule.Response := oBadge.HTML;   // <span class="badge bg-danger rounded-pill ...">
  finally
    oBadge.Free;
  end;
end;

// Or the one-line static helper for a simple inline badge:
WebModule.Response := TsgcHTMLComponent_Badge.Build('New', bgSuccess, True);

PDFViewer — um documento na própria página, sem plugin

TsgcHTMLComponent_PDFViewer renderiza uma barra de ferramentas e um canvas baseados no pdf.js, com navegação de páginas, zoom, busca, download e impressão integrados. Aponte PDFURL para um documento (ou incorpore os bytes com Base64Data), e a renderização acontece inteiramente no lado do cliente.

uses
  sgcHTML_Component_PDFViewer;

var
  oViewer: TsgcHTMLComponent_PDFViewer;
begin
  oViewer := TsgcHTMLComponent_PDFViewer.Create(nil);
  try
    oViewer.ViewerID := 'invoice';
    oViewer.PDFURL := '/invoices/INV-2026-0042.pdf';
    oViewer.Height := '700px';
    oViewer.InitialPage := 1;
    oViewer.Zoom := 'page-width';
    oViewer.Theme := pvLight;
    oViewer.DownloadFileName := 'invoice-0042.pdf';

    WebModule.Response := oViewer.HTML;   // toolbar + canvas + pdf.js init script
  finally
    oViewer.Free;
  end;
end;

ContextMenu — um menu de clique com o botão direito restrito a um seletor

TsgcHTMLComponent_ContextMenu renderiza um dropdown do Bootstrap que abre com o clique do botão direito, restrito aos elementos que correspondem a TargetSelector. Itens com um DataAction enviam dados pelo mesmo canal que seus formulários já usam e disparam um evento DOM que você pode capturar.

uses
  sgcHTML_Component_ContextMenu;

var
  oMenu: TsgcHTMLComponent_ContextMenu;
  oItem: TsgcHTMLContextMenuItem;
begin
  oMenu := TsgcHTMLComponent_ContextMenu.Create(nil);
  try
    oMenu.MenuID := 'grid_menu';
    oMenu.TargetSelector := '.grid-row';

    oItem := oMenu.Items.Add;
    oItem.Caption := 'Edit';
    oItem.Icon := 'bi bi-pencil';
    oItem.DataAction := 'row:edit';

    oItem := oMenu.Items.Add;
    oItem.Caption := 'Delete';
    oItem.Icon := 'bi bi-trash';
    oItem.DataAction := 'row:delete';

    oItem := oMenu.Items.Add;
    oItem.Divider := True;

    oItem := oMenu.Items.Add;
    oItem.Caption := 'Open in new tab';
    oItem.Href := '/grid/open';

    WebModule.Response := oMenu.HTML;   // hidden <ul> + right-click binding script
  finally
    oMenu.Free;
  end;
end;

ProgressBar — barra única ou segmentos empilhados

TsgcHTMLComponent_ProgressBar cobre tanto o caso simples, um único Value/Max, listrado e animado, quanto o caso empilhado: adicione itens a Bars e eles substituem a barra única por uma de vários segmentos, cada um com sua própria cor e rótulo.

uses
  sgcHTML_Enums, sgcHTML_Component_ProgressBar;

var
  oBar: TsgcHTMLComponent_ProgressBar;
begin
  oBar := TsgcHTMLComponent_ProgressBar.Create(nil);
  try
    oBar.ProgressBarID := 'upload';
    oBar.Value := 72;
    oBar.Max := 100;
    oBar.ColorStyle := hcSuccess;
    oBar.Striped := True;
    oBar.Animated := True;
    oBar.ShowLabel := True;
    oBar.LabelFormat := '%d%% complete';

    WebModule.Response := oBar.HTML;   // Bootstrap progress bar
  finally
    oBar.Free;
  end;
end;

// Or a stacked, multi-segment bar:
with oBar.Bars.Add do
begin
  Value := 40;
  ColorStyle := hcPrimary;
  Label_ := 'Done';
end;
with oBar.Bars.Add do
begin
  Value := 20;
  ColorStyle := hcWarning;
  Label_ := 'In progress';
end;

JobProgress — uma lista ao vivo de tarefas em segundo plano

TsgcHTMLComponent_JobProgress é no que um ProgressBar se transforma quando você passa a acompanhar mais de uma coisa ao mesmo tempo: um cartão listando cada tarefa em segundo plano, cada uma com seu próprio badge de status e barra de progresso. AddJob registra uma tarefa, UpdateJob a faz avançar, e GetJobFragmentHTML envia apenas aquela linha aos clientes conectados, em vez de renderizar a lista inteira novamente.

uses
  sgcHTML_Enums, sgcHTML_Component_JobProgress;

var
  oJobs: TsgcHTMLComponent_JobProgress;
begin
  oJobs := TsgcHTMLComponent_JobProgress.Create(nil);
  try
    oJobs.JobsID := 'exports';
    oJobs.Title := 'Background Exports';
    oJobs.ShowCompleted := False;

    oJobs.AddJob('exp-42', 'Export customers.csv', 'Generating CSV export');

    WebModule.Response := oJobs.HTML;   // card + progress rows + cancel-form script
  finally
    oJobs.Free;
  end;
end;

// On a later progress tick, push just that row over the WebSocket:
oJobs.UpdateJob('exp-42', 65, jsRunning);
Engine.BroadcastFragment(oJobs.GetJobFragmentHTML('exp-42'));

LogViewer — um terminal em streaming, com filtro de nível incluído

TsgcHTMLComponent_LogViewer renderiza um painel no estilo terminal, claro ou escuro, com uma caixa de busca e um filtro de nível, apoiado em um buffer circular limitado (MaxLines) para que nunca cresça sem limite. AddLine adiciona uma entrada com data/hora e cor de acordo com o nível; GetLastLineFragmentHTML transmite novas linhas para todos os clientes conectados sem uma renderização completa.

uses
  sgcHTML_Component_LogViewer;

var
  oLog: TsgcHTMLComponent_LogViewer;
begin
  oLog := TsgcHTMLComponent_LogViewer.Create(nil);
  try
    oLog.LogID := 'applog';
    oLog.Theme := ltDark;
    oLog.MaxLines := 500;
    oLog.Height := '400px';

    oLog.AddLine(llInfo, 'Service started', 'app');
    oLog.AddLine(llWarning, 'Low disk space', 'monitor');
    oLog.AddLine(llError, 'Connection refused', 'db');

    WebModule.Response := oLog.HTML;   // toolbar + log body + inline script
  finally
    oLog.Free;
  end;
end;

// Push one more line to every connected client, no full re-render:
oLog.AddLine(llInfo, 'New order received', 'orders');
TsgcHTMX_Engine_Server.BroadcastFragment(oLog.GetLastLineFragmentHTML);

Experimente-os

A documentação completa, as referências das principais propriedades e exemplos de código em Delphi/C++Builder/.NET estão na página própria de cada componente: Badge, PDFViewer, ContextMenu, ProgressBar, JobProgress e LogViewer. Último post desta série: presença, papéis e gerenciamento de usuários.

Perguntas, feedback ou ajuda com migração? Fale conosco — você receberá uma resposta de quem escreveu o código.