sgcHTML Web-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.

Du willst es nicht selbst bauen? Wir bauen es für dich →
  • Delphi
  • C++ Builder
  • .NET
  • Bootstrap 5 + htmx
  • Datengebunden / TDataSet
  • Kein JavaScript erforderlich
  • 110UI-Komponenten in zehn Familien
  • 3Sprachen: Delphi, C++ Builder und .NET
  • 17Integrierte UI-Sprachen, Rechts-nach-links inklusive
  • 15Echte Anwendungen, die online laufen
  • 0Zeilen von Hand geschriebenes JavaScript
Sieh sie laufen

Achtzehn Videos. Keine Folien.

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.

Live-Demos

Fünfzehn echte Anwendungen, die gerade laufen.

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.

ERP: eine mit sgcHTML gebaute Delphi-Webanwendung, die im Browser läuft. Live

ERP

Kunden, Produkte, Lieferanten und Rechnungsstellung, mit Dashboard-Diagrammen, rollenbasierter Verwaltung und passkey-Anmeldung.

Live-Demo öffnen →
Reporting und BI: eine mit sgcHTML gebaute Delphi-Webanwendung, die im Browser läuft. Live

Reporting & BI

Dashboards, ein Berichtskatalog, ein Ad-hoc-Pivot-Builder und eine Explore-Ansicht über 27.000 Auftragspositionen, in-process abgefragt.

Live-Demo öffnen →
Kassensystem: eine mit sgcHTML gebaute Delphi-Webanwendung, die im Browser läuft. Live

Kassensystem

Eine Touch-Kasse mit Kategorien, Aktionen, geparkten Verkäufen, Schichtverwaltung und einem Live-Kundendisplay.

Live-Demo öffnen →
Außendienst: eine mit sgcHTML gebaute Delphi-Webanwendung, die im Browser läuft. Live

Außendienst

Ein Dispositions-Board, ein Gantt-Planer und eine Live-Karte der Techniker für die Planung von Einsätzen und Aufträgen.

Live-Demo öffnen →
Lager (WMS): eine mit sgcHTML gebaute Delphi-Webanwendung, die im Browser läuft. Live

Lager (WMS)

Wareneingang, Warenausgang, Bestand, Bewegungen und zyklische Inventuren, dazu ein Handheld-Terminal-Layout für Scanner.

Live-Demo öffnen →
Live-Monitor: eine mit sgcHTML gebaute Delphi-Webanwendung, die im Browser läuft. Live

Live-Monitor

Server-Metriken werden über WebSocket in Out-of-Band-htmx-Fragmente gepusht und aktualisieren KPI-Karten und Diagramme in Echtzeit.

Live-Demo öffnen →
Admin-Konsole: eine mit sgcHTML gebaute Delphi-Webanwendung, die im Browser läuft. Live

Admin-Konsole

Suche während der Eingabe, Anlegen, Bearbeiten und Löschen direkt in der Liste, alles als htmx-Fragmente eingefügt, ohne Seiten-Reload.

Live-Demo öffnen →
Rechts-nach-links (RTL): eine mit sgcHTML gebaute Delphi-Webanwendung, die im Browser läuft. Live

Eine Seite auf Englisch, Arabisch und Hebräisch. Wähle Arabisch oder Hebräisch, und das gesamte Layout dreht sich von rechts nach links, von der Seitenleiste bis zum Grid. Keine Codeänderungen, nur die Sprache.

Live-Demo öffnen →
Kundenportal: eine mit sgcHTML gebaute Delphi-Webanwendung, die im Browser läuft. Live

Kundenportal

Ein Self-Service-Bereich hinter einem Login, in dem Kunden ihre eigenen Bestellungen, ihr Profil und ihre Support-Tickets sehen.

Live-Demo öffnen →
Mandantenfähiges SaaS: eine mit sgcHTML gebaute Delphi-Webanwendung, die im Browser läuft. Live

Mandantenfähiges SaaS

Eine öffentliche Marketing-Site, eine Preisseite und ein Registrierungs-Flow vor einer pro Mandant isolierten Control Plane.

Live-Demo öffnen →

Weitere Online-Demos: KI, Instrumente und SCADA

