sgcUI 실시간 UI 팩: Delphi, C++Builder, .NET을 위한 접속 상태, 알림, 활동, 실시간 로그

운영 콘솔, 헬프 데스크, 관리자 패널, 트레이딩 화면은 모두 데이터가 계속 움직이는 가운데 같은 질문에 답해야 합니다. 지금 누가 접속 중인지, 무엇에 주의를 기울여야 하는지, 누가 무엇을 바꿨는지, 그리고 지금 무엇이 실패하고 있는지입니다. sgcUI 실시간 UI 팩은 모델과 네이티브 컨트롤 세트로 각각에 답하고, 한 가지 종류의 JSON 메시지로 모두를 실시간 피드에 연결합니다.

1분 만에 보는 Realtime UI 팩: 하나의 JSON 메시지로 갱신되는 접속 상태, 알림, 활동, 실시간 로그. YouTube에서도 보기.

실시간 UI 팩은 별도의 제품이 아닙니다. 각 구성 요소는 그것이 확장하는 sgcUI 제품인 sgcUICore, sgcNavigation, sgcToolbar, sgcDashboard, sgcGrid 안에 있으며, 이미 사용 중인 유닛, 패키지, NuGet 패키지에 포함되고 해당 제품의 에디션을 따릅니다. Delphi와 C++Builder에서는 VCL과 FireMonkey, .NET에서는 WinForms, WPF, Avalonia에서 동작하며, 라이트, 다크, 고대비 테마, 오른쪽에서 왼쪽으로 쓰는 레이아웃, 12개 언어를 지원합니다.

접속 상태: 누가 접속 중인가

TsgcUIPresenceModel은 애플리케이션의 사용자를 이름, 이니셜, 색상, 아바타 이미지, 상태(온라인, 자리 비움, 다른 용무 중, 오프라인), 상태 텍스트, 마지막 접속 시간과 함께 보관합니다. 컨트롤은 모델을 읽고 상태가 바뀌면 스스로 다시 그립니다.

• 아바타(TsgcVCLAvatar): 이니셜 또는 사진과 상태 점.
• 아바타 그룹(TsgcVCLAvatarGroup): 팀의 아바타를 겹쳐 보여주며, MaxVisible을 넘으면 “+N” 칩으로 접힙니다.
• 접속 상태 표시점(TsgcVCLPresenceIndicator): 명단과 목록에 쓰는, 텍스트가 붙은 상태 점.
• sgcChat의 사용자도 이제 접속 상태 사용자이므로, 채팅과 팀 명단이 같은 사람들을 공유합니다.

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;

알림: 토스트 알림, 수신함, 벨 배지

TsgcNotificationModel은 현재 사용자의 알림을 제목, 본문, 심각도, 시간, 읽음 상태, 동작, 그룹과 함께 보관하고 읽지 않은 개수를 관리합니다. 네 가지 구성 요소가 이를 보여줍니다.

• 토스트 알림(TsgcVCLToastManager): 폼이나 화면의 모서리에 쌓이고, 포커스를 가져가지 않으며, 저절로 사라지고, 마우스를 올리면 멈추며, 동작 버튼을 제공합니다. 심각도 색상은 테마에서 가져옵니다.
• 수신함(TsgcVCLNotificationInbox): 날짜별로 묶은 가상화 목록으로, 전체와 읽지 않음 필터, 모두 읽음으로 표시, 닫기, 동작을 제공합니다.
• 환경설정(TsgcVCLNotificationPrefsEditor): 카테고리와 채널(앱 내, 토스트, 이메일, 푸시)의 그리드입니다. 토스트 관리자는 사용자가 요청한 것만 표시합니다.
• 벨 배지(TsgcToolbarBadgeLink): 읽지 않은 개수를 도구 모음 항목의 배지로 표시하며, 99를 넘으면 “99+”로 나타내고, Registered에서는 리본 항목에도 쓸 수 있습니다.

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;

활동 피드와 감사 추적: 누가 무엇을 했는가

TsgcDashboardActivityModel은 누가 언제 무엇을 했는지 기록합니다. 행위자, 동사, 대상, 결과, 그리고 감사를 위해 변경된 모든 필드의 이전 값과 이후 값입니다. 행위자 이름, 색상, 아바타는 접속 상태 모델에서 가져오므로 피드와 명단은 항상 일치합니다.

• 활동 피드(TsgcVCLActivityFeed): 날짜별로 묶은 타임라인으로, 12개 언어의 상대 시간, 행위자, 동사, 대상 유형, 텍스트별 필터, 이전 항목 불러오기 페이징을 제공합니다.
• 감사 추적(TsgcVCLAuditTrail): 같은 항목을 행으로 보여주며, 펼치면 변경된 각 필드의 이전 값과 새 값이 나타납니다.
• 대시보드 타일: sgcDashboard용 활동 피드 타일과 감사 추적 타일로, 검색 상자가 있고 대시보드 레이아웃에 저장됩니다.

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;

