Pacchetto sgcUI Realtime UI: presenza, notifiche, attività e log in tempo reale per Delphi, C++Builder e .NET

Console operative, help desk, pannelli di amministrazione e schermate di trading devono rispondere tutti alle stesse domande mentre i dati continuano a muoversi: chi è online in questo momento, cosa richiede la mia attenzione, chi ha cambiato cosa e cosa sta fallendo adesso. Il pacchetto sgcUI Realtime UI risponde a ciascuna con un modello e un insieme di controlli nativi, e li collega tutti a un feed live con un unico tipo di messaggio JSON.

Il pacchetto Realtime UI in un minuto: presenza, notifiche, attività e log in tempo reale, alimentati da un unico messaggio JSON. Anche su YouTube.

Il pacchetto Realtime UI non è un prodotto separato. Ogni componente vive nel prodotto sgcUI che estende, sgcUICore, sgcNavigation, sgcToolbar, sgcDashboard e sgcGrid, nelle unit, nei package e nei pacchetti NuGet che già usi, e segue l'edizione di quel prodotto. Funziona con VCL e FireMonkey per Delphi e C++Builder, e con WinForms, WPF e Avalonia per .NET, con temi chiaro, scuro e ad alto contrasto, layout da destra a sinistra e 12 lingue.

Presenza: chi è online

TsgcUIPresenceModel mantiene gli utenti della tua applicazione con nome, iniziali, colore, immagine dell'avatar, stato (online, assente, occupato o offline), testo di stato e ora dell'ultimo accesso. I controlli leggono il modello e si ridisegnano da soli quando cambia uno stato.

• Avatar (TsgcVCLAvatar): iniziali o un'immagine con un indicatore di stato.
• Gruppo di avatar (TsgcVCLAvatarGroup): avatar sovrapposti di un team che si comprimono in un chip “+N” dopo MaxVisible.
• Indicatore di presenza (TsgcVCLPresenceIndicator): un indicatore di stato con il suo testo per elenchi di contatti e liste.
• Anche gli utenti di sgcChat ora sono utenti di presenza, quindi una chat e un elenco del team condividono le stesse persone.

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;

Notifiche: toast, una casella e un badge a campanella

TsgcNotificationModel contiene le notifiche dell'utente corrente, con titolo, corpo, gravità, ora, stato di lettura, azioni e gruppo, e tiene il conteggio delle non lette. Quattro componenti lo mostrano:

• Toast (TsgcVCLToastManager): toast impilati in un angolo del form o dello schermo che non prendono mai il focus, si nascondono da soli, vanno in pausa mentre il mouse è sopra di essi e offrono pulsanti di azione. I colori di gravità provengono dal tema.
• Casella (TsgcVCLNotificationInbox): una lista virtualizzata raggruppata per giorno, con filtri Tutte e Non lette, segna tutte come lette, scarta e azioni.
• Preferenze (TsgcVCLNotificationPrefsEditor): una griglia di categorie e canali: in app, toast, email e push. Il gestore dei toast mostra solo ciò che l'utente ha richiesto.
• Badge a campanella (TsgcToolbarBadgeLink): il numero di non lette come badge di un elemento della toolbar, “99+” oltre 99, e di un elemento della ribbon in Registered.

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;

Feed di attività e audit trail: chi ha fatto cosa

TsgcDashboardActivityModel registra chi ha fatto cosa e quando: l'attore, un verbo, l'oggetto, un esito e, ai fini dell'audit, il valore prima e dopo di ogni campo modificato. Nomi, colori e avatar degli attori provengono dal modello di presenza, quindi il feed e l'elenco del team coincidono sempre.

• Feed di attività (TsgcVCLActivityFeed): una timeline raggruppata per giorno con tempi relativi in 12 lingue, filtri per attore, verbo, tipo di oggetto e testo, e paginazione per caricare gli elementi più vecchi.
• Audit trail (TsgcVCLAuditTrail): gli stessi elementi come righe che si espandono per mostrare ogni campo modificato con il valore vecchio e nuovo.
• Tile del dashboard: tile Activity Feed e Audit Trail per sgcDashboard, con una casella di ricerca, salvati nel layout del dashboard.

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;

