sgcUI Realtime UI Pack: aanwezigheid, meldingen, activiteit en live logs voor Delphi, C++Builder en .NET

Operationele consoles, helpdesks, beheerpanelen en handelsschermen moeten allemaal dezelfde vragen beantwoorden terwijl de gegevens blijven veranderen: wie is er nu online, wat heeft mijn aandacht nodig, wie heeft wat gewijzigd en wat gaat er op dit moment mis. Het sgcUI Realtime UI Pack beantwoordt elk daarvan met een model en een set native besturingselementen, en koppelt ze allemaal aan een live feed met één enkel soort JSON-bericht.

Het Realtime UI pakket in één minuut: aanwezigheid, meldingen, activiteit en live logs, gevoed door één JSON-bericht. Ook op YouTube.

Het Realtime UI Pack is geen apart product. Elk onderdeel zit in het sgcUI-product dat het uitbreidt, sgcUICore, sgcNavigation, sgcToolbar, sgcDashboard en sgcGrid, in de units, packages en NuGet-pakketten die u al gebruikt, en volgt de editie van dat product. Het draait op VCL en FireMonkey voor Delphi en C++Builder, en op WinForms, WPF en Avalonia voor .NET, met lichte, donkere en hoogcontrast-thema's, rechts-naar-links-indelingen en 12 talen.

Aanwezigheid: wie is online

TsgcUIPresenceModel houdt de gebruikers van uw applicatie bij met hun naam, initialen, kleur, avatarafbeelding, status (online, afwezig, bezet of offline), statustekst en tijdstip van laatste activiteit. De besturingselementen lezen het model en tekenen zichzelf opnieuw wanneer een status verandert.

• Avatar (TsgcVCLAvatar): initialen of een afbeelding met een statusbolletje.
• Avatargroep (TsgcVCLAvatarGroup): overlappende avatars van een team die na MaxVisible samenvallen tot een “+N”-chip.
• Aanwezigheidsindicator (TsgcVCLPresenceIndicator): een statusbolletje met tekst voor teamlijsten en lijsten.
• De gebruikers van sgcChat zijn nu ook aanwezigheidsgebruikers, zodat een chat en een teamlijst dezelfde mensen delen.

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;

Meldingen: toasts, een inbox en een belbadge

TsgcNotificationModel bevat de meldingen van de huidige gebruiker, met titel, tekst, ernst, tijd, leesstatus, acties en groep, en houdt het aantal ongelezen meldingen bij. Vier onderdelen tonen ze:

• Toasts (TsgcVCLToastManager): gestapelde toasts in een hoek van het formulier of het scherm die nooit de focus overnemen, zichzelf verbergen, pauzeren zolang de muis erboven staat en actieknoppen bieden. De ernstkleuren komen uit het thema.
• Inbox (TsgcVCLNotificationInbox): een gevirtualiseerde lijst gegroepeerd per dag, met de filters Alle en Ongelezen, alles als gelezen markeren, verwijderen en acties.
• Voorkeuren (TsgcVCLNotificationPrefsEditor): een raster van categorieën en kanalen: in de app, toast, e-mail en push. De toastmanager toont alleen wat de gebruiker heeft gevraagd.
• Belbadge (TsgcToolbarBadgeLink): het aantal ongelezen meldingen als badge van een toolbar-item, “99+” boven 99, en van een ribbon-item in de editie Geregistreerd.

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;

Activiteitenfeed en audit trail: wie deed wat

TsgcDashboardActivityModel legt vast wie wat deed en wanneer: de actor, een werkwoord, het object, een uitkomst en, voor auditdoeleinden, de waarde voor en na de wijziging van elk gewijzigd veld. Namen, kleuren en avatars van actors komen uit het aanwezigheidsmodel, zodat de feed en de teamlijst altijd overeenkomen.

• Activiteitenfeed (TsgcVCLActivityFeed): een tijdlijn gegroepeerd per dag met relatieve tijden in 12 talen, filters op actor, werkwoord, objecttype en tekst, en het laden van oudere items.
• Audit trail (TsgcVCLAuditTrail): dezelfde items als rijen die uitklappen om elk gewijzigd veld met zijn oude en nieuwe waarde te tonen.
• Dashboardtegels: tegels Activity Feed en Audit Trail voor sgcDashboard, met een zoekvak, opgeslagen in de dashboardindeling.

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 logviewer: wat gaat er nu mis