실시간 로그 뷰어: 지금 무엇이 실패하는가

TsgcGridLogModel은 로그 줄의 스레드 안전 링 버퍼로, trace부터 fatal까지의 수준, 소스, 메시지, 속성을 가지며, 수준, 소스, 텍스트 필터와 텍스트, JSON, CSV 내보내기를 지원합니다. 어느 스레드에서나 추가할 수 있고, 변경 사항은 묶음으로 화면에 반영됩니다. TsgcGridLogLink는 모든 sgcGrid를 로그 뷰어로 바꿔 줍니다.

• 수준별 색상은 테마에서 가져오며, 텍스트 또는 정규식 강조도 지원합니다.
• Follow tail은 가장 최근 줄이 계속 보이게 하며, 사용자가 위로 스크롤해 읽기 시작하면 저절로 멈춥니다.
• Pause와 Resume, 그리고 선택한 행을 복사하는 Copy lines.
• 새 줄이 도착하고 가장 오래된 줄이 링에서 밀려나도 보이는 줄은 제자리를 유지합니다.

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

실시간 데이터: 모든 피드를 위한 하나의 메시지

네 모델은 같은 종류의 JSON 메시지를 읽으므로 하나의 연결로 모두를 전달할 수 있습니다. 각 메시지는 자신의 type과 op를 밝히고, 각 모델은 자기 몫만 가져갑니다.

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

세 가지 실시간 소스가 sgcWebSockets를 통해 모델을 서버에 연결합니다. TsgcUILiveSource_WebSocket, TsgcUILiveSource_MQTT, TsgcUILiveSource_SSE입니다. 각 소스는 URL, 자격 증명, TLS, 재연결이 이미 설정된 클라이언트에 연결되어 모든 메시지를 바인딩에 전달합니다. 작업자 스레드에서 도착한 메시지는 메인 스레드에서 한 번의 배치로 적용되므로, 로그 1000줄이 한꺼번에 들어와도 사용자 인터페이스에는 한 번만 접근합니다. 바인딩에서는 MQTT 토픽, SSE 이벤트 이름, 필터, 애플리케이션 봉투 안의 경로를 지정할 수도 있습니다.

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;

실시간 소스는 Registered이며, sgcUI의 모든 sgcWebSockets 브리지와 마찬가지로 sgcWebSockets가 필요합니다. 서버가 없거나 Community 빌드에서는 애플리케이션이 대신 모델 API를 호출합니다. AddOrUpdate와 SetStatus, Add 또는 Post, AddActivity, Append입니다.

모든 플랫폼, 라이트와 다크

같은 모델과 같은 JSON이 모든 플랫폼에서 실행됩니다. .NET 컨트롤은 esegece.sgcUICore, esegece.sgcNavigation, esegece.sgcToolbar, esegece.sgcDashboard, esegece.sgcGrid 패키지에 같은 이름으로 들어 있는 네이티브 WinForms, WPF, Avalonia 컨트롤이며, 다크와 고대비를 포함한 스위트의 모든 테마가 새 컨트롤에도 적용됩니다.

실시간 운영 데모

실시간 운영 데모는 모든 구성 요소를 한 화면에 모았습니다. 팀 명단, 수신함과 환경설정이 있는 토스트 알림, 벨 배지, 활동 피드와 감사 추적, 그리고 실시간 로그입니다. 모두 내장 시뮬레이터로 구동되므로 서버 없이 실행됩니다. Delphi 스위트 데모에는 VCL, FireMonkey, C++Builder용으로, .NET 스위트 데모에는 WinForms, WPF, Avalonia용으로 포함되어 있으며, 시뮬레이터는 모든 플랫폼에서 같은 순서를 만들어 냅니다. 두 번째 VCL 데모 RealtimeLive는 같은 메시지를 프로세스 내 WebSocket 서버와 TsgcUILiveSource_WebSocket을 통해 보내며, URL 상자로 자신의 서버에 연결할 수도 있습니다.

에디션

각 구성 요소는 그것을 담고 있는 제품의 에디션을 따릅니다. sgcUICore의 접속 상태 구성 요소와 sgcGrid의 로그 구성 요소는 Community를 포함한 모든 에디션에 있으며, 접속 상태 메시지도 마찬가지입니다. 알림과 배지 구성 요소에는 sgcUI Standard 이상의 sgcNavigation과 sgcToolbar가, 활동 구성 요소에는 sgcUI Professional 이상의 sgcDashboard가 필요합니다. 무료 .NET Community 패키지에도 포함되지만, Delphi Community 에디션에는 sgcGrid만 포함됩니다. 실시간 알림, 활동, 로그 메시지, 배지 대상으로서의 리본, 세 가지 실시간 소스는 Registered입니다. 제품별 자세한 내용은 실시간 UI 팩 페이지와 실시간 UI 팩 도움말을 읽어 보세요.

질문이나 의견이 있으신가요? 문의하세요. 코드를 작성한 사람들이 직접 답변해 드립니다.