Six nouveaux composants de feedback sgcHTML : Badge, PDFViewer, ContextMenu, ProgressBar, JobProgress et LogViewer | Blog eSeGeCe

Six nouveaux composants de feedback sgcHTML : Badge, PDFViewer, ContextMenu, ProgressBar, JobProgress et LogViewer

· Composants

Quatrième article de cette série sur les 25 nouveaux composants de sgcHTML. Ce lot vise à indiquer à un visiteur ce qui se passe en ce moment : un compteur sur une icône de cloche, un document ouvert en ligne, un menu contextuel, et trois façons différentes d'afficher un travail en cours — une simple barre, une liste de tâches en arrière-plan, et un journal défilant. Les six sont des composants Delphi/C++Builder/.NET rendus côté serveur ; aucun d'eux n'a besoin d'une bibliothèque de graphiques ou de PDF côté client que vous devriez intégrer vous-même.

Badge — une étiquette, une pastille, ou un point de notification

TsgcHTMLComponent_Badge génère un simple <span class="badge"> Bootstrap 5. Définissez Positioned et il se transforme en un point de notification positionné en absolu, ancré à l'élément position-relative qui l'entoure, le classique compteur sur une icône de cloche.

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 document intégré à la page, sans plugin

TsgcHTMLComponent_PDFViewer génère une barre d'outils et un canevas basés sur pdf.js, avec navigation entre les pages, zoom, recherche, téléchargement et impression intégrés. Pointez PDFURL vers un document (ou intégrez les octets avec Base64Data), et le rendu s'effectue entièrement côté client.

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 menu contextuel limité à un sélecteur

TsgcHTMLComponent_ContextMenu génère un menu déroulant Bootstrap qui s'ouvre au clic droit, limité aux éléments correspondant à TargetSelector. Les entrées dotées d'un DataAction envoient leur requête via le même canal que vos formulaires utilisent déjà, et déclenchent un événement DOM auquel vous pouvez vous accrocher.

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 — barre unique ou segments empilés

TsgcHTMLComponent_ProgressBar couvre à la fois le cas simple, un seul Value/Max, rayé et animé, et le cas empilé : ajoutez des entrées à Bars et elles remplacent la barre unique par une barre à plusieurs segments, chaque segment ayant sa propre couleur et son propre libellé.

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 — une liste en direct des tâches en arrière-plan

TsgcHTMLComponent_JobProgress est ce que devient un ProgressBar dès que vous suivez plus d'une chose à la fois : une carte listant chaque tâche en arrière-plan, chacune avec son propre badge de statut et sa propre barre de progression. AddJob enregistre une tâche, UpdateJob la fait avancer, et GetJobFragmentHTML ne pousse que cette ligne aux clients connectés au lieu de redessiner toute la liste.

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, filtre de niveau inclus

TsgcHTMLComponent_LogViewer génère un panneau de style terminal, sombre ou clair, avec une zone de recherche et un filtre de niveau, appuyé sur un tampon circulaire plafonné (MaxLines) afin qu'il ne croisse jamais sans limite. AddLine ajoute une entrée horodatée et codée par couleur ; GetLastLineFragmentHTML diffuse les nouvelles lignes à chaque client ouvert sans redessin complet.

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

Essayez-les

La documentation complète, les références des propriétés clés et des exemples de code Delphi/C++Builder/.NET se trouvent sur la page propre à chaque composant : Badge, PDFViewer, ContextMenu, ProgressBar, JobProgress et LogViewer. Article précédent de cette série : présence, rôles et gestion des utilisateurs.

Des questions, un retour ou besoin d'aide pour une migration ? Contactez-nous — vous recevrez une réponse des personnes qui ont écrit le code.