Dört Yeni sgcHTML Bileşeni, Beş Yeni Canlı Demo

sgcWebSockets 2026.9.0, dört yeni sgcHTML bileşeni ekliyor ve bunları tek başlarına göstermek yerine, bunlarla beş eksiksiz uygulama oluşturduk: bir depo yönetim sistemi, bir satış noktası kasası, bir raporlama ve analiz portalı, bir çok kiracılı SaaS kontrol düzlemi ve bir saha hizmetleri sevkiyat uygulaması. Beşi de bugün eSeGeCe demo sunucusunda, zaten orada bulunan ERP, Admin CRUD, Canlı İzleme, Müşteri Portalı ve Yardım Masası demolarının yanında canlı olarak çalışıyor.

Yeni bileşenler şunlar: CameraScanner (tarayıcının kendi kamerası üzerinden canlı barkod ve QR tarama, eklenecek bir kütüphane yok), NumPad (satış noktası için oluşturulmuş dokunmatik sayısal tuş takımı), CommandPalette (kendi uygulamanız için Ctrl+K hızlı başlatıcı deseni) ve EmptyState (bir grid veya arama sonucunun gösterilecek bir şey olmadığında gösterdiği panel). Bu yazı her birini tek tek ele alıyor, ardından onları kullanan beş demoya geçiyor.

CameraScanner — eklenecek kütüphanesiz barkod ve QR tarama

TsgcHTMLComponent_CameraScanner, tarayıcının kamerasını açar ve barkodları ile QR kodlarını tarayıcının kendi yerel BarcodeDetector API'si ile çözer. Paket içine gömülü bir çözücü yoktur ve bir CDN'den hiçbir şey çekilmez: BarcodeDetector kullanılamadığında panel bunu bildirir ve zaten buna hiç bağımlı olmayan manuel giriş ve fotoğraf yakalama üzerinden çalışmaya devam eder. Kamera her çıkış yolunda kapatılır (sekme gizlenmesi, sayfadan uzaklaşma, geri düğmesi), böylece kamera gösterge ışığı her zaman söner.

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 — asla yanlış ondalık ayırıcı göndermeyen bir tuş takımı

TsgcHTMLComponent_NumPad, satış noktası girişi için oluşturulmuş dokunmatik sayısal ve para birimi tuş takımıdır. Öne çıkarılmaya değer mühendislik noktası şu: bu bileşenin yazdığı her sayı, gerek işaretlemeye gerek kendi betiğine, tarayıcının bölgesel ayarlarına uyan bir yordamdan değil, yerelden bağımsız bir biçimlendiriciden geçer. Gönderdiği gizli alan her zaman 12,50 değil 12.50 gibi bir sayı taşır, böylece aynı form İspanyolca, Almanca veya İngilizce bir tarayıcıdan aynı baytları gönderir.

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 — kendi uygulamanız için Ctrl+K

TsgcHTMLComponent_CommandPalette, VS Code, Slack ve Linear'dan aşina olduğumuz Ctrl+K / Cmd+K kaplama başlatıcısıdır: kısayol tuşu onu açana kadar gizlidir, Esc veya arka plana tıklamayla kapanır, yazdıkça bir alt dize geçişinin ardından bulanık bir alt dizi geçişiyle filtrelenir, böylece nu yine de “New User” sonucunu bulur. Girdiler istemci tarafında filtrelenmek üzere JSON olarak tarayıcıya gönderilmez, sunucuda işaretleme olarak render edilir, böylece her başlık tam olarak bir kez HTML olarak kodlanır.

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 — henüz burada bir şey olmadığını söylemenin doğru yolu

TsgcHTMLComponent_EmptyState, bir grid, bir liste veya bir arama sonucunun satırı olmadığında gösterdiği paneldir: bir simge veya bir görsel, bir başlık, bir açıklama ve en fazla iki düğme. Hiç betik üretmez, bu da onu bir sayfanın ihtiyaç duyduğu kadar çok kez bant dışı bir parça olarak göndermeyi güvenli kılar. Aktarılmaya değer bir güvenlik notu: Icon ya bir CSS simge sınıfını ya da satır içi SVG işaretlemesini kabul eder ve satır içi işaretleme dar bir güvenlik denetiminden sonra olduğu gibi yayınlanır, bu yüzden asla son kullanıcı girdisine bağlanmamalıdır; bunun yerine güvenilmeyen metni her zaman HTML olarak kodlanan Title ve Description'a bağlayın.

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.');

Onlarla Oluşturulmuş Beş Yeni Demo

Kod örnekleri bir bileşenin ne işe yaradığını göstermede ancak bu kadar yardımcı olur. Bu yüzden dört yeni bileşenin yanında, her biri kendi oturum açma ekranına, gerçek bir SQLite veritabanına ve yazdırılabilir raporlara sahip, tamamen sgcHTML ile oluşturulmuş beş eksiksiz uygulama geliştirdik. Beşi de şu anda eSeGeCe demo sunucusunda canlı olarak çalışıyor.

Depo (WMS) — teslim alma, toplama, paketleme, sevkiyat ve döngü sayımları, ayrıca bir barkodu doğrudan toplama listesine taramak için CameraScanner kullanan bir el terminali. Canlı demoyu aç →

Satış Noktası — NumPad etrafında kurulmuş bir perakende kasası: ürünler, promosyonlar, müşteriler, vardiya kapanışı ve satış raporlama. Canlı demoyu aç →

Raporlar & Analizler — satış, kâr marjı ve operasyon panoları, bir pivot oluşturucu, kaydedilmiş görünümler ve zamanlanmış dışa aktarma işleri, ekrandaki sayıların gerçek olması için yaklaşık 25.000 sipariş satırıyla dolduruldu. Canlı demoyu aç →

Çok Kiracılı SaaS — kiracı katılımı, faturalama, ekip ve rol yönetimi (aynı RolesPermissions bileşeni üzerine kurulu, artık WebSocket kanalının yanı sıra düz form gönderimi seçeneğiyle) ve planlar ile özellik bayrakları için bir platform yönetici konsolu. Canlı demoyu aç →

Saha Hizmetleri — iş sevkiyatı, canlı bir teknisyen haritası, Gantt zamanlaması, müşteriler, varlıklar ve parçalar, bir parçayı doğrudan bir işe taramak için yine CameraScanner ile. Canlı demoyu aç →

Deneyin

Yukarıdaki beşi de dahil olmak üzere on canlı demonun tümüne üst gezinmede sgcHTML › Çevrimiçi Demolar altından ulaşılabilir, CameraScanner, NumPad, CommandPalette ve EmptyState için eksiksiz özellik, yöntem ve olay referansları ise çevrimiçi yardımda yer alır.

Sorularınız, geri bildiriminiz mi var ya da belirli bir demo senaryosunun eklenmesini mi istiyorsunuz? Bizimle iletişime geçin — kodu yazan kişilerden bir yanıt alacaksınız.