Rechts-nach-links (RTL)

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 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
}
  1. Server starten, htmx anbindenEin TsgcWSHTTPServer beantwortet Anfragen, und ein TsgcHTMX_Engine_Server hält die Seite interaktiv und live über WebSocket.
  2. 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.
  3. 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.
ERP-Dashboard, gebaut mit sgcHTML für Delphi, in einem Browserfenster: KPI-Karten, ein Umsatz-Balkendiagramm und ein Grid mit den letzten Rechnungen.
Das Dashboard der ERP-Demo: KPI-Karten, ein Umsatzdiagramm und ein Grid mit den letzten Rechnungen, alles aus Komponenten gebaut.

Die Anleitung zum Einstieg lesen

Unter der Haube

Dein Backend wird zum Webserver.

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.

WebBroker- & DataSnap-Hosting →

Interaktiv über htmx

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.

Ansehen →
  • NavBar
  • Sidebar
  • Breadcrumb
  • Tabs
  • Pagination
  • Toolbar
  • TreeView
  • Stepper
  • Dropdown
  • ButtonGroup
  • ListGroup
  • DashboardLayout
  • Splitter

Daten & Tabellen

Ansehen →
  • Grid
  • DataTable
  • TreeGrid
  • PivotTable
  • Calendar
  • Scheduler
  • Timeline
  • ActivityFeed
  • KanbanBoard
  • Gantt

Sortierbar, filterbar, exportierbar, an Datasets gebunden.

Diagramme & Visualisierung

Ansehen →
  • Chart (Chart.js)
  • CandlestickChart
  • Gauge
  • Heatmap
  • Sparkline
  • TreeMap
  • Diagram (SVG flow)
  • Map (Leaflet)
  • QRCode
  • Barcode

Datengetriebene Visualisierungen aus deinen eigenen Datasets.

Formulare & Eingaben

Ansehen →
  • Form
  • Edit
  • Memo
  • CheckBox
  • RadioGroup
  • Select
  • MultiSelect
  • InputGroup
  • AutoComplete
  • DatePicker
  • TimePicker
  • ColorPicker
  • Slider
  • FileUpload
  • RichEditor
  • Rating
  • SignaturePad
  • Transfer

Inhalt & Layout

Ansehen →
  • Panel
  • StatCard
  • Accordion
  • Carousel
  • Image
  • Avatar
  • Video
  • Badge
  • PDFViewer

Karten, Medien und KPI-Kacheln für Dashboards.

Overlays & Feedback

Ansehen →
  • Modal
  • Offcanvas
  • Popover
  • Toast
  • Snackbar
  • Notification
  • Spinner
  • Placeholder
  • ContextMenu
  • ProgressBar
  • JobProgress
  • LogViewer

Dialoge und Statusflächen.

Chat & KI

Ansehen →
  • ChatBox
  • Chat (WhatsApp-style)
  • AIChat
  • Presence

AIChat mit Anbieterauswahl, Token-Streaming und RAG-Quellenangaben, Presence für den Live-Online-Status.

Authentifizierung

Ansehen →
  • Login
  • SocialLogin (OAuth)
  • OAuthCallback
  • WebAuthnLogin (passkeys)
  • UserManagement
  • RolesPermissions

Fertige Anmeldeabläufe und Admin-Bildschirme.

Instrumente & SCADA

Ansehen →
  • Gauge
  • LinearGauge
  • LED
  • LEDBar
  • SegmentDisplay
  • Odometer
  • AnalogClock
  • Compass
  • VUMeter
  • Knob
  • ToggleSwitch
  • PushButton
  • NumericStepper
  • StripChart
  • Oscilloscope
  • Annunciator
  • SCADAPanel

Leitstandpanels, die der Server live hält, mit MQTT-Anbindung.

Infrastruktur & Engine

Ansehen →
  • EngineServer
  • HTMXEngine
  • PageBuilder
  • TemplateBootstrap
  • ThemeController
  • ThemeBuilder
  • HTMXFragment
  • HTMXRouter

Die nicht visuellen Bausteine, die Seiten ausliefern und live halten.

Die vollständige Funktionsmatrix ansehen

Neu hinzugekommen

Was es Neues in sgcHTML gibt.

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.

MCPApp ansehen →

KI-Seitengenerator

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.

