sgcHTML in fünf Minuten

sgcHTML verwandelt Object Pascal in HTML. Du baust eine Seite als Komponentenbaum, liest eine einzige String-Eigenschaft und schreibst diesen String in eine HTTP-Antwort. Genau das macht diese Seite, und danach zeigt sie dir, was du als Nächstes brauchst: Formulare, Grids, Diagramme und htmx.

Bootstrap 5 und htmx, serverseitig
Kein JavaScript zu schreiben
Windows, Linux und macOS

Der 5-Minuten-Weg: eine Seite auf einem Formular entwerfen

Platziere vier Arten von Komponenten auf einem VCL-Formular, setze ihre Eigenschaften im Object Inspector und starte das Programm. Die Seite wird aus dem Formular erzeugt, du schreibst also kein HTML und nur eine Zeile Code. Dafür wird sgcWebSockets 2026.10 oder neuer benötigt.

Komponente Was einzustellen ist
TsgcHTTPServer Port, zum Beispiel 8081. Dies ist der Server, mit dem sich der Browser verbindet. Mit sgcWebSockets Professional, Enterprise oder All-Access kannst du stattdessen einen TsgcWebSocketHTTPServer setzen und erhältst WebSocket-Push.
TsgcHTMLDesignServer Server verweist auf den HTTP-Server, Surface auf die Entwurfsoberfläche, und PagePath ist die Adresse der Seite, zum Beispiel /.
TsgcHTMLDesignSurface Title der Seite und die Actions, die Delphi-Code ausführen, wenn der Benutzer klickt oder ein Formular absendet.
sgcHTML-Komponenten Der Inhalt der Seite. Zum Beispiel ein TsgcHTMLComponent_Panel mit seinem Title und Body.

Die eine Zeile Code ist HTTPServer.Active := True im Ereignis OnCreate des Formulars:

