Framework component + Framework data (manual mount)

Framework component + Framework data (manual mount) - documentazione operativa e tecnica

pattern-sviluppostable

Overview

Pattern: Framework component + Framework data (manual mount)

Usi i widget del framework (<wuic-list-grid>, <wuic-chart-list>, <wuic-map-list>, <wuic-spreadsheet-list>, <wuic-kanban-list>, <wuic-tree-list>, <wuic-scheduler-list>, <wuic-carousel-list>, <wuic-data-repeater>, <wuic-parametric-dialog>, ...) montati a mano su un <wuic-data-source> metadata-driven con hardcodedRoute="...". Rispetto al Pattern 1 "Full autogeneration" — che scaffoldizza l'intera pagina da metadata — qui sei tu a comporre il template Angular, scegliendo quali widget usare, come disporli e a quali eventi reagire, pur continuando ad attingere dati e configurazione colonne dal metadata WUIC.

Quando usarlo

  • Serve una sola vista specifica su un'entity esistente (solo grid, solo chart, solo map, ecc.) senza montare l'intera pagina autogen.
  • Serve layout misto con piu' widget WUIC nella stessa pagina (es. grid + chart sincronizzati sullo stesso datasource).
  • Si vuole intercettare eventi UI della list-grid (onPaging, onSorting, onBeforeRowRender, onPTableRowExpand, ...) o del datasource (datasourceReady$, fetchInfo$, afterFirstLoad$, beforeSync$, afterSync$) per logica host-side personalizzata.
  • Si vuole sperimentare un archetype alternativo senza modificare la metadata della route (es. mostrare cities come carousel in una pagina promo, mantenendo la list-grid standard nel menu principale).

Architettura

Tre attori, la compozione e' tua:

  • Framework: espone i widget Angular (wuic-framework-lib) + il DataSourceComponent che risolve schema e dati da _metadati__tabelle / _metadati__colonne.
  • Sviluppatore: scrive un componente Angular che istanzia il datasource con hardcodedRoute e monta i widget WUIC nel suo template.
  • Utente finale: naviga la pagina custom ma vede widget ed interazioni standard del framework (paging, filter-bar, export, gestione stato, ecc.).
Snippet 1text
<wuic-data-source #ds [hardcodedRoute]="'cities'"></wuic-data-source>
<wuic-list-grid [datasource]="ds.fetchInfo$" (onPaging)="log($event)"></wuic-list-grid>

Cosa fai tu

1. Crei un Angular component standalone (@Component({ standalone: true, imports: [DataSourceComponent, ListGridComponent, ...] })).

2. Imposti nel template <wuic-data-source #ds [hardcodedRoute]="..."> col nome route metadata.

3. Monti uno o piu' widget WUIC bindati al datasource ([datasource]="ds.fetchInfo$" o [hardcodedDatasource]="ds" a seconda del widget).

4. Opzionalmente ti iscrivi agli @Output dei widget / ai Subject del datasource per la tua logica custom.

5. Aggiungi la route al app.routes.ts (loadComponent) e il componente e' subito funzionante.

Il metadata della route (md_props_bag.archetypes.*) continua a pilotare la maggior parte del comportamento dei widget (status-columns per kanban, fromField/toField per scheduler, ecc.) — tu aggiungi solo la compozione Angular e l'handling eventi.

Trade-off

ProContro
Controllo completo sul layout della pagina (puoi affiancare piu' widget, usare Material/PrimeNG accanto, ecc.)Devi scrivere tu il componente (non e' autogen)
Accesso esplicito a tutti gli @Output dei widget e ai Subject del datasourceSe il metadata route cambia shape (colonne, FK, ecc.) devi verificare che il tuo layout regga
Riusi al 100% data layer + permessi + filtri + i18n del frameworkDuplichi codice boilerplate di montaggio widget (mitigabile con component-loader / data-repeater)
Puoi usare archetype diversi dallo standard della route senza toccare la metadataURL custom (deve essere aggiunta al routing / menu manualmente)

Differenza rispetto agli altri pattern

  • [Pattern 1 — Full autogeneration](./pattern-full-autogeneration.md): stessa data source e stessi widget, ma la pagina e' generata dal framework (<wuic-crafter-route>). Zero codice. Qui scrivi TU il componente Angular.
  • [Pattern 2 — Framework data + Custom component](./pattern-framework-data-custom-comp.md): data source del framework ma UI 100% custom (niente widget WUIC, solo Angular/PrimeNG). Qui invece USI i widget WUIC.
  • [Pattern 3 — Framework component + Custom data](./pattern-framework-comp-custom-data.md): stessa composizione di widget manuale, ma il data source NON parte da metadata WUIC — usa un endpoint REST/OData custom. Qui invece la route e' registrata come metadata.
  • [Pattern 4 — Full custom](./pattern-full-custom.md): pure Angular senza widget ne' data source WUIC. Qui usi entrambi.

Esempi vivi nel WuicTest

Gli 11 esempi sotto esplorano singolarmente ogni widget WUIC con hardcodedRoute="cities" (e varianti come schedules, kanban-task, uploadsample). Cartella sorgente: wwwroot/src/app/component/examples/pattern-5/.

  • Cities list-grid → monta <wuic-list-grid> e sottoscrive tutti gli eventi UI (paging, sorting, filtering, row-expand, column-resize). Apri demo.
  • Cities chart → monta <wuic-chart-list> con datasource subject-driven e i Subject afterSync/beforeSync. Apri demo.
  • Cities map → monta <wuic-map-list> (archetype map) con lat/long delle citta'. Apri demo.
  • Cities spreadsheet → monta <wuic-spreadsheet-list> per bulk-edit tipo Excel. Apri demo.
  • Cities edit → monta <wuic-parametric-dialog> + <wuic-pager> per la sola vista dettaglio record. Apri demo.
  • Cities wizard → monta <wuic-parametric-dialog [isWizard]=true> per wizard multi-step con dataTabs. Apri demo.
  • Cities data-repeater events → monta <wuic-data-repeater> con switcher di archetype runtime (list/chart/spreadsheet/map). Apri demo.
  • Kanban task → monta <wuic-kanban-list> su route kanban-task con colonne di status + drag&drop card. Apri demo.
  • Tree sample → monta <wuic-tree-list> su route gerarchica (parentField). Apri demo.
  • Schedules scheduler → monta <wuic-scheduler-list> (calendar view from/to). Apri demo.
  • Uploadsample carousel → monta <wuic-carousel-list> con image field binding. Apri demo.

Vedi anche