Yapılandırılmış Veri için Dört Yeni sgcHTML Bileşeni: TreeGrid, PivotTable, ActivityFeed ve Splitter

sgcHTML, 25 yeni bileşenle büyüdü ve bu, onları tema tema ele alan beş yazının ilki. Yapılandırılmış, değişen veriler etrafında kurulmuş dört bileşenle başlıyoruz: hiyerarşik satırlar için TreeGrid, gruplanmış toplamlar için PivotTable, canlı bir olay akışı için ActivityFeed ve çoğu zaman bunların hepsini bir arada tutması gereken, yeniden boyutlandırılabilir iki bölmeli düzen için Splitter. Aşağıdaki her bileşen sade bir Delphi/C++Builder/.NET sınıfıdır: özelliklerini ayarlayın, HTML'i çağırın, karşılığında Bootstrap 5 işaretlemesi alın. JavaScript çatısı yok, derleme adımı yok.

TreeGrid — daraltılabilir hiyerarşik tablolar

TsgcHTMLComponent_TreeGrid, satırları daraltılıp genişletilebilen bir Bootstrap tablosu oluşturur; bu tablo sade Id / ParentId düğüm çiftlerinden inşa edilir — organizasyon şemaları, kategori ağaçları veya iç içe malzeme listesi verileri için zaten kullandığınız aynı yapı. Görünür her alan için bir TsgcHTMLTreeGridColumn tanımlayın, ardından düğümleri ekleyin; üst/alt ilişkisi ağacı ve aç/kapa oklarını sizin için çizer.

uses
  sgcHTML_Component_TreeGrid;

var
  oTreeGrid: TsgcHTMLComponent_TreeGrid;
  oColumn: TsgcHTMLTreeGridColumn;
begin
  oTreeGrid := TsgcHTMLComponent_TreeGrid.Create(nil);
  try
    oTreeGrid.TreeGridID := 'orgchart';
    oTreeGrid.Sortable := True;

    oColumn := oTreeGrid.Columns.Add;
    oColumn.Caption := 'Department';
    oColumn.FieldName := 'Name';

    oColumn := oTreeGrid.Columns.Add;
    oColumn.Caption := 'Headcount';
    oColumn.FieldName := 'Headcount';
    oColumn.Align := tgaRight;

    oTreeGrid.AddNode('eng', '', ['Engineering', '42']);
    oTreeGrid.AddNode('eng-be', 'eng', ['Backend', '18']);
    oTreeGrid.AddNode('eng-fe', 'eng', ['Frontend', '15']);

    WebModule.Response := oTreeGrid.HTML;   // hierarchical table + scoped CSS + toggle script
  finally
    oTreeGrid.Free;
  end;
end;

// Or bind it straight to a self-referencing dataset (Id / ParentId columns):
oTreeGrid.LoadFromDataSet(qryDepartments, 'Id', 'ParentId');

Verileriniz zaten kendine referans veren bir tabloda tutuluyorsa, manuel düğüm çağrılarını tamamen atlayıp üst ve alt alan adlarını LoadFromDataSet'e verin — bu metot veri kümesini tek geçişte dolaşıp ağacın tamamını oluşturur.

PivotTable — gruplama, toplulaştırma, toplam

TsgcHTMLComponent_PivotTable, düz satırları alır ve satır toplamları, sütun toplamları ve bir genel toplam içeren, gruplanmış ve toplulaştırılmış bir tablo üretir; aksi halde bir e-tablo programında elle oluşturmanız gereken rapor. Gruplamak için RowFields ve ColumnFields'i, toplulaştırmak için bir veya daha fazla Measures'ı (toplam, ortalama, sayım, min, maks) ve kaynakta hangi sütunların gerçekten okunacağını belirten bir DataFields listesini tanımlarsınız.

uses
  sgcHTML_Component_PivotTable;

var
  oPivot: TsgcHTMLComponent_PivotTable;
  oMeasure: TsgcHTMLPivotMeasure;
begin
  oPivot := TsgcHTMLComponent_PivotTable.Create(nil);
  try
    oPivot.Caption := 'Revenue by Region and Quarter';

    oPivot.RowFields.Add.FieldName := 'Region';
    oPivot.ColumnFields.Add.FieldName := 'Quarter';

    oMeasure := oPivot.Measures.Add;
    oMeasure.SourceField := 'Amount';
    oMeasure.Caption := 'Revenue';
    oMeasure.Aggregation := paSum;
    oMeasure.Format := '#,##0.00';

    oPivot.DataFields.Add('Region');
    oPivot.DataFields.Add('Quarter');
    oPivot.DataFields.Add('Amount');

    oPivot.AddRow(['EMEA', 'Q1', '12000']);
    oPivot.AddRow(['EMEA', 'Q2', '15500']);
    oPivot.AddRow(['APAC', 'Q1', '9800']);

    WebModule.Response := oPivot.HTML;   // aggregated table + row/column/grand totals
  finally
    oPivot.Free;
  end;
