sgcUI Realtime UI Pack: Präsenz, Benachrichtigungen, Aktivität und Live-Logs für Delphi, C++Builder und .NET

Operations-Konsolen, Helpdesks, Admin-Oberflächen und Trading-Bildschirme müssen dieselben Fragen beantworten, während sich die Daten ständig ändern: Wer ist gerade online, was braucht meine Aufmerksamkeit, wer hat was geändert und was schlägt im Moment fehl. Das sgcUI Realtime UI Pack beantwortet jede dieser Fragen mit einem Modell und einem Satz nativer Steuerelemente und verbindet alle über eine einzige Art von JSON-Nachricht mit einem Live-Feed.

Das Realtime UI Paket in einer Minute: Präsenz, Benachrichtigungen, Aktivität und Live-Logs, gespeist von einer einzigen JSON-Nachricht. Auch auf YouTube.

Das Realtime UI Pack ist kein eigenständiges Produkt. Jeder Baustein steckt in dem sgcUI-Produkt, das er erweitert, sgcUICore, sgcNavigation, sgcToolbar, sgcDashboard und sgcGrid, in den Units, Packages und NuGet-Paketen, die Sie bereits verwenden, und folgt der Edition dieses Produkts. Es läuft unter VCL und FireMonkey für Delphi und C++Builder sowie unter WinForms, WPF und Avalonia für .NET, mit hellen, dunklen und Hochkontrast-Themes, Rechts-nach-links-Layouts und 12 Sprachen.

Präsenz: Wer ist online

TsgcUIPresenceModel verwaltet die Benutzer Ihrer Anwendung mit Name, Initialen, Farbe, Avatarbild, Status (online, abwesend, beschäftigt oder offline), Statustext und Zeitpunkt der letzten Aktivität. Die Steuerelemente lesen das Modell und zeichnen sich selbstständig neu, wenn sich ein Status ändert.

• Avatar (TsgcVCLAvatar): Initialen oder ein Bild mit Statuspunkt.
• Avatargruppe (TsgcVCLAvatarGroup): überlappende Avatare eines Teams, die nach MaxVisible zu einem “+N”-Chip zusammenfallen.
• Präsenzanzeige (TsgcVCLPresenceIndicator): ein Statuspunkt mit Text für Teamlisten und Listen.
• Die Benutzer von sgcChat sind jetzt ebenfalls Präsenzbenutzer, sodass ein Chat und eine Teamliste dieselben Personen teilen.

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;

Benachrichtigungen: Toasts, ein Posteingang und ein Glocken-Badge

TsgcNotificationModel hält die Benachrichtigungen des aktuellen Benutzers mit Titel, Text, Schweregrad, Zeit, Lesestatus, Aktionen und Gruppe und führt die Zahl der ungelesenen. Vier Bausteine zeigen sie an:

• Toasts (TsgcVCLToastManager): gestapelte Toasts in einer Ecke des Formulars oder des Bildschirms, die nie den Fokus übernehmen, sich von selbst ausblenden, pausieren, solange die Maus darüber steht, und Aktionsschaltflächen anbieten. Die Farben für den Schweregrad stammen aus dem Theme.
• Posteingang (TsgcVCLNotificationInbox): eine virtualisierte, nach Tagen gruppierte Liste mit den Filtern Alle und Ungelesen, Alle als gelesen markieren, Verwerfen und Aktionen.
• Einstellungen (TsgcVCLNotificationPrefsEditor): ein Raster aus Kategorien und Kanälen: In-App, Toast, E-Mail und Push. Der Toast-Manager zeigt nur an, was der Benutzer angefordert hat.
• Glocken-Badge (TsgcToolbarBadgeLink): die Zahl der ungelesenen als Badge eines Toolbar-Elements, “99+” ab 100, und eines Ribbon-Elements in der Edition Registriert.

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;

Aktivitätsfeed und Audit-Trail: Wer hat was getan

TsgcDashboardActivityModel erfasst, wer was wann getan hat: den Akteur, ein Verb, das Objekt, ein Ergebnis und, für Audit-Zwecke, den Wert vor und nach der Änderung jedes geänderten Felds. Namen, Farben und Avatare der Akteure stammen aus dem Präsenzmodell, daher stimmen Feed und Teamliste immer überein.

• Aktivitätsfeed (TsgcVCLActivityFeed): eine nach Tagen gruppierte Zeitleiste mit relativen Zeitangaben in 12 Sprachen, Filtern nach Akteur, Verb, Objekttyp und Text sowie Nachladen älterer Einträge.
• Audit-Trail (TsgcVCLAuditTrail): dieselben Einträge als Zeilen, die sich aufklappen lassen und jedes geänderte Feld mit altem und neuem Wert zeigen.
• Dashboard-Kacheln: Kacheln Activity Feed und Audit Trail für sgcDashboard, mit Suchfeld, gespeichert im Dashboard-Layout.

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;

Live-Log-Viewer: Was schlägt gerade fehl

