Delphi, C++Builder & .NET Telas ao vivo

O Pacote Realtime UI do sgcUI

Tudo o que uma tela que acompanha um sistema ao vivo precisa, integrado aos produtos sgcUI que você já usa: quem está online, toasts e uma caixa de entrada de notificações com um emblema de não lidas, um feed de atividades com trilha de auditoria e um visualizador de log ao vivo. Um servidor os alimenta por WebSocket, MQTT ou server-sent events, ou o seu código os controla diretamente.

VCLFireMonkeyWinFormsWPFAvalonia
A demo Realtime do sgcUI: uma lista da equipe com indicadores de presença, o feed de atividades, a caixa de entrada de notificações acima das preferências de notificação, um sino com a contagem de não lidas, os avatares da equipe e uma grade de log ao vivo

Cinco produtos, uma tela ao vivo

O pacote Realtime UI não é um produto separado. Cada peça fica no produto sgcUI a que pertence, nas units, nos pacotes e nos pacotes NuGet que você já usa, e segue a edição desse produto. Toda peça exige apenas o sgcUICore e o produto que a contém, e nenhuma exige o sgcHTML.

Presença e avatares

Quem está online, ausente, ocupado ou offline, com avatares, um grupo de avatares e um indicador de presença.

Produto: sgcUICore.

Presença →

Notificações

Um modelo de notificações com toasts, uma caixa de entrada, preferências por categoria e canal, e um emblema de não lidas na toolbar.

Produtos: sgcNavigation e sgcToolbar.

Notificações →

Feed de atividades e trilha de auditoria

Quem fez o quê em qual objeto, como um feed, como uma tabela de auditoria e como tiles do dashboard.

Produto: sgcDashboard.

Atividades →

Visualizador de log ao vivo

Uma grade que acompanha as linhas de log mais novas, com pausa, filtros e exportação.

Produto: sgcGrid.

Logs ao vivo →

Fontes ao vivo

Conexões WebSocket, MQTT e server-sent events do sgcWebSockets que alimentam cada modelo.

Produto: sgcUICore, bridge sgcUICoreWS.

Dados ao vivo →

Delphi 7 a Delphi 13 com VCL, FireMonkey a partir do Delphi XE6, C++Builder, e .NET WinForms, WPF e Avalonia. Leia o tópico de ajuda do pacote Realtime UI.

Presença e avatares

Mostre quem está online, em todos os produtos sgcUI.

TsgcUIPresenceModel mantém os usuários e o seu status (online, ausente, ocupado ou offline) com um texto de status. Os controles de avatar acompanham o modelo, de modo que uma mudança de status repinta de uma só vez todos os avatares e indicadores desse usuário.

  • O modelo de presença recebe as suas mudanças de AddOrUpdate e SetStatus no código, ou de uma mensagem ao vivo por mudança.
  • Um avatar, um grupo de avatares com um chip "+N" para os usuários que não cabem, e um indicador de presença com o ponto de status e o texto de status.
  • O feed de atividades do sgcDashboard lê o mesmo modelo, de modo que cada autor mostra o seu avatar e o seu status.
Produto
sgcUICore, compartilhado por todos os produtos sgcUI
Delphi e C++Builder
TsgcVCLAvatar, TsgcVCLAvatarGroup, TsgcVCLPresenceIndicator e os seus gêmeos TsgcFMX
Edição
Todas as edições, Community inclusive, e também as mensagens de presença ao vivo

Ajuda: Presença e Avatares e indicador de presença.

Toasts, caixa de entrada, preferências e emblemas

Uma central de notificações para aplicações desktop.

TsgcNotificationModel guarda as notificações com o seu título, severidade, categoria e estado de leitura, e mantém a contagem de não lidas. O gerenciador de toasts, a caixa de entrada, as preferências e o vínculo de emblema o acompanham.

  • Toasts: um toast para cada nova notificação não lida, que pausa enquanto o ponteiro está sobre ele.
  • Caixa de entrada de notificações: as notificações agrupadas por dia, todas ou só as não lidas, com Marcar tudo como lido.
  • Preferências de notificação: uma linha por categoria e uma coluna por canal, com o seu editor. Desativar o canal pop-up de uma categoria interrompe os seus toasts, e a caixa de entrada continua a listá-los.
  • Emblema de não lidas: o TsgcToolbarBadgeLink do sgcToolbar mostra a contagem de não lidas em um item da toolbar ou do ribbon, 99+ acima de 99.
