DinaZen

Biblioteca de componentes Blazor sobre Radzen que da a una app .NET el aspecto y el comportamiento de Play Dinaup.

DinaZen es la biblioteca de componentes Blazor con los que Play monta sus pantallas: tarjetas, etiquetas de estado, tablas de informe, formularios dinámicos, diálogos y ventanas. Todos llevan el prefijo Dnz y se instalan con el paquete NuGet DinaZen (net10.0, sobre Radzen.Blazor y el SDK Dinaup).

El SDK .NET trae el dato y DinaZen lo muestra. Ningún componente escribe en Dinaup salvo DnzFormView, que guarda la ficha que el usuario edita; lo demás se guarda con las WriteOperations del Cliente Dinaup. Donde no haya pieza Dnz, usa el componente de Radzen directamente.

Antes de empezar

Un proyecto Blazor Server en .NET 10 con Radzen registrado (AddRadzenComponents).
Para los componentes que leen datos (informes, formularios, selectores), un DinaupClientC conectado: Cliente Dinaup.
Los tipos de fila generados (SectionsD, APIImpuestosC y similares) vienen de MyDinaup.

Instalación

Añade el paquete

dotnet add package DinaZen

En el .csproj, importa de forma estática Dinaup.extensions para tener .STR(), .INT(), .IsEmpty() e .IsNotNull() en todos los .razor:

<ItemGroup>
  <Using Include="Dinaup.extensions" Static="true" />
</ItemGroup>

Registra los servicios en `Program.cs`

AddDinaZen registra IHttpContextAccessor, HttpClient, ICultureService, DnzWindowManagerService y DnzInterceptorService.

builder.Services.AddRadzenComponents();
builder.Services.AddDinaZen();

Importa los espacios de nombres en `_Imports.razor`

@using DinaZen
@using DinaZen.Components
@using DinaZen.Components.DnzDynamicStat
@using DinaZen.Components.DinaupFlex.Components
@using DinaZen.Components.DinaupFlex.Forms
@using DinaZen.Components.DinaupFlex.Reports
@using DinaZen.Components.DinaupFlex.Reports.Provider
@using DinaZen.Components.DinaupFlex.DynamicDocuments
@using DinaZen.Components.WindowManager
@using DinaZen.Dialogs

Enlaza CSS y JS en `_Host.cshtml`

DnzHead inyecta las hojas CSS de DinaZen y DnzScripts, sus scripts (Chart.js, highlight.js, Uppy, subida y editor de imagen).

<head>
    <component type="typeof(DnzHead)" render-mode="ServerPrerendered" />
</head>
<body>
    <component type="typeof(App)" render-mode="ServerPrerendered" />
    <component type="typeof(DnzScripts)" render-mode="ServerPrerendered" />
</body>

Coloca los hosts en `MainLayout.razor`

Los diálogos necesitan <RadzenDialog /> y las ventanas flotantes, <DnzWindowHost />. Van una sola vez.

<RadzenDialog />
<RadzenNotification />
<DnzWindowHost />

`DnzConfig`

Clase estática que se ajusta en Program.cs antes de builder.Build().

Propiedad	Tipo	Por defecto	Qué hace
`DeepDispose`	`bool`	`false`	Los componentes de formulario ponen sus referencias a `null` en `Dispose()`. Para circuitos Blazor Server de larga duración.

Componentes

Familia	Para qué	Piezas principales
Datos tipados (Spans)	Mostrar un importe, fecha, duración o peso con el formato de la región.	`DnzSpanMoney`, `DnzSpanDate`, `DnzSpanKV`
Tarjetas y maquetación	Cabeceras, tarjetas y contenedores con la jerarquía visual de Play.	`DnzCard`, `DnzCardTitle`, `DnzBanner`
Etiquetas y estados	Etiquetas de estado con color deducido del texto.	`DnzBadgetAutoColor`, `DnzDeltaBadge`
KPIs y métricas	Cifras, tendencias y la estadística que elige su propio formato.	`DnzKpiCard`, `DnzDynamicStat`
Selectores	Elegir un enum, una fila en memoria o una ficha del servidor.	`DnzEnumDropDown`, `DnzDataGridDropDown`, `DnzRowSelector`
Tablas e informes	Mostrar un informe de Flex como tabla, tarjetas, gráfica o clasificación.	`DnzReportView`, `DnzReportProvider`
Entrada de datos y formularios	Búsqueda, ficheros, texto rico, etiquetas y la ficha completa de una sección.	`DnzSearchInput`, `DnzFileUploaderButton`, `DnzFormView`
Carga y rendimiento	Indicador de carga, esqueleto, contenido diferido y aislamiento de errores.	`DnzLoader`, `DnzSkeleton`, `DnzDeferredContent`
Vistas especializadas	Gantt, código resaltado, periodos, documentos dinámicos y piezas de RRHH.	`DnzGenericGantt`, `DnzPeriodSelector`, `DnzDynamicDocumentView`
Diálogos y ventanas	Esqueleto de diálogo, diálogos predefinidos y ventanas flotantes.	`DnzDialogLayout`, `DnzConfirmDialog`, `DnzWindowManagerService`

Componentes dinámicos

Tres componentes reciben un identificador o un dato y montan la pieza entera con la definición que guarda Dinaup:

Componente	Recibe	Monta
`DnzReportView`	Cliente y GUID del informe	La tabla con columnas tipadas, buscador, filtros, paginación en servidor y CSV.
`DnzFormView`	Cliente, GUID de la sección y `DatoId` (vacío para un alta)	La ficha completa con pestañas, campos, validación, listas y guardado.
`DnzDynamicStat`	Un `DnzDynamicStatData`	Un KPI, una gráfica (hasta 20 categorías) o una tabla, según la forma del dato.

<DnzReportView Client=@Client ReportId="3f2a9c10-8b4e-4d21-9f77-1a2b3c4d5e6f" />
<DnzFormView Client=@Client SectionId=@SectionsD.EntidadesD._SectionID DatoId="" />
<DnzDynamicStat Data=@_ventas Title="Ventas del mes" Icon="payments" />

Los tres se abren también en una ventana flotante con OpenAsWindow, que recibe el DnzWindowManagerService inyectado. El gestor admite hasta 6 ventanas a la vez: Diálogos y ventanas.

Convenciones

Nombres de propiedad con nameof. Cuando un componente pide el nombre de una propiedad (TextProperty, ColorProperty), pásalo así: TextProperty=@nameof(APIImpuestosC.APIImpuestos_RowC.TextoPrincipal).
Atributos extra. La mayoría de componentes pasan al elemento raíz los atributos que no reconocen: data-testid, id, title o una clase suelta.
Carga. DnzLoader para una operación en curso, DnzSkeleton para reservar el hueco mientras llega el dato: Carga y rendimiento.
Pie de diálogo. Cancelar en Danger + Text a la izquierda y Aceptar en Success con IsBusy a la derecha: Diálogos y ventanas.

Las convenciones de C# y Blazor del resto del ecosistema están en las guías de estilo C# y Blazor.

En esta página