sgcWebSockets 2026.9.0 ajoute quatre nouveaux composants sgcHTML, et plutôt que de les montrer isolément, nous avons construit avec eux cinq applications complètes : un système de gestion d'entrepôt, une caisse de point de vente, un portail de reporting et d'analyse, un plan de contrôle SaaS multi-tenant et une application de gestion des interventions terrain. Ces cinq applications fonctionnent toutes en direct dès aujourd'hui sur le serveur de démonstration eSeGeCe, aux côtés des démos ERP, Admin CRUD, Live Monitor, Customer Portal et Helpdesk déjà en place.
Les nouveaux composants sont CameraScanner (numérisation de codes-barres et QR codes en direct via la caméra du navigateur, sans bibliothèque à ajouter), NumPad (un pavé numérique tactile conçu pour le point de vente), CommandPalette (le modèle de lanceur rapide Ctrl+K, pour votre propre application) et EmptyState (le panneau qu'une grille ou un résultat de recherche affiche lorsqu'il n'y a rien à montrer). Cet article passe en revue chacun d'eux, puis les cinq démos qui les mettent en œuvre.
CameraScanner — numérisation de codes-barres et QR codes, sans bibliothèque à ajouter
TsgcHTMLComponent_CameraScanner ouvre la caméra du navigateur et décode les codes-barres et QR codes à l'aide de l'API native BarcodeDetector du navigateur lui-même. Il n'y a pas de décodeur embarqué ni rien de chargé depuis un CDN : lorsque BarcodeDetector n'est pas disponible, le panneau l'indique et continue de fonctionner via la saisie manuelle et la capture photo, qui n'en ont jamais dépendu. La caméra est arrêtée sur chaque chemin de sortie (onglet masqué, navigation hors de la page, bouton retour), de sorte que le voyant de la caméra s'éteint toujours.
uses
sgcHTML_Component_CameraScanner;
var
oScanner: TsgcHTMLComponent_CameraScanner;
begin
oScanner := TsgcHTMLComponent_CameraScanner.Create(nil);
try
oScanner.ScannerID := 'receiving_scan';
oScanner.Mode := smBoth; // scan barcodes AND capture a photo
oScanner.Formats := 'qr_code,ean_13,code_128';
oScanner.FieldName := 'sku';
oScanner.ContinuousScan := True;
oScanner.BeepOnScan := True;
WebModule.Response := oScanner.HTML; // camera panel + hidden fields + inline script
finally
oScanner.Free;
end;
end;NumPad — un pavé numérique qui n'envoie jamais le mauvais séparateur décimal
TsgcHTMLComponent_NumPad est un pavé numérique et monétaire tactile conçu pour la saisie au point de vente. Le point technique à souligner : chaque nombre que ce composant écrit, dans le balisage comme dans son propre script, passe par un formateur indépendant de la locale, jamais par une routine qui respecte les paramètres régionaux du navigateur. Le champ caché qu'il envoie porte toujours un nombre comme 12.50, jamais 12,50, de sorte que le même formulaire soumet les mêmes octets depuis un navigateur espagnol, allemand ou anglais.
uses
sgcHTML_Component_NumPad;
var
oPad: TsgcHTMLComponent_NumPad;
begin
oPad := TsgcHTMLComponent_NumPad.Create(nil);
try
oPad.PadID := 'till_amount';
oPad.FieldName := 'amount';
oPad.Mode := npCurrency;
oPad.CurrencySymbol := '$';
oPad.DecimalPlaces := 2;
oPad.QuickAmounts.CommaText := '5,10,20,50'; // tender shortcut buttons
WebModule.Response := oPad.HTML; // display + calculator-style keys + quick amounts
finally
oPad.Free;
end;
end;CommandPalette — Ctrl+K pour votre propre application
TsgcHTMLComponent_CommandPalette est le lanceur en overlay Ctrl+K / Cmd+K familier de VS Code, Slack et Linear : masqué jusqu'à ce que le raccourci l'ouvre, fermé par Esc ou un clic sur l'arrière-plan, filtré au fur et à mesure de la frappe avec une première passe par sous-chaîne suivie d'une passe de correspondance floue par sous-séquence, si bien que nu trouve toujours “New User”. Les entrées sont rendues sous forme de balisage côté serveur, et non envoyées au navigateur en JSON pour un filtrage côté client, si bien que chaque légende est encodée en HTML exactement une fois.
uses
sgcHTML_Component_CommandPalette;
var
oPalette: TsgcHTMLComponent_CommandPalette;
begin
oPalette := TsgcHTMLComponent_CommandPalette.Create(nil);
try
oPalette.PaletteID := 'app_commands';
oPalette.AddItem('New Invoice', '/invoices/new', 'invoice:new', 'Create', 'Ctrl+N');
oPalette.AddItem('Customer Search', '/customers', '', 'Navigate');
with oPalette.Items.Add do
begin
Caption := 'Export Report';
Icon := 'bi bi-download';
DataAction := 'report:export';
Category := 'Actions';
end;
WebModule.Response := oPalette.HTML; // hidden overlay + inline script
finally
oPalette.Free;
end;
end;EmptyState — la bonne façon de dire qu'il n'y a encore rien ici
TsgcHTMLComponent_EmptyState est le panneau qu'une grille, une liste ou un résultat de recherche affiche lorsqu'il n'a aucune ligne : une icône ou une image, un titre, une description et jusqu'à deux boutons. Il n'émet aucun script, ce qui permet de le pousser sans risque en fragment hors bande autant de fois que la page en a besoin. Une remarque de sécurité à retenir : Icon accepte soit une classe d'icône CSS, soit du balisage SVG en ligne, et le balisage en ligne est émis tel quel après une vérification de sécurité restreinte, il ne doit donc jamais être lié à une saisie d'utilisateur final ; liez plutôt le texte non fiable à Title et Description, qui sont tous deux systématiquement encodés en HTML.
uses
sgcHTML_Enums, sgcHTML_Component_EmptyState;
var
oEmpty: TsgcHTMLComponent_EmptyState;
begin
oEmpty := TsgcHTMLComponent_EmptyState.Create(nil);
try
oEmpty.Icon := 'bi bi-inbox';
oEmpty.Title := 'No results';
oEmpty.Description := 'Try a different search, or clear your filters.';
oEmpty.ActionCaption := 'Clear filters';
oEmpty.ActionHref := '/orders';
oEmpty.ActionStyle := bsPrimary;
WebModule.Response := oEmpty.HTML;
finally
oEmpty.Free;
end;
end;
// Or the one-line static helper for the simple case:
WebModule.Response := TsgcHTMLComponent_EmptyState.Build('No results', 'Try a different search.');Cinq nouvelles démos, construites avec eux
Les exemples de code ne suffisent que jusqu'à un certain point pour montrer à quoi sert un composant. C'est pourquoi, en plus des quatre nouveaux composants, nous avons construit cinq applications complètes, chacune avec sa propre connexion, une véritable base de données SQLite et des rapports imprimables, entièrement avec sgcHTML. Les cinq fonctionnent en direct dès maintenant sur le serveur de démonstration eSeGeCe.
Entrepôt (WMS) — réception, prélèvement, emballage, expédition et inventaires tournants, ainsi qu'un terminal portable qui utilise CameraScanner pour scanner un code-barres directement dans la liste de prélèvement. Ouvrir la démo en direct →
Point de vente — une caisse de vente au détail construite autour de NumPad : produits, promotions, clients, clôture de caisse et reporting des ventes. Ouvrir la démo en direct →
Rapports & Analyses — tableaux de bord des ventes, des marges et des opérations, un générateur de tableaux croisés dynamiques, des vues enregistrées et des tâches d'export planifiées, alimentés par environ 25 000 lignes de commande afin que les chiffres à l'écran soient réels. Ouvrir la démo en direct →
SaaS multi-tenant — intégration des locataires, facturation, gestion des équipes et des rôles (construite sur le même composant RolesPermissions, désormais avec une option de soumission de formulaire classique en plus de son canal WebSocket) et une console d'administration de la plateforme pour les plans et les indicateurs de fonctionnalités. Ouvrir la démo en direct →
Service terrain — répartition des interventions, une carte en direct des techniciens, une planification Gantt, les clients, les équipements et les pièces, avec de nouveau CameraScanner pour scanner une pièce directement sur une intervention. Ouvrir la démo en direct →
Essayez-les
Les dix démos en direct, y compris les cinq ci-dessus, sont accessibles depuis la navigation supérieure sous sgcHTML › Démos en ligne, et les références complètes des propriétés, méthodes et événements de CameraScanner, NumPad, CommandPalette et EmptyState se trouvent dans l'aide en ligne.
Des questions, des retours, ou vous souhaitez qu'un scénario de démo spécifique soit ajouté ? Contactez-nous — vous recevrez une réponse des personnes qui ont écrit le code.