Visualizzatore di log live: cosa sta fallendo adesso

TsgcGridLogModel è un buffer circolare thread safe di righe di log con livelli da trace a fatal, una sorgente, un messaggio e proprietà, filtri per livello, sorgente e testo, ed esportazione in testo, JSON e CSV. Qualsiasi thread può aggiungere righe; le modifiche arrivano sullo schermo a blocchi. TsgcGridLogLink trasforma qualsiasi sgcGrid in un visualizzatore di log.

• Colori dei livelli dal tema e evidenziazioni per testo o espressione regolare.
• Follow tail mantiene in vista la riga più recente e si ferma da solo quando l'utente scorre verso l'alto per leggere.
• Pause e Resume, e Copy lines per le righe selezionate.
• Le righe visibili restano al loro posto mentre arrivano nuove righe e le più vecchie escono dal buffer.

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

Dati live: un messaggio per ogni feed

I quattro modelli leggono lo stesso tipo di messaggio JSON, quindi una sola connessione può trasportarli tutti. Ogni messaggio indica il proprio type e una op, e ogni modello prende solo i propri:

{"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"}}

Tre sorgenti live collegano i modelli a un server tramite sgcWebSockets: TsgcUILiveSource_WebSocket, TsgcUILiveSource_MQTT e TsgcUILiveSource_SSE. Ogni sorgente si aggancia a un client già configurato, con il suo URL, le credenziali, TLS e riconnessione, e consegna ogni messaggio ai suoi binding. I messaggi che arrivano su un thread di lavoro vengono applicati sul thread principale in un unico blocco, così una raffica di mille righe di log costa una sola visita all'interfaccia utente. Un binding può anche scegliere un topic MQTT, il nome di un evento SSE, un filtro o un percorso all'interno di un envelope applicativo.

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;

Le sorgenti live sono Registered e richiedono sgcWebSockets, come ogni bridge di sgcUI con sgcWebSockets. Senza un server, o in una build Community, l'applicazione chiama invece l'API del modello: AddOrUpdate e SetStatus, Add o Post, AddActivity e Append.

Ogni piattaforma, chiaro e scuro

Gli stessi modelli e lo stesso JSON funzionano su ogni piattaforma. I controlli .NET sono controlli nativi WinForms, WPF e Avalonia con gli stessi nomi nei pacchetti esegece.sgcUICore, esegece.sgcNavigation, esegece.sgcToolbar, esegece.sgcDashboard e esegece.sgcGrid, e ogni tema della suite, scuro e ad alto contrasto inclusi, raggiunge i nuovi controlli.

La demo di operations Realtime

La demo di operations Realtime riunisce ogni componente in una sola schermata: un elenco del team, toast con la casella e le preferenze, un badge a campanella, il feed di attività e l'audit trail, e un log live, il tutto guidato da un simulatore integrato, quindi funziona senza server. È inclusa per VCL, FireMonkey e C++Builder nelle demo della Suite Delphi, e per WinForms, WPF e Avalonia nelle demo della Suite .NET, e il simulatore produce la stessa sequenza su ogni piattaforma. Una seconda demo VCL, RealtimeLive, invia gli stessi messaggi tramite un server WebSocket in-process e un TsgcUILiveSource_WebSocket, e un campo URL permette di collegarla invece al tuo server.

Edizioni

Ogni componente segue l'edizione del prodotto che lo contiene. I componenti di presenza di sgcUICore e quelli di log di sgcGrid sono presenti in ogni edizione, Community inclusa, e così anche i messaggi di presenza. I componenti di notifica e badge richiedono sgcNavigation e sgcToolbar, in sgcUI Standard e superiori, e quelli di attività richiedono sgcDashboard, in sgcUI Professional e superiori. Anche i pacchetti .NET Community gratuiti li includono, mentre l'edizione Community per Delphi contiene solo sgcGrid. I messaggi live di notifiche, attività e log, la ribbon come destinazione del badge e le tre sorgenti live sono Registered. Leggi la pagina del pacchetto Realtime UI e la guida del pacchetto Realtime UI per i dettagli di ogni prodotto.

Domande o feedback? Mettiti in contatto, riceverai una risposta dalle persone che hanno scritto il codice.