Produtos
sgcNavigation (modelo, toasts, caixa de entrada e preferências) e sgcToolbar (vínculo de emblema)
Delphi e C++Builder
TsgcVCLToastManager, TsgcVCLNotificationInbox, TsgcVCLNotificationPrefsEditor e os seus gêmeos TsgcFMX
Edição
Todas as edições, Community inclusive. As mensagens de notificação ao vivo e um ribbon como destino do emblema são Registrada.

Ajuda: Notificações, Toasts, Caixa de entrada de notificações, Preferências de notificação, Mensagens ao vivo de notificações e TsgcToolbarBadgeLink.

Feed de atividades e trilha de auditoria

Quem fez o quê, e o que mudou.

TsgcDashboardActivityModel registra cada atividade como um autor, um verbo e um objeto, com os campos que mudaram. O feed de atividades e a trilha de auditoria são duas visões do mesmo modelo.

  • Feed de atividades: a atividade mais recente primeiro, com tempos relativos e o avatar de cada autor vindo do modelo de presença.
  • Trilha de auditoria: uma tabela cujas linhas se expandem até os campos alterados.
  • Ambos são controles independentes e também tiles de atividades e de auditoria para um dashboard.
Produto
sgcDashboard
Delphi e C++Builder
TsgcVCLActivityFeed, TsgcVCLAuditTrail, TsgcVCLDashboardActivityTile, TsgcVCLDashboardAuditTile e os seus gêmeos TsgcFMX
Edição
Todas as edições, Community inclusive. As mensagens de atividade ao vivo são Registrada.

Ajuda: Feed de atividades, Mensagens de atividade ao vivo, Tile de atividades e Tile de auditoria.

Um visualizador de log ao vivo no sgcGrid

Acompanhe milhares de linhas de log sem travar a tela.

TsgcGridLogModel guarda as linhas de log com hora, um nível de trace a fatal, uma origem e uma mensagem, e o TsgcGridLogLink as mostra em um sgcGrid no modo virtual. O modelo de log é thread safe, de modo que uma thread de trabalho pode acrescentar linhas diretamente.

  • Acompanhamento do fim: rolar para cima para de acompanhar e rolar de volta até o fim retoma, e Pausar congela a visão enquanto o usuário lê.
  • Linhas coloridas por nível, filtros por nível, origem e texto, regras de destaque e exportação.
  • Uma rajada de linhas de log vinda de uma thread de socket custa uma única visita à thread principal.
Produto
sgcGrid
Delphi e C++Builder
TsgcGridLogModel e TsgcGridLogLink com um TsgcVCLGrid ou um TsgcFMXGrid
Edição
Todas as edições, Community inclusive. As mensagens de log ao vivo são Registrada.

Ajuda: Visualizador de log, TsgcGridLogModel e TsgcGridLogLink.

Fontes ao vivo por WebSocket, MQTT e SSE

As fontes ao vivo da bridge sgcUICoreWS recebem as mensagens JSON que um servidor envia por uma conexão do sgcWebSockets e as entregam aos modelos. Os controles acompanham na hora, sem nenhum código seu.

FonteCliente sgcWebSocketsEvento que lêSeleciona as mensagens por
TsgcUILiveSource_WebSocketTsgcWebSocketClientOnMessage, toda mensagem de textoUm filtro sobre um membro da mensagem
TsgcUILiveSource_MQTTTsgcWSPClient_MQTTOnMQTTPublish, toda publicaçãoUm filtro de tópico MQTT
TsgcUILiveSource_SSETsgcHTTP1ClientOnSSEMessage, o fluxo de eventosO tipo de evento SSE
  • A fonte nunca conecta, assina nem envia. A URL, as credenciais, o TLS e a reconexão pertencem ao cliente, e o gancho sobrevive a uma reconexão do WatchDog.
  • Uma fonte alimenta vários modelos por meio dos seus bindings, de modo que uma conexão pode controlar uma tela inteira. Um binding pode desembrulhar um envelope da aplicação, e o seu próprio tratador do evento do cliente continua a ser disparado.
  • Os modelos são sempre chamados na thread principal. As mensagens que chegam em uma thread de socket entram em fila e são aplicadas em uma única visita à thread principal, na ordem de chegada.
  • A bridge é somente de entrada. Quando o usuário lê ou dispensa uma notificação, a aplicação envia o seu próprio frame pelo mesmo cliente.

Os quatro formatos de mensagem

Não há um novo protocolo. Cada modelo lê a mensagem ao vivo do seu feed: um objeto JSON por mudança, com um membro type que nomeia o feed e um membro op.

