sgcUI Realtime Arayüz Paketi: Delphi, C++Builder ve .NET için Varlık, Bildirimler, Etkinlik ve Canlı Günlükler

Operasyon konsolları, yardım masaları, yönetim panelleri ve işlem ekranlarının hepsi, veriler akmaya devam ederken aynı sorulara yanıt vermek zorundadır: şu anda kim çevrimiçi, neye dikkat etmem gerekiyor, kim neyi değiştirdi ve şu anda ne başarısız oluyor. sgcUI Realtime arayüz paketi bunların her birini bir model ve bir dizi yerel denetimle yanıtlar ve hepsini tek tür bir JSON mesajıyla canlı bir akışa bağlar.

Realtime UI paketi bir dakikada: tek bir JSON mesajıyla beslenen çevrimiçi durum, bildirimler, etkinlik ve canlı günlükler. YouTube'da da izleyin.

Realtime arayüz paketi ayrı bir ürün değildir. Her parça, genişlettiği sgcUI ürününde bulunur: sgcUICore, sgcNavigation, sgcToolbar, sgcDashboard ve sgcGrid. Zaten kullandığınız birimlerde, paketlerde ve NuGet paketlerinde yer alır ve o ürünün sürümünü izler. Delphi ve C++Builder için VCL ve FireMonkey üzerinde, .NET için WinForms, WPF ve Avalonia üzerinde çalışır; açık, koyu ve yüksek karşıtlıklı temaları, sağdan sola düzenleri ve 12 dili destekler.

Varlık: Kim Çevrimiçi

TsgcUIPresenceModel, uygulamanızın kullanıcılarını adları, baş harfleri, renkleri, avatar görüntüleri, durumları (çevrimiçi, uzakta, meşgul veya çevrimdışı), durum metinleri ve son görülme zamanlarıyla tutar. Denetimler modeli okur ve bir durum değiştiğinde kendiliğinden yeniden çizilir.

• Avatar (TsgcVCLAvatar): baş harfler veya durum noktalı bir resim.
• Avatar grubu (TsgcVCLAvatarGroup): bir ekibin üst üste binen avatarları; MaxVisible değerinden sonra “+N” çipinde birleşir.
• Varlık göstergesi (TsgcVCLPresenceIndicator): ekip listeleri için metniyle birlikte bir durum noktası.
• sgcChat kullanıcıları artık aynı zamanda varlık kullanıcılarıdır; böylece bir sohbet ile bir ekip listesi aynı kişileri paylaşır.

uses
  sgcUICore_Presence, sgcUICore_Presence_VCL;

procedure TfrmMain.LoadTeam;
begin
  // usually set in the Object Inspector
  sgcVCLAvatarGroup1.Model := FPresence;
  sgcVCLAvatarGroup1.MaxVisible := 5;

  FPresence.AddOrUpdate('u1', 'Alex Morgan');
  FPresence.AddOrUpdate('u2', 'Bianca Ruiz', uprAway, 'Back at 3');
  // later, when the status changes
  FPresence.SetStatus('u1', uprBusy, 'In a meeting');
end;

Bildirimler: Toast'lar, Gelen Kutusu ve Zil Rozeti

TsgcNotificationModel, geçerli kullanıcının bildirimlerini başlık, gövde, önem derecesi, zaman, okunma durumu, eylemler ve grupla birlikte tutar ve okunmamış sayısını izler. Bunu dört parça gösterir:

• Toast'lar (TsgcVCLToastManager): formun veya ekranın bir köşesinde üst üste dizilen, odağı asla almayan, kendiliğinden kaybolan, fare üzerindeyken duraklayan ve eylem düğmeleri sunan toast bildirimleri. Önem derecesi renkleri temadan gelir.
• Gelen kutusu (TsgcVCLNotificationInbox): güne göre gruplanmış sanallaştırılmış bir liste; Tümü ve Okunmamış filtreleri, tümünü okundu işaretleme, kapatma ve eylemler sunar.
• Tercihler (TsgcVCLNotificationPrefsEditor): kategorilerin ve kanalların bir ızgarası: uygulama içi, toast, e-posta ve push. Toast yöneticisi yalnızca kullanıcının istediklerini gösterir.
• Zil rozeti (TsgcToolbarBadgeLink): okunmamış sayısı bir araç çubuğu öğesinin rozeti olarak, 99'un üzerinde “99+” ve Kayıtlı sürümünde bir ribbon öğesinin rozeti olarak gösterilir.

uses
  sgcNavigation_Notification, sgcNavigation_Toast_VCL,
  sgcNavigation_Inbox_VCL, sgcToolbar_BadgeLink;

