Layout e design per dispositivo

Due cose di questa pagina si assomigliano e non sono la stessa:

• Un layout è un design condiviso da più schermate — l'intestazione, la cornice, il piè di pagina che si ripetono. Si fa una volta e si usa ovunque.
• Un dispositivo è un design della stessa schermata per un'altra dimensione — il web, il tablet, il cellulare. Ognuno è indipendente.

Una riguarda il riutilizzo fra schermate; l'altra riguarda il servire la stessa schermata su schermi di dimensioni diverse.

#Layout

Un layout è un documento come una schermata — ha widget e può avere datastore — ma senza percorso, senza parametri e senza regole di accesso. Non si naviga verso un layout: è lui lo sfondo di chi lo usa.

#Creare un layout

1. Nella barra laterale, scheda UI, sezione Schermate.
2. Clicca sul pulsante Nuovo layout, nell'intestazione della sezione (oppure, nel menu ⋯ di una cartella, per crearlo lì dentro).
3. Scrivi il Nome del layout — il campo suggerisce es.: Base con intestazione.
4. Crea.

Il layout resta nello stesso albero delle schermate (la nota lo dice: Il layout resta nell' albero delle schermate — trascinalo dove vuoi), con un'icona propria, e si apre subito in una scheda.

#Disegnare un layout

L'editor è lo stesso delle schermate — palette, canvas, inspector, gli stessi gesti e le stesse scorciatoie (vedi Il canvas). Le differenze sono volute:

Nel layout	Perché
Il badge dell'intestazione mostra /layout.	Un layout non ha percorso.
Non ci sono Parametri del percorso, Presentazione né Eventi della schermata.	Niente di tutto ciò appartiene al layout.
Al posto di Template della schermata, l'inspector ha Template di base, con la riga Base.	Un layout può poggiare su un altro.

#Mettere un layout in una schermata

1. Apri la schermata e clicca su una zona vuota del canvas (l'inspector passa a mostrare la schermata).
2. Apri la categoria Template della schermata.
3. Nella riga Layout, scegli il layout. Per toglierlo, scegli — nessun layout —.

Il suggerimento della categoria riassume il contratto: Template dietro il contenuto: i widget del layout appaiono bloccati; le proprietà e gli eventi si configurano per schermata.

#Che cosa cambia nella schermata

I widget del layout cominciano ad apparire nel canvas della schermata, dietro il contenuto di quest'ultima, e con un lucchetto nell'angolo. Ciò che si può e non si può fare con loro è una regola fissa:

Nella schermata, su un widget del layout
Spostare, ridimensionare, eliminare, duplicare	No. La posizione si modifica nel layout stesso.
Cambiare le proprietà (testi, colori, opzioni)	Sì — e la modifica è solo di questa schermata.
Visibile / Attivo	Sì, per schermata.
Eventi	Sì — il comportamento è sempre della schermata.
Accesso e Valori della frase	No. Si definiscono nel layout.

L'inspector ti dice in che situazione sei: Widget del layout: la posizione si modifica nel layout; proprietà, visibilità ed eventi sono di QUESTA schermata.

#Senza "zone di contenuto"

Non ci sono slot né aree riservate: il contenuto della schermata è sempre disegnato sopra il layout. È chi disegna il layout a lasciare lo spazio libero dove le schermate scriveranno — un'intestazione in alto, una barra in basso, e il mezzo vuoto.

#Collisioni e catene

Due regole che la piattaforma verifica e si rifiuta di rompere:

• Id e nomi univoci. Una schermata e il suo layout non possono avere lo stesso id di widget né lo stesso nome di datastore — Collisione con il layout: l'id di widget "…" esiste in entrambi. Non ci sono prefissi automatici: il nome che hai scelto è il nome che resta.
• Al massimo 3 livelli, e senza giri. Un layout può poggiare su un altro (Template di base), ma la catena si ferma a tre — La catena di layout supera i 3 livelli. — e un ciclo viene rifiutato.

#Quando il layout cambia

La schermata conserva soltanto quale sia il layout e le modifiche che ha fatto a widget di quest'ultimo. Il design non viene copiato — perciò cambiare il layout cambia tutte le schermate che lo usano, sul momento, nell'app pubblicata.

Due conseguenze pratiche:

• Nel costruttore, una scheda di schermata che era già aperta non si aggiorna da sola quando salvi il layout: chiudi e riapri la schermata per vederla con la versione nuova.
• Eliminare un layout in uso non viene impedito. Le schermate che lo usavano si aprono senza di esso, con l'avviso Il layout associato non esiste più. — non si rompono, ma restano senza la cornice.

#Design per dispositivo

Una schermata ha tre design possibili, uno per dispositivo:

Dispositivo	Larghezza di riferimento
Web (1280px)	Computer.
Tablet (768px)	Tablet, e finestre strette.
Mobile (390px)	Cellulare.

Si commutano con i tre pulsanti a sinistra della barra del designer.

La griglia è la stessa in tutti e tre — 48 colonne — e ciò che cambia è la larghezza di ogni colonna. Un widget con 24 colonne occupa metà della pagina in qualsiasi dispositivo; l'altezza, invece, si conta sempre in pixel.

#Non c'è ereditarietà

Questa è la regola che spiega tutto il resto: ogni dispositivo ha il suo albero di widget, completo e indipendente. Non esiste un "nascondi nel web e mostra nel cellulare" fra alberi — ciò che non è nell'albero di un dispositivo non esiste in quel dispositivo.

Il web esiste sempre. Il tablet e il cellulare possono essere da disegnare — e in quel caso l'app serve il design web, compresso alla larghezza reale. È un ripiego per servire, non ereditarietà: restano design separati nel momento di modificarli.

#Cominciare il design di un dispositivo

Scegli Tablet (768px) o Mobile (390px) in una schermata che non li ha ancora e il designer mostra la card Questo dispositivo non ha ancora un design, con la spiegazione — Ogni dispositivo ha il proprio design. Finché questo non esiste, il runtime serve il design web. — e due strade:

Pulsante	Che cosa fa
Copia dal web	Duplica il design web come punto di partenza. Gli id dei widget restano gli stessi (i collegamenti ai dati e il codice continuano a trovarli) e le larghezze si riadattano perché sono in colonne.
Inizia vuoto	Un foglio bianco, per disegnare da zero.

La copia avviene una volta. Da lì in poi i design seguono vite separate: mettere mano al web non tocca il cellulare.

#Nascondere widget su questo dispositivo

Dentro un dispositivo, la scheda Struttura dell'inspector ha un occhio su ogni widget: Nascondi su questo dispositivo / Mostra su questo dispositivo. Un widget nascosto resta nell'albero e resta modificabile dalla Struttura — semplicemente non esce nella schermata.

Se ciò che è nascosto è il contenitore, i figli se ne vanno con lui — e il loro occhio lo spiega: Nascosto da un contenitore padre.

#L'altezza della pagina

L'altezza è per dispositivo: un cellulare può avere una pagina molto più alta del web per la stessa schermata. Trascina il bordo inferiore del canvas (Altezza della pagina — trascina per regolare) per cambiarla.

Quando la pagina è più alta del dispositivo, il canvas disegna una linea tratteggiata con l'etichetta fondo del viewport — è lì che finisce ciò che si vede senza scorrere. Tutto ciò che sta sotto quella linea appare solo a chi scorre la pagina.

#Che cosa serve l'app

Nell'app pubblicata, il dispositivo è scelto dalla larghezza della finestra: sotto i 640 px è cellulare, sotto i 1024 px è tablet, sopra è web. Ridimensionare la finestra cambia il design servito, lì per lì.

Senza un design per il dispositivo rilevato, viene servito il web. Nell'app mobile nativa, questo ripiego viene annunciato — Questa schermata non ha un design per cellulare — viene mostrato il design web.

Il pulsante Anteprima apre la schermata nell'app reale; per vedere come viene in un'altra dimensione, cambia la dimensione della finestra del browser.

#Eventi, id e dispositivi

Siccome ogni dispositivo è un albero, lo stesso id di widget può esistere in tutti e tre — è voluto, è "lo stesso widget logico in un'altra dimensione". Ma ognuno ha le sue proprietà e il suo codice: cambiare l'onClick del pulsante nel web non cambia quello del cellulare.

Scrivendo codice (vedi Eventi e SDK), ricordati che keplin.widgets.get("...") trova solo i widget del dispositivo che sta girando. Un widget che esiste solo nel web dà errore sul cellulare.

#Layout e dispositivi, insieme

Le due cose si combinano con la stessa regola: il layout è composto per dispositivo. Un layout disegnato solo per il web appare anche negli alberi di tablet e cellulare delle schermate che lo usano, servendo il suo design web — e un layout con un design proprio per cellulare serve quello.

#Come decidere

Situazione	La strada
La stessa intestazione in 20 schermate.	Un layout.
Una schermata complessa che sul cellulare deve essere un'altra cosa.	Un design per cellulare proprio.
Un pulsante che sul cellulare non ha senso.	L'occhio della Struttura nel dispositivo cellulare.
Un menu diverso sul cellulare.	L'editor di Navigazione, nel dispositivo cellulare.
Un'app che verrà usata solo sul computer.	Disegna solo il web e non pensarci più.

#Perché no…?

• Perché non riesco a toccare questo widget? Ha il lucchetto: viene dal layout. Apri il layout e mettici mano lì — nella schermata cambi solo proprietà, visibilità ed eventi.
• Perché non mi lascia scegliere il layout? C'è una collisione: la schermata e il layout hanno lo stesso id di widget o lo stesso nome di datastore. Rinominane uno dei due.
• Perché la schermata non mostra le modifiche che ho fatto al layout? La scheda della schermata era aperta. Chiudi e riapri.
• Perché il cellulare mostra il design del web tutto stretto? Quella schermata non ha un design per cellulare. Scegli Mobile (390px) e usa Copia dal web o Inizia vuoto.
• Perché ho messo mano al web e il cellulare non è cambiato? Perché sono design indipendenti. La copia avviene solo nel momento in cui crei il dispositivo.
• Perché è sparita la cornice da tutte le schermate? Il layout è stato eliminato. Le schermate avvisano Il layout associato non esiste più. — ricrealo e riscegli il layout in Template della schermata.