FeedtypeopModelo
Presençapresence, opcionalupsert, remove, snapshot, clearTsgcUIPresenceModel
Notificaçõesnotification, obrigatórioadd, update, remove, read, unread, snapshotTsgcNotificationModel
Atividadesactivity, obrigatórioadd, update, remove, snapshotTsgcDashboardActivityModel
Loglog, opcionalappend, batch, clearTsgcGridLogModel
messages.json
{"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"}}
Delphi, um tópico MQTT por feed
oSource := TsgcUILiveSource_MQTT.Create(Self);
oSource.Client := MQTT;
// um binding por modelo, selecionado pelo seu tópico
oBinding := oSource.Bindings.Add;
oBinding.Target := PresenceModel;
oBinding.Topic := 'ops/presence';
oBinding := oSource.Bindings.Add;
oBinding.Target := NotificationModel;
oBinding.Topic := 'ops/notifications';
oBinding := oSource.Bindings.Add;
oBinding.Target := ActivityModel;
oBinding.Topic := 'ops/activity';
oBinding := oSource.Bindings.Add;
oBinding.Target := LogModel;
oBinding.Topic := 'ops/log/+';
// a fonte nunca assina: assine no OnMQTTConnect do cliente
MQTT.Subscribe('ops/#');

As fontes ao vivo são somente Registrada e exigem o sgcWebSockets, como toda bridge do sgcUI com o sgcWebSockets. Sem um servidor, ou em um build Community, a aplicação chama a API de cada modelo: AddOrUpdate e SetStatus do modelo de presença, Add ou Post do modelo de notificações, Add do modelo de atividades e Append do modelo de log.

Leia o tópico de ajuda Fontes ao vivo

A demo Realtime

Um console de operações para uma equipe de doze pessoas, controlado por um simulador

A demo Realtime para Delphi VCL no tema escuro: a lista da equipe, o feed de atividades, a caixa de entrada e as preferências de notificação, o emblema do sino, o grupo de avatares e a grade de log ao vivo

A demo Realtime da suíte monta um console de operações com o pacote. A toolbar traz um sino cujo emblema é a contagem de não lidas, o avatar do usuário atual e o grupo de avatares da equipe. Uma lista mostra cada membro com um indicador de presença, uma aba guarda o feed de atividades e outra a trilha de auditoria, a caixa de entrada de notificações fica acima do editor de preferências, uma grade de log acompanha as linhas mais novas e os toasts aparecem no canto inferior direito.

  • Alterne entre claro, escuro e alto contraste, ou espelhe a janela da direita para a esquerda, enquanto ela executa
  • Um simulador determinístico monta cada mudança como a mensagem ao vivo do seu modelo, de modo que a demo não precisa de servidor nem de sgcWebSockets
  • Execute-a com --test result.txt para as suas autoverificações, uma linha PASS ou FAIL numerada para cada uma
Plataformas
Delphi VCL (Delphi 7 a 13) e FireMonkey (Delphi 13), C++Builder, .NET WinForms, WPF e Avalonia
Edição necessária
sgcUI Professional, Enterprise, All-Access ou Trial, as edições que incluem o sgcDashboard. Um build Registrada aplica cada mudança como uma mensagem ao vivo, e um build Community pela API do modelo.
Código-fonte
Demos\Suite\Delphi\Realtime (sgcUIRealtime.dpr), Demos\Suite\Delphi\RealtimeFMX (sgcUIRealtimeFMX.dpr), Demos\Suite\CBuilder\Realtime e demos\Suite\Realtime na pasta do .NET

Produtos sgcUI incluídos

Veja também as outras demos da suíte sgcUI.

A demo Realtime para Delphi FireMonkey no tema claro
FireMonkey, tema claro
A demo Realtime para Delphi FireMonkey no tema escuro
FireMonkey, tema escuro

O mesmo pacote no WinForms, WPF e Avalonia

