Paquete sgcUI Realtime UI: presencia, notificaciones, actividad y registros en vivo para Delphi, C++Builder y .NET

Las consolas de operaciones, los helpdesks, los paneles de administración y las pantallas de trading tienen que responder a las mismas preguntas mientras los datos no dejan de moverse: quién está conectado ahora mismo, qué requiere mi atención, quién ha cambiado qué y qué está fallando en este momento. El paquete sgcUI Realtime UI responde a cada una con un modelo y un conjunto de controles nativos, y los conecta todos a un feed en vivo con un único tipo de mensaje JSON.

El paquete Realtime UI en un minuto: presencia, notificaciones, actividad y registros en vivo, alimentados por un solo mensaje JSON. También en YouTube.

El paquete Realtime UI no es un producto aparte. Cada pieza vive en el producto sgcUI que amplía, sgcUICore, sgcNavigation, sgcToolbar, sgcDashboard y sgcGrid, en las unidades, paquetes y paquetes NuGet que ya utilizas, y sigue la edición de ese producto. Funciona en VCL y FireMonkey para Delphi y C++Builder, y en WinForms, WPF y Avalonia para .NET, con temas claro, oscuro y de alto contraste, diseños de derecha a izquierda y 12 idiomas.

Presencia: quién está conectado

TsgcUIPresenceModel mantiene los usuarios de tu aplicación con su nombre, iniciales, color, imagen de avatar, estado (conectado, ausente, ocupado o desconectado), texto de estado y hora de la última conexión. Los controles leen el modelo y se repintan solos cuando cambia un estado.

• Avatar (TsgcVCLAvatar): iniciales o una imagen con un indicador de estado.
• Grupo de avatares (TsgcVCLAvatarGroup): avatares superpuestos de un equipo que se agrupan en un chip “+N” a partir de MaxVisible.
• Indicador de presencia (TsgcVCLPresenceIndicator): un indicador de estado con su texto para listas de contactos y listados.
• Los usuarios de sgcChat ahora también son usuarios de presencia, de modo que un chat y una lista de equipo comparten las mismas personas.

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;

Notificaciones: toasts, una bandeja y una insignia de campana

TsgcNotificationModel guarda las notificaciones del usuario actual, con título, cuerpo, gravedad, hora, estado de lectura, acciones y grupo, y lleva la cuenta de las no leídas. Cuatro piezas lo muestran:

• Toasts (TsgcVCLToastManager): toasts apilados en una esquina del formulario o de la pantalla que nunca roban el foco, se ocultan solos, se pausan mientras el ratón está encima y ofrecen botones de acción. Los colores de gravedad provienen del tema.
• Bandeja (TsgcVCLNotificationInbox): una lista virtualizada agrupada por día, con filtros Todas y No leídas, marcar todo como leído, descartar y acciones.
• Preferencias (TsgcVCLNotificationPrefsEditor): una cuadrícula de categorías y canales: en la aplicación, toast, correo electrónico y push. El gestor de toasts solo muestra lo que el usuario ha pedido.
• Insignia de campana (TsgcToolbarBadgeLink): el número de no leídas como insignia de un elemento de la barra de herramientas, “99+” por encima de 99, y de un elemento de la cinta en la edición Registrada.

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 de actividad y registro de auditoría: quién hizo qué

TsgcDashboardActivityModel registra quién hizo qué y cuándo: el actor, un verbo, el objeto, un resultado y, a efectos de auditoría, el valor anterior y posterior de cada campo modificado. Los nombres, colores y avatares de los actores provienen del modelo de presencia, así que el feed y la lista del equipo siempre coinciden.

• Feed de actividad (TsgcVCLActivityFeed): una línea de tiempo agrupada por día con tiempos relativos en 12 idiomas, filtros por actor, verbo, tipo de objeto y texto, y paginación para cargar elementos anteriores.
• Registro de auditoría (TsgcVCLAuditTrail): los mismos elementos en filas que se expanden para mostrar cada campo modificado con su valor anterior y nuevo.
• Mosaicos de dashboard: mosaicos Activity Feed y Audit Trail para sgcDashboard, con un cuadro de búsqueda, guardados en el diseño 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;

Visor de logs en vivo: qué está fallando ahora mismo