uHelloWorld.pas
procedure TfrmHelloWorld.FormCreate(Sender: TObject);
begin
  { Start listening. From now on http://127.0.0.1:8081/ shows the page. }
  HTTPServer.Active := True;
end;

Was der DesignServer macht

Er erzeugt die Seite aus dem Formular, liefert Bootstrap, htmx und Chart.js aus der ausführbaren Datei aus, rendert sicher über die Server-Threads hinweg und antwortet mit 404 auf jeden Pfad, den er nicht kennt.

Klicks und Absendungen führen Delphi-Code aus

Füge der Surface eine Aktion hinzu, setze ihre Source und Target im Object Inspector und doppelklicke auf OnExecute. Das ist das serverseitige OnClick. Das Target wird an Ort und Stelle aktualisiert, ohne die Seite neu zu laden.

Sechs QuickStart-Demos

Sie liegen in Demos\60.HTML\00.QuickStart: 01.HelloWorld, 02.Components, 03.Events, 04.Forms, 05.Database und 06.Pages. Der Code oben stammt aus 01.HelloWorld.

Möchtest du die Seite lieber im Code erstellen? Der Rest dieser Seite macht dasselbe aus einem Konsolenprogramm, ganz ohne Formular.

Was die erste Seite benötigt

Eine Seitenkomponente, die sich selbst in einen String rendert, und ein HTTP-Server, der diesen String an einen Browser übergibt. Zwei Objekte.

Die Seitenkomponente

TsgcHTMLComponent_Site, deklariert in sgcHTML_Component_Site.pas und auf der Palettenseite SGC HTML registriert. Sie rendert eine ganze Shell: Navigation, Seitenleiste, Theme und Inhalt.

Die eine Eigenschaft, auf die es ankommt

HTML, geerbt von TsgcHTMLComponent. Sie ist schreibgeschützt, und beim Lesen wird der aktuelle Komponentenbaum zu einem vollständigen HTML-Dokument gerendert.

Der Server

Alles, was einen String in eine HTTP-Antwort schreiben kann. Die mitgelieferte Demo verwendet TsgcWSHTTPServer aus sgcWebSocket_Server.pas, wenn ein Professional-Build verfügbar ist, und greift sonst auf TIdHTTPServer zurück.

Plattformen

Nur Desktop und Server. SGC_HTML wird innerhalb von {$IFNDEF ANDROID} und {$IFNDEF IOS} definiert, sodass auf Mobilgeräten jede sgcHTML-Unit zu nichts kompiliert wird. Windows, macOS und Linux funktionieren alle.

Voraussetzungen und Editionen

Die Editionsspalte nennt das Define, das den Code steuert, samt der Zeile in Source/sgcVer.inc, in der es steht.

Was Wert
IDE Delphi 7 bis RAD Studio 13 sowie C++Builder 2007 bis 13. Lazarus wird ebenfalls unterstützt, und eine ERP-Demo liegt bei, die unter Linux ausgeführt wurde.
Uses-Klausel sgcHTML_Component_Site für die Seiten-Shell, dazu die Node-Units, die du tatsächlich verwendest, zum Beispiel sgcHTML_Nodes, sgcHTML_Nodes_Bootstrap, sgcHTML_Nodes_Table, sgcHTML_Nodes_Forms und sgcHTML_Nodes_Charts.
Pack-Define SGC_PACK_HTML wird in Zeile 871 definiert, innerhalb des Blocks {$IFDEF SGC_EDT_ALL}, der von Zeile 870 bis Zeile 874 reicht. Im Quellbaum von sgcWebSockets bedeutet das, dass die All-Access-Edition es aktiviert. sgcHTML wird auch als eigenes Produkt mit eigenem Installer und eigener Lizenz verkauft. Dieses Produkt enthält die sgcWebSockets Core Runtime und liefert Seiten mit TsgcHTTPServer aus. Die WebSocket-Server-Komponenten sind nicht enthalten. Sie gehören zu sgcWebSockets Professional, Enterprise oder All-Access.
Funktions-Defines Innerhalb des Blocks {$IFDEF SGC_PACK_HTML} in den Zeilen 882 bis 892: SGC_HTML in Zeile 885 und SGC_HTMX in Zeile 886, beide innerhalb von {$IFNDEF ANDROID} in 883 und {$IFNDEF IOS} in 884. SGC_HTML_CONTROL, die visuelle Entwurfszeit-Oberfläche, steht in Zeile 888 innerhalb von {$IFDEF MSWINDOWS} in 887.
Was das auf Mobilgeräten bedeutet Jede sgcHTML-Unit schließt ihr Interface in {$IFDEF SGC_HTML} ein, sodass ein Android- oder iOS-Build sie zu leeren Units kompiliert. Das ist eine serverseitige Bibliothek, und das ist der Sinn: Das Telefon erhält HTML, nicht Pascal.
Registrierung Die Palettenseite wird nur registriert, wenn sowohl SGC_PACK_HTML als auch SGC_HTML definiert sind.

Welche Komponenten gibt es? Rund achtzig, von einem Grid und einem Scheduler bis zu Diagrammen, einem Rich-Text-Editor, einem QR-Code und einem Kamera-Scanner. Die Funktionsmatrix gruppiert sie nach Bereichen, und jede hat ihre eigene Seite unter Komponenten.

Installieren und die Palettenseite finden

sgcHTML wird als eigenes Paket und auch im All-Access-Build von sgcWebSockets ausgeliefert. Die Installation läuft gleich ab.

1. Entpacken

Entpacke den Download in einen Ordner, unten {$DIR} genannt.

2. Bibliothekspfad

Tools, Optionen, Bibliothek. Füge {$DIR}\source und den lib-Ordner für deine IDE hinzu, zum Beispiel {$DIR}\libD13\$(Platform).

3. Pakete erstellen

Öffne die Paketgruppe für deine IDE-Version unter {$DIR}\Packages\. Kompiliere zuerst das Laufzeit-.dpk und installiere dann das Entwurfszeitpaket mit dcl. Lazarus verwendet stattdessen die .lpk.

4. Palette prüfen

Es erscheint eine Seite namens SGC HTML mit rund achtzig Komponenten. Fehlt sie bei einem Android- oder iOS-Ziel, ist das zu erwarten, denn SGC_HTML ist dort ausgeschlossen.

5. Zuerst eine Demo ausführen

Öffne {$DIR}\Demos\60.HTML\01.RunTime\07.Site, erstelle sie und führe sie aus. Es ist ein Konsolen-Server, er gibt seine eigene URL aus, und der Code unten stammt von dort.

Eine Seite in Pascal, über HTTP ausgeliefert

Baue die Seite, lies die Eigenschaft HTML, schreibe sie in die Antwort. Der erste Tab zeigt die Seite, der zweite den Server, der dritte das gesamte Konsolenprogramm.

sgcSiteDemo_Pages.pas
uses
  SysUtils, Classes,
  // sgc
  sgcHTML_Component_Site;

class function TsgcSiteDemoPages.BuildPage: string;
var
  oSite: TsgcHTMLComponent_Site;
begin
  oSite := TsgcHTMLComponent_Site.Create(nil);
  try
    oSite.Title := 'sgcHTML Site Layouts';
    oSite.Layout := slSidebarLeft;

    oSite.AddMenu('Dashboard', '/');
    oSite.AddMenu('Customers', '/?page=customers');

    oSite.AddSection('Welcome', '<p>Served from Delphi.</p>');

    // reading HTML is what runs the render
    Result := oSite.HTML;
  finally
    oSite.Free;
  end;
end;

Layout nimmt ein TsgcHTMLSiteLayout entgegen: slSidebarLeft, slSidebarRight, slTopNav, slTopNavSidebarLeft, slIconRail oder slOffcanvas. Der Standardwert ist slTopNavSidebarLeft, die obige Zeile dient also nur dazu, den Wechsel zu zeigen.

sgcSiteDemo_Server.pas
uses
  SysUtils, Classes,
  // sgc
  sgcWebSocket_Server,
{$IFDEF SGC_INDY}
  sgcIdContext, sgcIdCustomHTTPServer;
{$ELSE}
  IdContext, IdCustomHTTPServer;
{$ENDIF}

constructor TsgcSiteDemoServer.Create;
begin
  inherited Create;
  FPort := 8092;
  FHTTP := TsgcWSHTTPServer.Create(nil);
  FHTTP.Port := FPort;
  FHTTP.OnCommandGet := HandleCommandGet;
end;

procedure TsgcSiteDemoServer.Start;
begin
  FHTTP.Active := True;
end;

procedure TsgcSiteDemoServer.SendHTML(AResponseInfo: TIdHTTPResponseInfo;
  const aHTML: string);
begin
  AResponseInfo.ResponseNo := 200;
  AResponseInfo.ContentType := 'text/html; charset=utf-8';
  AResponseInfo.ContentText := aHTML;
end;

Die Indy-Units sind bedingt eingebunden, weil ein Build mit der benutzerdefinierten Indy-Bibliothek sie als sgcIdContext und sgcIdCustomHTTPServer sieht und ein Build mit dem Standard-Indy als IdContext und IdCustomHTTPServer. Die mitgelieferte Demo enthält genau diese Bedingung. Jeder Server, der einen String schreiben kann, genügt. Die mitgelieferte Demo wählt TsgcWSHTTPServer, wenn ein Professional-Build verfügbar ist, und greift sonst auf TIdHTTPServer zurück, weshalb die Demo dort eine Bedingung enthält und dieser Auszug nicht.

sgcSiteDemoServer.dpr
program sgcSiteDemoServer;

{$APPTYPE CONSOLE}

uses
  SysUtils,
  sgcSiteDemo_Server in 'sgcSiteDemo_Server.pas',
  sgcSiteDemo_Pages in 'sgcSiteDemo_Pages.pas';

var
  oServer: TsgcSiteDemoServer;
begin
  oServer := TsgcSiteDemoServer.Create;
  try
    oServer.Start;
    WriteLn('sgcHTML Site Layouts Demo - http://localhost:' +
      IntToStr(oServer.Port));
    WriteLn('Press Enter to stop.');
    ReadLn;
    oServer.Stop;
  finally
    oServer.Free;
  end;
end.

Eine Konsolenanwendung, also ohne Formular und ohne VCL-Einrichtung. Das ist das kürzestmögliche sgcHTML-Programm, und genau das ist die mitgelieferte Demo tatsächlich.

Alle drei Tabs stammen aus der mitgelieferten Demo Demos\60.HTML\01.RunTime\07.Site, auf das Wesentliche gekürzt. Das vollständige Projekt wechselt außerdem Layout, Theme und Farbschema über den Query-String, was sich lohnt zu lesen, sobald die erste Seite gerendert wird.

Prüfen, ob die Seite gerendert wurde

Das Programm gibt die URL aus, auf der es lauscht. Öffne sie und probiere dann die Umschalter aus.

Die ausgegebene URL

Das Programm schreibt beim Start http://localhost:8092 in die Konsole. Öffne sie. Eine Seite mit Navigation, Seitenleiste und deinem Inhalt bedeutet, dass Rendering und Server beide funktionieren.

Active

FHTTP.Active := True gelingt entweder oder löst eine Exception aus. Wenn Port 8092 bereits von etwas anderem belegt ist, erfährst du es hier.

Der Content-Type

Zeigt ein Browser rohes Markup statt einer Seite, ging die Antwort ohne text/html hinaus. Setze ContentType, bevor du ContentText zuweist.

Ein Layout wechseln

Die mitgelieferte Demo liest layout, theme und mode aus dem Query-String, sodass ?layout=topnav&mode=dark dieselbe Seite anders rendert. So siehst du am schnellsten, was die Komponente leistet.

Was beim ersten Mal meistens schiefgeht

Sechs Probleme erklären fast jeden ersten Versuch, der nicht rendert.

Die Palettenseite erscheint nie

Die Registrierung braucht sowohl SGC_PACK_HTML als auch SGC_HTML. Das erste wird in Zeile 871 innerhalb des All-Access-Blocks definiert, das zweite in Zeile 885 innerhalb des Pack-Blocks. Bei einem Android- oder iOS-Ziel fehlt das zweite absichtlich.

Die Seite ist leer

Du hast den Baum gebaut, aber nie HTML gelesen. Diese Eigenschaft löst das Rendering aus. Das Lesen ist der gesamte Rendering-Schritt, und es liefert ein vollständiges Dokument, kein Fragment.

Beim Bearbeiten der Seite ändert sich nichts

Die Demo baut bei jeder Anfrage eine neue TsgcHTMLComponent_Site und gibt sie danach frei. Wenn du das Objekt zwischenspeicherst und wiederverwendest, denk daran, seinen Inhalt vor dem Neuaufbau mit ClearContent zu leeren.

Der Browser zeigt rohes Markup

Der Content-Type der Antwort wurde nie gesetzt. Die Demo setzt ContentType := 'text/html; charset=utf-8', bevor sie den Body schreibt, und ohne das zeigen manche Clients das HTML als Text an.

Du schreibst HTML-Strings von Hand

Das musst du nicht. Es gibt Node-Units für Bootstrap-Layout, Tabellen, Formulare und Diagramme, und der ganze Sinn der Bibliothek ist, dass du diese zusammensetzt, statt Markup zu verketten.

Der Port ist bereits belegt

Die Demo lauscht auf 8092. Belegt etwas anderes diesen Port, startet der Server nicht. Ändere also den Port, bevor du nach einem tieferen Problem suchst.

Was Leute nach der ersten Seite bauen

Vier Richtungen, alle im selben Paket.

Formulare, die zurückposten

Die Forms-Node-Unit baut Eingaben, Auswahlfelder, Validierung und Layout, und htmx sendet sie ohne Neuladen der Seite. Das Escaping übernimmt die Bibliothek für dich, wenn du Nodes statt Strings baust.

Formularkomponenten

Daten auf der Seite

Ein Grid mit Sortieren, Filtern und Paging, dazu Diagramme, Statistikkarten, ein Scheduler, ein Gantt-Diagramm und eine Diagramm-Komponente.

Funktionsmatrix

Ganze Anwendungen

Mehr als fünfzehn Laufzeit-Demos liegen bei, von einem ERP-Dashboard über ein Kassensystem, ein Helpdesk und ein Lager bis zu einer Außendienst-App. Sie sind der schnellste Weg, die Bibliothek im realen Maßstab zu sehen.

Demo-Galerie

Bestehende Web-Schicht weiterverwenden

Es gibt Komponenten für WebBroker und DataSnap, sodass eine bestehende Delphi-Webanwendung sgcHTML-Seiten rendern kann, ohne neu geschrieben zu werden.

WebBroker und DataSnap

Referenz, Demos und Dokumentation

Der Katalog listet jede Komponente mit einer Vorschau auf. Die Demo-Projekte liegen im Download unter Demos\60.HTML.

Seite TsgcHTMLComponent_Site Die Seiten-Shell, auf der dieser Schnellstart aufbaut, Eigenschaft für Eigenschaft.
Funktionsmatrix Layout, Formulare, Daten, Diagramme, Authentifizierung, Chat und der Rest, nach Bereichen gruppiert.
Demo-Galerie Die mitgelieferten Laufzeit-Demos, jeweils mit einem kurzen Video.
WebBroker und DataSnap sgcHTML-Seiten aus einer bestehenden Delphi-Web-Schicht rendern.
Testversion herunterladen Derselbe Installer wie in der Vollversion, zeitlich begrenzt.
Online-Hilfe Die generierte Referenz, stets auf dem Stand der aktuellen Version.
Getting-Started-Leitfaden PDF, auf Englisch. Die Ideen hinter den sechs QuickStart-Demos, erklärt in einem zusammenhängenden Text.

Zum Weiterlesen: die Site-Komponente, Web-UI-Komponenten in Delphi, intelligentere Formulare und Datentabellen. Jedes Produkt hat einen eigenen Schnellstart, aufgelistet auf der Seite Erste Schritte.

Fragen zum sgcHTML-Schnellstart

TsgcHTMLComponent_Site aus der Unit sgcHTML_Component_Site.pas. Sie rendert eine vollständige Seiten-Shell, du bekommst also Navigation, Seitenleiste, Theme und Inhaltsbereich, ohne sie selbst zusammensetzen zu müssen. Erzeuge sie, rufe AddMenu und AddContent oder AddSection auf und lies dann die Eigenschaft HTML. Die mitgelieferte Site-Demo macht genau das.
Du schreibst es selbst in eine HTTP-Antwort. HTML ist eine einfache string-Eigenschaft, daher genügt jeder Server. Die mitgelieferte Demo verwendet in einem Professional-Build TsgcWSHTTPServer und greift sonst auf TIdHTTPServer zurück, setzt ResponseNo := 200 und ContentType := 'text/html; charset=utf-8' und weist den String ContentText zu.
Das Gate ist SGC_PACK_HTML, definiert in Zeile 871 von sgcVer.inc, innerhalb des Blocks {$IFDEF SGC_EDT_ALL}, der von Zeile 870 bis Zeile 874 reicht. In diesem Quellbaum ist es die All-Access-Edition, die es definiert. sgcHTML wird auch als eigenes Produkt mit eigenem Installer verkauft. Sieh dir daher die sgcHTML-Preisseite für die aktuellen Lizenzen an, statt sie aus dem Define abzuleiten.
Nein, und das ist Absicht. SGC_HTML wird in Zeile 885 innerhalb von {$IFNDEF ANDROID} in Zeile 883 und {$IFNDEF IOS} in Zeile 884 definiert, sodass auf diesen Zielen jede sgcHTML-Unit zu einer leeren Unit kompiliert wird. Es ist eine serverseitige Bibliothek: Das Telefon erhält HTML über das Netzwerk, weshalb das mobile Ziel den Renderer nicht braucht. Windows, macOS und Linux werden alle unterstützt.
Nein. Die Bibliothek erzeugt Bootstrap-5-Markup und htmx-Attribute, und htmx sorgt dafür, dass eine Schaltfläche zurückpostet und einen Teil der Seite ohne Neuladen austauscht. Du beschreibst die Interaktion in Pascal, und die Attribute werden für dich generiert. Wenn du möchtest, kannst du über CustomHead und BodyEndHTML trotzdem eigene Skripte hinzufügen.
Ja. Layout nimmt ein TsgcHTMLSiteLayout entgegen, dessen Member slSidebarLeft, slSidebarRight, slTopNav, slTopNavSidebarLeft, slIconRail und slOffcanvas sind, mit dem Standardwert slTopNavSidebarLeft. Preset nimmt ein TsgcHTMLSitePreset entgegen, dessen Member unter anderem spAdmin, spDashboard, spPortal, spDocs, spLanding und spApp sind. Farben sowie der helle oder dunkle Modus liegen im Objekt Theme.
Wenn du die Seite aus Nodes baust, ja, denn der Node schreibt den Text und escapet ihn. Das Risiko entsteht, wenn du die Nodes umgehst und Markup selbst verkettest, zum Beispiel über AddContent mit einem String, den du aus Benutzereingaben gebaut hast. Bevorzuge die Node-Units für alles, was Benutzerdaten enthält.
Der Download enthält mehr als fünfzehn Laufzeit-Demos unter Demos\60.HTML\01.RunTime, darunter ein ERP-Dashboard, ein Helpdesk, ein Kassensystem, ein Lager, eine Berichts-App und eine Außendienst-App. Die Galerie zeigt zu jeder ein kurzes Video.
Bestes Preis-Leistungs-Verhältnis: All-AccessAlle eSeGeCe-Produkte, inklusive Premium-Support, ab €1,059 pro Jahr.
All-Access-Preise ansehen

Bereit, eine Web-Oberfläche in Pascal zu bauen?

Lade die Testversion herunter und starte die Site-Demo, bevor du eine Zeile Markup schreibst.