TsgcGridLogModel ist ein threadsicherer Ringpuffer für Logzeilen mit Stufen von trace bis fatal, einer Quelle, einer Meldung und Eigenschaften, Filtern nach Stufe, Quelle und Text sowie Export als Text, JSON und CSV. Jeder Thread kann Zeilen anhängen; die Änderungen erreichen den Bildschirm gebündelt. TsgcGridLogLink macht aus jedem sgcGrid einen Log-Viewer.

• Stufenfarben aus dem Theme sowie Hervorhebungen nach Text oder regulärem Ausdruck.
• Follow tail hält die neueste Zeile im Blick und stoppt von selbst, wenn der Benutzer zum Lesen nach oben scrollt.
• Pause und Resume sowie Copy lines für die ausgewählten Zeilen.
• Die sichtbaren Zeilen bleiben an ihrer Stelle, während neue Zeilen eintreffen und die ältesten den Ring verlassen.

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

Live-Daten: Eine Nachricht für jeden Feed

Die vier Modelle lesen dieselbe Art von JSON-Nachricht, sodass eine einzige Verbindung alle transportieren kann. Jede Nachricht nennt ihren type und eine op, und jedes Modell übernimmt nur die eigenen:

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

Drei Live-Quellen verbinden die Modelle über sgcWebSockets mit einem Server: TsgcUILiveSource_WebSocket, TsgcUILiveSource_MQTT und TsgcUILiveSource_SSE. Jede Quelle klinkt sich in einen bereits konfigurierten Client ein, mit dessen URL, Zugangsdaten, TLS und Wiederverbindung, und reicht jede Nachricht an ihre Bindungen weiter. Nachrichten, die in einem Worker-Thread eintreffen, werden in einem einzigen Stapel im Hauptthread angewendet, sodass ein Schwall von tausend Logzeilen nur einen Besuch der Benutzeroberfläche kostet. Eine Bindung kann außerdem ein MQTT-Topic, einen SSE-Ereignisnamen, einen Filter oder einen Pfad innerhalb eines Anwendungs-Umschlags auswählen.

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;

Die Live-Quellen gehören zur Edition Registriert und benötigen sgcWebSockets, wie jede sgcWebSockets-Brücke von sgcUI. Ohne Server oder in einem Community-Build ruft die Anwendung stattdessen die Modell-API auf: AddOrUpdate und SetStatus, Add oder Post, AddActivity und Append.

Jede Plattform, hell und dunkel

Dieselben Modelle und dasselbe JSON laufen auf jeder Plattform. Die .NET-Steuerelemente sind native WinForms-, WPF- und Avalonia-Steuerelemente mit denselben Namen in den Paketen esegece.sgcUICore, esegece.sgcNavigation, esegece.sgcToolbar, esegece.sgcDashboard und esegece.sgcGrid, und jedes Theme der Suite, einschließlich Dunkel und Hochkontrast, erreicht die neuen Steuerelemente.

Die Realtime-Operations-Demo

Die Realtime-Operations-Demo vereint jeden Baustein auf einem Bildschirm: eine Teamliste, Toasts mit Posteingang und Einstellungen, ein Glocken-Badge, den Aktivitätsfeed und den Audit-Trail sowie ein Live-Log, alles gesteuert von einem eingebauten Simulator, sodass sie ohne Server läuft. Sie wird für VCL, FireMonkey und C++Builder in den Delphi-Suite-Demos und für WinForms, WPF und Avalonia in den .NET-Suite-Demos mitgeliefert, und der Simulator erzeugt auf jeder Plattform dieselbe Abfolge. Eine zweite VCL-Demo, RealtimeLive, sendet dieselben Nachrichten über einen WebSocket-Server im selben Prozess und eine TsgcUILiveSource_WebSocket, und über ein URL-Feld verbinden Sie sie stattdessen mit Ihrem eigenen Server.

Editionen

Jeder Baustein folgt der Edition des Produkts, das ihn enthält. Die Präsenzbausteine von sgcUICore und die Log-Bausteine von sgcGrid sind in jeder Edition enthalten, auch in Community, ebenso die Präsenznachrichten. Die Bausteine für Benachrichtigungen und Badge brauchen sgcNavigation und sgcToolbar, ab sgcUI Standard, und die Aktivitätsbausteine brauchen sgcDashboard, ab sgcUI Professional. Die kostenlosen .NET-Community-Pakete enthalten sie ebenfalls, die Delphi-Community-Edition enthält dagegen nur sgcGrid. Die Live-Nachrichten für Benachrichtigungen, Aktivität und Logs, das Ribbon als Badge-Ziel und die drei Live-Quellen gehören zur Edition Registriert. Lesen Sie die Seite zum Realtime UI Pack und die Hilfe zum Realtime UI Pack für die Details je Produkt.

Fragen oder Feedback? Nehmen Sie Kontakt auf, Sie erhalten eine Antwort von den Leuten, die den Code geschrieben haben.