sgcHTML — Web-UI-componenten voor Delphi, C++ Builder & .NET

sgcHTML

Bouw complete, moderne web-UI's rechtstreeks vanuit Delphi, C++ Builder en .NET. sgcHTML is een server-side componentframework met 60+ kant-en-klare widgets — grafieken, grids, formulieren, dashboards, chat en meer — die Bootstrap 5-markup renderen en interactief blijven via htmx. Jij schrijft Object Pascal of C#, sgcHTML schrijft de HTML, CSS en JavaScript.

60+ UI-componenten
Bootstrap 5 + htmx
Delphi / C++ Builder / .NET
Geen JavaScript nodig

Jij schrijft Pascal of C#. sgcHTML schrijft de front-end.

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; htmx houdt de pagina interactief en live zonder ook maar één regel handgeschreven JavaScript.

Componenten die HTML renderen

Elke widget is een class — TsgcHTMLComponent_Chart, TsgcHTMLComponent_Grid, TsgcHTMLComponent_Form en 60 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; jij beantwoordt ze met een pagina die uit componenten is opgebouwd. Geen externe webstack.

Interactief via htmx

Voeg een TsgcHTMX_Engine_Server toe en kliks, formulierposts en live updates gaan heen en weer naar je Pascal/C#-eventhandlers. De server wisselt HTML-fragmenten ter plekke uit — het SPA-gevoel, zonder de JavaScript-buildketen.

Realtime via WebSockets

Omdat htmx over de sgcWebSockets-server draait, kun je live HTML naar elke verbonden browser pushen. Dashboards, monitors en chatvensters werken bij op het moment dat je data verandert — server-gedreven, zonder polling.

Thema's & sjablonen

TsgcHTMLTemplate_Bootstrap verpakt je content in een compleet responsief document; TsgcHTMLThemeController en TsgcHTMLThemeBuilder bieden lichte/donkere thema's en een gedeelde stylesheet. Bootstrap 5.3 en htmx worden ingebouwd meegeleverd — geen 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

sgcHTML wordt geleverd met ingebouwde UI-tekst (knoppen, labels, validatieberichten) in 17 talen: Engels, Spaans, Frans, Duits, Portugees, Italiaans, Nederlands, Zweeds, Noors, Pools, Tsjechisch, Turks, Russisch, Chinees, Japans, Koreaans en Arabisch. Kies er een met sgcHTMLSetLanguage en componenten renderen in de taal van de bezoeker met de juiste native schriften, waaronder CJK, Cyrillisch en Arabisch.

Veilige uitvoer standaard

Elk component stuurt zijn dynamische tekst, attributen, inline JavaScript en URL's door automatische HTML-, attribuut-, JavaScript- en URL-codering plus URL-sanering (sgcHTMLEncode, sgcHTMLAttrEncode, sgcJSEncode, sgcHTMLSanitizeURL), zodat gebruikersgegevens niet uit hun context kunnen breken en script kunnen injecteren. Bescherming tegen XSS en injectie staat aan zonder extra werk.

60+ componenten, negen families

Van navigatie-chrome tot datagrids, grafieken, formulieren, overlays en AI-chat — het volledige Bootstrap 5-vocabulaire als native componenten. Elk linkt naar zijn eigen pagina met Delphi-, C++ Builder- en .NET-voorbeelden.

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

Componenten bekijken →

Data & tabellen

Grid, DataTable, Calendar, Scheduler, Timeline, KanbanBoard, Gantt — sorteerbaar, filterbaar, exporteerbaar, dataset-gebonden.

Componenten bekijken →

Grafieken & visualisatie

Chart (Chart.js), Gauge, Diagram (SVG-flow), Map (Leaflet) — datagedreven beelden uit je eigen datasets.

Componenten bekijken →

Formulieren & invoer

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

Componenten bekijken →

Content & lay-out

Panel, StatCard, Accordion, Carousel, Image, Avatar, Video — cards, media en KPI-tegels voor dashboards.

Componenten bekijken →

Overlays & feedback

Modal, Offcanvas, Popover, Toast, Snackbar, Notification, Spinner, Placeholder — dialoogvensters en statusvlakken.

Componenten bekijken →

Chat & AI

ChatBox, Chat (WhatsApp-stijl), AIChat met providerkeuze, token-streaming en RAG-bronvermeldingen.

Componenten bekijken →

Authenticatie

Login, SocialLogin (OAuth), OAuthCallback, WebAuthnLogin (passkeys) — kant-en-klare aanmeldflows.

Componenten bekijken →

Infrastructuur & engine

EngineServer, HTMXEngine, PageBuilder, TemplateBootstrap, ThemeController, ThemeBuilder, HTMXFragment, HTMXRouter — de niet-visuele onderdelen die pagina's serveren en live houden.

Componenten bekijken →

Bekijk de volledige feature-matrix →

Een webdashboard in een paar regels

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 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 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 60+ TsgcHTMLComponent_*-widgets. Configureer eigenschappen, bind optioneel een dataset en lees HTML uit. 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 de lichte/donkere thema's voor de hele app beheert.

3,000+Developers
20+Years
761+Components
30+API Integrations
5Platforms
Niet-goed-geld-terug-garantie van 30 dagenNiet tevreden? Vraag binnen 30 dagen na aankoop een volledige terugbetaling aan. Bekijk het terugbetalingsbeleid

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.

Andere producten van eSeGeCe

Combineer sgcHTML met onze andere component-bibliotheken voor Delphi, C++ Builder en .NET.

sgcWebSockets

Enterprise-componenten voor WebSocket, HTTP/2/3, MQTT, AMQP, WebRTC en AI/LLM. sgcHTML wordt geserveerd over dezelfde krachtige HTTP- en WebSocket-servers.

Meer informatie →

sgcSign

Digitale handtekeningen op enterpriseniveau — XAdES, PAdES, CAdES en ASiC met 10 sleutelproviders en 21 EU-landprofielen.

Meer informatie →

sgcOpenAPI

OpenAPI 3.0-parser en SDK-generator. Zet elke OpenAPI-spec in seconden om in een sterk getypeerde Delphi-client.

Meer informatie →

sgcBiometrics

Native componenten voor Windows Hello, vingerafdruk en het Windows Biometric Framework voor Delphi en C++ Builder.

Meer informatie →