sgcWebSockets 2026.9.0 wprowadza cztery nowe komponenty sgcHTML, a zamiast pokazywać je w oderwaniu od kontekstu, zbudowaliśmy z ich użyciem pięć kompletnych aplikacji: system zarządzania magazynem, kasę punktu sprzedaży, portal raportowo-analityczny, panel sterowania wielodostępnym SaaS oraz aplikację dyspozytorską serwisu terenowego. Wszystkie pięć działa dziś na żywo na serwerze demo eSeGeCe, obok istniejących już demo ERP, Admin CRUD, Live Monitor, Customer Portal i Helpdesk.
Nowe komponenty to CameraScanner (skanowanie kodów kreskowych i QR na żywo przez wbudowaną kamerę przeglądarki, bez dodawania jakiejkolwiek biblioteki), NumPad (dotykowa klawiatura numeryczna zbudowana z myślą o punkcie sprzedaży), CommandPalette (wzorzec szybkiego uruchamiania Ctrl+K dla własnej aplikacji) oraz EmptyState (panel wyświetlany przez siatkę lub wynik wyszukiwania, gdy nie ma nic do pokazania). Ten wpis omawia każdy z nich, a następnie pięć demo, w których zostały wykorzystane.
CameraScanner — skanowanie kodów kreskowych i QR bez dodawania biblioteki
TsgcHTMLComponent_CameraScanner otwiera kamerę przeglądarki i dekoduje kody kreskowe oraz kody QR za pomocą natywnego API BarcodeDetector samej przeglądarki. Nie ma tu żadnego dołączonego dekodera ani niczego pobieranego z CDN: tam, gdzie BarcodeDetector nie jest dostępny, panel informuje o tym i nadal działa dzięki ręcznemu wprowadzaniu danych oraz przechwytywaniu zdjęć, które od początku nie zależały od tego API. Kamera jest zawsze wyłączana przy każdej ścieżce wyjścia (ukrycie karty, opuszczenie strony, przycisk wstecz), dzięki czemu wskaźnik kamery zawsze gaśnie.
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 — klawiatura, która nigdy nie wysyła złego separatora dziesiętnego
TsgcHTMLComponent_NumPad to dotykowa klawiatura numeryczna i walutowa zbudowana do wprowadzania danych w punkcie sprzedaży. Warty podkreślenia szczegół inżynierski: każda liczba zapisywana przez ten komponent, zarówno w znacznikach, jak i we własnym skrypcie, przechodzi przez formater niezależny od ustawień regionalnych, nigdy przez procedurę uwzględniającą regionalne ustawienia przeglądarki. Ukryte pole, które komponent wysyła, zawsze niesie liczbę w postaci 12.50, nigdy 12,50, dzięki czemu ten sam formularz wysyła te same bajty z przeglądarki hiszpańskiej, niemieckiej czy angielskiej.
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 dla własnej aplikacji
TsgcHTMLComponent_CommandPalette to nakładkowy launcher Ctrl+K / Cmd+K znany z VS Code, Slacka i Lineara: ukryty, dopóki nie otworzy go skrót klawiszowy, zamykany klawiszem Esc lub kliknięciem w tło, filtrowany w trakcie pisania najpierw przejściem dopasowującym podciąg, a następnie rozmytym przejściem dopasowującym podsekwencję, dzięki czemu nu nadal znajduje “New User”. Pozycje są renderowane jako znaczniki po stronie serwera, a nie wysyłane do przeglądarki jako JSON do filtrowania po stronie klienta, więc każdy podpis jest kodowany do HTML dokładnie raz.
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 — właściwy sposób, by powiedzieć, że nic tu jeszcze nie ma
TsgcHTMLComponent_EmptyState to panel wyświetlany przez siatkę, listę lub wynik wyszukiwania, gdy nie ma żadnych wierszy: ikona lub obrazek, tytuł, opis oraz maksymalnie dwa przyciski. Nie emituje żadnego skryptu, dzięki czemu można go bezpiecznie wysyłać jako fragment out-of-band tyle razy, ile potrzebuje strona. Uwaga dotycząca bezpieczeństwa, którą warto zapamiętać: Icon akceptuje albo klasę ikony CSS, albo osadzony znacznik SVG, a osadzony znacznik jest emitowany dosłownie po wąskiej kontroli bezpieczeństwa, więc nigdy nie powinien być powiązany z danymi wprowadzanymi przez użytkownika końcowego; niezaufany tekst należy wiązać zamiast tego z Title i Description, które zawsze są kodowane do 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.');Pięć nowych demo, zbudowanych z ich użyciem
Przykłady kodu tylko do pewnego stopnia pokazują, do czego służy dany komponent. Dlatego oprócz czterech nowych komponentów zbudowaliśmy pięć kompletnych aplikacji, każda z własnym logowaniem, prawdziwą bazą danych SQLite i drukowalnymi raportami, w całości przy użyciu sgcHTML. Wszystkie pięć działa teraz na żywo na serwerze demo eSeGeCe.
Magazyn (WMS) — przyjęcia, kompletacja, pakowanie, wysyłka i inwentaryzacje cykliczne, a także terminal ręczny, który wykorzystuje CameraScanner do zeskanowania kodu kreskowego wprost na listę kompletacyjną. Otwórz demo na żywo →
Punkt sprzedaży — kasa detaliczna zbudowana wokół NumPad: produkty, promocje, klienci, zamknięcie zmiany i raportowanie sprzedaży. Otwórz demo na żywo →
Raporty i analizy — pulpity sprzedaży, marży i operacji, kreator tabel przestawnych, zapisane widoki oraz zaplanowane zadania eksportu, zasilone około 25 000 pozycji zamówień, dzięki czemu liczby na ekranie są prawdziwe. Otwórz demo na żywo →
Wielodostępny SaaS — wdrażanie najemców, rozliczenia, zarządzanie zespołami i rolami (zbudowane na tym samym komponencie RolesPermissions, teraz z opcją zwykłego wysyłania formularza obok kanału WebSocket) oraz konsola administracyjna platformy do zarządzania planami i flagami funkcji. Otwórz demo na żywo →
Serwis terenowy — dyspozytorstwo zleceń, mapa techników na żywo, harmonogramowanie Gantt, klienci, zasoby i części, ponownie z CameraScanner do skanowania części wprost na zlecenie. Otwórz demo na żywo →
Wypróbuj je
Wszystkie dziesięć demo na żywo, w tym pięć powyższych, jest dostępnych z górnej nawigacji pod sgcHTML › Demo online, a pełna dokumentacja właściwości, metod i zdarzeń dla CameraScanner, NumPad, CommandPalette i EmptyState znajduje się w pomocy online.
Masz pytania, uwagi lub chcesz, aby dodać konkretny scenariusz demo? Skontaktuj się z nami — odpowiedź otrzymasz od osób, które napisały ten kod.