Altı Yeni sgcHTML Geri Bildirim Bileşeni: Badge, PDFViewer, ContextMenu, ProgressBar, JobProgress ve LogViewer

sgcHTML'in 25 yeni bileşenini ele alan bu dizinin dördüncü yazısı. Bu grup, ziyaretçiye şu anda ne olduğunu anlatmakla ilgili: bir zil simgesindeki sayaç, satır içinde açılan bir belge, bir sağ tık menüsü ve devam eden bir işi göstermenin üç farklı yolu — tek bir çubuk, arka plan işlerinin bir listesi ve kayan bir günlük. Altısı da sunucu tarafında render edilen Delphi/C++Builder/.NET bileşenleridir; hiçbiri kendi başınıza bağlamanız gereken bir istemci taraflı grafik veya PDF kütüphanesine ihtiyaç duymaz.

Badge — bir etiket, bir hap veya bir bildirim noktası

TsgcHTMLComponent_Badge tek bir Bootstrap 5 <span class="badge"> render eder. Positioned özelliğini ayarlarsanız, onu saran position-relative öğesine sabitlenmiş, mutlak konumlandırılmış bir bildirim noktasına dönüşür; zil simgesi üzerindeki klasik sayaç görünümü.

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 — eklenti gerektirmeyen, sayfa içi bir belge

TsgcHTMLComponent_PDFViewer, pdf.js tarafından desteklenen bir araç çubuğu ve tuval render eder; sayfa gezinme, yakınlaştırma, arama, indirme ve yazdırma özellikleri hazır gelir. PDFURL'yi bir belgeye yönlendirin (veya baytları Base64Data ile gömün); render işlemi tamamen istemci tarafında gerçekleşir.

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 — bir seçiciyle sınırlandırılmış sağ tık menüsü

TsgcHTMLComponent_ContextMenu, sağ tıklandığında açılan ve TargetSelector ile eşleşen öğelerle sınırlandırılmış bir Bootstrap açılır menüsü render eder. DataAction içeren girişler, formlarınızın zaten kullandığı aynı kanal üzerinden gönderim yapar ve bağlanabileceğiniz bir DOM olayı tetikler.

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 — tek çubuk veya yığılmış segmentler

TsgcHTMLComponent_ProgressBar, hem basit durumu (tek bir Value/Max, çizgili ve animasyonlu) hem de yığılmış durumu kapsar: Bars koleksiyonuna giriş ekleyin ve bunlar tek çubuğun yerini, her biri kendi rengine ve etiketine sahip çok segmentli bir çubukla alır.

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 — arka plan işlerinin canlı bir listesi

TsgcHTMLComponent_JobProgress, aynı anda birden fazla şeyi izlemeye başladığınızda bir ProgressBar'ın dönüştüğü şeydir: her biri kendi durum rozetine ve ilerleme çubuğuna sahip, tüm arka plan işlerini listeleyen bir kart. AddJob bir işi kaydeder, UpdateJob onu ilerletir ve GetJobFragmentHTML, tüm listeyi yeniden render etmek yerine bağlı istemcilere yalnızca o tek satırı gönderir.

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 — seviye filtresi dahil, akan bir terminal

TsgcHTMLComponent_LogViewer, bir arama kutusu ve seviye filtresi içeren, koyu veya açık temalı bir terminal panosu render eder; asla sınırsız büyümemesi için sınırlı bir halka arabellek (MaxLines) tarafından desteklenir. AddLine zaman damgalı, renk kodlu bir girdi ekler; GetLastLineFragmentHTML ise tam bir yeniden render olmadan yeni satırları açık her istemciye akıtır.

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

Deneyin

Tam dokümantasyon, temel özellik referansları ve Delphi/C++Builder/.NET kod örnekleri her bileşenin kendi sayfasında yer alır: Badge, PDFViewer, ContextMenu, ProgressBar, JobProgress ve LogViewer. Bu dizideki bir önceki yazı: bulunma durumu, roller ve kullanıcı yönetimi.

Sorularınız, geri bildiriminiz mi var ya da geçiş konusunda yardıma mı ihtiyacınız var? Bize ulaşın — yanıtı kodu yazan kişilerden alacaksınız.