TsgcGridLogModel es un búfer circular thread safe de líneas de log con niveles desde trace hasta fatal, un origen, un mensaje y propiedades, filtros por nivel, origen y texto, y exportación a texto, JSON y CSV. Cualquier hilo puede añadir líneas; los cambios llegan a la pantalla por lotes. TsgcGridLogLink convierte cualquier sgcGrid en un visor de logs.

• Colores de nivel tomados del tema, y resaltados por texto o expresión regular.
• Follow tail mantiene a la vista la línea más reciente y se detiene solo cuando el usuario sube para leer.
• Pause y Resume, y Copy lines para las filas seleccionadas.
• Las líneas visibles se quedan en su sitio mientras llegan líneas nuevas y las más antiguas salen del búfer.

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

Datos en vivo: un mensaje para cada feed

Los cuatro modelos leen el mismo tipo de mensaje JSON, de modo que una sola conexión puede transportarlos todos. Cada mensaje indica su type y una op, y cada modelo toma únicamente los suyos:

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

Tres fuentes en vivo conectan los modelos con un servidor mediante sgcWebSockets: TsgcUILiveSource_WebSocket, TsgcUILiveSource_MQTT y TsgcUILiveSource_SSE. Cada fuente se engancha a un cliente que ya has configurado, con su URL, credenciales, TLS y reconexión, y entrega cada mensaje a sus enlaces. Los mensajes que llegan en un hilo de trabajo se aplican en el hilo principal en un solo lote, de modo que una ráfaga de mil líneas de log cuesta una sola visita a la interfaz de usuario. Un enlace también puede elegir un topic MQTT, el nombre de un evento SSE, un filtro o una ruta dentro de un sobre de aplicación.

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;

Las fuentes en vivo son de la edición Registrada y necesitan sgcWebSockets, como cualquier puente de sgcUI con sgcWebSockets. Sin servidor, o en una compilación Community, la aplicación llama en su lugar a la API del modelo: AddOrUpdate y SetStatus, Add o Post, AddActivity y Append.

Todas las plataformas, en claro y oscuro

Los mismos modelos y el mismo JSON funcionan en todas las plataformas. Los controles .NET son controles nativos de WinForms, WPF y Avalonia con los mismos nombres en los paquetes esegece.sgcUICore, esegece.sgcNavigation, esegece.sgcToolbar, esegece.sgcDashboard y esegece.sgcGrid, y todos los temas de la suite, incluidos el oscuro y el de alto contraste, llegan a los nuevos controles.

La demo de operaciones Realtime

La demo de operaciones Realtime reúne todas las piezas en una sola pantalla: una lista de equipo, toasts con la bandeja y las preferencias, una insignia de campana, el feed de actividad y el registro de auditoría, y un log en vivo, todo impulsado por un simulador integrado, de modo que funciona sin servidor. Se incluye para VCL, FireMonkey y C++Builder en las demos de la Suite de Delphi, y para WinForms, WPF y Avalonia en las demos de la Suite .NET, y el simulador produce la misma secuencia en todas las plataformas. Una segunda demo VCL, RealtimeLive, envía los mismos mensajes a través de un servidor WebSocket en proceso y un TsgcUILiveSource_WebSocket, y un cuadro de URL permite conectarla a tu propio servidor.

Ediciones

Cada pieza sigue la edición del producto que la contiene. Las piezas de presencia de sgcUICore y las de logs de sgcGrid están en todas las ediciones, Community incluida, y los mensajes de presencia también. Las piezas de notificaciones e insignia necesitan sgcNavigation y sgcToolbar, en sgcUI Standard y superiores, y las de actividad necesitan sgcDashboard, en sgcUI Professional y superiores. Los paquetes .NET Community gratuitos también las incluyen, mientras que la edición Community de Delphi solo trae sgcGrid. Los mensajes en vivo de notificaciones, actividad y logs, la cinta como destino de la insignia y las tres fuentes en vivo son de la edición Registrada. Consulta la página del paquete Realtime UI y la ayuda del paquete Realtime UI para conocer los detalles de cada producto.

¿Preguntas o comentarios? Ponte en contacto, recibirás respuesta de las personas que escribieron el código.