sgcHTML — Web-UI-Komponenten für Delphi, C++ Builder & .NET

sgcHTML

Erstelle vollständige, moderne Web-UIs direkt aus Delphi, C++ Builder und .NET. sgcHTML ist ein serverseitiges Komponenten-Framework mit über 60 fertigen Widgets — Diagramme, Grids, Formulare, Dashboards, Chat und mehr —, die Bootstrap-5-Markup erzeugen und über htmx interaktiv bleiben. Du schreibst Object Pascal oder C#, sgcHTML schreibt das HTML, CSS und JavaScript.

Über 60 UI-Komponenten
Bootstrap 5 + htmx
Delphi / C++ Builder / .NET
Kein JavaScript erforderlich

Du schreibst Pascal oder C#. sgcHTML schreibt das Frontend.

sgcHTML verwandelt dein vorhandenes Delphi-, C++-Builder- oder .NET-Backend in einen Webanwendungsserver. Jede Komponente ist eine native Klasse, die Bootstrap-5-HTML erzeugt; htmx hält die Seite interaktiv und live, ohne eine einzige Zeile handgeschriebenes JavaScript.

Komponenten, die HTML erzeugen

Jedes Widget ist eine Klasse — TsgcHTMLComponent_Chart, TsgcHTMLComponent_Grid, TsgcHTMLComponent_Form und 60 weitere. Setze ihre Eigenschaften und lies dann ihre HTML-Eigenschaft aus, um sauberes, auslieferungsfertiges Bootstrap-5-Markup zu erhalten.

Ausgeliefert von deinem eigenen Server

Platziere einen TsgcHTMLEngine_Server (oder verbinde das HTML mit einem vorhandenen TsgcWebSocketHTTPServer). Anfragen treffen in deinem OnCommandGet-Handler ein; du antwortest mit einer aus Komponenten aufgebauten Seite. Kein externer Web-Stack.

Interaktiv über htmx

Füge einen TsgcHTMX_Engine_Server hinzu, und Klicks, Formular-Posts und Live-Updates wandern zu deinen Pascal-/C#-Eventhandlern und zurück. Der Server tauscht HTML-Fragmente an Ort und Stelle aus — das SPA-Gefühl, ohne die JavaScript-Build-Kette.

Echtzeit über WebSockets

Da htmx über den sgcWebSockets-Server läuft, kannst du Live-HTML an jeden verbundenen Browser pushen. Dashboards, Monitore und Chat-Fenster aktualisieren sich in dem Moment, in dem sich deine Daten ändern — servergesteuert, ohne Polling.

Theming & Templates

TsgcHTMLTemplate_Bootstrap bettet deinen Inhalt in ein vollständiges responsives Dokument ein; TsgcHTMLThemeController und TsgcHTMLThemeBuilder liefern helle/dunkle Themes und ein gemeinsames Stylesheet. Bootstrap 5.3 und htmx sind eingebettet enthalten — kein CDN zur Laufzeit.

Direkte Datenbankanbindung

Grid, DataTable, Chart, Select, TreeView, Scheduler, Timeline und Form binden direkt an ein TDataSet über LoadFromDataSet / DataSource. Richte eine Komponente auf eine Abfrage aus, und sie rendert die Zeilen.

Lokalisierte UI, 17 Sprachen

sgcHTML liefert integrierten UI-Text (Schaltflächen, Beschriftungen, Validierungsmeldungen) in 17 Sprachen: Englisch, Spanisch, Französisch, Deutsch, Portugiesisch, Italienisch, Niederländisch, Schwedisch, Norwegisch, Polnisch, Tschechisch, Türkisch, Russisch, Chinesisch, Japanisch, Koreanisch und Arabisch. Wähle eine mit sgcHTMLSetLanguage, und die Komponenten werden in der Sprache des Besuchers mit korrekten nativen Schriften dargestellt, einschließlich CJK, Kyrillisch und Arabisch.

Sichere Ausgabe standardmäßig

Jede Komponente leitet ihren dynamischen Text, ihre Attribute, ihr Inline-JavaScript und ihre URLs durch automatische HTML-, Attribut-, JavaScript- und URL-Kodierung sowie URL-Bereinigung (sgcHTMLEncode, sgcHTMLAttrEncode, sgcJSEncode, sgcHTMLSanitizeURL), sodass Benutzerdaten nicht aus ihrem Kontext ausbrechen und Skript einschleusen können. Schutz vor XSS und Injection ist ohne zusätzlichen Aufwand aktiv.

Über 60 Komponenten, neun Familien

Von Navigations-Chrome über Data-Grids, Diagramme, Formulare und Overlays bis zum KI-Chat — das gesamte Bootstrap-5-Vokabular als native Komponenten. Jede verlinkt auf ihre eigene Seite mit Delphi-, C++-Builder- und .NET-Beispielen.

