Seis nuevos componentes de feedback de sgcHTML: Badge, PDFViewer, ContextMenu, ProgressBar, JobProgress y LogViewer

Cuarto artículo de esta serie sobre los 25 nuevos componentes de sgcHTML. Este bloque trata de indicar al visitante qué está pasando en cada momento: un contador sobre un icono de campana, un documento abierto en línea, un menú contextual y tres formas distintas de mostrar un trabajo en curso — una única barra, una lista de tareas en segundo plano y un registro con desplazamiento. Los seis son componentes Delphi/C++Builder/.NET renderizados en servidor; ninguno necesita una librería de gráficos o de PDF del lado cliente que tengas que integrar tú mismo.

Badge — una etiqueta, una píldora o un punto de notificación

TsgcHTMLComponent_Badge renderiza un único <span class="badge"> de Bootstrap 5. Si activas Positioned, se convierte en un punto de notificación posicionado de forma absoluta y anclado al elemento position-relative que lo envuelva, el clásico contador sobre un icono de campana.

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 — un documento en la página, sin plugin

TsgcHTMLComponent_PDFViewer renderiza una barra de herramientas y un lienzo respaldados por pdf.js, con navegación de páginas, zoom, búsqueda, descarga e impresión incorporados. Apunta PDFURL a un documento (o incrusta los bytes con Base64Data) y el renderizado se realiza íntegramente en el 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 — un menú de clic derecho acotado a un selector

TsgcHTMLComponent_ContextMenu renderiza un desplegable de Bootstrap que se abre con el clic derecho, restringido a los elementos que coincidan con TargetSelector. Las entradas con un DataAction se envían por el mismo canal que ya usan tus formularios y disparan un evento DOM al que puedes engancharte.

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 o segmentos apilados

TsgcHTMLComponent_ProgressBar cubre tanto el caso simple, un único Value/Max, con rayas y animado, como el caso apilado: añade entradas a Bars y sustituyen la barra única por una de varios segmentos, cada uno con su propio color y etiqueta.

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 — una lista en vivo de tareas en segundo plano

TsgcHTMLComponent_JobProgress es en lo que se convierte un ProgressBar cuando empiezas a seguir más de una cosa a la vez: una tarjeta que enumera cada tarea en segundo plano, cada una con su propio badge de estado y su propia barra de progreso. AddJob registra una tarea, UpdateJob la hace avanzar y GetJobFragmentHTML envía solo esa fila a los clientes conectados en lugar de volver a renderizar toda la lista.

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 — un terminal en streaming, con filtro de nivel incluido

TsgcHTMLComponent_LogViewer renderiza un panel de estilo terminal, oscuro o claro, con un cuadro de búsqueda y un filtro de nivel, respaldado por un buffer circular con límite (MaxLines) para que nunca crezca sin control. AddLine añade una entrada con marca de tiempo y color según el nivel; GetLastLineFragmentHTML transmite las líneas nuevas a cada cliente abierto sin necesidad de un re-render completo.

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);

Pruébalos

La documentación completa, la referencia de propiedades clave y ejemplos de código en Delphi/C++Builder/.NET están disponibles en la página de cada componente: Badge, PDFViewer, ContextMenu, ProgressBar, JobProgress y LogViewer. Artículo anterior de esta serie: presencia, roles y gestión de usuarios.

¿Preguntas, comentarios o ayuda con la migración? Ponte en contacto — recibirás respuesta de las personas que escribieron el código.