sgcHTML : Créez des interfaces web modernes depuis Delphi sans écrire de JavaScript

· Composants

Les développeurs Delphi construisent des applications métier depuis trente ans. Le back-end est solide : accès aux bases de données, logique métier, génération de rapports, intégration de services. Le problème a toujours été le front-end. Dès qu'un client demande une interface accessible depuis un navigateur, l'approche classique de Delphi s'effondre. On se tourne alors vers IntraWeb (puissant mais avec état et vieillissant), on tente TMS WEB Core (qui compile du Pascal en JavaScript mais impose un modèle de déploiement côté client), ou on confie le front-end à une équipe JavaScript en maintenant deux bases de code totalement séparées.

sgcHTML adopte une approche différente. C'est une bibliothèque de plus de 60 composants côté serveur qui génèrent du HTML Bootstrap 5 directement depuis votre code Delphi, C++ Builder ou .NET. Vous configurez des propriétés, lisez la propriété HTML et servez le résultat. L'interactivité provient de htmx, une petite bibliothèque JavaScript qui permet au serveur d'échanger des fragments de page en réponse aux clics et aux soumissions de formulaires — sans aucun JavaScript à écrire vous-même. Le résultat est une application web moderne et responsive, entièrement construite en Object Pascal ou en C#.

Le problème que sgcHTML résout

L'architecture VCL standard de Delphi suppose un client lourd : formulaires, grilles et boîtes de dialogue s'exécutant sous Windows. Ce modèle fonctionne bien pour les outils internes. Il devient inadapté quand le client veut un portail accessible depuis n'importe quel navigateur sur n'importe quel appareil, ou quand la politique informatique interdit l'installation d'applications de bureau.

Les alternatives à sgcHTML comportaient toutes des frictions :

sgcHTML comble cette lacune : une bibliothèque de composants Delphi natifs dont la sortie est du HTML Bootstrap 5 standard et moderne que tout navigateur comprend, maintenu vivant par htmx, le tout contrôlé depuis une seule base de code Pascal ou C#.

Comment ça fonctionne

L'architecture comporte trois couches.

Premièrement, un composant tel que TsgcHTMLComponent_Chart, TsgcHTMLComponent_DataTable ou TsgcHTMLComponent_StatCard sait comment se décrire en HTML Bootstrap 5. Vous le configurez via des propriétés publiées normales et appelez sa propriété HTML pour obtenir le balisage.

Deuxièmement, un constructeur de page (TsgcHTMLPageBuilder) assemble les composants dans une grille responsive. Vous attribuez à chaque composant une Section, un SectionTitle, un SectionOrder et une ColumnWidth (grille à 1–12 colonnes de Bootstrap). Le constructeur de page les dispose automatiquement.

Troisièmement, un moteur serveur (TsgcHTMLEngine_Server) connecte tout à un TsgcWSHTTPServer de sgcWebSockets. Les requêtes arrivent dans votre gestionnaire OnCommandGet et vous répondez avec une page HTML complète construite à partir de vos composants. Les ressources CSS et JavaScript Bootstrap sont intégrées à l'intérieur de la bibliothèque, donc il n'y a rien à déployer à côté du binaire.

uses
  sgcWebSocket_Server, sgcHTML_Engine_Server,
  sgcHTML_Template_Bootstrap, sgcHTML_Page,
  sgcHTML_Component_StatCard, sgcHTML_Component_Chart;

var
  oServer:   TsgcWSHTTPServer;
  oEngine:   TsgcHTMLEngine_Server;
  oTemplate: TsgcHTMLTemplate_Bootstrap;
  oPage:     TsgcHTMLPage;
  oStat:     TsgcHTMLComponent_StatCard;
  oChart:    TsgcHTMLComponent_Chart;
begin
  oServer := TsgcWSHTTPServer.Create(nil);
  oServer.Port := 8080;

  oEngine   := TsgcHTMLEngine_Server.Create(nil);
  oEngine.Server := oServer;

  oTemplate := TsgcHTMLTemplate_Bootstrap.Create(nil);
  oTemplate.Title := 'My Dashboard';

  oPage := TsgcHTMLPage.Create(nil);

  // KPI card: total revenue
  oStat := TsgcHTMLComponent_StatCard.Create(nil);
  oStat.PageBuilder := oPage.PageBuilder;
  oStat.Section := 'kpi';
  oStat.SectionOrder := 1;
  oStat.ColumnWidth := cw3;
  oStat.Title := 'Total Revenue';
  oStat.Value := '$128,450';
  oStat.Trend := stUp;
  oStat.TrendValue := '+12%';

  // Revenue trend chart
  oChart := TsgcHTMLComponent_Chart.Create(nil);
  oChart.PageBuilder := oPage.PageBuilder;
  oChart.Section := 'charts';
  oChart.SectionOrder := 1;
  oChart.ColumnWidth := cw8;
  oChart.ChartType := ctLine;
  oChart.Title := 'Monthly Revenue';
  oChart.AddLabel('Jan'); oChart.AddLabel('Feb'); oChart.AddLabel('Mar');
  oChart.AddDataset('2026', [42000, 58000, 64000], '#0d6efd', '', True);

  oServer.Active := True;
end;

Plus de 60 composants prêts à l'emploi

