sgcHTMLWebapps,geschreven in Pascal.Geen JavaScript.
Bouw complete, moderne web-UI's rechtstreeks vanuit Delphi, C++ Builder en .NET. sgcHTML is een server-side componentframework met 110 kant-en-klare widgets: grafieken, grids, formulieren, dashboards, chat en meer. Veel ervan binden rechtstreeks aan een TDataSet, renderen Bootstrap 5-markup en blijven interactief dankzij htmx. Jij schrijft Object Pascal of C#, sgcHTML schrijft de HTML, CSS en JavaScript.
Elke clip is een schermopname van een echte applicatie die daadwerkelijk draait, ingesproken en voorzien van ondertitels. Kies er een uit de lijst. Er wordt niets gedownload totdat je op afspelen drukt.
sgcHTML in twee minuten
Bouw een complete web-UI vanuit Delphi met server-side componenten, Bootstrap 5-markup en htmx, zonder JavaScript-buildstap.
Elk scherm hieronder is een Delphi-applicatie die zijn eigen HTML serveert via sgcHTML. Geen JavaScript-buildstap, geen apart front-endproject. Log in met de inloggegevens die al op elke loginpagina zijn ingevuld.
De Gantt-planner, Chart.js-reeksen, gauges, sparklines, treemaps en heatmaps komen allemaal uit je Pascal- of C#-code. Jij zet de data, sgcHTML levert de markup en de client-side aansturing.
Een ad-hoc pivot-builder over een live dataset
Gebruikers kiezen dimensies, meetwaarden en een aggregatie, en de kruistabel wordt opnieuw opgebouwd uit een TFDQuery. Er zit geen REST-laag tussen, de pagina leest de database rechtstreeks in-process.
Dezelfde componenten, op een handscanner
Elk component rendert responsieve Bootstrap 5-markup, dus de magazijnterminal-lay-out is dezelfde componentbibliotheek op telefoonbreedte, geen aparte mobiele codebase.
Hoe het werkt
Jij schrijft Pascal of C#. sgcHTML schrijft de front-end.
Start een HTTP-server, koppel de htmx-engine en beantwoord verzoeken met een pagina die uit componenten is opgebouwd. Dezelfde API in Delphi, C++ Builder en .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
}
Start een server, koppel htmxEen TsgcWSHTTPServer beantwoordt verzoeken en een TsgcHTMX_Engine_Server houdt de pagina interactief en live via WebSocket.
Bouw de pagina uit componentenStel de eigenschappen van een grafiek, een grid of een formulier in en lees vervolgens de HTML uit. TsgcHTMLTemplate_Bootstrap verpakt die in een compleet responsief document.
Serveer het en push updatesKlikken en formulierposts gaan heen en weer naar je eventhandlers en de server wisselt HTML-fragmenten ter plekke in. Geen JavaScript-buildketen.
Dezelfde bouwstenen, op grotere schaal
Het dashboard van de ERP-demo: KPI-kaarten, een omzetgrafiek en een grid met recente facturen, alles opgebouwd uit componenten.
sgcHTML verandert je bestaande Delphi-, C++ Builder- of .NET-back-end in een webapplicatieserver. Elk component is een native class die Bootstrap 5-HTML uitstuurt en htmx houdt de pagina interactief en live zonder één regel handgeschreven JavaScript.
Componenten die HTML renderen
Elke widget is een class: TsgcHTMLComponent_Chart, TsgcHTMLComponent_Grid, TsgcHTMLComponent_Form en 86 meer. Stel de eigenschappen in en lees vervolgens de HTML -eigenschap uit om schone Bootstrap 5-markup te krijgen die klaar is om te serveren.
Geserveerd door je eigen server
Plaats een TsgcHTMLEngine_Server (of koppel de HTML aan een bestaande TsgcWebSocketHTTPServer). Verzoeken komen binnen in je OnCommandGet -handler, en jij antwoordt met een pagina die uit componenten is opgebouwd. Geen externe webstack.
WebBroker- & DataSnap-hosting
sgcHTML is niet gebonden aan de sgcWebSockets-server. Serveer dezelfde uit componenten opgebouwde pagina's vanuit elke Embarcadero WebBroker-applicatie via TsgcHTMX_Engine_Server_WebBroker, of vanuit een DataSnap-server met live WebSocket-push op dezelfde poort als je REST-endpoints.
Voeg een TsgcHTMX_Engine_Server en klikken, formulierposts en live updates gaan heen en weer naar je Pascal- of C#-eventhandlers. De server wisselt HTML-fragmenten ter plekke in. Het SPA-gevoel, zonder de JavaScript-buildketen.
Realtime via WebSockets
Omdat htmx draait over de sgcWebSockets-server, kun je live HTML pushen naar elke verbonden browser. Dashboards, monitors en chatvensters worden bijgewerkt zodra je data verandert, server-gestuurd en zonder polling. Waar een proxy WebSockets blokkeert, kan dezelfde pagina haar updates in plaats daarvan via server-sent events ontvangen.
Thema's & sjablonen
TsgcHTMLTemplate_Bootstrap verpakt je content in een compleet responsief document. TsgcHTMLThemeController en TsgcHTMLThemeBuilder bieden lichte en donkere thema's en een gedeelde stylesheet. Bootstrap 5.3 en htmx worden ingebouwd meegeleverd, zonder CDN tijdens runtime.
Directe databasebinding
Grid, DataTable, Chart, Select, TreeView, Scheduler, Timeline en Form binden rechtstreeks aan een TDataSet via LoadFromDataSet / DataSource. Richt een component op een query en het rendert de rijen.
Gelokaliseerde UI, 17 talen
Ingebouwde UI-tekst (knoppen, labels, validatieberichten) in het Engels, Spaans, Frans, Duits, Portugees, Italiaans, Nederlands, Zweeds, Noors, Pools, Tsjechisch, Turks, Russisch, Chinees, Japans, Koreaans en Arabisch. Kies er een met sgcHTMLSetLanguage. Arabisch en Hebreeuws draaien de hele pagina automatisch om naar rechts-naar-links: dir="rtl", de RTL-stylesheet van Bootstrap en gespiegelde componenten, zonder codewijzigingen.
Veilige uitvoer standaard
Elk component stuurt zijn dynamische tekst, attributen, inline JavaScript en URL's door automatische codering plus URL-sanitisatie (sgcHTMLEncode, sgcHTMLAttrEncode, sgcJSEncode, sgcHTMLSanitizeURL), zodat gebruikersdata niet uit zijn context kan breken en geen script kan injecteren.
Componentenbibliotheek
110 componenten, tien families.
Van navigatie-elementen tot datagrids, grafieken, formulieren, overlays en AI-chat: de volledige Bootstrap 5-woordenschat als native componenten. Elk verwijst naar een eigen pagina met Delphi-, C++ Builder- en .NET-voorbeelden.
Elke toevoeging staat uit tot je haar gebruikt, dus een pagina die er geen gebruikt, rendert precies zoals voorheen. De volledige lijst staat in de functiematrix.
Je pagina in ChatGPT en Claude
Een MCP-tool antwoordt met een pagina in plaats van tekst, opgebouwd uit dezelfde componenten die je voor elke webpagina gebruikt en gerenderd door ChatGPT, Claude en VS Code. Vereist de Enterprise- of All-Access-editie, of het sgcAI-pakket.
Beschrijf een pagina of geef de designer een screenshot, en de generator bouwt de pagina op uit je eigen componenten. De generator antwoordt vanuit een schema dat uit je registry is opgebouwd, dus hij kan geen klasse noemen die je niet hebt aangeboden, en er wordt niets toegepast tot je het accepteert. Hij heeft de AI-units van de Enterprise- of All-Access-editie nodig, of het sgcAI-pack.
De lijst, zoekfunctie, paginering, het formulier, verwijderen en schrijfpad van één tabel als één component, over een dataset of over je eigen SQL. Een IDE-wizard maakt het aan.
Een vraag in gewone taal wordt omgezet in filters, sorteringen, groeperingen en markeringen, gevalideerd tegen je eigen kolommen voordat er iets wordt toegepast. Het werkt zonder API-sleutel via een ingebouwde parser, en met zeven providers wanneer de AI-units in je editie zitten.
Server-sent events voor netwerken die WebSockets blokkeren, Web Push voor een browser die niet actief is, een notificatie-inbox en een voorkeurentabel. Web Push vereist de Enterprise- of All-Access-editie.
Cookiesessies, CSRF-tokens, login-throttling en routebeveiliging per rol. Padparameters en methodefilters op routes, single-pagenavigatie vanuit het paginasjabloon en helpers om de markup die je produceert te testen.
Bouw je ASP.NET Core MVC- of Razor Pages-applicaties op de manier van Telerik of DevExpress, dan spreekt sgcHTML nu dezelfde taal. Tag Helpers zoals <sgc-grid>, <sgc-form>, <sgc-dialog> en <sgc-chart>, en hun fluent tegenhangers onder Html.Sgc(), renderen Bootstrap 5 HTML aan de serverkant en praten via htmx met je controllers. Er is geen JavaScript-framework om te leren en geen JSON-gegevensbron om te schrijven. De Razor-laag wordt geleverd in het NuGet-pakket esegece.sgcHTML.AspNetCore NuGet-pakket, inclusief de Community-editie, en verschijnt in de volgende 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"));
}
}
}
Een grid boven IQueryable
<sgc-grid> pagineert, sorteert, filtert (tekst en bereik), doorzoekt en exporteert op de server naar XLSX en PDF. De controller antwoordt met this.SgcGrid(request, query), en EF Core zet elke klik om in geparametriseerde SQL. push-url houdt de pagina, de sortering en de filters in de adresbalk, zodat herladen en de terugknop werken.
Formulieren gebonden met asp-for
<sgc-textbox>, <sgc-select>, <sgc-datepicker>, <sgc-checkbox> en <sgc-autocomplete> binden aan je model met asp-for en tonen de ModelState-fouten onder elke invoer. <sgc-form hx="true"> post via htmx, en this.SgcRedirect(url) navigeert na een geldige opslag.
Bewerken in een dialoog
Elk element met sgc-dialog="name" laadt zijn URL in een <sgc-dialog>. Na een geldige post sluit this.SgcCloseDialog("edit-order", refresh: "orders") de dialoog en laadt het grid opnieuw, het patroon voor bewerken in een popup zonder eigen script.
Grafieken live gepusht, zonder SignalR
<sgc-chart> rendert statische gegevens, pollt een actie met refresh-every="5s", of gaat live="true": een achtergrondservice roept hub.BroadcastChartAsync(...) aan en elke geopende browser tekent opnieuw via de sgcHTML WebSocket. Telerik- en DevExpress-grafieken hebben SignalR-infrastructuur nodig voor server push, sgcHTML heeft dit ingebouwd.
Kom je van Telerik UI for ASP.NET Core of DevExpress? [DataSourceRequest] wordt SgcDataRequest, ToDataSourceResult wordt this.SgcGrid(request, query) (of query.ToSgcDataResult(request) voor alleen de gegevens), en Html.Kendo().TextBoxFor(m => m.X) wordt Html.Sgc().TextBoxFor(m => m.X). De uitvoerbare MVC-demo, 22.RazorMvc, is het Telerik-ordervoorbeeld geschreven met sgcHTML over EF Core.
Twee API-lagen
High-level componenten of low-level nodes.
Grijp naar kant-en-klare componenten als je een widget in één regel wilt, of zak naar de node-laag als je volledige controle over de markup nodig hebt.
Componentlaag
De 110 TsgcHTMLComponent_* -widgets. Configureer eigenschappen, bind optioneel een dataset en lees HTMLuit. Veel ervan bieden ook een statische Build(...) -helper voor inline gebruik in één regel.
Node- / compositielaag
Primitieven zoals TsgcHTMLContainer (met een Void -vlag voor zelfsluitende tags), TsgcHTMLCard, TsgcHTMLForm, TsgcHTMLField, TsgcHTMLButton en TsgcHTMLTable stel je samen tot elke lay-out, die je vervolgens rendert met TsgcHTMLTemplate_Bootstrap. De node-set bevat ook Bootstrap-bouwstenen zoals TsgcHTMLModal, TsgcHTMLOffcanvas, TsgcHTMLAccordion, TsgcHTMLCarousel, TsgcHTMLToast, TsgcHTMLProgress, TsgcHTMLSpinner, TsgcHTMLListGroupNode, TsgcHTMLInputGroup, TsgcHTMLButtonGroupNode, TsgcHTMLRadio, TsgcHTMLBreadcrumb, TsgcHTMLNavbarNode en TsgcHTMLImage.
Visuele paginabouwer
TsgcHTMLPageBuilder met zijn design-time-editor laat je pagina's samenstellen in de IDE, terwijl TsgcHTMLThemeController beheert de lichte en donkere thema's voor de hele app.
Drie manieren om te beginnen
Begin waar je nu staat.
Wil je het niet zelf bouwen?
Met sgcCustomization HTML beschrijf je de applicatie die je nodig hebt en het eSeGeCe-team bouwt deze voor je met de sgcHTML + sgcWebSockets-componenten. Drie eenmalige pakketten vanaf €149, en je ontvangt een compleet project dat je kunt compileren, uitbreiden en herstylen met je gelicentieerde componenten.
Heb je al een webapplicatie gebouwd met IntraWeb, uniGUI, TMS WEB Core, Elevate Web Builder of D2Bridge? Stapsgewijze gidsen loodsen je door de overstap naar sgcHTML, met een conceptmapping voor elk framework. Er is ook een migratiehulpformulier als je wilt dat ons team de overstap helpt plannen of uitvoert.
Serveer dezelfde uit componenten opgebouwde pagina's vanuit elke Embarcadero WebBroker-applicatie, of vanuit een DataSnap-server met live WebSocket-push op dezelfde poort als je REST-endpoints.
Vertrouwd door Delphi-, C++ Builder-, Lazarus- en .NET-ontwikkelaars die over de hele wereld realtime toepassingen bouwen.
Jullie sgcWebSockets-bibliotheek is erg handig en eenvoudig op te zetten. Ga zo door!
Simone MorettiDelphi-ontwikkelaar
sgcWebSockets is geweldig en jullie support is de beste!
Christian MeyerOprichter & CTO
Heel erg bedankt voor jullie hulp en ondersteuning, ik ben dol op jullie componenten.
Mark SteinfeldCTO
Lever een web-UI op zonder je IDE te verlaten.
Voeg grafieken, grids, formulieren, dashboards en realtime pagina's toe aan je Delphi-, C++ Builder- of .NET-applicatie, met de taal die je al gebruikt.
Niet-goed-geld-terug-garantie van 30 dagenNiet tevreden? Vraag binnen 30 dagen na aankoop een volledige terugbetaling aan. Bekijk het terugbetalingsbeleid