sgcHTML en cinq minutes

sgcHTML transforme Object Pascal en HTML. Tu construis une page sous forme d'arbre de composants, tu lis une propriété de type chaîne, et tu écris cette chaîne dans une réponse HTTP. Cette page fait exactement cela, puis t'oriente vers les éléments dont tu auras besoin ensuite : formulaires, grilles, graphiques et htmx.

Bootstrap 5 et htmx, côté serveur
Aucun JavaScript à écrire
Windows, Linux et macOS

Le chemin de 5 minutes : concevoir une page sur un formulaire

Dépose quatre types de composants sur un formulaire VCL, règle leurs propriétés dans l'Inspecteur d'objets et lance le programme. La page est construite à partir du formulaire, donc il n'y a aucun HTML à écrire et une seule ligne de code. Cela nécessite sgcWebSockets 2026.10 ou plus récent.

Composant Quoi régler
TsgcWebSocketHTTPServer Port, par exemple 8081. C'est le serveur auquel le navigateur se connecte.
TsgcHTMLDesignServer Server pointe vers le serveur HTTP, Surface vers la surface de conception, et PagePath est l'adresse de la page, par exemple /.
TsgcHTMLDesignSurface Le Title de la page, et les Actions qui exécutent du code Delphi quand l'utilisateur clique ou envoie un formulaire.
Composants sgcHTML Le contenu de la page. Par exemple un TsgcHTMLComponent_Panel avec son Title et son Body.

La seule ligne de code est WSServer.Active := True, dans l'événement OnCreate du formulaire :

