sgcHTML: JavaScript Yazmadan Delphi ile Modern Web Arayüzleri Oluşturun

· Bileşenler

Delphi geliştiricileri otuz yıldır iş uygulamaları geliştirmektedir. Arka uç sağlamdır: veritabanı erişimi, iş mantığı, rapor üretimi, servis entegrasyonu. Sorun her zaman ön uçta olmuştur. Bir müşteri tarayıcı tabanlı bir arayüz istediği anda, klasik Delphi yaklaşımı çökmektedir. Ya IntraWeb'e (güçlü ancak durum bilgili ve eskimiş) başvurursunuz, Pascal'ı JavaScript'e derleyen ancak istemci taraflı bir dağıtım modeli dayatan TMS WEB Core'u denemeye kalkışırsınız ya da ön ucu bir JavaScript ekibine bırakıp tamamen ayrı iki kod tabanını sürdürmeye çalışırsınız.

sgcHTML farklı bir yaklaşım benimser. Delphi, C++ Builder veya .NET kodunuzdan doğrudan Bootstrap 5 HTML üreten 60'tan fazla sunucu taraflı bileşenden oluşan bir kütüphanedir. Özellikleri ayarlarsınız, HTML özelliğini okursunuz ve sonucu sunarsınız. Etkileşim, sunucunun tıklama ve form gönderimleri karşısında sayfa parçalarını değiştirmesini sağlayan küçük bir JavaScript kütüphanesi olan htmx aracılığıyla gelir; kendinizin yazması gereken JavaScript yoktur. Sonuç, tamamen Object Pascal veya C# ile oluşturulmuş modern, duyarlı bir web uygulamasıdır.

sgcHTML'nin çözdüğü sorun

Standart Delphi VCL mimarisi kalın bir istemciyi varsayar: Windows üzerinde çalışan formlar, tablolar ve diyaloglar. Bu model dahili araçlar için iyi çalışır. Müşteri herhangi bir cihazdaki tarayıcıdan erişilebilen bir portal istediğinde ya da BT politikası masaüstü uygulama kurulumunu yasakladığında çökmektedir.

sgcHTML öncesindeki alternatifler hep sürtünmeyle geldi:

sgcHTML bu boşluğu doldurur: çıktısı herhangi bir tarayıcının anlayacağı standart, modern Bootstrap 5 HTML olan, htmx tarafından canlı tutulan ve tek bir Pascal veya C# kod tabanından yönetilen yerli bir Delphi bileşen kütüphanesi.

Nasıl çalışır

Mimari üç katmandan oluşur.

Birinci katmanda TsgcHTMLComponent_Chart, TsgcHTMLComponent_DataTable veya TsgcHTMLComponent_StatCard gibi bir bileşen, kendini Bootstrap 5 HTML olarak nasıl tanımlayacağını bilir. Normal yayınlanmış özellikler aracılığıyla yapılandırırsınız ve işaretlemeyi almak için HTML özelliğini çağırırsınız.