NavBar, Sidebar, Breadcrumb, Tabs, Pagination, Toolbar, TreeView, Stepper, Dropdown, ButtonGroup, ListGroup, DashboardLayout.

Komponenten ansehen →

Daten & Tabellen

Grid, DataTable, Calendar, Scheduler, Timeline, KanbanBoard, Gantt — sortierbar, filterbar, exportierbar, an Datasets gebunden.

Komponenten ansehen →

Diagramme & Visualisierung

Chart (Chart.js), Gauge, Diagram (SVG-Flow), Map (Leaflet) — datengetriebene Visualisierungen aus deinen eigenen Datasets.

Komponenten ansehen →

Formulare & Eingaben

Form, Edit, Memo, CheckBox, RadioGroup, Select, InputGroup, AutoComplete, DatePicker, FileUpload, RichEditor, Rating.

Komponenten ansehen →

Inhalt & Layout

Panel, StatCard, Accordion, Carousel, Image, Avatar, Video — Karten, Medien und KPI-Kacheln für Dashboards.

Komponenten ansehen →

Overlays & Feedback

Modal, Offcanvas, Popover, Toast, Snackbar, Notification, Spinner, Placeholder — Dialoge und Status-Flächen.

Komponenten ansehen →

Chat & KI

ChatBox, Chat (im WhatsApp-Stil), AIChat mit Anbieterauswahl, Token-Streaming und RAG-Quellenangaben.

Komponenten ansehen →

Authentifizierung

Login, SocialLogin (OAuth), OAuthCallback, WebAuthnLogin (Passkeys) — fertige Anmeldeabläufe.

Komponenten ansehen →

Infrastruktur & Engine

EngineServer, HTMXEngine, PageBuilder, TemplateBootstrap, ThemeController, ThemeBuilder, HTMXFragment, HTMXRouter — die nicht-visuellen Bausteine, die Seiten ausliefern und live halten.

Komponenten ansehen →

Die vollständige Feature-Matrix ansehen →

Ein Web-Dashboard in wenigen Zeilen

Starte einen HTTP-Server, hänge die htmx-Engine an und beantworte Anfragen mit einer aus Komponenten aufgebauten Seite. Dieselbe API in Delphi, C++ Builder und .NET.

uses
  sgcWebSocket_Server, sgcHTMX_Engine_Server,
  sgcHTML_Template_Bootstrap, sgcHTML_Component_Chart;

// 1. Start a server and attach the htmx engine
FServer := TsgcWSHTTPServer.Create(nil);
FServer.Port := 8080;
FServer.OnCommandGet := HandleGet;

FHTMX := TsgcHTMX_Engine_Server.Create(nil);
FHTMX.Server := FServer;        // realtime htmx over WebSocket

FServer.Active := True;

// 2. Build the page from components
function TForm1.BuildDashboard: string;
var
  oChart: TsgcHTMLComponent_Chart;
  oPage: TsgcHTMLTemplate_Bootstrap;
begin
  oChart := TsgcHTMLComponent_Chart.Create(nil);
  oPage := TsgcHTMLTemplate_Bootstrap.Create(nil);
  try
    oChart.ChartType := ctBar;
    oChart.AddLabel('Q1'); oChart.AddLabel('Q2'); oChart.AddLabel('Q3');
    oChart.AddDataset('Revenue', [1200, 1900, 1500],
      '#7C3AED', 'rgba(124,58,237,.25)', True);

    oPage.Title := 'Dashboard';
    oPage.BodyContent := oChart.HTML;   // component -> HTML
    Result := oPage.GetHTML;            // full Bootstrap document
  finally
    oPage.Free;
    oChart.Free;
  end;
end;
// includes: sgcWebSocket_Server.hpp, sgcHTMX_Engine_Server.hpp,
//           sgcHTML_Template_Bootstrap.hpp, sgcHTML_Component_Chart.hpp

// 1. Start a server and attach the htmx engine
FServer = new TsgcWSHTTPServer(this);
FServer->Port = 8080;
FServer->OnCommandGet = HandleGet;

FHTMX = new TsgcHTMX_Engine_Server(this);
FHTMX->Server = FServer;          // realtime htmx over WebSocket

FServer->Active = true;

// 2. Build the page from components
String __fastcall TForm1::BuildDashboard()
{
  TsgcHTMLComponent_Chart *oChart = new TsgcHTMLComponent_Chart(NULL);
  TsgcHTMLTemplate_Bootstrap *oPage = new TsgcHTMLTemplate_Bootstrap(NULL);
  try
  {
    oChart->ChartType = ctBar;
    oChart->AddLabel("Q1"); oChart->AddLabel("Q2"); oChart->AddLabel("Q3");
    oChart->AddDataset("Revenue", OPENARRAY(double, (1200, 1900, 1500)),
      "#7C3AED", "rgba(124,58,237,.25)", true);

    oPage->Title = "Dashboard";
    oPage->BodyContent = oChart->HTML;   // component -> HTML
    return oPage->GetHTML();             // full Bootstrap document
  }
  __finally
  {
    delete oPage;
    delete oChart;
  }
}
using esegece.sgcWebSockets;

