sgcHTML: Moderne Web-Oberflächen aus Delphi heraus erstellen – ohne JavaScript

· Komponenten

Delphi-Entwickler erstellen seit dreißig Jahren Geschäftsanwendungen. Das Backend ist solide: Datenbankzugriff, Geschäftslogik, Berichterstellung, Dienstintegration. Das Problem war stets das Frontend. Sobald ein Kunde eine browserbasierte Oberfläche verlangt, stößt der klassische Delphi-Ansatz an seine Grenzen. Entweder greift man zu IntraWeb (leistungsfähig, aber zustandsbehaftet und in die Jahre gekommen), versucht es mit TMS WEB Core (das Pascal nach JavaScript kompiliert, aber ein clientseitiges Bereitstellungsmodell erfordert) oder übergibt das Frontend an ein JavaScript-Team und pflegt zwei vollständig getrennte Codebasen.

sgcHTML geht einen anderen Weg. Es ist eine Bibliothek mit über 60 serverseitigen Komponenten, die Bootstrap 5-HTML direkt aus Ihrem Delphi-, C++ Builder- oder .NET-Code erzeugen. Sie setzen Eigenschaften, lesen die HTML-Eigenschaft und liefern das Ergebnis aus. Interaktivität kommt von htmx, einer kleinen JavaScript-Bibliothek, die es dem Server ermöglicht, Seitenfragmente als Reaktion auf Klicks und Formularübermittlungen auszutauschen — ohne dass Sie selbst JavaScript schreiben müssen. Das Ergebnis ist eine moderne, responsive Webanwendung, die vollständig in Object Pascal oder C# entwickelt wird.

Das Problem, das sgcHTML löst

Die klassische Delphi-VCL-Architektur setzt einen Thick Client voraus: Formulare, Raster und Dialoge, die unter Windows laufen. Dieses Modell eignet sich gut für interne Werkzeuge. Es versagt, wenn der Kunde ein Portal möchte, das vom Browser auf jedem Gerät erreichbar ist, oder wenn die IT-Richtlinien die Installation von Desktop-Anwendungen untersagen.

Die Alternativen vor sgcHTML brachten alle Reibungspunkte mit sich:

sgcHTML schließt diese Lücke: eine native Delphi-Komponentenbibliothek, deren Ausgabe standardkonformes, modernes Bootstrap 5-HTML ist, das jeder Browser versteht, durch htmx lebendig gehalten und vollständig aus einer einzigen Pascal- oder C#-Codebasis gesteuert.

Wie es funktioniert

Die Architektur besteht aus drei Schichten.

Erstens weiß eine Komponente wie TsgcHTMLComponent_Chart, TsgcHTMLComponent_DataTable oder TsgcHTMLComponent_StatCard, wie sie sich als Bootstrap 5-HTML beschreiben muss. Sie konfigurieren sie über normale veröffentlichte Eigenschaften und rufen die HTML-Eigenschaft auf, um das Markup zu erhalten.

Zweitens fügt ein Seitenersteller (TsgcHTMLPageBuilder) Komponenten zu einem responsiven Raster zusammen. Sie weisen jeder Komponente eine Section, einen SectionTitle, eine SectionOrder und eine ColumnWidth (Bootstraps 1–12-Spaltenraster) zu. Der Seitenersteller ordnet sie automatisch an.

Drittens verbindet eine Server-Engine (TsgcHTMLEngine_Server) alles mit einem TsgcWSHTTPServer aus sgcWebSockets. Anfragen kommen in Ihrem OnCommandGet-Handler an, und Sie antworten mit einer vollständigen HTML-Seite, die aus Ihren Komponenten aufgebaut ist. Die Bootstrap-CSS- und JavaScript-Ressourcen sind als eingebettete Ressourcen in der Bibliothek enthalten, sodass neben der Binärdatei nichts zusätzlich bereitgestellt werden muss.

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;

Über 60 fertige Komponenten