TsgcGridLogModel is een threadveilige ringbuffer van logregels met niveaus van trace tot fatal, een bron, een bericht en eigenschappen, filters op niveau, bron en tekst, en export naar tekst, JSON en CSV. Elke thread kan er regels aan toevoegen; de wijzigingen bereiken het scherm in batches. TsgcGridLogLink maakt van elke sgcGrid een logviewer.

• Niveaukleuren uit het thema, en markeringen op tekst of reguliere expressie.
• Follow tail houdt de nieuwste regel in beeld en stopt vanzelf wanneer de gebruiker omhoog scrolt om te lezen.
• Pause en Resume, en Copy lines voor de geselecteerde rijen.
• De zichtbare regels blijven op hun plaats terwijl er nieuwe regels binnenkomen en de oudste de ring verlaten.

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 data: één bericht voor elke feed

De vier modellen lezen hetzelfde soort JSON-bericht, zodat één verbinding ze allemaal kan dragen. Elk bericht noemt zijn type en een op, en elk model neemt alleen zijn eigen berichten:

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

Drie live bronnen verbinden de modellen via sgcWebSockets met een server: TsgcUILiveSource_WebSocket, TsgcUILiveSource_MQTT en TsgcUILiveSource_SSE. Elke bron haakt in op een client die u al hebt geconfigureerd, met zijn URL, inloggegevens, TLS en herverbinding, en geeft elk bericht door aan zijn bindingen. Berichten die op een worker thread binnenkomen, worden in één batch op de hoofdthread toegepast, zodat een uitbarsting van duizend logregels slechts één bezoek aan de gebruikersinterface kost. Een binding kan ook een MQTT-topic, een SSE-gebeurtenisnaam, een filter of een pad binnen een applicatie-envelop kiezen.

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;

De live bronnen horen bij de editie Geregistreerd en hebben sgcWebSockets nodig, zoals elke sgcWebSockets-brug van sgcUI. Zonder server, of in een Community-build, roept de applicatie in plaats daarvan de model-API aan: AddOrUpdate en SetStatus, Add of Post, AddActivity en Append.

Elk platform, licht en donker

Dezelfde modellen en hetzelfde JSON draaien op elk platform. De .NET-besturingselementen zijn native WinForms-, WPF- en Avalonia-besturingselementen met dezelfde namen in de pakketten esegece.sgcUICore, esegece.sgcNavigation, esegece.sgcToolbar, esegece.sgcDashboard en esegece.sgcGrid, en elk thema van de suite, donker en hoogcontrast inbegrepen, bereikt de nieuwe besturingselementen.

De Realtime operations-demo

De Realtime operations-demo brengt elk onderdeel samen op één scherm: een teamlijst, toasts met de inbox en de voorkeuren, een belbadge, de activiteitenfeed en de audit trail, en een live log, alles aangestuurd door een ingebouwde simulator, zodat hij zonder server draait. Hij wordt meegeleverd voor VCL, FireMonkey en C++Builder in de Delphi Suite-demo's, en voor WinForms, WPF en Avalonia in de .NET Suite-demo's, en de simulator levert op elk platform dezelfde reeks. Een tweede VCL-demo, RealtimeLive, verstuurt dezelfde berichten via een WebSocket-server in hetzelfde proces en een TsgcUILiveSource_WebSocket, en met een URL-vak verbindt u hem in plaats daarvan met uw eigen server.

Edities

Elk onderdeel volgt de editie van het product dat het bevat. De aanwezigheidsonderdelen van sgcUICore en de logonderdelen van sgcGrid zitten in elke editie, Community inbegrepen, en de aanwezigheidsberichten ook. De onderdelen voor meldingen en badges vragen sgcNavigation en sgcToolbar, in sgcUI Standard en hoger, en de activiteitsonderdelen vragen sgcDashboard, in sgcUI Professional en hoger. De gratis .NET Community-pakketten bevatten ze ook, terwijl de Community-editie voor Delphi alleen sgcGrid bevat. De live berichten voor meldingen, activiteit en logs, het ribbon als badgedoel en de drie live bronnen horen bij de editie Geregistreerd. Lees de pagina over het Realtime UI Pack en de help van het Realtime UI Pack voor de details per product.

Vragen of feedback? Neem contact op, u krijgt antwoord van de mensen die de code hebben geschreven.