sgcHTMLWeb-Apps,geschrieben in Pascal.Ohne JavaScript.
Erstelle vollständige, moderne Web-UIs direkt aus Delphi, C++ Builder und .NET. sgcHTML ist ein serverseitiges Komponenten-Framework mit 110 fertigen Widgets: Diagramme, Grids, Formulare, Dashboards, Chat und mehr. Viele binden direkt an ein TDataSet, rendern Bootstrap-5-Markup und bleiben über htmx interaktiv. Du schreibst Object Pascal oder C#, sgcHTML schreibt das HTML, CSS und JavaScript.
Jeder Clip ist eine Bildschirmaufnahme einer echten, laufenden Anwendung, vertont und mit Untertiteln. Wähle einen aus der Liste. Nichts wird geladen, bevor du auf Play drückst.
sgcHTML in zwei Minuten
Baue eine komplette Web-Oberfläche aus Delphi heraus, mit serverseitigen Komponenten, Bootstrap 5-Markup und htmx, ganz ohne JavaScript-Build-Schritt.
Jeder Screen weiter unten ist eine Delphi-Anwendung, die ihr eigenes HTML über sgcHTML ausliefert. Kein JavaScript-Build-Schritt, kein separates Frontend-Projekt. Melde dich mit den Zugangsdaten an, die auf jeder Login-Seite bereits eingetragen sind.
Gantt, Diagramme und Karten, serverseitig gezeichnet
Der Gantt-Planer, Chart.js-Serien, Gauges, Sparklines, Treemaps und Heatmaps entstehen alle aus deinem Pascal- oder C#-Code. Du lieferst die Daten, sgcHTML erzeugt das Markup und die clientseitige Verdrahtung.
Ein Ad-hoc-Pivot-Builder auf einem Live-Datenbestand
Benutzer wählen Dimensionen, Kennzahlen und eine Aggregation, und die Kreuztabelle wird aus einer TFDQuery neu aufgebaut. Dazwischen liegt keine REST-Schicht, die Seite liest die Datenbank direkt in-process.
Dieselben Komponenten, auf einem Handheld-Scanner
Jede Komponente rendert responsives Markup mit Bootstrap 5, das Lager-Terminal-Layout ist also dieselbe Komponentenbibliothek in Smartphone-Breite, keine separate Mobile-Codebasis.
So funktioniert es
Du schreibst Pascal oder C#. sgcHTML schreibt das Frontend.
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 componentsfunction 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 documentfinally
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 -> HTMLreturn oPage->GetHTML(); // full Bootstrap document
}
__finally
{
delete oPage;
delete oChart;
}
}
using esegece.sgcWebSockets;
// 1. Start a server and attach the htmx enginevar 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 componentsstring BuildDashboard()
{
var chart = new TsgcHTMLComponent_Chart();
chart.ChartType = TsgcHTMLChartType.ctBar;
chart.AddLabel("Q1"); chart.AddLabel("Q2"); chart.AddLabel("Q3");
chart.AddDataset("Revenue", newdouble[] { 1200, 1900, 1500 },
"#7C3AED", "rgba(124,58,237,.25)", true);
var page = new TsgcHTMLTemplate_Bootstrap();
page.Title = "Dashboard";
page.BodyContent = chart.HTML; // component -> HTMLreturn page.GetHTML(); // full Bootstrap document
}
Server starten, htmx anbindenEin TsgcWSHTTPServer beantwortet Anfragen, und ein TsgcHTMX_Engine_Server hält die Seite interaktiv und live über WebSocket.
Die Seite aus Komponenten bauenSetze die Eigenschaften eines Diagramms, eines Grids oder eines Formulars und lies dann sein HTML. TsgcHTMLTemplate_Bootstrap verpackt es in ein vollständiges responsives Dokument.
Ausliefern und Updates pushenKlicks und Formular-Posts laufen zu deinen Event-Handlern und zurück, und der Server tauscht HTML-Fragmente an Ort und Stelle aus. Keine JavaScript-Build-Kette.
Dieselben Bausteine, größer skaliert
Das Dashboard der ERP-Demo: KPI-Karten, ein Umsatzdiagramm und ein Grid mit den letzten Rechnungen, alles aus Komponenten gebaut.
sgcHTML verwandelt dein vorhandenes Delphi-, C++-Builder- oder .NET-Backend in einen Webanwendungsserver. Jede Komponente ist eine native Klasse, die Bootstrap-5-HTML erzeugt, und htmx hält die Seite interaktiv und live, ohne eine einzige Zeile von Hand geschriebenes JavaScript.
Komponenten, die HTML erzeugen
Jedes Widget ist eine Klasse: TsgcHTMLComponent_Chart, TsgcHTMLComponent_Grid, TsgcHTMLComponent_Form und 86 weitere. Setze ihre Eigenschaften und lies dann ihre HTML -Eigenschaft, um sauberes Bootstrap-5-Markup zu erhalten, bereit zur Auslieferung.
Ausgeliefert von deinem eigenen Server
Setze einen TsgcHTMLEngine_Server (oder verbinde das HTML mit einem vorhandenen TsgcWebSocketHTTPServer). Anfragen treffen in deinem OnCommandGet -Handler, und du antwortest mit einer aus Komponenten gebauten Seite. Kein externer Web-Stack.
WebBroker- & DataSnap-Hosting
sgcHTML ist nicht an den sgcWebSockets-Server gebunden. Liefere dieselben aus Komponenten aufgebauten Seiten aus jeder Embarcadero-WebBroker-Anwendung über TsgcHTMX_Engine_Server_WebBrokeraus, oder aus einem DataSnap-Server mit Live-WebSocket-Push auf demselben Port wie deine REST-Endpunkte.
Füge einen TsgcHTMX_Engine_Server hinzu, und Klicks, Formular-Posts und Live-Updates laufen zu deinen Pascal- oder C#-Event-Handlern 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 und ohne Polling. Wo ein Proxy WebSockets blockiert, kann dieselbe Seite ihre Updates stattdessen über Server-Sent Events erhalten.
Theming & Templates
TsgcHTMLTemplate_Bootstrap verpackt deinen Inhalt in ein vollständiges responsives Dokument. TsgcHTMLThemeController und TsgcHTMLThemeBuilder stellen helle und dunkle Themes und ein gemeinsames Stylesheet bereit. Bootstrap 5.3 und htmx sind eingebettet, zur Laufzeit ist kein CDN nötig.
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
Integrierte UI-Texte (Schaltflächen, Beschriftungen, Validierungsmeldungen) in Englisch, Spanisch, Französisch, Deutsch, Portugiesisch, Italienisch, Niederländisch, Schwedisch, Norwegisch, Polnisch, Tschechisch, Türkisch, Russisch, Chinesisch, Japanisch, Koreanisch und Arabisch. Wähle eine Sprache mit sgcHTMLSetLanguage. Arabisch und Hebräisch drehen die gesamte Seite automatisch von rechts nach links: dir="rtl", das RTL-Stylesheet von Bootstrap und gespiegelte Komponenten, ohne Codeänderungen.
Sichere Ausgabe standardmäßig
Jede Komponente leitet ihren dynamischen Text, ihre Attribute, ihr Inline-JavaScript und ihre URLs durch automatische Kodierung sowie URL-Bereinigung (sgcHTMLEncode, sgcHTMLAttrEncode, sgcJSEncode, sgcHTMLSanitizeURL), sodass Benutzerdaten nicht aus ihrem Kontext ausbrechen und Skript einschleusen können.
Komponentenbibliothek
110 Komponenten, zehn Familien.
Von der Navigation über Datengrids, Diagramme, Formulare und Overlays bis zum KI-Chat: das gesamte Bootstrap-5-Vokabular als native Komponenten. Jede verlinkt auf eine eigene Seite mit Beispielen für Delphi, C++ Builder und .NET.
Jede Ergänzung ist ausgeschaltet, bis Sie sie verwenden, sodass eine Seite, die keine davon nutzt, genau wie zuvor gerendert wird. Die vollständige Liste steht in der Funktionsmatrix.
Ihre Seite in ChatGPT und Claude
Ein MCP-Tool antwortet mit einer Seite statt mit Text, aufgebaut aus denselben Komponenten, die du für jede Webseite verwendest, und gerendert von ChatGPT, Claude und VS Code. Erfordert die Enterprise- oder All-Access-Edition oder das sgcAI-Paket.
Beschreiben Sie eine Seite oder geben Sie dem Designer einen Screenshot, und er baut die Seite aus Ihren eigenen Komponenten auf. Er antwortet anhand eines Schemas, das aus Ihrer Registry aufgebaut wird, sodass er keine Klasse benennen kann, die Sie nicht angeboten haben, und nichts wird angewendet, bevor Sie es akzeptieren. Er benötigt die KI-Units der Enterprise- oder All-Access-Edition oder das sgcAI-Paket.
Liste, Suche, Paginierung, Formular, Löschen und Schreibpfad einer Tabelle als eine einzige Komponente, über ein Dataset oder über dein eigenes SQL. Ein IDE-Assistent erstellt sie.
Eine Frage in einfacher Sprache wird zu Filtern, Sortierungen, Gruppierungen und Hervorhebungen, die vor der Anwendung gegen deine eigenen Spalten validiert werden. Es funktioniert ohne API-Schlüssel über einen integrierten Parser und mit sieben Anbietern, wenn die KI-Units in deiner Edition enthalten sind.
Server-Sent Events für Netzwerke, die WebSockets blockieren, Web Push für einen Browser, der nicht läuft, ein Benachrichtigungs-Posteingang und eine Einstellungstabelle. Web Push erfordert die Enterprise- oder All-Access-Edition.
Cookie-Sitzungen, CSRF-Tokens, Login-Drosselung und Routenschutz nach Rolle. Pfadparameter und Methodenfilter für Routen, Single-Page-Navigation aus dem Seiten-Template und Helfer, um das erzeugte Markup zu testen.
Wenn du ASP.NET Core MVC- oder Razor-Pages-Anwendungen im Stil von Telerik oder DevExpress baust, spricht sgcHTML jetzt dieselbe Sprache. Tag Helper wie <sgc-grid>, <sgc-form>, <sgc-dialog> und <sgc-chart>sowie ihre fluenten Gegenstücke unter Html.Sgc()rendern serverseitig Bootstrap-5-HTML und sprechen über htmx mit deinen Controllern. Es gibt kein JavaScript-Framework zu lernen und keine JSON-Datenquelle zu schreiben. Die Razor-Schicht steckt im NuGet-Paket esegece.sgcHTML.AspNetCore NuGet-Paket, die Community Edition inklusive, und erscheint im nächsten Release.
// Program.cs
builder.Services.AddControllersWithViews();
builder.Services.AddSgcHtml(o => o.ServeRootPage = false); // the MVC app owns "/"
builder.Services.AddSgcHtmlRazor(); // SgcDataRequest binder, grid state, /sgcHTML.css// ...
app.UseWebSockets(); // before UseSgcHtml, needed by live charts
app.UseSgcHtml();
app.MapDefaultControllerRoute();
// Controllers/OrdersController.cspublic class OrdersController : Controller
{
private readonly ShopDb FDb;
public OrdersController(ShopDb db) { FDb = db; }
// An IQueryable projection: EF Core turns paging, sort and filters into SQL.private IQueryable<OrderRow> Rows() =>
FDb.Orders.AsNoTracking().Select(o => new OrderRow
{
Id = o.Id, Reference = o.Reference, Customer = o.Customer.Name,
OrderDate = o.OrderDate, Total = o.Total, Paid = o.Paid
});
public IActionResult Index() => View(Rows());
// Every page, sort, filter and search click of the grid lands here.public IActionResult Read(SgcDataRequest request) => this.SgcGrid(request, Rows());
// The toolbar export links: the filtered and sorted rows as XLSX or PDF.public IActionResult Export(SgcDataRequest request) =>
this.SgcGridExport(request, Rows(), "orders");
}
@* The same grid with the fluent builder, the twin of Html.Kendo().Grid<T>() *@
@(Html.Sgc().Grid<OrderRow>("orders")
.Key(o => o.Id)
.Columns(c =>
{
c.Bound(o => o.Reference).Searchable();
c.Bound(o => o.Customer).Searchable();
c.Bound(o => o.OrderDate).Title("Date").Format("{0:yyyy-MM-dd}").Filter(SgcGridFilterKind.Range);
c.Bound(o => o.Total).Format("{0:N2}").Align("right").Filter(SgcGridFilterKind.Range);
c.Bound(o => o.Paid);
})
.Items(Model)
.Read("Read")
.Export(SgcExportFormat.Xlsx, SgcExportFormat.Pdf)
.ExportAction("Export")
.Pageable(15)
.Sortable().Filterable().Searchable().PushUrl())
@* _Layout.cshtml: live="ws" opens the WebSocket that live charts listen to *@
<sgc-scripts live="ws" />
@* The view *@
<sgc-chart name="live-orders" type="line" height="260" live="true">
<sgc-series name="Orders / s" data="new double[] { 0 }" color="#dc3545" />
</sgc-chart>
// builder.Services.AddHostedService<LiveSalesFeed>();public sealed class LiveSalesFeed : BackgroundService
{
private readonly ISgcHtmlHub FHub;
private readonly Queue<string> FLabels = new Queue<string>();
private readonly Queue<double> FValues = new Queue<double>();
public LiveSalesFeed(ISgcHtmlHub hub) { FHub = hub; }
protected override async Task ExecuteAsync(CancellationToken stoppingToken)
{
var oRandom = new Random();
while (!stoppingToken.IsCancellationRequested)
{
await Task.Delay(1000, stoppingToken);
FLabels.Enqueue(DateTime.Now.ToString("HH:mm:ss"));
FValues.Enqueue(oRandom.Next(0, 20));
if (FValues.Count > 20) { FLabels.Dequeue(); FValues.Dequeue(); }
// One WebSocket message redraws the chart in every open browser.await FHub.BroadcastChartAsync("live-orders", FLabels.ToArray(),
new SgcChartSeries("Orders / s", FValues.ToArray(), "#dc3545"));
}
}
}
Ein Grid über IQueryable
<sgc-grid> paginiert, sortiert, filtert (Text und Bereich), durchsucht und exportiert auf dem Server nach XLSX und PDF. Der Controller antwortet mit this.SgcGrid(request, query), und EF Core macht aus jedem Klick parametrisiertes SQL. push-url hält Seite, Sortierung und Filter in der Adressleiste, sodass Neuladen und die Zurück-Taste funktionieren.
Formulare mit asp-for gebunden
<sgc-textbox>, <sgc-select>, <sgc-datepicker>, <sgc-checkbox> und <sgc-autocomplete> werden mit asp-for an dein Modell gebunden und zeigen die ModelState-Fehler unter jedem Eingabefeld an. <sgc-form hx="true"> sendet über htmx, und this.SgcRedirect(url) navigiert nach einem gültigen Speichern.
Bearbeiten im Dialog
Jedes Element mit sgc-dialog="name" lädt seine URL in einen <sgc-dialog>. Nach einem gültigen Post schließt this.SgcCloseDialog("edit-order", refresh: "orders") den Dialog und lädt das Grid neu, das Popup-Bearbeitungsmuster ohne eigenes Skript.
Diagramme live gepusht, ohne SignalR
<sgc-chart> zeigt statische Daten, fragt eine Action mit refresh-every="5s", oder schaltet auf live="true": Ein Hintergrunddienst ruft hub.BroadcastChartAsync(...) auf, und jeder geöffnete Browser zeichnet über den sgcHTML-WebSocket neu. Telerik- und DevExpress-Diagramme brauchen für Server-Push SignalR-Infrastruktur, sgcHTML hat ihn eingebaut.
Du kommst von Telerik UI for ASP.NET Core oder DevExpress? [DataSourceRequest] wird zu SgcDataRequest, ToDataSourceResult wird zu this.SgcGrid(request, query) (oder query.ToSgcDataResult(request) nur für die Daten), und Html.Kendo().TextBoxFor(m => m.X) wird zu Html.Sgc().TextBoxFor(m => m.X). Die lauffähige MVC-Demo 22.RazorMvcist das Telerik-Bestellungsbeispiel, geschrieben mit sgcHTML über EF Core.
Zwei API-Ebenen
Komponenten auf hoher Ebene oder Nodes auf niedriger Ebene.
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 110 TsgcHTMLComponent_* -Widgets. Konfiguriere Eigenschaften, binde optional ein Dataset und lies HTMLaus. 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_Bootstraprendern. 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 verwaltet das helle und dunkle Theming der gesamten Anwendung.
Drei Wege hinein
Starte dort, wo du stehst.
Du willst es nicht selbst bauen?
Mit sgcCustomization HTML beschreibst du die Anwendung, die du brauchst, und das eSeGeCe-Team baut sie für dich mit den sgcHTML- + sgcWebSockets-Komponenten. Drei einmalige Pakete ab €149, und du erhältst ein vollständiges Projekt, das du mit deinen lizenzierten Komponenten kompilieren, erweitern und umgestalten kannst.
Du hast bereits eine Webanwendung mit IntraWeb, uniGUI, TMS WEB Core, Elevate Web Builder oder D2Bridge gebaut? Schritt-für-Schritt-Leitfäden führen dich durch den Umzug zu sgcHTML, mit einer Konzeptzuordnung für jedes Framework. Es gibt außerdem ein Formular für Migrationsunterstützung, wenn unser Team den Umzug planen oder übernehmen soll.
Liefere dieselben aus Komponenten gebauten Seiten aus jeder Embarcadero-WebBroker-Anwendung aus oder von einem DataSnap-Server mit Live-WebSocket-Push auf demselben Port wie deine REST-Endpunkte.
Vertrauen von Delphi-, C++ Builder-, Lazarus- und .NET-Entwicklern weltweit, die Echtzeit-Anwendungen entwickeln.
Eure sgcWebSockets-Bibliothek ist sehr nützlich und einfach einzurichten. Macht weiter so!
Simone MorettiDelphi-Entwickler
sgcWebSockets ist großartig und euer Support ist der beste!
Christian MeyerGründer & CTO
Vielen Dank für eure Hilfe und Unterstützung, ich liebe eure Komponenten.
Mark SteinfeldCTO
Liefere eine Web-UI aus, ohne deine IDE zu verlassen.
Füge deiner Delphi-, C++-Builder- oder .NET-Anwendung Diagramme, Grids, Formulare, Dashboards und Echtzeit-Seiten hinzu, mit der Sprache, die du bereits verwendest.
30 Tage Geld-zurück-GarantieNicht zufrieden? Fordere innerhalb von 30 Tagen nach dem Kauf eine vollständige Rückerstattung an. Rückerstattungsrichtlinie ansehen