sgcHTML est livré avec une large palette de composants couvrant les modèles d'interface web les plus courants. Chaque composant est une classe Delphi standard que vous pouvez déposer sur un formulaire ou créer par code :

Liaison avec DataSource

Chaque composant sgcHTML prend en charge une propriété DataSource qui le lie à n'importe quel TDataSource de votre application. Définissez DataAutoRefresh := True et le composant se re-génère automatiquement quand le jeu de données sous-jacent change. Pour un contrôle plus fin, appelez LoadFromDataSet directement :

uses
  sgcHTML_Component_DataTable;

// Populate a data table from a FireDAC query
oTable := TsgcHTMLComponent_DataTable.Create(nil);
oTable.PageBuilder := oPage.PageBuilder;
oTable.Section := 'invoices';
oTable.Title := 'Recent Invoices';
oTable.ShowSearch := True;
oTable.ShowExport := True;
oTable.LoadFromDataSet(FDQuery1, 20); // 20 rows per page

Le composant graphique dispose d'une méthode LoadFromDataSet correspondante qui accepte un nom de champ pour les libellés et un ou plusieurs noms de champs pour les valeurs, de sorte qu'une requête de chiffre d'affaires par mois devient un graphique à barres en trois lignes :

oChart.LoadFromDataSet(fdqRevenue, 'month', ['revenue', 'cost']);

Interactivité via htmx — aucun JavaScript requis

Le HTML statique est utile. Le HTML interactif est nécessaire. sgcHTML atteint l'interactivité via htmx : une petite bibliothèque (14 Ko gzippée) qui intercepte les clics et les soumissions de formulaires, envoie une requête HTTP à votre serveur et substitue le HTML de réponse dans la page. Votre gestionnaire Delphi OnCommandGet ou OnCommandOther reçoit la requête, reconstruit le composant concerné et retourne son HTML. Pas de rechargement de page. Pas de framework JavaScript.

// Server-side handler: update the chart fragment when the user changes the date range
procedure TMyServer.HandleChartFragment(aReq: TIdHTTPRequestInfo;
  aResp: TIdHTTPResponseInfo);
var
  oChart: TsgcHTMLComponent_Chart;
  vRange: string;
begin
  vRange := aReq.Params.Values['range']; // 'week', 'month', 'year'
  oChart := TsgcHTMLComponent_Chart.Create(nil);
  try
    oChart.ChartType := ctBar;
    LoadRevenueData(oChart, vRange); // your data-loading procedure
    aResp.ContentText := oChart.HTML;
    aResp.ContentType := 'text/html';
  finally
    oChart.Free;
  end;
end;

Le graphique dans le navigateur porte un attribut hx-get pointant vers l'endpoint de fragment. Quand l'utilisateur sélectionne une plage différente dans une liste déroulante, htmx substitue le div du graphique en place — la page environnante ne se recharge pas.

Mises à jour en temps réel via WebSocket

Parce que sgcHTML est construit sur sgcWebSockets, le push en temps réel est une fonctionnalité de première classe. Quand de nouvelles données arrivent — une nouvelle commande, un cours boursier, une lecture de capteur — votre serveur pousse un fragment HTML via WebSocket et htmx l'insère dans le bon élément DOM. Le client s'abonne à un endpoint WebSocket ; le serveur appelle SendMessage. Pas de polling, pas de long-polling, pas de broker de messages externe.

// Push an updated stat card to all connected clients
procedure TDashboardServer.PushRevenueUpdate(aNewRevenue: Double);
var
  oCard: TsgcHTMLComponent_StatCard;
begin
  oCard := TsgcHTMLComponent_StatCard.Create(nil);
  try
    oCard.CardID := 'kpi-revenue';
    oCard.Title := 'Total Revenue';
    oCard.Value := FormatCurr('$#,##0', aNewRevenue);
    oCard.Trend := stUp;
    // Send the HTML fragment to all clients subscribed to this channel
    FWSServer.Broadcast(oCard.HTML);
  finally
    oCard.Free;
  end;
end;

Aucune chaîne de build JavaScript, aucun npm, aucun Node.js

Toutes les ressources JavaScript et CSS dont sgcHTML a besoin (Bootstrap 5, Chart.js, htmx) sont intégrées comme ressources binaires dans l'exécutable Delphi compilé. Votre déploiement se résume à un seul fichier .exe. Il n'y a pas de répertoire node_modules, pas de configuration webpack, pas de pipeline Babel et pas de conflits de version entre un gestionnaire de paquets front-end et votre back-end. Vous installez sgcHTML comme un package Delphi, compilez et livrez.

Démarrage

sgcHTML est inclus dans les éditions sgcWebSockets Enterprise et All-Access, et disponible en achat séparé. Un essai gratuit est disponible en téléchargement. L'essai inclut les 60+ composants sans restriction de fonctionnalités pendant la période d'essai.

La bibliothèque prend en charge Delphi 10.2 Tokyo jusqu'à Delphi 13 et C++ Builder 10.2 jusqu'à 13, et l'édition .NET cible .NET 6 et versions ultérieures. Le code source complet est inclus dans tous les niveaux payants.

Questions ou demandes de pré-vente ? Contactez-nous. Vous recevrez une réponse des personnes qui ont écrit le code.