Scheda Elementi
Gestire elementi e livelli nel Template Designer.
La scheda Elements (Elementi) è il centro di controllo per la gestione della struttura del modello. Qui è possibile aggiungere nuovi componenti visivi al canvas e gestire l'ordine di sovrapposizione (livelli) degli elementi esistenti.
Gestione vs configurazione
La scheda Elementi è esclusivamente per aggiungere, riordinare ed eliminare elementi. Per configurare proprietà come posizione, font, contenuto o dimensione, utilizzi la scheda Style (Stile).
Aggiunta di elementi
Per aggiungere un componente al modello, clicchi semplicemente uno dei pulsanti nella griglia "Add Elements". Il nuovo elemento apparirà sul canvas e verrà aggiunto in cima all'elenco Layers (Livelli).
| Tipo di elemento | Descrizione |
|---|---|
| Text (Testo) | Un blocco di testo standard. Può essere testo statico o mappato ai dati. |
| Image (Immagine) | Un'immagine statica (es. logo, firma). |
| Barcode (Codice a barre) | Genera un codice a barre (Code39, Code128, ecc.) dai dati. |
| QR Code (Codice QR) | Genera un codice QR 2D dai dati. |
| Static Table (Tabella statica) | Una griglia fissa per layout come intestazioni o riquadri informativi. |
| Group Table (Tabella di dettaglio) | Una tabella dinamica che itera sui dati transazionali. |
Tipi di elemento aggiuntivi
Gli elementi Rect (rettangolo) e Line (linea) sono supportati ma possono essere aggiunti solo modificando direttamente il file YAML del modello. Non sono disponibili tramite i pulsanti dell'interfaccia Designer.
Pannello Livelli e Z-Order
L'elenco Layers (Livelli) nella parte inferiore della scheda mostra tutti gli elementi sulla pagina corrente. L'ordine di questo elenco determina l'ordine di disegno (Z-Index) e l'ordine di flusso per il posizionamento relativo.
Gestione dei livelli
- Selezione: Clicchi un livello per selezionare l'elemento corrispondente.
- Riordinamento:
- Freccia su (↑): Sposta l'elemento SU nell'elenco (visivamente: verso lo sfondo).
- Freccia giù (↓): Sposta l'elemento GIÙ nell'elenco (visivamente: verso il primo piano).
- Eliminazione: Clicchi l'icona del cestino per rimuovere l'elemento.
Comprendere lo Z-Order (sovrapposizione)
L'ordine degli elementi nell'elenco determina il loro ordine di sovrapposizione (z-index).
- Inizio dell'elenco = Disegnato per primo (sfondo)
- Fine dell'elenco = Disegnato per ultimo (primo piano)
Se due elementi si sovrappongono (es. testo sopra un'immagine), l'elemento più in basso nell'elenco apparirà sopra l'elemento più in alto.
Caso di studio: posizionamento relativo e ordine dei livelli
Quando si imposta la posizione di un elemento su Relative nella scheda Style, l'ordine dei livelli diventa fondamentale.
Regola del posizionamento relativo
Un elemento "Relativo" si posiziona in base all'angolo inferiore sinistro dell'elemento precedente nell'elenco dei livelli.
Scenario di esempio
Si immagini di avere due elementi di testo:
- "Titolo Report" (testo statico, font grande)
- "Data" (testo variabile, font piccolo)
Si desidera che la Data appaia automaticamente sotto il Titolo Report, indipendentemente dalla lunghezza del titolo.
Configurazione corretta
Ordine dei livelli:
- Titolo Report (primo nell'elenco)
- Data (secondo nell'elenco) -> Posizione: Relative
Risultato: La Data guarda l'elemento immediatamente precedente (Titolo Report), calcola dove finisce il titolo e si posiziona direttamente sotto.
Configurazione errata
Ordine dei livelli:
- Data (primo nell'elenco) -> Posizione: Relative
- Titolo Report (secondo nell'elenco)
Risultato: La Data non ha un "elemento precedente" (o guarda il margine della pagina), quindi resta in alto. Il Titolo Report viene disegnato dopo la Data, potenzialmente sovrapponendosi o apparendo nella posizione sbagliata.
Buona pratica
Quando si costruiscono layout basati sul flusso (come il corpo di una lettera), ci si assicuri che l'elenco dei livelli corrisponda all'ordine di lettura (dall'alto verso il basso).