Componente ActivityFeed — sgcHTML

De un vistazo

TsgcHTMLComponent_ActivityFeed

Añade actividades con AddActivity, lee HTML para el renderizado inicial, y luego envía nuevos elementos en vivo con un fragmento WebSocket.

Clase del componente

TsgcHTMLComponent_ActivityFeed

Genera

Lista de Bootstrap 5 + CSS encapsulado + script de tiempo relativo en vivo

Familia

Datos y Tablas

Lenguajes

Delphi, C++ Builder, .NET

Inicio rápido

Añade actividades, renderízalo, envía nuevas en vivo

Llama a AddActivity por cada entrada, lee HTML para la página inicial, y luego envía un nuevo elemento como fragmento fuera de banda por WebSockets con GetLastItemFragmentHTML.

uses
  sgcHTML_Enums, sgcHTML_Component_ActivityFeed;

var
  oFeed: TsgcHTMLComponent_ActivityFeed;
begin
  oFeed := TsgcHTMLComponent_ActivityFeed.Create(nil);
  try
    oFeed.FeedID := 'timeline';
    oFeed.Title := 'Recent Activity';
    oFeed.MaxItems := 30;

    oFeed.AddActivity('Ana', 'closed', 'ticket #482', hcSuccess, 'bi bi-check-circle');
    oFeed.AddActivity('Marc', 'commented on', 'invoice #1190', hcPrimary);

    WebModule.Response := oFeed.HTML;   // feed list + scoped CSS + live relative-time script
  finally
    oFeed.Free;
  end;
end;

// Push a new item live to connected clients (out-of-band htmx fragment):
oFeed.AddActivity('Ana', 'approved', 'purchase order #77', hcSuccess);
Engine.BroadcastFragment(oFeed.GetLastItemFragmentHTML);

// includes: sgcHTML_Enums.hpp, sgcHTML_Component_ActivityFeed.hpp

TsgcHTMLComponent_ActivityFeed *oFeed = new TsgcHTMLComponent_ActivityFeed(NULL);
try
{
  oFeed->FeedID = "timeline";
  oFeed->Title = "Recent Activity";
  oFeed->MaxItems = 30;

  oFeed->AddActivity("Ana", "closed", "ticket #482", hcSuccess, "bi bi-check-circle");
  oFeed->AddActivity("Marc", "commented on", "invoice #1190", hcPrimary);

  String html = oFeed->HTML;   // feed list + scoped CSS + live relative-time script
}
__finally
{
  delete oFeed;
}

using esegece.sgcWebSockets;

var feed = new TsgcHTMLComponent_ActivityFeed();
feed.FeedID = "timeline";
feed.Title = "Recent Activity";
feed.MaxItems = 30;

feed.AddActivity("Ana", "closed", "ticket #482", TsgcHTMLColor.hcSuccess, "bi bi-check-circle");
feed.AddActivity("Marc", "commented on", "invoice #1190", TsgcHTMLColor.hcPrimary);

string html = feed.HTML;   // feed list + scoped CSS + live relative-time script

// Push a new item live to connected clients (out-of-band htmx fragment):
feed.AddActivity("Ana", "approved", "purchase order #77", TsgcHTMLColor.hcSuccess);
engine.BroadcastFragment(feed.GetLastItemFragmentHTML());

Referencia

Propiedades y métodos clave

Los miembros que usarás con más frecuencia.

Items / AddActivity

AddActivity(aActor, aAction, aTarget, aColor, aIcon, aActorAvatarURL) añade una entrada y devuelve el TsgcHTMLActivityItem.

Búfer circular

MaxItems limita cuántas entradas se conservan; el elemento más antiguo se descarta automáticamente al alcanzar el límite.

Tiempo relativo

ShowRelativeTime muestra marcas de tiempo tipo "hace 3 min" que se mantienen en vivo en el cliente; TimeFormat es el formato de reserva cuando está desactivado.

Envío en vivo

GetItemFragmentHTML / GetLastItemFragmentHTML construyen un fragmento htmx fuera de banda para PushFragment / BroadcastFragment, de modo que una nueva actividad aparece sin recargar la página.

Estado vacío

EmptyText es el texto de marcador mostrado mientras Items está vacío; GetEmptyFragmentHTML lo vuelve a renderizar como fragmento de envío.

Diseño

Title etiqueta el feed, Compact reduce el espaciado de las filas, y HTML devuelve el feed junto con su CSS encapsulado y su script.

Recursos

Sigue explorando

	Ayuda en líneaReferencia completa de la API y guía de uso para este componente.	Abrir
	Todos los componentes de sgcHTMLExplora la matriz completa de más de 80 componentes.	Abrir
	Descargar prueba gratuitaLa prueba de 30 días incluye los proyectos de demostración 60.HTML.	Abrir
	PreciosLicencias Single, Team y Site con código fuente completo.	Abrir

ActivityFeed