end;

// Or bind it straight to a dataset (reads only RowFields/ColumnFields/Measures fields):
oPivot.LoadFromDataSet(qrySales);

AddRow'dan (veya LoadFromDataSet'ten) sonraki her şey sizin için hesaplanır: bileşen ham satırları gruplar, seçilen toplulaştırmayı her hücreye uygular ve satır/sütun/genel toplam satır ve sütunlarını otomatik olarak ekler.

ActivityFeed — canlı, gönderilebilir bir olay akışı

TsgcHTMLComponent_ActivityFeed, göreli zaman damgalarına sahip ("3 dakika önce" gibi, istemci tarafında canlı tutulur) en yeniden en eskiye sıralı bir "kim ne yaptı" giriş listesi oluşturur ve baştan itibaren yalnızca bir kez işlenmek için değil, WebSockets üzerinden gönderilmek (push) için tasarlanmıştır. MaxItems, onu bir halka tampon (ring buffer) olarak tutar — limit dolduğunda en eski giriş otomatik olarak düşer.

uses
  sgcHTML_Enums, sgcHTML_Component_ActivityFeed;

var
  oFeed: TsgcHTMLComponent_ActivityFeed;
begin
  oFeed := TsgcHTMLComponent_ActivityFeed.Create(nil);
  try
    oFeed.FeedID := 'timeline';
    oFeed.Title := 'Recent Activity';
    oFeed.MaxItems := 30;

    oFeed.AddActivity('Ana', 'closed', 'ticket #482', hcSuccess, 'bi bi-check-circle');
    oFeed.AddActivity('Marc', 'commented on', 'invoice #1190', hcPrimary);

    WebModule.Response := oFeed.HTML;   // feed list + scoped CSS + live relative-time script
  finally
    oFeed.Free;
  end;
end;

// Push a new item live to connected clients (out-of-band htmx fragment):
oFeed.AddActivity('Ana', 'approved', 'purchase order #77', hcSuccess);
Engine.BroadcastFragment(oFeed.GetLastItemFragmentHTML);

İlginç kısım son satır: GetLastItemFragmentHTML yalnızca en yeni girişi bant dışı (out-of-band) bir htmx parçası olarak işler, BroadcastFragment ise bunu, zaten çalıştırdığınız sgcWebSockets sunucusu üzerinden açık olan her tarayıcıya gönderir. Ne yoklama (polling) var, ne de kurulması gereken ayrı bir gerçek zamanlı katman.

Splitter — her şeyi bir arada tutan iki bölmeli kabuk

TsgcHTMLComponent_Splitter, düzen parçasıdır: aralarında sürüklenebilir bir ayırıcı (gutter) bulunan, yatay veya dikey, yeniden boyutlandırılabilir iki bölme; her iki tarafta da piksel cinsinden alt sınırlar vardır, böylece hiçbir bölme sürüklenerek yok edilemez. Bu, tam olarak bir TreeGrid-artı-detay-paneli veya dosya-listesi-artı-düzenleyici ekranının ihtiyaç duyduğu kabuktur.

uses
  sgcHTML_Component_Splitter;

var
  oSplitter: TsgcHTMLComponent_Splitter;
begin
  oSplitter := TsgcHTMLComponent_Splitter.Create(nil);
  try
    oSplitter.SplitterID := 'workspace';
    oSplitter.Orientation := soHorizontal;
    oSplitter.InitialSplit := 30;
    oSplitter.MinSizeA := 180;
    oSplitter.MinSizeB := 320;
    oSplitter.GutterSize := 8;
    oSplitter.Height := '560px';
    oSplitter.PersistKey := 'workspace-split';

    oSplitter.AddPaneA('<div class="p-3"><h5>Files</h5>...</div>');
    oSplitter.AddPaneB('<div class="p-3"><h5>Editor</h5>...</div>');

    WebModule.Response := oSplitter.HTML;   // two panes + gutter + scoped CSS + drag script
  finally
    oSplitter.Free;
  end;
end;

PersistKey ayrıca belirtilmeye değer: onu ayarlarsanız, bir ziyaretçinin ayırıcıyı sürükleyerek getirdiği konum istemci tarafında hatırlanır ve bir sonraki ziyaretinde geri yüklenir; böylece hiçbir durum yönetimi (state-management) kodu yazmadan çalışma alanı düzeni oturumlar arasında sabit kalır.

Deneyin

Dördü de, kendi sayfalarında eksiksiz belgeler, temel özellik referansları ve Delphi/C++Builder/.NET kod örnekleriyle birlikte mevcut sgcWebSockets sürümünde yer alıyor: TreeGrid, PivotTable, ActivityFeed ve Splitter. Tam özellik matrisi artık dokuz aile içinde 83 bileşen listeliyor — bu serideki bir sonraki yazı yeni grafikleri ve görsel kodları ele alacak.

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