sgcWebSockets 2026.9.0 erweitert um vier neue sgcHTML-Komponenten, und statt sie isoliert vorzuführen, haben wir damit fünf vollständige Anwendungen gebaut: ein Lagerverwaltungssystem, ein Kassensystem, ein Berichts- und Analyseportal, eine Multi-Tenant-SaaS-Steuerzentrale und eine Außendienst-Dispositionsanwendung. Alle fünf laufen schon heute live auf dem eSeGeCe-Demoserver, zusammen mit den ERP-, Admin-CRUD-, Live-Monitor-, Kundenportal- und Helpdesk-Demos, die dort bereits vorhanden waren.
Die neuen Komponenten sind CameraScanner (Live-Barcode- und QR-Scanning über die Kamera des Browsers, ohne zusätzliche Bibliothek), NumPad (ein Touch-Zahlenblock für den Point-of-Sale-Einsatz), CommandPalette (das Ctrl+K-Schnellstart-Muster für die eigene Anwendung) und EmptyState (das Panel, das ein Grid oder ein Suchergebnis anzeigt, wenn es nichts darzustellen gibt). Dieser Beitrag stellt jede einzeln vor und zeigt anschließend die fünf Demos, in denen sie zum Einsatz kommen.
CameraScanner — Barcode- und QR-Scanning ohne zusätzliche Bibliothek
TsgcHTMLComponent_CameraScanner öffnet die Kamera des Browsers und dekodiert Barcodes und QR-Codes mit der nativen BarcodeDetector-API des Browsers selbst. Es gibt keinen mitgelieferten Decoder und nichts wird von einem CDN geladen: Ist BarcodeDetector nicht verfügbar, weist das Panel darauf hin und funktioniert weiter über manuelle Eingabe und Fotoaufnahme, die ohnehin nie davon abhingen. Die Kamera wird bei jedem Verlassen abgeschaltet (Tab ausgeblendet, Seite verlassen, Zurück-Taste), sodass die Kamera-Anzeigeleuchte immer erlischt.
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 — ein Zahlenblock, der nie das falsche Dezimaltrennzeichen sendet
TsgcHTMLComponent_NumPad ist ein Touch-Zahlen- und Währungsblock für die Eingabe am Point of Sale. Der technisch bemerkenswerte Punkt: Jede Zahl, die diese Komponente ausgibt, ins Markup wie in ihr eigenes Skript, durchläuft einen locale-unabhängigen Formatierer, niemals eine Routine, die sich nach den regionalen Einstellungen des Browsers richtet. Das versteckte Feld, das übertragen wird, enthält immer eine Zahl wie 12.50, nie 12,50, sodass dasselbe Formular aus einem spanischen, deutschen oder englischen Browser dieselben Bytes sendet.
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 für die eigene Anwendung
TsgcHTMLComponent_CommandPalette ist der Ctrl+K-/Cmd+K-Overlay-Starter, wie man ihn von VS Code, Slack und Linear kennt: unsichtbar, bis der Hotkey ihn öffnet, geschlossen per Esc oder Klick auf den Hintergrund, gefiltert während der Eingabe mit einem Substring-Durchlauf gefolgt von einem unscharfen Subsequenz-Durchlauf, sodass nu weiterhin “New User” findet. Die Einträge werden serverseitig als Markup gerendert und nicht als JSON an den Browser geschickt, um dort clientseitig gefiltert zu werden, sodass jede Beschriftung genau einmal HTML-kodiert wird.
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 — die richtige Art zu sagen, dass hier noch nichts ist
TsgcHTMLComponent_EmptyState ist das Panel, das ein Grid, eine Liste oder ein Suchergebnis anzeigt, wenn es keine Zeilen gibt: ein Icon oder ein Bild, ein Titel, eine Beschreibung und bis zu zwei Schaltflächen. Es gibt überhaupt kein Skript aus, weshalb es gefahrlos beliebig oft als Out-of-Band-Fragment eingefügt werden kann. Ein Sicherheitshinweis, den man mitnehmen sollte: Icon akzeptiert entweder eine CSS-Icon-Klasse oder Inline-SVG-Markup, und Inline-Markup wird nach einer schmalen Sicherheitsprüfung unverändert ausgegeben, sollte also niemals an Benutzereingaben gebunden werden; nicht vertrauenswürdigen Text stattdessen an Title und Description binden, die beide immer HTML-kodiert werden.
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.');Fünf neue Demos, damit gebaut
Codebeispiele zeigen nur begrenzt, wofür eine Komponente gedacht ist. Deshalb haben wir zusätzlich zu den vier neuen Komponenten fünf vollständige Anwendungen gebaut, jede mit eigenem Login, einer echten SQLite-Datenbank und druckbaren Berichten, vollständig mit sgcHTML. Alle fünf laufen gerade jetzt live auf dem eSeGeCe-Demoserver.
Lager (WMS) — Wareneingang, Kommissionierung, Verpackung, Versand und Zykluszählungen, dazu ein Handheld-Terminal, das mit CameraScanner einen Barcode direkt in die Pickliste scannt. Live-Demo öffnen →
Kassensystem — eine Ladenkasse rund um NumPad: Produkte, Aktionen, Kunden, Schichtabschluss und Verkaufsberichte. Live-Demo öffnen →
Berichte & Analysen — Dashboards für Umsatz, Marge und Betrieb, ein Pivot-Builder, gespeicherte Ansichten und geplante Exportjobs, befüllt mit rund 25.000 Auftragspositionen, damit die Zahlen auf dem Bildschirm echt sind. Live-Demo öffnen →
Multi-Tenant-SaaS — Mandanten-Onboarding, Abrechnung, Team- und Rollenverwaltung (aufgebaut auf derselben RolesPermissions-Komponente, jetzt mit einer Plain-Form-Submit-Option neben ihrem WebSocket-Kanal) und eine Plattform-Admin-Konsole für Pläne und Feature-Flags. Live-Demo öffnen →
Außendienst — Auftragsdisposition, eine Live-Technikerkarte, Gantt-Terminplanung, Kunden, Anlagen und Ersatzteile, wieder mit CameraScanner zum direkten Scannen eines Teils auf einen Auftrag. Live-Demo öffnen →
Jetzt ausprobieren
Alle zehn Live-Demos, einschließlich der fünf oben, sind über die obere Navigation unter sgcHTML › Online-Demos verlinkt, und die vollständige Referenz aller Eigenschaften, Methoden und Ereignisse von CameraScanner, NumPad, CommandPalette und EmptyState findet sich in der Online-Hilfe.
Fragen, Feedback oder ein bestimmtes Demo-Szenario gewünscht? Kontakt aufnehmen — Sie erhalten eine Antwort von den Leuten, die den Code geschrieben haben.