Skip to Content
Dashboard IoTPagine e Navigazione

Pagine e Navigazione

I board IronFlock non sono limitati a una singola schermata. Puoi creare più pagine e spostarti fluidamente tra di esse usando i widget di navigazione — offrendo agli utenti modi semplici e cliccabili per passare da una pagina all’altra.

Navigation demo showing a Static Routing layout with side menu and tab bar, and a Dynamic Routing layout with a machine list

Come Funziona la Navigazione

La navigazione è gestita tramite i percorsi (route). Un percorso è la parte dell’URL dopo .../home/ e indica a IronFlock quale pagina visualizzare.

  • Aggiungere una nuova pagina → viene creato un nuovo percorso per essa.
  • Un widget di navigazione cambia il percorso nella barra degli indirizzi → IronFlock mostra immediatamente la pagina collegata.

Tipi di Widget di Navigazione

Ci sono tre widget di navigazione tra cui scegliere:

  • Side Navigation — un menu laterale verticale, ideale per le sezioni principali. Può mostrare elementi statici o generarli dinamicamente dai dati (ad es. una voce per ogni macchina nel progetto).
  • Tab Bar — una barra di tab orizzontale per passare tra le sotto-visualizzazioni all’interno di una pagina.
  • Navigation Button — un singolo pulsante che collega a una pagina specifica.

Percorsi Relativi vs. Assoluti

I widget di navigazione supportano due stili di routing:

  • I percorsi assoluti iniziano con una barra obliqua (ad es. /settings/device1) e navigano sempre esattamente verso quel percorso.
  • I percorsi relativi non hanno una barra iniziale (ad es. device2/profile) e sostituiscono l’ultimo segmento del percorso corrente.

Esempio: Se ti trovi su /settings/device1 e navighi verso device2/profile, il nuovo percorso diventa /settings/device2/profile.

Nota: /settings e /settings/ non sono la stessa cosa:

  • Da /settings, navigare verso device1 porta a /device1
  • Da /settings/, navigare verso device1 porta a /settings/device1

Routing Dinamico

Invece di creare una pagina separata per ogni dispositivo nel progetto, puoi usare un percorso con carattere jolly con *.

Esempio: Crea una pagina su /assets/*. Qualsiasi percorso come /assets/device1, /assets/device2 o /assets/qualsiasi_cosa visualizzerà quella singola pagina.

All’interno della pagina, i widget possono leggere i segmenti del percorso per filtrare automaticamente i dati. Se l’URL è /assets/device1, i segmenti sono:

  • Segmento 1 → assets
  • Segmento 2 → device1

Configura un widget per filtrare in base al segmento 2 e mostrerà automaticamente i dati del dispositivo presente nell’URL. Naviga verso /assets/device2 e la stessa pagina si adatta mostrando i dati di device2 — nessuna pagina duplicata necessaria.

Con i widget di navigazione e il routing dinamico, il tuo board diventa modulare e consapevole del progetto. Che tu abbia 5 dispositivi o 5.000, puoi navigarli e gestirli tutti senza disordine o complessità.

Last updated on