Sechs neue sgcHTML-Feedback-Komponenten: Badge, PDFViewer, ContextMenu, ProgressBar, JobProgress und LogViewer

Vierter Beitrag in dieser Serie über die 25 neuen Komponenten von sgcHTML. In dieser Folge geht es darum, einem Besucher zu zeigen, was gerade passiert: eine Zahl auf einem Glockensymbol, ein Dokument, das direkt eingebettet geöffnet wird, ein Rechtsklick-Menü und drei verschiedene Arten, laufende Arbeit darzustellen — ein einzelner Balken, eine Liste von Hintergrundaufgaben und ein scrollendes Protokoll. Alle sechs sind serverseitig gerenderte Delphi-/C++Builder-/.NET-Komponenten; keine davon benötigt eine clientseitige Diagramm- oder PDF-Bibliothek, die Sie selbst einbinden müssten.

Badge — ein Label, eine Pille oder ein Benachrichtigungspunkt

TsgcHTMLComponent_Badge rendert ein einzelnes Bootstrap-5-<span class="badge">. Setzen Sie Positioned, und es wird zu einem absolut positionierten Benachrichtigungspunkt, verankert an dem position-relative-Element, das es umgibt, der klassische Zähler auf einem Glockensymbol.

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 — ein Dokument auf der Seite, kein Plugin

TsgcHTMLComponent_PDFViewer rendert eine Werkzeugleiste und eine Zeichenfläche auf Basis von pdf.js, mit integrierter Seitennavigation, Zoom, Suche, Download und Druck. Verweisen Sie mit PDFURL auf ein Dokument (oder betten Sie die Bytes mit Base64Data ein), und das Rendering erfolgt vollständig clientseitig.

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 — ein Rechtsklick-Menü, begrenzt auf einen Selektor

TsgcHTMLComponent_ContextMenu rendert ein Bootstrap-Dropdown, das sich per Rechtsklick öffnet und auf Elemente beschränkt ist, die TargetSelector entsprechen. Einträge mit einer DataAction senden über denselben Kanal, den Ihre Formulare bereits verwenden, und lösen ein DOM-Ereignis aus, in das Sie sich einklinken können.

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 — einzelner Balken oder gestapelte Segmente

TsgcHTMLComponent_ProgressBar deckt sowohl den einfachen Fall ab, ein Value/Max, gestreift und animiert, als auch den gestapelten Fall: Fügen Sie Einträge zu Bars hinzu, und sie ersetzen den einzelnen Balken durch einen mehrsegmentigen, jedes Segment mit eigener Farbe und Beschriftung.

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 — eine Live-Liste von Hintergrundaufgaben

TsgcHTMLComponent_JobProgress ist das, wozu eine ProgressBar wird, sobald Sie mehr als eine Sache gleichzeitig verfolgen: eine Karte, die jede Hintergrundaufgabe auflistet, jede mit eigenem Status-Badge und eigener Fortschrittsleiste. AddJob registriert eine Aufgabe, UpdateJob bringt sie voran, und GetJobFragmentHTML überträgt nur diese eine Zeile an verbundene Clients, statt die ganze Liste neu zu rendern.

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 — ein streamendes Terminal, inklusive Stufenfilter

TsgcHTMLComponent_LogViewer rendert ein dunkles oder helles Panel im Terminal-Stil mit Suchfeld und Stufenfilter, gestützt auf einen begrenzten Ringpuffer (MaxLines), damit es nie unbegrenzt wächst. AddLine fügt einen mit Zeitstempel versehenen, farbcodierten Eintrag hinzu; GetLastLineFragmentHTML überträgt neue Zeilen an jeden geöffneten Client, ohne die Seite komplett neu zu rendern.

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

Ausprobieren

Die vollständige Dokumentation, Referenzen der wichtigsten Eigenschaften und Delphi-/C++Builder-/.NET-Codebeispiele finden Sie auf der jeweiligen Komponentenseite: Badge, PDFViewer, ContextMenu, ProgressBar, JobProgress und LogViewer. Letzter Beitrag dieser Serie: Präsenz, Rollen und Benutzerverwaltung.

Fragen, Feedback oder Hilfe bei der Migration? Kontaktieren Sie uns — Sie erhalten eine Antwort von den Leuten, die den Code geschrieben haben.