Os modelos, os controles e as fontes ao vivo têm os mesmos nomes e leem as mesmas mensagens JSON no .NET, nos pacotes NuGet de cada produto.

  • Modelos: TsgcUIPresenceModel (namespace esegece.sgcUICore), TsgcNotificationModel e TsgcNotificationPreferences (esegece.sgcNavigation), TsgcToolbarBadgeLink (esegece.sgcToolbar), TsgcDashboardActivityModel (esegece.sgcDashboard) e TsgcGridLogModel com TsgcGridLogLink (esegece.sgcGrid).
  • Controles: TsgcWinFormsAvatar, TsgcWinFormsToastManager, TsgcWinFormsNotificationInbox, TsgcWinFormsActivityFeed, TsgcWinFormsAuditTrail e os demais controles, cada um com o seu gêmeo TsgcWpf e TsgcAvalonia.
  • Fontes ao vivo: TsgcUILiveSource_WebSocket, TsgcUILiveSource_MQTT e TsgcUILiveSource_SSE no pacote esegece.sgcUICore.sgcWebSockets, somente Registrada.
  • Os pacotes Community gratuitos no NuGet, como esegece.sgcNavigation.Community e esegece.sgcGrid.Community, deixam de fora as mesmas partes que os builds Community do Delphi.
  • A demo .NET tem hosts WinForms, WPF e Avalonia sobre um único projeto compartilhado com os modelos, o simulador e a autoverificação.

Ajuda: Pacotes .NET e Pacote Realtime UI.

Community e Registrada

Cada peça segue a edição do seu produto. Os pacotes .NET Community deixam de fora as mesmas partes que os builds Community do Delphi.

PeçaProdutoCommunityRegistrada
Modelo de presença com as suas mensagens ao vivo, avatares, grupo de avatares e indicador de presençasgcUICore
Modelo de notificações, toasts, caixa de entrada e preferênciassgcNavigation
Mensagens de notificação ao vivosgcNavigation—
Vínculo de emblema com uma toolbarsgcToolbar
Vínculo de emblema com um ribbonsgcToolbar—
Modelo de atividades, feed de atividades, trilha de auditoria e os dois tilessgcDashboard
Mensagens de atividade ao vivosgcDashboard—
Modelo de log e vínculo de logsgcGrid
Mensagens de log ao vivosgcGrid—
Fontes ao vivo por WebSocket, MQTT e SSE (bridge sgcUICoreWS, exige o sgcWebSockets)sgcUICore—

Na suíte sgcUI, o sgcNavigation, o sgcToolbar e o sgcGrid estão em todas as edições e o sgcDashboard a partir da Professional. O sgcUICore acompanha todo produto, e todo produto também é vendido isoladamente, para Delphi e para .NET. Veja a matriz de recursos, o tópico de ajuda Edições e os preços.

Perguntas frequentes

Não. Cada peça fica no produto sgcUI a que pertence: presença e avatares no sgcUICore, notificações no sgcNavigation, o emblema de não lidas no sgcToolbar, o feed de atividades e a trilha de auditoria no sgcDashboard, e o visualizador de log no sgcGrid. Você as recebe com esses produtos, nas mesmas units, pacotes e pacotes NuGet.

Só para as fontes ao vivo da bridge sgcUICoreWS. Os modelos e os controles exigem apenas o sgcUICore e o seu próprio produto, e uma aplicação sem servidor os controla pelo código. Nenhuma das peças exige o sgcHTML.

Qualquer servidor que envie um objeto JSON por mudança por WebSocket, por um broker MQTT ou como server-sent events. Os quatro formatos de mensagem estão documentados e as fontes não definem nenhum protocolo próprio. Um binding também pode desembrulhar o envelope de um protocolo de aplicação existente.

A bridge é somente de entrada. Quando o usuário lê ou dispensa uma notificação, a aplicação envia o seu próprio frame pelo mesmo cliente sgcWebSockets. O tópico de ajuda Fontes ao vivo traz um exemplo.

Não. As mensagens que chegam em uma thread de socket entram em fila e são aplicadas em uma única visita à thread principal, de modo que uma rajada de 1.000 linhas de log custa uma visita. O modelo de log também é thread safe, de modo que uma thread de trabalho pode acrescentar linhas diretamente. No Delphi 7 a 2009, mantenha a notificação padrão do cliente, que notifica na thread principal.

Os modelos e os controles de cada peça, e as mensagens de presença ao vivo. As mensagens ao vivo dos modelos de notificações, atividades e log, um ribbon como destino do emblema e as fontes ao vivo são somente Registrada.

Páginas dos produtos: sgcNavigation, sgcToolbar, sgcDashboard, sgcGrid, sgcWebSockets e a suíte sgcUI.

Melhor custo-benefício: All-AccessTodos os produtos da eSeGeCe, com Suporte Premium incluído, a partir de €1,059/ano.
Ver preços do All-Access

Crie as suas telas ao vivo com o sgcUI

O trial All-Access inclui todos os produtos sgcUI, para você experimentar cada peça do pacote.