Pack d'interface sgcUI Realtime : présence, notifications, activité et journaux en direct pour Delphi, C++Builder et .NET

Les consoles d'exploitation, les centres d'assistance, les panneaux d'administration et les écrans de trading doivent tous répondre aux mêmes questions pendant que les données continuent de bouger : qui est en ligne en ce moment, ce qui demande mon attention, qui a modifié quoi, et ce qui échoue à cet instant. Le pack d'interface sgcUI Realtime répond à chacune d'elles avec un modèle et un ensemble de contrôles natifs, et les relie tous à un flux en direct avec un seul type de message JSON.

Le pack Realtime UI en une minute : présence, notifications, activité et journaux en direct, alimentés par un seul message JSON. Également sur YouTube.

Le pack d'interface Realtime n'est pas un produit séparé. Chaque élément réside dans le produit sgcUI qu'il étend, sgcUICore, sgcNavigation, sgcToolbar, sgcDashboard et sgcGrid, dans les unités, les packages et les packages NuGet que vous utilisez déjà, et suit l'édition de ce produit. Il fonctionne sur VCL et FireMonkey pour Delphi et C++Builder, et sur WinForms, WPF et Avalonia pour .NET, avec des thèmes clair, sombre et à contraste élevé, des dispositions de droite à gauche et 12 langues.

Présence : qui est en ligne

TsgcUIPresenceModel conserve les utilisateurs de votre application avec leur nom, leurs initiales, leur couleur, leur image d'avatar, leur statut (en ligne, absent, occupé ou hors ligne), leur texte de statut et leur dernière connexion. Les contrôles lisent le modèle et se redessinent d'eux-mêmes lorsqu'un statut change.

• Avatar (TsgcVCLAvatar) : des initiales ou une image avec une pastille de statut.
• Groupe d'avatars (TsgcVCLAvatarGroup) : des avatars qui se chevauchent pour une équipe et se regroupent en une pastille “+N” après MaxVisible.
• Indicateur de présence (TsgcVCLPresenceIndicator) : une pastille de statut avec son texte pour les listes d'équipe.
• Les utilisateurs de sgcChat sont désormais aussi des utilisateurs de présence, si bien qu'un chat et une liste d'équipe partagent les mêmes personnes.

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;

Notifications : toasts, boîte de réception et badge en forme de cloche

TsgcNotificationModel contient les notifications de l'utilisateur courant, avec titre, corps, gravité, heure, état de lecture, actions et groupe, et tient le compte des non lues. Quatre éléments l'affichent :

• Toasts (TsgcVCLToastManager) : des toasts empilés dans un coin du formulaire ou de l'écran, qui ne prennent jamais le focus, se masquent d'eux-mêmes, se mettent en pause lorsque la souris les survole et proposent des boutons d'action. Les couleurs de gravité viennent du thème.
• Boîte de réception (TsgcVCLNotificationInbox) : une liste virtualisée groupée par jour, avec des filtres Toutes et Non lues, marquer tout comme lu, ignorer et actions.
• Préférences (TsgcVCLNotificationPrefsEditor) : une grille de catégories et de canaux, dans l'application, toast, e-mail et push. Le gestionnaire de toasts n'affiche que ce que l'utilisateur a demandé.
• Badge en forme de cloche (TsgcToolbarBadgeLink) : le nombre de non lues comme badge d'un élément de barre d'outils, “99+” au-delà de 99, et d'un élément de ruban dans l'édition Enregistrée.

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;

Fil d'activité et piste d'audit : qui a fait quoi

TsgcDashboardActivityModel enregistre qui a fait quoi et quand : l'acteur, un verbe, l'objet, un résultat et, à des fins d'audit, la valeur avant et après de chaque champ modifié. Les noms, les couleurs et les avatars des acteurs viennent du modèle de présence, de sorte que le fil et la liste d'équipe concordent toujours.

• Fil d'activité (TsgcVCLActivityFeed) : une chronologie groupée par jour avec des heures relatives en 12 langues, des filtres par acteur, verbe, type d'objet et texte, et un chargement paginé des éléments plus anciens.
• Piste d'audit (TsgcVCLAuditTrail) : les mêmes éléments sous forme de lignes qui se déploient pour afficher chaque champ modifié avec son ancienne et sa nouvelle valeur.
• Tuiles de tableau de bord : des tuiles Fil d'activité et Piste d'audit pour sgcDashboard, avec un champ de recherche, enregistrées dans la disposition du tableau de bord.

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;