uHelloWorld.pas
procedure TfrmHelloWorld.FormCreate(Sender: TObject);
begin
  { Start listening. From now on http://127.0.0.1:8081/ shows the page. }
  WSServer.Active := True;
end;

Ce que fait le DesignServer

Il construit la page à partir du formulaire, sert Bootstrap, htmx et Chart.js depuis l'exécutable, effectue le rendu en toute sécurité sur les threads du serveur et répond 404 pour tout chemin qu'il ne connaît pas.

Les clics et envois exécutent du code Delphi

Ajoute une action à la surface, renseigne ses propriétés Source et Target dans l'Inspecteur d'objets et double-clique sur OnExecute. C'est le OnClick côté serveur. La Target est mise à jour sur place, sans rechargement de la page.

Six démos QuickStart

Elles sont livrées dans Demos\60.HTML\00.QuickStart : 01.HelloWorld, 02.Components, 03.Events, 04.Forms, 05.Database et 06.Pages. Le code ci-dessus provient de 01.HelloWorld.

Tu préfères construire la page en code ? Le reste de cette page fait la même chose depuis un programme console, sans aucun formulaire.

Ce dont a besoin la première page

Un composant de page qui se rend lui-même en chaîne, et un serveur HTTP pour remettre cette chaîne à un navigateur. Deux objets.

Le composant de page

TsgcHTMLComponent_Site, déclaré dans sgcHTML_Component_Site.pas et enregistré sur la page de palette SGC HTML. Il rend une structure complète : navigation, barre latérale, thème et contenu.

La seule propriété qui compte

HTML, héritée de TsgcHTMLComponent. Elle est en lecture seule, et la lire rend l'arbre de composants courant en un document HTML complet.

Le serveur

Tout ce qui peut écrire une chaîne dans une réponse HTTP. La démo livrée utilise TsgcWSHTTPServer de sgcWebSocket_Server.pas lorsqu'une version Professional est disponible, et se rabat sur TIdHTTPServer sinon.

Plateformes

Bureau et serveur uniquement. SGC_HTML est défini dans {$IFNDEF ANDROID} et {$IFNDEF IOS}, donc sur mobile chaque unité sgcHTML se compile en rien. Windows, macOS et Linux conviennent tous.

Prérequis et éditions

La colonne d'édition indique le define qui conditionne le code, avec la ligne où il se trouve dans Source/sgcVer.inc.

Quoi Valeur
IDE Delphi 7 jusqu'à RAD Studio 13, et C++Builder 2007 jusqu'à 13. Lazarus est également pris en charge, et une démo ERP livrée a été exécutée sous Linux.
Clause uses sgcHTML_Component_Site pour la structure de page, plus les unités de nœuds que tu utilises réellement, par exemple sgcHTML_Nodes, sgcHTML_Nodes_Bootstrap, sgcHTML_Nodes_Table, sgcHTML_Nodes_Forms et sgcHTML_Nodes_Charts.
Define du pack SGC_PACK_HTML est défini à la ligne 871, dans le bloc {$IFDEF SGC_EDT_ALL} qui va de la ligne 870 à la ligne 874. Dans l'arborescence source de sgcWebSockets, cela signifie que l'édition All-Access l'active. sgcHTML est aussi vendu comme produit à part entière, avec son propre installeur et sa propre licence.
Defines de fonctionnalités Dans le bloc {$IFDEF SGC_PACK_HTML} aux lignes 882 à 892 : SGC_HTML à la ligne 885 et SGC_HTMX à la ligne 886, tous deux dans {$IFNDEF ANDROID} à la ligne 883 et {$IFNDEF IOS} à la ligne 884. SGC_HTML_CONTROL, la surface visuelle de conception, est à la ligne 888 dans {$IFDEF MSWINDOWS} à la ligne 887.
Ce que cela implique sur mobile Chaque unité sgcHTML entoure son interface de {$IFDEF SGC_HTML}, donc une version Android ou iOS les compile en unités vides. C'est une bibliothèque côté serveur, et c'est voulu : le téléphone reçoit du HTML, pas du Pascal.
Enregistrement La page de palette n'est enregistrée que lorsque SGC_PACK_HTML et SGC_HTML sont tous deux définis.

Quels composants existent ? Environ quatre-vingts, d'une grille et d'un planificateur à des graphiques, un éditeur riche, un code QR et un scanner de caméra. La matrice des fonctionnalités les regroupe par domaine, et chacun a sa propre page sous composants.

Installer et trouver la page de palette

sgcHTML est livré comme package à part et également dans la version All-Access de sgcWebSockets. L'installation a la même forme.

1. Décompresser

Décompresse le téléchargement dans un dossier, appelé {$DIR} ci-dessous.

2. Chemin de bibliothèque

Outils, Options, Bibliothèque. Ajoute {$DIR}\source et le dossier lib de ton IDE, par exemple {$DIR}\libD13\$(Platform).

3. Compiler les packages

Ouvre le groupe de packages de ta version d'IDE sous {$DIR}\Packages\. Compile d'abord le .dpk d'exécution, puis installe celui de conception dcl. Lazarus utilise plutôt le .lpk.

4. Vérifier la palette

Une page nommée SGC HTML apparaît, contenant environ quatre-vingts composants. Si elle est absente sur une cible Android ou iOS, c'est normal, car SGC_HTML y est exclu.

5. Lancer d'abord une démo

Ouvre {$DIR}\Demos\60.HTML\01.RunTime\07.Site, compile-la et lance-la. C'est un serveur console, il affiche sa propre URL, et c'est de là que provient le code ci-dessous.

Une page en Pascal, servie via HTTP

Construis la page, lis la propriété HTML, écris-la dans la réponse. Le premier onglet est la page, le deuxième le serveur, le troisième le programme console complet.

sgcSiteDemo_Pages.pas
uses
  SysUtils, Classes,
  // sgc
  sgcHTML_Component_Site;

class function TsgcSiteDemoPages.BuildPage: string;
var
  oSite: TsgcHTMLComponent_Site;
begin
  oSite := TsgcHTMLComponent_Site.Create(nil);
  try
    oSite.Title := 'sgcHTML Site Layouts';
    oSite.Layout := slSidebarLeft;

    oSite.AddMenu('Dashboard', '/');
    oSite.AddMenu('Customers', '/?page=customers');

    oSite.AddSection('Welcome', '<p>Served from Delphi.</p>');

    // reading HTML is what runs the render
    Result := oSite.HTML;
  finally
    oSite.Free;
  end;
end;

Layout prend un TsgcHTMLSiteLayout : slSidebarLeft, slSidebarRight, slTopNav, slTopNavSidebarLeft, slIconRail ou slOffcanvas. La valeur par défaut est slTopNavSidebarLeft, la ligne ci-dessus n'est donc là que pour montrer le sélecteur.

sgcSiteDemo_Server.pas
uses
  SysUtils, Classes,
  // sgc
  sgcWebSocket_Server,
{$IFDEF SGC_INDY}
  sgcIdContext, sgcIdCustomHTTPServer;
{$ELSE}
  IdContext, IdCustomHTTPServer;
{$ENDIF}

constructor TsgcSiteDemoServer.Create;
begin
  inherited Create;
  FPort := 8092;
  FHTTP := TsgcWSHTTPServer.Create(nil);
  FHTTP.Port := FPort;
  FHTTP.OnCommandGet := HandleCommandGet;
end;

procedure TsgcSiteDemoServer.Start;
begin
  FHTTP.Active := True;
end;

procedure TsgcSiteDemoServer.SendHTML(AResponseInfo: TIdHTTPResponseInfo;
  const aHTML: string);
begin
  AResponseInfo.ResponseNo := 200;
  AResponseInfo.ContentType := 'text/html; charset=utf-8';
  AResponseInfo.ContentText := aHTML;
end;

Les unités Indy sont conditionnelles car une version avec la bibliothèque Indy personnalisée les voit sous les noms sgcIdContext et sgcIdCustomHTTPServer, et une version avec Indy standard sous les noms IdContext et IdCustomHTTPServer. La démo livrée contient exactement cette condition. N'importe quel serveur capable d'écrire une chaîne convient. La démo livrée choisit TsgcWSHTTPServer lorsqu'une version Professional est disponible et se rabat sur TIdHTTPServer sinon, c'est pourquoi la démo comporte une condition à cet endroit et pas cet extrait.

sgcSiteDemoServer.dpr
program sgcSiteDemoServer;

{$APPTYPE CONSOLE}

uses
  SysUtils,
  sgcSiteDemo_Server in 'sgcSiteDemo_Server.pas',
  sgcSiteDemo_Pages in 'sgcSiteDemo_Pages.pas';

var
  oServer: TsgcSiteDemoServer;
begin
  oServer := TsgcSiteDemoServer.Create;
  try
    oServer.Start;
    WriteLn('sgcHTML Site Layouts Demo - http://localhost:' +
      IntToStr(oServer.Port));
    WriteLn('Press Enter to stop.');
    ReadLn;
    oServer.Stop;
  finally
    oServer.Free;
  end;
end.

Une application console, donc pas de fiche ni de VCL à configurer. C'est le plus court programme sgcHTML possible, et c'est ce qu'est réellement la démo livrée.

Les trois onglets proviennent de la démo livrée Demos\60.HTML\01.RunTime\07.Site, réduite à l'essentiel. Le projet complet change aussi la disposition, le thème et le jeu de couleurs depuis la chaîne de requête, ce qui vaut la peine d'être lu une fois la première page rendue.

Confirmer que la page s'est rendue

Le programme affiche l'URL sur laquelle il écoute. Ouvre-la, puis essaie les sélecteurs.

L'URL affichée

Le programme écrit http://localhost:8092 dans la console au démarrage. Ouvre-la. Une page avec navigation, barre latérale et ton contenu signifie que le rendu et le serveur fonctionnent tous les deux.

Active

FHTTP.Active := True réussit ou lève une exception. Si quelque chose d'autre occupe déjà le port 8092, tu le découvres ici.

Le type de contenu

Un navigateur qui affiche du balisage brut au lieu d'une page signifie que la réponse est partie sans text/html. Définis ContentType avant d'affecter ContentText.

Changer de disposition

La démo livrée lit layout, theme et mode dans la chaîne de requête, donc ?layout=topnav&mode=dark rend à nouveau la même page d'une autre manière. C'est le moyen le plus rapide de voir ce que fait le composant.

Ce qui se passe généralement mal la première fois

Six problèmes expliquent presque toutes les premières tentatives qui ne s'affichent pas.

La page de palette n'apparaît jamais

L'enregistrement nécessite à la fois SGC_PACK_HTML et SGC_HTML. Le premier est défini à la ligne 871 dans le bloc All-Access, le second à la ligne 885 dans le bloc du pack. Sur une cible Android ou iOS, le second est volontairement absent.

La page est vide

Tu as construit l'arbre mais jamais lu HTML. C'est cette propriété qui déclenche le rendu. La lire constitue toute l'étape de rendu, et elle renvoie un document complet, pas un fragment.

Rien ne change quand tu modifies la page

La démo construit un nouveau TsgcHTMLComponent_Site à chaque requête et le libère ensuite. Si tu mets l'objet en cache et le réutilises, pense à vider son contenu avec ClearContent avant de reconstruire.

Le navigateur affiche du balisage brut

Le type de contenu de la réponse n'a jamais été défini. La démo définit ContentType := 'text/html; charset=utf-8' avant d'écrire le corps, et sans cela certains clients afficheront le HTML comme du texte.

Tu écris les chaînes HTML à la main

Tu n'y es pas obligé. Il existe des unités de nœuds pour la mise en page Bootstrap, les tableaux, les formulaires et les graphiques, et tout l'intérêt de la bibliothèque est que tu les composes au lieu de concaténer du balisage.

Le port est déjà pris

La démo écoute sur 8092. Si autre chose occupe ce port, le serveur ne démarrera pas, change donc le port avant de chercher un problème plus profond.

Ce que les gens construisent après la première page

Quatre directions, toutes dans le même package.

Des formulaires qui renvoient les données

L'unité de nœuds de formulaires construit les champs, les listes, la validation et la mise en page, et htmx les envoie sans rechargement de page. L'échappement est géré pour toi quand tu construis des nœuds plutôt que des chaînes.

Composants de formulaire

Des données dans la page

Une grille avec tri, filtrage et pagination, plus des graphiques, des cartes de statistiques, un planificateur, un diagramme de Gantt et un composant de diagramme.

Matrice des fonctionnalités

Des applications entières

Plus de quinze démos d'exécution sont livrées, d'un tableau de bord ERP à un point de vente, un helpdesk, un entrepôt et une application de service sur le terrain. C'est le moyen le plus rapide de voir la bibliothèque à échelle réelle.

Galerie de démos

Reprendre ta couche web existante

Il existe des composants pour WebBroker et DataSnap, de sorte qu'une application web Delphi existante peut rendre des pages sgcHTML sans être réécrite.

WebBroker et DataSnap

Référence, démos et documentation

Le catalogue liste chaque composant avec un aperçu. Les projets de démo sont livrés dans le téléchargement, sous Demos\60.HTML.

Page TsgcHTMLComponent_Site La structure de page sur laquelle repose ce démarrage rapide, propriété par propriété.
Matrice des fonctionnalités Mise en page, formulaires, données, graphiques, authentification, chat et le reste, regroupés par domaine.
Galerie de démos Les démos d'exécution livrées, chacune avec une courte vidéo.
WebBroker et DataSnap Rendre des pages sgcHTML depuis une couche web Delphi existante.
Télécharger l'essai Le même installeur que la version de production, limité dans le temps.
Aide en ligne La référence générée, toujours en phase avec la version actuelle.
Guide Getting Started PDF, en anglais. Les idées derrière les six démos QuickStart, expliquées dans un texte continu.

Lectures associées : le composant Site, les composants d'interface web en Delphi, des formulaires plus intelligents et les tableaux de données. Chaque produit a son propre démarrage rapide, listé sur la page de prise en main.

Questions sur le démarrage rapide de sgcHTML

TsgcHTMLComponent_Site, de l'unité sgcHTML_Component_Site.pas. Il rend une structure de page complète, tu obtiens donc navigation, barre latérale, thème et zone de contenu sans les assembler toi-même. Construis-le, appelle AddMenu et AddContent ou AddSection, puis lis la propriété HTML. La démo Site livrée fait exactement cela.
Tu l'écris toi-même dans une réponse HTTP. HTML est une simple propriété string, donc n'importe quel serveur convient. La démo livrée utilise TsgcWSHTTPServer sur une version Professional et se rabat sur TIdHTTPServer sinon, définit ResponseNo := 200 et ContentType := 'text/html; charset=utf-8', et affecte la chaîne à ContentText.
Le verrou est SGC_PACK_HTML, défini à la ligne 871 de sgcVer.inc, dans le bloc {$IFDEF SGC_EDT_ALL} qui va de la ligne 870 à la ligne 874. Dans cette arborescence source, c'est l'édition All-Access qui le définit. sgcHTML est aussi vendu comme produit à part entière avec son propre installeur, consulte donc la page des tarifs de sgcHTML pour connaître les licences actuelles plutôt que de les déduire du define.
Non, et c'est voulu. SGC_HTML est défini à la ligne 885 dans {$IFNDEF ANDROID} à la ligne 883 et {$IFNDEF IOS} à la ligne 884, donc sur ces cibles chaque unité sgcHTML se compile en unité vide. C'est une bibliothèque côté serveur : le téléphone reçoit du HTML via le réseau, c'est pourquoi la cible mobile n'a pas besoin du moteur de rendu. Windows, macOS et Linux sont tous pris en charge.
Non. La bibliothèque émet du balisage Bootstrap 5 et des attributs htmx, et c'est htmx qui permet à un bouton de renvoyer des données et de remplacer une partie de la page sans rechargement. Tu décris l'interaction en Pascal et les attributs sont générés pour toi. Tu peux toujours ajouter ton propre script quand tu le souhaites, via CustomHead et BodyEndHTML.
Oui. Layout prend un TsgcHTMLSiteLayout, dont les membres sont slSidebarLeft, slSidebarRight, slTopNav, slTopNavSidebarLeft, slIconRail et slOffcanvas, et sa valeur par défaut est slTopNavSidebarLeft. Preset prend un TsgcHTMLSitePreset dont les membres incluent spAdmin, spDashboard, spPortal, spDocs, spLanding et spApp. Les couleurs et le mode clair ou sombre se trouvent sur l'objet Theme.
Quand tu construis la page avec des nœuds, oui, car le nœud écrit le texte et l'échappe. Le risque apparaît quand tu contournes les nœuds et concatènes toi-même du balisage, par exemple via AddContent avec une chaîne construite à partir d'une saisie utilisateur. Privilégie les unités de nœuds pour tout ce qui transporte des données utilisateur.
Le téléchargement livre plus de quinze démos d'exécution sous Demos\60.HTML\01.RunTime, dont un tableau de bord ERP, un helpdesk, un point de vente, un entrepôt, une application de rapports et une application de service sur le terrain. La galerie propose une courte vidéo de chacune.
Meilleur rapport qualité-prix : All-AccessTous les produits eSeGeCe, Support Premium inclus, à partir de €1,059/an.
Voir les tarifs All-Access

Prêt à construire une interface web en Pascal ?

Télécharge l'essai et lance la démo Site avant d'écrire une ligne de balisage.