İkinci katmanda bir sayfa oluşturucu (TsgcHTMLPageBuilder) bileşenleri duyarlı bir tabloya toplar. Her bileşene bir Section, bir SectionTitle, bir SectionOrder ve bir ColumnWidth (Bootstrap'ın 1–12 sütunlu tablosu) atarsınız. Sayfa oluşturucu bunları otomatik olarak düzenler.

Üçüncü katmanda bir sunucu motoru (TsgcHTMLEngine_Server) her şeyi sgcWebSockets'tan bir TsgcWSHTTPServer'a bağlar. İstekler OnCommandGet işleyicinize ulaşır ve bileşenlerinizden oluşturulmuş eksiksiz bir HTML sayfasıyla yanıt verirsiniz. Bootstrap CSS ve JavaScript, kütüphanenin içine gömülü kaynaklardır; bu nedenle ikili dosyanın yanına dağıtılacak hiçbir şey yoktur.

uses
  sgcWebSocket_Server, sgcHTML_Engine_Server,
  sgcHTML_Template_Bootstrap, sgcHTML_Page,
  sgcHTML_Component_StatCard, sgcHTML_Component_Chart;

var
  oServer:   TsgcWSHTTPServer;
  oEngine:   TsgcHTMLEngine_Server;
  oTemplate: TsgcHTMLTemplate_Bootstrap;
  oPage:     TsgcHTMLPage;
  oStat:     TsgcHTMLComponent_StatCard;
  oChart:    TsgcHTMLComponent_Chart;
begin
  oServer := TsgcWSHTTPServer.Create(nil);
  oServer.Port := 8080;

  oEngine   := TsgcHTMLEngine_Server.Create(nil);
  oEngine.Server := oServer;

  oTemplate := TsgcHTMLTemplate_Bootstrap.Create(nil);
  oTemplate.Title := 'My Dashboard';

  oPage := TsgcHTMLPage.Create(nil);

  // KPI card: total revenue
  oStat := TsgcHTMLComponent_StatCard.Create(nil);
  oStat.PageBuilder := oPage.PageBuilder;
  oStat.Section := 'kpi';
  oStat.SectionOrder := 1;
  oStat.ColumnWidth := cw3;
  oStat.Title := 'Total Revenue';
  oStat.Value := '$128,450';
  oStat.Trend := stUp;
  oStat.TrendValue := '+12%';

  // Revenue trend chart
  oChart := TsgcHTMLComponent_Chart.Create(nil);
  oChart.PageBuilder := oPage.PageBuilder;
  oChart.Section := 'charts';
  oChart.SectionOrder := 1;
  oChart.ColumnWidth := cw8;
  oChart.ChartType := ctLine;
  oChart.Title := 'Monthly Revenue';
  oChart.AddLabel('Jan'); oChart.AddLabel('Feb'); oChart.AddLabel('Mar');
  oChart.AddDataset('2026', [42000, 58000, 64000], '#0d6efd', '', True);

  oServer.Active := True;
end;

60'tan fazla hazır bileşen

sgcHTML, en yaygın web arayüz düzenlerini kapsayan geniş bir bileşen paleti ile gelir. Her bileşen, bir form üzerine bırakabileceğiniz veya kod içinde oluşturabileceğiniz standart bir Delphi sınıfıdır:

DataSource bağlama

Her sgcHTML bileşeni, uygulamanızdaki herhangi bir TDataSource'a bağlayan bir DataSource özelliğini destekler. DataAutoRefresh := True ayarını yapın; bileşen, temel veri kümesi değiştiğinde otomatik olarak yeniden oluşturulur. Daha hassas denetim için LoadFromDataSet'i doğrudan çağırabilirsiniz:

uses
  sgcHTML_Component_DataTable;

// Populate a data table from a FireDAC query
oTable := TsgcHTMLComponent_DataTable.Create(nil);
oTable.PageBuilder := oPage.PageBuilder;
oTable.Section := 'invoices';
oTable.Title := 'Recent Invoices';
oTable.ShowSearch := True;
oTable.ShowExport := True;
oTable.LoadFromDataSet(FDQuery1, 20); // 20 rows per page

Grafik bileşeninde, bir etiket alan adı ve bir ya da daha fazla değer alan adı kabul eden eşleşen bir LoadFromDataSet yöntemi bulunur; böylece aylık gelir sorgusu üç satırda bir çubuk grafiğe dönüşür:

oChart.LoadFromDataSet(fdqRevenue, 'month', ['revenue', 'cost']);

htmx aracılığıyla etkileşim — JavaScript gerekmez

Statik HTML kullanışlıdır. Etkileşimli HTML ise zorunludur. sgcHTML, etkileşimi htmx aracılığıyla sağlar: tıklamaları ve form gönderimleri yakalayan, sunucunuza bir HTTP isteği gönderen ve yanıt HTML'ini sayfaya yerleştiren küçük bir kütüphane (14 KB gzip). Delphi OnCommandGet veya OnCommandOther işleyiciniz isteği alır, ilgili bileşeni yeniden oluşturur ve HTML'ini döndürür. Sayfa yenilemesi yoktur. JavaScript çerçevesi yoktur.

// Server-side handler: update the chart fragment when the user changes the date range
procedure TMyServer.HandleChartFragment(aReq: TIdHTTPRequestInfo;
  aResp: TIdHTTPResponseInfo);
var
  oChart: TsgcHTMLComponent_Chart;
  vRange: string;
begin
  vRange := aReq.Params.Values['range']; // 'week', 'month', 'year'
  oChart := TsgcHTMLComponent_Chart.Create(nil);
  try
    oChart.ChartType := ctBar;
    LoadRevenueData(oChart, vRange); // your data-loading procedure
    aResp.ContentText := oChart.HTML;
    aResp.ContentType := 'text/html';
  finally
    oChart.Free;
  end;
end;

Tarayıcıdaki grafik, parça uç noktasına işaret eden bir hx-get niteliği taşır. Kullanıcı açılır menüden farklı bir aralık seçtiğinde htmx grafik div'ini yerinde değiştirir; çevresindeki sayfa yenilenmez.

WebSocket üzerinden gerçek zamanlı güncellemeler

sgcHTML, sgcWebSockets üzerine inşa edildiğinden gerçek zamanlı push birinci sınıf bir özelliktir. Yeni veri geldiğinde (yeni bir sipariş, fiyat değişimi, sensör okuması) sunucunuz WebSocket üzerinden bir HTML parçası gönderir ve htmx bunu doğru DOM öğesine yerleştirir. İstemci bir WebSocket uç noktasına abone olur; sunucu SendMessage'ı çağırır. Yoklama yoktur, uzun yoklama yoktur, harici mesaj aracısı yoktur.

// Push an updated stat card to all connected clients
procedure TDashboardServer.PushRevenueUpdate(aNewRevenue: Double);
var
  oCard: TsgcHTMLComponent_StatCard;
begin
  oCard := TsgcHTMLComponent_StatCard.Create(nil);
  try
    oCard.CardID := 'kpi-revenue';
    oCard.Title := 'Total Revenue';
    oCard.Value := FormatCurr('$#,##0', aNewRevenue);
    oCard.Trend := stUp;
    // Send the HTML fragment to all clients subscribed to this channel
    FWSServer.Broadcast(oCard.HTML);
  finally
    oCard.Free;
  end;
end;

JavaScript derleme zinciri yok, npm yok, Node.js yok

sgcHTML'nin ihtiyaç duyduğu her JavaScript ve CSS varlığı (Bootstrap 5, Chart.js, htmx), derlenmiş Delphi yürütülebilir dosyasının içine ikili kaynak olarak gömülüdür. Dağıtımınız tek bir .exe dosyasıdır. node_modules dizini yoktur, webpack yapılandırması yoktur, Babel hattı yoktur ve ön uç paket yöneticisi ile arka ucunuz arasında sürüm çakışması yoktur. sgcHTML'yi bir Delphi paketi olarak kurarsınız, derlersiniz ve gönderirsiniz.

Başlarken

sgcHTML, sgcWebSockets Enterprise ve All-Access sürümlerinin bir parçası olarak ve ayrıca tekil satın alma seçeneğiyle sunulmaktadır. İndirme için ücretsiz bir deneme sürümü mevcuttur. Deneme sürümü, deneme süresi boyunca özellik kısıtlaması olmaksızın 60'tan fazla bileşenin tamamını içerir.

Kütüphane Delphi 10.2 Tokyo'dan Delphi 13'e ve C++ Builder 10.2'den 13'e kadar destekler; .NET sürümü ise .NET 6 ve sonrasını hedefler. Tüm ücretli seviyelerde tam kaynak kodu dahildir.

Sorularınız veya satış öncesi sorularınız mı var? İletişime geçin. Kodu yazan kişilerden yanıt alacaksınız.