sgcHTML wird mit einer umfangreichen Komponentenpalette ausgeliefert, die die häufigsten Web-UI-Muster abdeckt. Jede Komponente ist eine standardmäßige Delphi-Klasse, die Sie auf ein Formular legen oder im Code erstellen können:

DataSource-Bindung

Jede sgcHTML-Komponente unterstützt eine DataSource-Eigenschaft, die sie mit einer beliebigen TDataSource in Ihrer Anwendung verknüpft. Setzen Sie DataAutoRefresh := True, und die Komponente wird automatisch neu gerendert, wenn sich der zugrunde liegende Datensatz ändert. Für eine feinere Steuerung rufen Sie LoadFromDataSet direkt auf:

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

Die Diagrammkomponente verfügt über eine passende LoadFromDataSet-Methode, die einen Bezeichnungsfeld-Namen und einen oder mehrere Wertfeld-Namen akzeptiert, sodass eine Umsatz-nach-Monat-Abfrage in drei Zeilen zu einem Balkendiagramm wird:

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

Interaktivität durch htmx — kein JavaScript erforderlich

Statisches HTML ist nützlich. Interaktives HTML ist notwendig. sgcHTML erreicht Interaktivität durch htmx: eine kleine Bibliothek (14 KB gzippt), die Klicks und Formularübermittlungen abfängt, eine HTTP-Anfrage an Ihren Server sendet und das HTML der Antwort in die Seite einfügt. Ihr Delphi-Handler OnCommandGet oder OnCommandOther empfängt die Anfrage, erstellt die relevante Komponente neu und gibt deren HTML zurück. Kein Seiten-Reload. Kein JavaScript-Framework.

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

Das Diagramm im Browser trägt ein hx-get-Attribut, das auf den Fragment-Endpunkt zeigt. Wenn der Benutzer einen anderen Bereich in einer Dropdown-Liste auswählt, tauscht htmx den Diagramm-Div an Ort und Stelle aus — die umgebende Seite wird nicht neu geladen.

Echtzeit-Updates über WebSocket

Da sgcHTML auf sgcWebSockets aufbaut, ist Echtzeit-Push eine erstklassige Funktion. Wenn neue Daten eintreffen — eine neue Bestellung, ein Preissignal, ein Sensorwert — überträgt Ihr Server ein HTML-Fragment per WebSocket, und htmx fügt es in das richtige DOM-Element ein. Der Client abonniert einen WebSocket-Endpunkt; der Server ruft SendMessage auf. Kein Polling, kein Long-Polling, kein externer Message Broker.

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

Keine JavaScript-Build-Chain, kein npm, kein Node.js

Alle JavaScript- und CSS-Ressourcen, die sgcHTML benötigt (Bootstrap 5, Chart.js, htmx), sind als binäre Ressource in der kompilierten Delphi-Exe eingebettet. Die Bereitstellung besteht aus einer einzigen .exe-Datei. Es gibt kein node_modules-Verzeichnis, keine webpack-Konfiguration, keine Babel-Pipeline und keine Versionskonflikte zwischen einem Frontend-Paketmanager und Ihrem Backend. Sie installieren sgcHTML als Delphi-Paket, kompilieren und liefern aus.

Einstieg

sgcHTML ist Teil der Editionen sgcWebSockets Enterprise und All-Access sowie als eigenständiges Produkt erhältlich. Eine kostenlose Testversion steht zum Download bereit. Die Testversion enthält alle über 60 Komponenten ohne Funktionseinschränkungen während des Testzeitraums.

Die Bibliothek unterstützt Delphi 10.2 Tokyo bis Delphi 13 und C++ Builder 10.2 bis 13; die .NET-Edition zielt auf .NET 6 und höher ab. Der vollständige Quellcode ist in allen kostenpflichtigen Stufen enthalten.

Fragen oder Vorabfragen zum Kauf? Nehmen Sie Kontakt auf. Sie erhalten eine Antwort von den Entwicklern, die den Code geschrieben haben.