sgcHTMLDes applications web,écrites en Pascal.Sans JavaScript.
Crée des interfaces web complètes et modernes directement depuis Delphi, C++ Builder et .NET. sgcHTML est un framework de composants côté serveur avec 110 widgets prêts à l'emploi : graphiques, grilles, formulaires, tableaux de bord, chat et bien plus. Beaucoup se lient directement à un TDataSet, génèrent du balisage Bootstrap 5 et restent interactifs grâce à htmx. Tu écris de l'Object Pascal ou du C#, sgcHTML écrit le HTML, le CSS et le JavaScript.
Démo ERP | un seul exe Delphi qui sert sa propre interface web
Point de venteSupervision en directInterventions terrain
110composants d'interface en dix familles
3Langages : Delphi, C++ Builder et .NET
17Langues d'interface intégrées, dont celles qui s'écrivent de droite à gauche
15Applications réelles en ligne
0Lignes de JavaScript écrites à la main
Vois-les tourner
Dix-huit vidéos. Aucune diapositive.
Chaque clip est un enregistrement d'écran d'une application réelle en train de tourner, avec voix off et sous-titres. Choisis-en un dans la liste. Rien ne se télécharge tant que tu n'appuies pas sur lecture.
sgcHTML en deux minutes
Construis une interface web complète depuis Delphi avec des composants côté serveur, du balisage Bootstrap 5 et htmx, sans aucune étape de build JavaScript.
Quinze applications réelles, en ligne en ce moment.
Chaque écran ci-dessous est une application Delphi qui sert son propre HTML via sgcHTML. Aucune étape de build JavaScript, aucun projet front-end séparé. Connecte-toi avec les identifiants déjà renseignés sur chaque page de connexion.
Grilles, graphiques, planificateurs, cartes et tableaux de bord issus des applications de démonstration, chacun produit par des composants que tu configures dans le code.
Gantt, graphiques et cartes, dessinés côté serveur
Le planning Gantt, les séries Chart.js, les jauges, les sparklines, les treemaps et les cartes de chaleur sont tous produits depuis ton code Pascal ou C#. Tu fournis les données, sgcHTML génère le balisage et le câblage côté client.
Un générateur de tableaux croisés ad hoc sur un jeu de données en direct
Les utilisateurs choisissent dimensions, mesures et agrégation, et le tableau croisé est reconstruit à partir d'un TFDQuery. Aucune couche REST intermédiaire, la page lit la base de données directement dans le processus.
Les mêmes composants, sur un scanner portable
Chaque composant génère du balisage Bootstrap 5 responsive, donc la mise en page du terminal d'entrepôt est la même bibliothèque de composants à une largeur de téléphone, pas une base de code mobile séparée.
Comment ça marche
Tu écris du Pascal ou du C#. sgcHTML écrit le front-end.
Démarre un serveur HTTP, attache le moteur htmx et réponds aux requêtes avec une page construite à partir de composants. La même API en Delphi, C++ Builder et .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
}
Démarre un serveur, branche htmxUn TsgcWSHTTPServer répond aux requêtes, et un TsgcHTMX_Engine_Server garde la page interactive et en direct via WebSocket.
Construis la page à partir de composantsDéfinis les propriétés d'un graphique, d'une grille ou d'un formulaire, puis lis son HTML. TsgcHTMLTemplate_Bootstrap l'enveloppe dans un document responsive complet.
Sers-la, et pousse les mises à jourLes clics et les envois de formulaires font l'aller-retour vers tes gestionnaires d'événements, et le serveur remplace les fragments HTML sur place. Aucune chaîne de build JavaScript.
Les mêmes briques, à plus grande échelle
Le tableau de bord de la démo ERP : cartes KPI, un graphique de chiffre d'affaires et une grille des dernières factures, le tout construit à partir de composants.
sgcHTML transforme ton back-end Delphi, C++ Builder ou .NET existant en serveur d'applications web. Chaque composant est une classe native qui génère du HTML Bootstrap 5, et htmx garde la page interactive et en direct sans une seule ligne de JavaScript écrite à la main.
Des composants qui génèrent du HTML
Chaque widget est une classe : TsgcHTMLComponent_Chart, TsgcHTMLComponent_Grid, TsgcHTMLComponent_Form et 86 autres. Définis ses propriétés, puis lis sa propriété HTML pour obtenir un balisage Bootstrap 5 propre, prêt à servir.
Servi par ton propre serveur
Pose un TsgcHTMLEngine_Server (ou relie le HTML à un TsgcWebSocketHTTPServerexistant). Les requêtes arrivent dans ton gestionnaire OnCommandGet , et tu réponds avec une page construite à partir de composants. Aucune pile web externe.
Hébergement WebBroker & DataSnap
sgcHTML n'est pas lié au serveur sgcWebSockets. Sers les mêmes pages construites à partir de composants depuis n'importe quelle application Embarcadero WebBroker via TsgcHTMX_Engine_Server_WebBroker, ou depuis un serveur DataSnap avec un push WebSocket en direct sur le même port que tes endpoints REST.
Ajoute un TsgcHTMX_Engine_Server et les clics, les envois de formulaires et les mises à jour en direct font l'aller-retour vers tes gestionnaires d'événements Pascal ou C#. Le serveur remplace les fragments HTML sur place. L'effet SPA, sans la chaîne de build JavaScript.
Temps réel via WebSockets
Comme htmx s'exécute sur le serveur sgcWebSockets, tu peux pousser du HTML en direct vers chaque navigateur connecté. Tableaux de bord, moniteurs et fenêtres de chat se mettent à jour à l'instant où tes données changent, piloté par le serveur, sans interrogation. Quand un proxy bloque les WebSockets, la même page peut recevoir ses mises à jour via les événements envoyés par le serveur (SSE).
Thèmes & modèles
TsgcHTMLTemplate_Bootstrap enveloppe ton contenu dans un document responsive complet. TsgcHTMLThemeController et TsgcHTMLThemeBuilder fournissent des thèmes clair et sombre et une feuille de style partagée. Bootstrap 5.3 et htmx sont embarqués, sans CDN à l'exécution.
Liaison directe à la base de données
Grid, DataTable, Chart, Select, TreeView, Scheduler, Timeline et Form se lient directement à un TDataSet via LoadFromDataSet / DataSource. Pointe un composant vers une requête et il affiche les lignes.
Interface localisée, 17 langues
Le texte d'interface intégré (boutons, libellés, messages de validation) existe en anglais, espagnol, français, allemand, portugais, italien, néerlandais, suédois, norvégien, polonais, tchèque, turc, russe, chinois, japonais, coréen et arabe. Choisis-en un avec sgcHTMLSetLanguage. L'arabe et l'hébreu basculent automatiquement toute la page de droite à gauche : dir="rtl", la feuille de style RTL de Bootstrap et des composants en miroir, sans aucun changement de code.
Sortie sécurisée par défaut
Chaque composant fait passer son texte dynamique, ses attributs, son JavaScript en ligne et ses URL par un encodage automatique et un assainissement des URL (sgcHTMLEncode, sgcHTMLAttrEncode, sgcJSEncode, sgcHTMLSanitizeURL), si bien que les données de l'utilisateur ne peuvent pas sortir de leur contexte ni injecter de script.
Bibliothèque de composants
110 composants, dix familles.
Du chrome de navigation aux grilles de données, graphiques, formulaires, surcouches et chat IA, tout le vocabulaire de Bootstrap 5 sous forme de composants natifs. Chacun renvoie vers sa propre page avec des exemples Delphi, C++ Builder et .NET.
Chaque ajout est désactivé tant que vous ne l'utilisez pas, de sorte qu'une page qui n'en utilise aucun s'affiche exactement comme avant. La liste complète se trouve dans la matrice des fonctionnalités.
Votre page dans ChatGPT et Claude
Un outil MCP répond avec une page au lieu de texte, construite à partir des mêmes composants que pour n'importe quelle page web et affichée par ChatGPT, Claude et VS Code. Nécessite l'édition Enterprise ou All-Access, ou le pack sgcAI.
Décrivez une page ou donnez une capture d'écran au concepteur, et il construit la page avec vos propres composants. Il répond à partir d'un schéma construit depuis votre registre, il ne peut donc pas nommer une classe que vous n'avez pas proposée, et rien n'est appliqué tant que vous ne l'acceptez pas. Il nécessite les unités IA de l'édition Enterprise ou All-Access, ou le pack sgcAI.
Le chemin de liste, recherche, pagination, formulaire, suppression et écriture d'une table en un seul composant, sur un jeu de données ou sur ton propre SQL. Un assistant de l'IDE le crée.
Une question en langage courant devient des filtres, des tris, des regroupements et des mises en évidence, validés par rapport à tes propres colonnes avant d'être appliqués. Cela fonctionne sans clé d'API grâce à un analyseur intégré, et avec sept fournisseurs quand les unités IA sont dans ton édition.
Les événements envoyés par le serveur pour les réseaux qui bloquent les WebSockets, Web Push pour un navigateur qui n'est pas ouvert, une boîte de réception de notifications et une table de préférences. Web Push nécessite l'édition Enterprise ou All-Access.
Sessions par cookie, jetons CSRF, limitation des tentatives de connexion et protection des routes par rôle. Paramètres de chemin et filtres de méthode sur les routes, navigation en page unique depuis le modèle de page, et utilitaires pour tester le balisage que tu produis.
Si tu construis des applications ASP.NET Core MVC ou Razor Pages à la manière de Telerik ou DevExpress, sgcHTML parle désormais le même langage. Des Tag Helpers comme <sgc-grid>, <sgc-form>, <sgc-dialog> et <sgc-chart>, et leurs équivalents fluides sous Html.Sgc(), génèrent côté serveur du HTML Bootstrap 5 et dialoguent avec tes contrôleurs via htmx. Aucun framework JavaScript à apprendre, aucune source de données JSON à écrire. La couche Razor est fournie dans le package NuGet esegece.sgcHTML.AspNetCore Paquet NuGet, édition Community comprise, qui arrive avec la prochaine version.
// 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"));
}
}
}
Une grille sur IQueryable
<sgc-grid> pagine, trie, filtre (texte et plage), recherche et exporte vers XLSX et PDF côté serveur. Le contrôleur répond avec this.SgcGrid(request, query), et EF Core transforme chaque clic en SQL paramétré. push-url conserve la page, le tri et les filtres dans la barre d'adresse, si bien que l'actualisation et le bouton Précédent fonctionnent.
Des formulaires liés avec asp-for
<sgc-textbox>, <sgc-select>, <sgc-datepicker>, <sgc-checkbox> et <sgc-autocomplete> se lient à ton modèle avec asp-for et affichent les erreurs de ModelState sous chaque champ. <sgc-form hx="true"> envoie via htmx, et this.SgcRedirect(url) navigue après un enregistrement valide.
Modifier dans une boîte de dialogue
Tout élément portant sgc-dialog="name" charge son URL dans un <sgc-dialog>. Après un envoi valide, this.SgcCloseDialog("edit-order", refresh: "orders") ferme la boîte de dialogue et recharge la grille, le schéma d'édition en fenêtre sans script de ta part.
Des graphiques poussés en direct, sans SignalR
<sgc-chart> affiche des données statiques, interroge une action avec refresh-every="5s", ou passe en live="true": un service en arrière-plan appelle hub.BroadcastChartAsync(...) et chaque navigateur ouvert redessine le graphique via le WebSocket de sgcHTML. Les graphiques de Telerik et DevExpress exigent de la plomberie SignalR pour le push serveur, sgcHTML l'intègre.
Tu viens de Telerik UI for ASP.NET Core ou de DevExpress ? [DataSourceRequest] devient SgcDataRequest, ToDataSourceResult devient this.SgcGrid(request, query) (ou query.ToSgcDataResult(request) pour les données seules), et Html.Kendo().TextBoxFor(m => m.X) devient Html.Sgc().TextBoxFor(m => m.X). La démo MVC exécutable, 22.RazorMvc, est l'exemple de commandes de Telerik écrit avec sgcHTML sur EF Core.
Deux couches d'API
Composants de haut niveau ou nœuds de bas niveau.
Choisis les composants prêts à l'emploi quand tu veux un widget en une ligne, ou descends à la couche de nœuds quand tu as besoin d'un contrôle total sur le balisage.
Couche composant
Les 110 widgets TsgcHTMLComponent_* . Configure les propriétés, lie éventuellement un dataset, lis HTML. Beaucoup exposent aussi une méthode statique Build(...) pour un usage inline en une ligne.
Couche nœud / composition
Des primitives comme TsgcHTMLContainer (avec un indicateur Void pour les balises auto-fermantes), TsgcHTMLCard, TsgcHTMLForm, TsgcHTMLField, TsgcHTMLButton et TsgcHTMLTable se composent en n'importe quelle mise en page, puis se rendent avec TsgcHTMLTemplate_Bootstrap. Le jeu de nœuds inclut aussi des blocs de construction Bootstrap tels que TsgcHTMLModal, TsgcHTMLOffcanvas, TsgcHTMLAccordion, TsgcHTMLCarousel, TsgcHTMLToast, TsgcHTMLProgress, TsgcHTMLSpinner, TsgcHTMLListGroupNode, TsgcHTMLInputGroup, TsgcHTMLButtonGroupNode, TsgcHTMLRadio, TsgcHTMLBreadcrumb, TsgcHTMLNavbarNode et TsgcHTMLImage.
Constructeur de page visuel
TsgcHTMLPageBuilder et son éditeur en conception te permettent d'assembler des pages dans l'IDE, tandis que TsgcHTMLThemeController gère le thème clair et sombre dans toute l'application.
Trois façons de commencer
Pars de là où tu en es.
Tu ne veux pas la construire toi-même ?
Avec sgcCustomization HTML, tu décris l'application dont tu as besoin et l'équipe eSeGeCe la construit pour toi avec les composants sgcHTML + sgcWebSockets. Trois forfaits en achat unique à partir de €149, et tu reçois un projet complet que tu peux compiler, étendre et adapter avec tes composants sous licence.
Tu as déjà une application web construite avec IntraWeb, uniGUI, TMS WEB Core, Elevate Web Builder ou D2Bridge ? Des guides pas à pas t'accompagnent pour la faire passer à sgcHTML, avec une correspondance des concepts pour chaque framework. Un formulaire d'assistance à la migration est aussi disponible si tu veux que notre équipe t'aide à planifier le passage, ou le réalise pour toi.
Sers les mêmes pages construites avec des composants depuis n'importe quelle application Embarcadero WebBroker, ou depuis un serveur DataSnap avec push WebSocket en direct sur le même port que tes points de terminaison REST.
Plébiscité par des développeurs Delphi, C++ Builder, Lazarus et .NET qui construisent des applications en temps réel dans le monde entier.
Votre bibliothèque sgcWebSockets est très utile et facile à configurer. Continuez votre excellent travail !
Simone MorettiDéveloppeur Delphi
sgcWebSockets est incroyable et votre support est le meilleur !
Christian MeyerFondateur & CTO
Merci beaucoup pour votre aide et votre support, j’adore vos composants.
Mark SteinfeldCTO
Livre une interface web sans quitter ton IDE.
Ajoute graphiques, grilles, formulaires, tableaux de bord et pages en temps réel à ton application Delphi, C++ Builder ou .NET, avec le langage que tu utilises déjà.
Garantie satisfait ou remboursé de 30 joursPas satisfait ? Demandez un remboursement intégral dans les 30 jours suivant l'achat. Voir la politique de remboursement