Sześć nowych komponentów sgcHTML do informacji zwrotnej: Badge, PDFViewer, ContextMenu, ProgressBar, JobProgress i LogViewer | eSeGeCe Blog

Sześć nowych komponentów sgcHTML do informacji zwrotnej: Badge, PDFViewer, ContextMenu, ProgressBar, JobProgress i LogViewer

· Komponenty

Czwarty wpis w tej serii o 25 nowych komponentach sgcHTML. Ta partia dotyczy informowania odwiedzającego, co dzieje się w danej chwili: licznik na ikonie dzwonka, dokument otwarty w treści strony, menu pod prawym przyciskiem myszy oraz trzy różne sposoby pokazania postępu pracy — pojedynczy pasek, listę zadań w tle i przewijany dziennik zdarzeń. Wszystkie sześć to renderowane po stronie serwera komponenty Delphi/C++Builder/.NET; żaden z nich nie wymaga biblioteki do wykresów ani PDF po stronie klienta, którą trzeba samodzielnie podłączyć.

Badge — etykieta, pigułka lub kropka powiadomienia

TsgcHTMLComponent_Badge renderuje pojedynczy element Bootstrap 5 <span class="badge">. Ustawienie Positioned zamienia go w bezwzględnie pozycjonowaną kropkę powiadomienia, zakotwiczoną w dowolnym otaczającym go elemencie position-relative, czyli klasyczny licznik na ikonie dzwonka.

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 — dokument w treści strony, bez wtyczek

TsgcHTMLComponent_PDFViewer renderuje pasek narzędzi i obszar canvas oparty na pdf.js, z wbudowaną nawigacją po stronach, powiększeniem, wyszukiwaniem, pobieraniem i drukowaniem. Wystarczy wskazać dokument w PDFURL (albo osadzić dane binarne za pomocą Base64Data), a renderowanie odbywa się w całości po stronie klienta.

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 — menu pod prawym przyciskiem myszy ograniczone do selektora

TsgcHTMLComponent_ContextMenu renderuje rozwijane menu Bootstrap, które otwiera się pod prawym przyciskiem myszy, ograniczone do elementów pasujących do TargetSelector. Pozycje z ustawionym DataAction wysyłają żądanie tym samym kanałem, którego używają już Twoje formularze, i wyzwalają zdarzenie DOM, które można obsłużyć.

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 — pojedynczy pasek lub segmenty ułożone w stos

TsgcHTMLComponent_ProgressBar obsługuje zarówno prosty przypadek, jeden Value/Max, w paski i animowany, jak i przypadek stosu: dodanie wpisów do Bars zastępuje pojedynczy pasek wersją wielosegmentową, gdzie każdy segment ma własny kolor i etykietę.

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 — aktualna lista zadań w tle

TsgcHTMLComponent_JobProgress to naturalny rozwój ProgressBar, gdy trzeba śledzić więcej niż jedną rzecz naraz: karta wyświetlająca każde zadanie w tle, każde z własną etykietą statusu i paskiem postępu. AddJob rejestruje zadanie, UpdateJob aktualizuje jego postęp, a GetJobFragmentHTML wysyła do połączonych klientów tylko ten jeden wiersz, zamiast renderować od nowa całą listę.

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 — terminal strumieniowy z filtrem poziomów

TsgcHTMLComponent_LogViewer renderuje panel w stylu terminala, jasny lub ciemny, z polem wyszukiwania i filtrem poziomów, oparty na buforze cyklicznym o ograniczonym rozmiarze (MaxLines), dzięki czemu nigdy nie rośnie w nieskończoność. AddLine dodaje wpis ze znacznikiem czasu i kolorem zależnym od poziomu; GetLastLineFragmentHTML przesyła nowe linie do każdego podłączonego klienta bez pełnego ponownego renderowania.

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

Wypróbuj je

Pełna dokumentacja, opisy kluczowych właściwości oraz przykłady kodu Delphi/C++Builder/.NET znajdują się na stronie każdego komponentu: Badge, PDFViewer, ContextMenu, ProgressBar, JobProgress i LogViewer. Poprzedni wpis w tej serii: obecność, role i zarządzanie użytkownikami.

Masz pytania, uwagi lub potrzebujesz pomocy z migracją? Skontaktuj się z nami — odpowie Ci osoba, która napisała ten kod.