Visualiseur de journaux en direct : ce qui échoue en ce moment

TsgcGridLogModel est un tampon circulaire thread safe de lignes de journal avec des niveaux de trace à fatal, une source, un message et des propriétés, des filtres par niveau, source et texte, et un export en texte, JSON et CSV. N'importe quel thread peut y ajouter des lignes ; les changements arrivent à l'écran par lots. TsgcGridLogLink transforme n'importe quel sgcGrid en visualiseur de journaux.

• Des couleurs de niveau issues du thème, et des surbrillances par texte ou par expression régulière.
• Follow tail garde la ligne la plus récente visible, et s'arrête de lui-même lorsque l'utilisateur remonte pour lire.
• Pause et Resume, et Copy lines pour les lignes sélectionnées.
• Les lignes visibles restent en place pendant que de nouvelles lignes arrivent et que les plus anciennes quittent le tampon.

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

Données en direct : un seul message pour tous les flux

Les quatre modèles lisent le même type de message JSON, si bien qu'une seule connexion peut tous les transporter. Chaque message indique son type et une op, et chaque modèle ne prend que les siens :

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

Trois sources en direct relient les modèles à un serveur via sgcWebSockets : TsgcUILiveSource_WebSocket, TsgcUILiveSource_MQTT et TsgcUILiveSource_SSE. Chaque source se branche sur un client que vous avez déjà configuré, avec son URL, ses identifiants, TLS et sa reconnexion, et transmet chaque message à ses liaisons. Les messages qui arrivent sur un thread de travail sont appliqués sur le thread principal en un seul lot, si bien qu'une rafale de mille lignes de journal ne coûte qu'un seul passage dans l'interface utilisateur. Une liaison peut aussi choisir un sujet MQTT, un nom d'événement SSE, un filtre ou un chemin à l'intérieur d'une enveloppe applicative.

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;

Les sources en direct font partie de l'édition Enregistrée et nécessitent sgcWebSockets, comme chaque passerelle sgcWebSockets de sgcUI. Sans serveur, ou dans une version Community, l'application appelle à la place l'API du modèle : AddOrUpdate et SetStatus, Add ou Post, AddActivity et Append.

Toutes les plateformes, clair et sombre

Les mêmes modèles et le même JSON fonctionnent sur toutes les plateformes. Les contrôles .NET sont des contrôles natifs WinForms, WPF et Avalonia, avec les mêmes noms dans les packages esegece.sgcUICore, esegece.sgcNavigation, esegece.sgcToolbar, esegece.sgcDashboard et esegece.sgcGrid, et chaque thème de la suite, y compris le sombre et le contraste élevé, s'applique aux nouveaux contrôles.

La démo d'exploitation Realtime

La démo d'exploitation Realtime réunit tous les éléments sur un seul écran : une liste d'équipe, des toasts avec la boîte de réception et les préférences, un badge en forme de cloche, le fil d'activité et la piste d'audit, et un journal en direct, le tout piloté par un simulateur intégré qui fonctionne sans serveur. Elle est fournie pour VCL, FireMonkey et C++Builder dans les démos de la Suite Delphi, et pour WinForms, WPF et Avalonia dans les démos de la Suite .NET, et le simulateur produit la même séquence sur toutes les plateformes. Une seconde démo VCL, RealtimeLive, envoie les mêmes messages via un serveur WebSocket in process et un TsgcUILiveSource_WebSocket, et un champ URL permet de la connecter à votre propre serveur.

Éditions

Chaque élément suit l'édition du produit qui le contient. Les éléments de présence de sgcUICore et les éléments de journal de sgcGrid sont présents dans toutes les éditions, Community comprise, ainsi que les messages de présence. Les éléments de notification et de badge demandent sgcNavigation et sgcToolbar, dans sgcUI Standard et au-delà, et les éléments d'activité demandent sgcDashboard, dans sgcUI Professional et au-delà. Les packages .NET Community gratuits les incluent aussi, alors que l'édition Community pour Delphi ne contient que sgcGrid. Les messages en direct de notifications, d'activité et de journal, le ruban comme cible de badge et les trois sources en direct font partie de l'édition Enregistrée. Consultez la page du pack d'interface Realtime et l'aide du pack d'interface Realtime pour le détail par produit.

Des questions ou des remarques ? Contactez-nous, vous recevrez une réponse de la part des personnes qui ont écrit le code.