// 1. Start a server and attach the htmx engine
var server = new TsgcWebSocketHTTPServer();
server.Port = 8080;
server.OnCommandGet += HandleGet;

var htmx = new TsgcHTMX_Engine_Server();
htmx.Server = server;            // realtime htmx over WebSocket

server.Active = true;

// 2. Build the page from components
string BuildDashboard()
{
    var chart = new TsgcHTMLComponent_Chart();
    chart.ChartType = TsgcHTMLChartType.ctBar;
    chart.AddLabel("Q1"); chart.AddLabel("Q2"); chart.AddLabel("Q3");
    chart.AddDataset("Revenue", new double[] { 1200, 1900, 1500 },
        "#7C3AED", "rgba(124,58,237,.25)", true);

    var page = new TsgcHTMLTemplate_Bootstrap();
    page.Title = "Dashboard";
    page.BodyContent = chart.HTML;   // component -> HTML
    return page.GetHTML();            // full Bootstrap document
}

High-Level-Komponenten oder Low-Level-Nodes

Greife zu fertigen Komponenten, wenn du ein Widget in einer Zeile willst, oder steige zur Node-Ebene hinab, wenn du volle Kontrolle über das Markup brauchst.

Komponenten-Ebene

Die über 60 TsgcHTMLComponent_*-Widgets. Konfiguriere Eigenschaften, binde optional ein Dataset und lies HTML aus. Viele bieten zudem einen statischen Build(...)-Helfer für die einzeilige Inline-Nutzung.

Node-/Kompositions-Ebene

Primitive wie TsgcHTMLContainer (mit einem Void-Flag für selbstschließende Tags), TsgcHTMLCard, TsgcHTMLForm, TsgcHTMLField, TsgcHTMLButton und TsgcHTMLTable lassen sich zu jedem Layout zusammensetzen und dann mit TsgcHTMLTemplate_Bootstrap rendern. Der Node-Satz umfasst außerdem Bootstrap-Bausteine wie TsgcHTMLModal, TsgcHTMLOffcanvas, TsgcHTMLAccordion, TsgcHTMLCarousel, TsgcHTMLToast, TsgcHTMLProgress, TsgcHTMLSpinner, TsgcHTMLListGroupNode, TsgcHTMLInputGroup, TsgcHTMLButtonGroupNode, TsgcHTMLRadio, TsgcHTMLBreadcrumb, TsgcHTMLNavbarNode und TsgcHTMLImage.

Visueller Page-Builder

TsgcHTMLPageBuilder mit seinem Entwurfszeit-Editor lässt dich Seiten in der IDE zusammenstellen, während TsgcHTMLThemeController das helle/dunkle Theming in der gesamten App verwaltet.

3,000+Developers
20+Years
761+Components
30+API Integrations
5Platforms
30 Tage Geld-zurück-GarantieNicht zufrieden? Fordern Sie innerhalb von 30 Tagen nach dem Kauf eine vollständige Rückerstattung an. Rückerstattungsrichtlinie ansehen

Liefere eine Web-UI aus, ohne deine IDE zu verlassen

Füge deiner Delphi-, C++-Builder- oder .NET-Anwendung Diagramme, Grids, Formulare, Dashboards und Echtzeitseiten hinzu — mit der Sprache, die du bereits verwendest.

Weitere Produkte von eSeGeCe

Kombiniere sgcHTML mit unseren anderen Delphi-, C++-Builder- und .NET-Komponentenbibliotheken.

sgcWebSockets

Enterprise-Komponenten für WebSocket, HTTP/2/3, MQTT, AMQP, WebRTC und KI/LLM. sgcHTML wird über dieselben leistungsstarken HTTP- und WebSocket-Server ausgeliefert.

Mehr erfahren →

sgcSign

Digitale Signaturen auf Unternehmensniveau — XAdES, PAdES, CAdES und ASiC mit 10 Schlüsselanbietern und 21 EU-Länderprofilen.

Mehr erfahren →

sgcOpenAPI

OpenAPI-3.0-Parser und SDK-Generator. Verwandle jede OpenAPI-Spezifikation in Sekunden in einen streng typisierten Delphi-Client.

Mehr erfahren →

sgcBiometrics

Native Komponenten für Windows Hello, Fingerabdruck und das Windows Biometric Framework für Delphi und C++ Builder.

Mehr erfahren →