procedure TfrmMain.SetupNotifications;
begin
  sgcVCLToastManager1.Model := FNotifications;
  sgcVCLToastManager1.Preferences := FPreferences;
  sgcVCLNotificationInbox1.Model := FNotifications;
  // the unread count as the badge of the first toolbar item
  sgcToolbarBadgeLink1.Source := FNotifications;
  sgcToolbarBadgeLink1.Target := sgcVCLToolbar1;
  sgcToolbarBadgeLink1.ItemIndex := 0;

  FNotifications.Add('Deployed billing', 'Version 1.8 is live in 3 regions',
    nsvSuccess, 'deploy');
end;

Etkinlik Akışı ve Denetim Kaydı: Kim Ne Yaptı

TsgcDashboardActivityModel kimin neyi ne zaman yaptığını kaydeder: eylemi yapan, bir fiil, nesne, bir sonuç ve denetim amacıyla değiştirilen her alanın önceki ve sonraki değeri. Eylemi yapanların adları, renkleri ve avatarları varlık modelinden gelir; böylece akış ile ekip listesi her zaman tutarlı olur.

• Etkinlik akışı (TsgcVCLActivityFeed): güne göre gruplanmış, 12 dilde göreli zamanlar içeren bir zaman çizelgesi; eylemi yapana, fiile, nesne türüne ve metne göre filtreler ve daha eskileri yükleyen sayfalama.
• Denetim kaydı (TsgcVCLAuditTrail): aynı öğeler, değiştirilen her alanı eski ve yeni değeriyle göstermek için genişleyen satırlar olarak.
• Pano kutucukları: sgcDashboard için arama kutulu Etkinlik Akışı ve Denetim Kaydı kutucukları; pano düzeninde saklanır.

uses
  sgcDashboard_Activity, sgcDashboard_Activity_VCL;

procedure TfrmMain.RecordApproval;
var
  oItem: TsgcDashboardActivity;
begin
  FActivity.Presence := FPresence; // actor names, colours and avatars
  sgcVCLActivityFeed1.Model := FActivity;
  sgcVCLAuditTrail1.Model := FActivity;

  oItem := TsgcDashboardActivity.Create;
  oItem.Id := 'a18';
  oItem.Time := FActivity.NowUTC;
  oItem.ActorId := 'u2';
  oItem.Verb := 'approved';
  oItem.ObjectName := 'Change request 102';
  oItem.Outcome := 'success';
  oItem.Changes.Add('status', 'pending', 'approved');
  // the model owns the item and inserts it by Time
  FActivity.AddActivity(oItem);
end;

Canlı Günlük Görüntüleyici: Şu Anda Ne Başarısız Oluyor

TsgcGridLogModel, trace düzeyinden fatal düzeyine kadar seviyeleri, bir kaynağı, bir mesajı ve özellikleri olan günlük satırlarının iş parçacığı güvenli bir halka tamponudur; seviye, kaynak ve metin filtreleri ile metin, JSON ve CSV dışa aktarımı sunar. Herhangi bir iş parçacığı ona ekleme yapabilir; değişiklikler ekrana toplu olarak ulaşır. TsgcGridLogLink herhangi bir sgcGrid'i günlük görüntüleyiciye dönüştürür.

• Seviye renkleri temadan gelir; metin veya düzenli ifade vurguları kullanılabilir.
• Follow tail en yeni satırı görünümde tutar ve kullanıcı okumak için yukarı kaydırdığında kendiliğinden durur.
• Pause ve Resume, ayrıca seçili satırlar için Copy lines.
• Yeni satırlar gelirken ve en eskiler halkadan çıkarken görünen satırlar yerinde kalır.

uses
  sgcGrid_Log, sgcGrid_LogLink;

procedure TfrmMain.SetupLog;
begin
  FLog.Capacity := 100000;
  sgcGridLogLink1.Model := FLog;
  sgcGridLogLink1.Grid := sgcVCLGrid1;
  sgcGridLogLink1.FollowTail := True;
  sgcGridLogLink1.Active := True;
end;

// from any thread
FLog.Append(gllWarning, 'gateway', 'slow query 668 ms');

Canlı Veri: Her Akış için Tek Mesaj

Dört model de aynı türde JSON mesajını okur; bu nedenle tek bir bağlantı hepsini taşıyabilir. Her mesaj type ve op alanlarını belirtir ve her model yalnızca kendi mesajını alır:

{"type":"presence","op":"upsert","user":{"id":"u7","presence":"away","statusText":"Lunch"}}
{"type":"notification","op":"add","notification":{"id":"n2","title":"Build 812 passed","severity":"success"}}
{"type":"activity","op":"add","item":{"id":"a20","actorId":"u7","verb":"updated","objectName":"Invoice INV-17"}}
{"type":"log","op":"append","entry":{"level":"warning","source":"api","message":"Slow query"}}

Üç canlı kaynak, modelleri sgcWebSockets aracılığıyla bir sunucuya bağlar: TsgcUILiveSource_WebSocket, TsgcUILiveSource_MQTT ve TsgcUILiveSource_SSE. Her kaynak, URL'si, kimlik bilgileri, TLS ve yeniden bağlanma ayarlarıyla zaten yapılandırdığınız bir istemciye bağlanır ve her mesajı bağlamalarına iletir. Bir çalışan iş parçacığında gelen mesajlar ana iş parçacığında tek bir toplu işlemde uygulanır; böylece binlerce günlük satırından oluşan bir yığın, kullanıcı arayüzüne yalnızca tek bir uğrama maliyeti getirir. Bir bağlama ayrıca bir MQTT konusunu, bir SSE olay adını, bir filtreyi veya uygulama zarfı içindeki bir yolu seçebilir.

uses
  sgcWebSocket, sgcUICoreWS_Live, sgcUICoreWS_Live_WebSocket;

procedure TfrmMain.ConnectLive;
var
  oSource: TsgcUILiveSource_WebSocket;
begin
  oSource := TsgcUILiveSource_WebSocket.Create(Self);
  oSource.Client := sgcWebSocketClient1;
  // every message carries its type, so each model takes only its own
  oSource.Bindings.Add.Target := FPresence;
  oSource.Bindings.Add.Target := FNotifications;
  oSource.Bindings.Add.Target := FActivity;
  oSource.Bindings.Add.Target := FLog;
end;

Canlı kaynaklar Kayıtlı sürümündedir ve sgcUI'nin her sgcWebSockets köprüsü gibi sgcWebSockets gerektirir. Sunucu olmadan veya bir Community derlemesinde uygulama bunun yerine model API'sini çağırır: AddOrUpdate ve SetStatus, Add veya Post, AddActivity ve Append.

Her Platform, Açık ve Koyu

Aynı modeller ve aynı JSON her platformda çalışır. .NET denetimleri, esegece.sgcUICore, esegece.sgcNavigation, esegece.sgcToolbar, esegece.sgcDashboard ve esegece.sgcGrid paketlerinde aynı adlara sahip yerel WinForms, WPF ve Avalonia denetimleridir ve koyu ve yüksek karşıtlık dahil paketin her teması yeni denetimlere ulaşır.

Realtime Operasyon Demosu

Realtime operasyon demosu her parçayı tek bir ekranda toplar: bir ekip listesi, gelen kutusu ve tercihlerle toast bildirimleri, bir zil rozeti, etkinlik akışı ve denetim kaydı ile bir canlı günlük; hepsi yerleşik bir simülatörle yönetilir, bu nedenle sunucu olmadan çalışır. VCL, FireMonkey ve C++Builder için Delphi Suite demolarında, WinForms, WPF ve Avalonia için .NET Suite demolarında yer alır ve simülatör her platformda aynı diziyi üretir. İkinci bir VCL demosu olan RealtimeLive, aynı mesajları işlem içi bir WebSocket sunucusu ve bir TsgcUILiveSource_WebSocket üzerinden gönderir; bir URL kutusu ise onu kendi sunucunuza bağlar.

Sürümler

Her parça, onu barındıran ürünün sürümünü izler. sgcUICore'un varlık parçaları ve sgcGrid'in günlük parçaları Community dahil her sürümde bulunur, varlık mesajları da öyle. Bildirim ve rozet parçaları sgcUI Standard ve üzerindeki sgcNavigation ile sgcToolbar'ı, etkinlik parçaları ise sgcUI Professional ve üzerindeki sgcDashboard'u gerektirir. Ücretsiz .NET Community paketlerinde de bulunurlar, Delphi Community sürümü ise yalnızca sgcGrid içerir. Canlı bildirim, etkinlik ve günlük mesajları, rozet hedefi olarak ribbon ve üç canlı kaynak Kayıtlı sürümündedir. Ürün bazında ayrıntılar için Realtime arayüz paketi sayfasını ve Realtime arayüz paketi yardımını okuyun.

Sorularınız veya geri bildiriminiz mi var? Bize ulaşın, kodu yazan kişilerden yanıt alırsınız.