sgcHTML: Twórz nowoczesne interfejsy webowe w Delphi bez pisania JavaScript

· Komponenty

Programiści Delphi budują aplikacje biznesowe od trzydziestu lat. Warstwa back-endu jest solidna: dostęp do baz danych, logika biznesowa, generowanie raportów, integracja z usługami. Problem zawsze leżał po stronie front-endu. Gdy klient prosi o interfejs przeglądarkowy, klasyczne podejście Delphi zawodzi. Możesz sięgnąć po IntraWeb (potężny, ale stanowy i starzejący się), spróbować TMS WEB Core (który kompiluje Pascal do JavaScript, ale wymusza model wdrożenia po stronie klienta) albo oddać front-end zespołowi JavaScript i utrzymywać dwie zupełnie odrębne bazy kodu.

sgcHTML oferuje inne podejście. To biblioteka ponad 60 komponentów HTML po stronie serwera, które generują HTML Bootstrap 5 bezpośrednio z kodu Delphi, C++ Builder lub .NET. Ustawiasz właściwości, odczytujesz właściwość HTML i serwujesz wynik. Interaktywność zapewnia htmx, mała biblioteka JavaScript, która pozwala serwerowi zamieniać fragmenty strony w odpowiedzi na kliknięcia i przesłania formularzy — bez żadnego JavaScript, który musiałbyś pisać samodzielnie. Efektem jest nowoczesna, responsywna aplikacja webowa zbudowana w całości w Object Pascal lub C#.

Problem, który rozwiązuje sgcHTML

Standardowa architektura VCL Delphi zakłada grubego klienta: formularze, siatki i okna dialogowe działające pod Windows. Ten model sprawdza się dobrze w narzędziach wewnętrznych. Zawodzi, gdy klient chce portalu dostępnego z przeglądarki na dowolnym urządzeniu lub gdy polityka IT zabrania instalowania aplikacji desktopowych.

Alternatywy dostępne przed sgcHTML wiązały się z trudnościami:

sgcHTML wypełnia tę lukę: natywna biblioteka komponentów Delphi, której wynik to standardowy, nowoczesny HTML Bootstrap 5 zrozumiały dla każdej przeglądarki, utrzymywany aktywnym przez htmx, kontrolowany z jednej bazy kodu w Pascal lub C#.

Jak to działa

Architektura składa się z trzech warstw.

Po pierwsze, komponent taki jak TsgcHTMLComponent_Chart, TsgcHTMLComponent_DataTable czy TsgcHTMLComponent_StatCard potrafi opisać się jako HTML Bootstrap 5. Konfigurujesz go przez zwykłe opublikowane właściwości i wywołujesz właściwość HTML, aby uzyskać znaczniki.

Po drugie, konstruktor stron (TsgcHTMLPageBuilder) składa komponenty w responsywną siatkę. Każdemu komponentowi przypisujesz Section, SectionTitle, SectionOrder i ColumnWidth (siatka 1–12 kolumn Bootstrap). Konstruktor stron automatycznie je rozmieszcza.

Po trzecie, silnik serwerowy (TsgcHTMLEngine_Server) łączy wszystko z TsgcWSHTTPServer z sgcWebSockets. Żądania trafiają do Twojego handlera OnCommandGet, a Ty odpowiadasz kompletną stroną HTML zbudowaną z komponentów. Zasoby CSS i JavaScript Bootstrap są osadzone wewnątrz biblioteki, więc nie ma nic do wdrożenia obok pliku binarnego.

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;

Ponad 60 gotowych komponentów

sgcHTML dostarcza szeroki zestaw komponentów obejmujący najczęstsze wzorce interfejsu webowego. Każdy komponent to standardowa klasa Delphi, którą możesz umieścić na formularzu lub utworzyć w kodzie:

Wiązanie DataSource

Każdy komponent sgcHTML obsługuje właściwość DataSource, która łączy go z dowolnym TDataSource w aplikacji. Ustaw DataAutoRefresh := True, a komponent automatycznie odświeży się po zmianie powiązanego zestawu danych. Aby mieć większą kontrolę, wywołaj LoadFromDataSet bezpośrednio:

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

Komponent wykresu posiada odpowiadającą metodę LoadFromDataSet, która przyjmuje nazwę pola etykiety i jedną lub więcej nazw pól wartości, więc zapytanie o przychody według miesięcy staje się wykresem słupkowym w trzech wierszach:

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

Interaktywność przez htmx — bez JavaScript

Statyczny HTML jest użyteczny. Interaktywny HTML jest niezbędny. sgcHTML osiąga interaktywność przez htmx: małą bibliotekę (14 KB po kompresji gzip), która przechwytuje kliknięcia i przesłania formularzy, wysyła żądanie HTTP do serwera i podmienia w stronie odpowiedź HTML. Twój handler OnCommandGet lub OnCommandOther w Delphi odbiera żądanie, przebudowuje odpowiedni komponent i zwraca jego HTML. Bez przeładowania strony. Bez frameworka JavaScript.

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

Wykres w przeglądarce posiada atrybut hx-get wskazujący na punkt końcowy fragmentu. Gdy użytkownik wybierze inny zakres w rozwijanym menu, htmx podmieni div wykresu w miejscu — otaczająca strona nie jest przeładowywana.

Aktualizacje w czasie rzeczywistym przez WebSocket

Ponieważ sgcHTML jest zbudowany na sgcWebSockets, przekazywanie danych w czasie rzeczywistym jest funkcją pierwszej klasy. Gdy napływają nowe dane — nowe zamówienie, kurs ceny, odczyt czujnika — serwer wysyła fragment HTML przez WebSocket, a htmx wstawia go do odpowiedniego elementu DOM. Klient subskrybuje punkt końcowy WebSocket, a serwer wywołuje SendMessage. Bez odpytywania, bez long-pollingu, bez zewnętrznego brokera komunikatów.

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

Bez łańcucha budowania JavaScript, bez npm, bez Node.js

Wszystkie zasoby JavaScript i CSS potrzebne sgcHTML (Bootstrap 5, Chart.js, htmx) są osadzone jako zasoby binarne wewnątrz skompilowanego pliku wykonywalnego Delphi. Wdrożenie to pojedynczy plik .exe. Nie ma katalogu node_modules, konfiguracji webpack, potoku Babel ani konfliktów wersji między menedżerem pakietów front-endu a back-endem. Instalujesz sgcHTML jako pakiet Delphi, kompilujesz i wysyłasz.

Pierwsze kroki

sgcHTML jest dostarczany jako część edycji sgcWebSockets Enterprise i All-Access oraz jako oddzielny zakup. Do pobrania jest bezpłatna wersja próbna. Wersja próbna zawiera wszystkie ponad 60 komponentów bez ograniczeń funkcji w okresie próbnym.

Biblioteka obsługuje Delphi 10.2 Tokyo do Delphi 13 i C++ Builder 10.2 do 13, a edycja .NET jest przeznaczona dla .NET 6 i nowszych. Pełny kod źródłowy jest dołączony do wszystkich płatnych wariantów.

Masz pytania lub zapytania przedsprzedażowe? Skontaktuj się z nami. Odpowiedź otrzymasz od osób, które napisały ten kod.