Die Anleitung lesen →

CRUD als eine Komponente

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.

CRUD ansehen →

Ein Grid befragen

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.

AIAssistant ansehen →

Einen geschlossenen Browser erreichen

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.

WebPush ansehen →

Sitzungen, Routing und Tests

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.

Auth ansehen →
Für .NET-Entwickler

Razor Tag Helpers für ASP.NET Core.

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.

@* Views/Orders/Index.cshtml, page 1 renders inline from the model *@
@model IQueryable<OrderRow>

<sgc-grid name="orders" key="Id" items="Model"
          asp-action="Read" asp-export-action="Export" export="xlsx,pdf"
          page-size="15" sortable="true" filterable="true"
          searchable="true" push-url="true">
    <sgc-column field="Reference" searchable="true" />
    <sgc-column field="Customer" searchable="true" />
    <sgc-column field="OrderDate" title="Date" format="{0:yyyy-MM-dd}" filter="range" />
    <sgc-column field="Total" format="{0:N2}" align="right" filter="range" />
    <sgc-column field="Paid" />
</sgc-grid>
// 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.cs
public 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 kommst von einem anderen Web-Framework?

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.

Du nutzt bereits WebBroker oder DataSnap?

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.

REFERENZEN

Was Entwickler sagen

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 Moretti Delphi-Entwickler
sgcWebSockets ist großartig und euer Support ist der beste!
Christian Meyer Gründer & CTO
Vielen Dank für eure Hilfe und Unterstützung, ich liebe eure Komponenten.
Mark Steinfeld CTO

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.

Mehr von eSeGeCe

Weitere Produkte von eSeGeCe

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

sgcWebSockets

Enterprise-Komponenten für WebSocket, HTTP/2, MQTT, AMQP, WebRTC und KI/LLM. Ergänze deine sgcHTML-Anwendung um Echtzeit-Messaging und den vollständigen Netzwerk-Stack.

sgcQUIC

QUIC- und HTTP/3-Client- und Server-Komponenten für Delphi, C++ Builder und .NET. Liefere die von sgcHTML gerenderte Oberfläche über HTTP/3 aus, für latenzärmere Seitenaufrufe in verlustbehafteten Netzwerken.

sgcWebRTC

WebRTC-Media-Engine für Delphi und C++ Builder: Audio- und Videoanrufe, Datenkanäle und Bildschirmfreigabe. Ein Add-on zu sgcWebSockets Enterprise.

sgcSign

Digitale Unternehmenssignaturen: XAdES, PAdES, CAdES und ASiC mit 10 Schlüsselanbietern und 21 EU-Länderprofilen.

sgcOpenAPI

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

sgcBiometrics

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

sgcIndy

Aktualisierte Indy-TCP/IP-Komponenten mit modernem TLS, IPv6 und HTTP/2-Unterstützung für Delphi 7 bis 13.

sgcAI

15 KI-, LLM- und MCP-Komponenten für Delphi und C++ Builder. Eine Chat-Komponente erreicht OpenAI, Anthropic, Gemini, DeepSeek, Ollama, Grok und Mistral. Eigenständig, die sgcWebSockets Core Runtime ist enthalten.

sgcMQ

Client-Komponenten für MQTT 3.1.1 und 5.0, AMQP 0.9.1, AMQP 1.0, Apache Kafka und STOMP für Delphi und C++ Builder. Eigenständig, die sgcWebSockets Core Runtime ist enthalten.

sgcCrypto

Allzweck-Kryptographiebibliothek für Delphi und C++ Builder: symmetrische und asymmetrische Verschlüsselung, Hashing und Post-Quanten-Algorithmen. Ab sgcWebSockets Standard kostenlos enthalten.

sgcSocial

WhatsApp Business Cloud API und Telegram TDLib Clients. Eigenständig, die sgcWebSockets Core Runtime ist enthalten.

Neues aus dem Blog

Alle Beiträge ansehen →

Du siehst gerade die Ansicht sgcHTML von eSeGeCe.

Zeig mir eine andere Perspektive →
30 Tage Geld-zurück-GarantieNicht zufrieden? Fordere innerhalb von 30 Tagen nach dem Kauf eine vollständige Rückerstattung an. Rückerstattungsrichtlinie ansehen