Il canvas

Le schermate di un'app si disegnano in un editor visuale: trascini widget da una palette su un canvas, li posizioni al pixel con l'aiuto di una griglia e di guide intelligenti, e rifinisci ogni dettaglio in un inspector a destra. Questa pagina spiega quell'ambiente di lavoro — tutto ciò che viene dopo (widget, dati, eventi) accade dentro di esso.

Gli esempi vengono dall'app Gestione Clienti: un CRM con schermate di account, opportunità e dashboard.

#Aprire e creare schermate

Le schermate vivono nella barra laterale dell'app, nella scheda UI, dentro la sezione Schermate. Cliccare su una schermata la apre in una scheda dello spazio di lavoro — puoi avere più schermate aperte affiancate, e ogni scheda si ricorda che cosa stavi facendo.

Per creare una schermata:

1. Apri l'app e scegli la scheda UI nella barra laterale.
2. Nella sezione Schermate, clicca sul pulsante Nuova schermata.
3. Dalle un nome — per esempio, Scheda Cliente — e conferma con Crea.
4. La schermata si apre subito nello spazio di lavoro, pronta da disegnare.

La stessa sezione ha cartelle (Nuova cartella) per organizzare l'albero, le schermate di Sistema (login, recupero password e registrazione — con rotta e parametri fissi) e i Layout — template riutilizzabili che restano per il capitolo Layout e design per dispositivo.

#Le tre zone del designer

Zona	Che cos'è
Widget (sinistra)	Il catalogo dei widget. Trascinane uno qualsiasi sul canvas — il suggerimento sull'elemento stesso te lo dice: Trascina sul canvas.
Canvas (centro)	La pagina della schermata, disegnata alla scala reale del dispositivo attivo, già con il tema dell'app applicato. Quello che vedi è ciò che l'app mostra.
Inspector (destra)	Le proprietà di ciò che è selezionato — o della schermata stessa, quando non c'è selezione. Ha due schede: Proprietà e Struttura.

Sopra il canvas c'è la barra degli strumenti: i tre dispositivi (Web (1280px), Tablet (768px), Mobile (390px)), undo/redo, livelli, duplica, elimina, allinea/distribuisci, Anteprima e lo zoom (Ingrandisci, Riduci, e la percentuale cliccabile per Ripristina 100%).

La paleta Widget raggruppa il catalogo per tipologia (Contenitori, Editor, Azioni e navigazione, Contenuto e Dati, più Custom quando l'app ha widget propri); ogni gruppo si richiude con un clic sul titolo, e la casella Cerca in alto filtra per nome, senza distinguere maiuscole né accenti. La larghezza della paleta si trascina dal bordo destro e viene ricordata; doppio clic sulla maniglia ripristina quella di origine. Paleta, barra degli strumenti e intestazione sono le stesse nei designer di workflow e di report.

#La griglia

Il canvas poggia su una griglia che tiene le schermate in ordine senza legarti le mani:

• In orizzontale, la pagina si divide in 48 colonne. La posizione e la larghezza di un widget si contano in colonne — è ciò che fa sì che una schermata disegnata per il web resti proporzionata in un modale più stretto.
• In verticale, l'aggancio è a passi di 8 pixel; la posizione e l' altezza si salvano al pixel.

Trascinando, il widget si aggancia alla colonna e al passo verticale più vicini. Se hai bisogno di lasciarlo esattamente dov'è il mouse, tieni premuto il tasto Alt durante il trascinamento — l'aggancio si disattiva finché resta premuto.

Gli stessi valori si possono scrivere a mano: con un widget selezionato, la categoria Layout dell'inspector mostra Col, Largh (in colonne), Y e Alt (in pixel).

La gutter si definisce per il web e scala con la larghezza del dispositivo: 16 px sul web (1280 px) diventano 10 px su tablet e 5 px su mobile, così lo spazio tra i widget resta proporzionale sugli schermi piccoli. Per questo due widget su colonne adiacenti sono sempre alla distanza giusta, qualunque sia il dispositivo.

#Selezionare, spostare, ridimensionare

• Clic seleziona un widget; Shift+clic aggiunge o toglie dalla selezione; trascinare a partire da una zona vuota disegna un riquadro di selezione che prende tutto ciò che tocca.
• Trascina un widget per spostarlo; tira le maniglie degli angoli e dei lati per ridimensionarlo.
• Le frecce della tastiera spostano la selezione: ←/→ una colonna, ↑/↓ un pixel — e Shift+↑/↓ otto pixel alla volta.
• Lasciare un widget dentro un Pannello, delle Schede o una Barra fissa lo rende figlio di quel contenitore: comincia a muoversi con lui e la posizione diventa relativa al contenitore.

#Guide intelligenti

Mentre trascini o ridimensioni, il canvas confronta il widget in movimento con i vicini e suggerisce agganci — le guide si disegnano sul momento:

Guida	Quando appare
Allineamento	Un lato o il centro del widget resta allineato con il lato/centro di un vicino — il widget si incolla a quella linea.
Spaziatura uguale	Stai lasciando il widget alla stessa distanza a cui due vicini stanno già fra loro — la fila resta con intervalli giusti.
Dimensione uguale	Ridimensionando, la larghezza o l'altezza diventa uguale a quella di un vicino — si incolla a quella dimensione.

L'allineamento vince sulla spaziatura, e la spaziatura vince sulla griglia: quando stai visibilmente cercando di accostare a un lato, è questo che succede.

#Allineare e distribuire

Con due o più widget selezionati, la barra degli strumenti attiva i pulsanti di allineamento: Allinea a sinistra, Centra orizzontalmente, Allinea a destra, Allinea in alto, Centra verticalmente e Allinea in basso. Con tre o più, si aggiungono Distribuisci orizzontalmente e Distribuisci verticalmente, che pareggiano gli intervalli tenendo il primo e l'ultimo al loro posto.

Con più widget selezionati l'inspector riassume: N widget selezionati — usa la barra per allineare/distribuire.

#Livelli

I widget possono sovrapporsi — un'Etichetta sopra un'Immagine, per esempio. L'ordine si controlla dalla barra degli strumenti: Porta in primo piano, Avanti di un livello, Indietro di un livello e Porta in fondo.

#Ancore — legare ai margini

Per impostazione predefinita, un widget resta dove l'hai posato. Le ancore legano i lati del widget ai margini della pagina (o del contenitore in cui si trova): seleziona un widget e clicca sui perni che appaiono a metà di ogni lato — Ancora in alto, Ancora a sinistra, Ancora a destra, Ancora in basso.

• Ancorare sinistra + destra fa allungare il widget con la larghezza della pagina — la classica intestazione a tutta larghezza.
• Ancorare in basso incolla il widget in fondo alla pagina — una barra di pulsanti che resta in basso, qualunque sia l'altezza della pagina.

#L'altezza della pagina

La pagina di una schermata ha altezza fissa per dispositivo — non cresce mai da sola con il contenuto. Il bordo inferiore del canvas è una maniglia: trascinala per regolare (Altezza della pagina — trascina per regolare). Sotto il contenuto, lo sfondo della schermata prosegue fino in fondo (lo sfondo continua fino alla fine della schermata). Se il contenuto supera l'altezza, l'utente scorre — salvo che tu non lo disattivi (vedi le proprietà della schermata).

#Annullare, ripetere e le scorciatoie

Ogni gesto — lasciare, spostare, ridimensionare, cambiare una proprietà, eliminare — è un passo di cronologia. Annulla (Ctrl+Z) e Ripeti (Ctrl+Shift+Z) sono nella barra; movimenti di tastiera consecutivi si fondono in un solo passo, perché l' undo non debba tornare indietro tasto per tasto.

Scorciatoia	Azione
Ctrl+Z / Ctrl+Shift+Z (o Ctrl+Y)	Annulla / Ripeti
Ctrl+C / Ctrl+X / Ctrl+V	Copia / Taglia / Incolla (la copia entra spostata di una colonna)
Ctrl+D	Duplica la selezione
Ctrl+A	Selezionare tutti i widget del dispositivo attivo
Delete o Backspace	Elimina la selezione
Escape	Azzerare la selezione
Frecce / Shift+↑↓	Spostare la selezione (colonna per colonna; 1 px; 8 px)
Ctrl+rotellina del mouse	Zoom

Su Mac, usa ⌘ dove si legge Ctrl.

#Salvataggio automatico e anteprima

Non c'è un pulsante di salvataggio: le modifiche si salvano da sole. L'angolo in alto a destra dice a che punto sono — Salvataggio…, Salvato, oppure Salvataggio non riuscito — riprova se qualcosa è andato storto (basta rimettere mano per riprovare).

Il pulsante Anteprima salva ciò che è in sospeso e apre la schermata nell'app reale, in una nuova scheda del browser — passi dal login come qualsiasi utente e vedi la schermata funzionare con dati veri.

#L'inspector

L'inspector ha due schede:

• Proprietà — tutto ciò che è modificabile in ciò che è selezionato.
• Struttura — l'albero dei widget del dispositivo attivo.

#Proprietà di un widget

Con un widget selezionato, la parte alta dell'inspector mostra il tipo e l'id del widget (in carattere monospaziato) — è questo id che usi nel codice degli eventi. Le proprietà si organizzano in categorie; ogni widget mostra solo quelle che lo riguardano:

Categoria	Che cosa contiene
Layout	Col, Largh, Y, Alt, e gli interruttori Visibile e Attivo (un widget inattivo resta grigio e senza interazione, anche da tastiera).
Accesso	Richiede l'azione — un'azione dichiarata in Impostazioni ▸ Autorizzazioni; chi non ce l'ha non usa il widget. In Senza l'azione scegli Nascondi o Mostra disattivato.
Contenuto	Testi, etichette, icone — e i Valori della frase (vedi più sotto).
Dati	Il collegamento ai dati del widget (vedi Datastore e dati).
Comportamento	Opzioni di funzionamento — viste, trascinamenti, azioni al clic.
Validazione	Nei campi di modulo: Obbligatorio, regole standard e script (vedi I widget).
Interazione	Azioni di clic di widget come il Pulsante.
Aspetto	Stile visivo (vedi più sotto).
Eventi	Gli eventi del widget (vedi Eventi e SDK).

Alcuni widget hanno elementi interni modificabili — una colonna della Tabella, un campo dell'Elenco, una scheda delle Schede. Clicca sull'elemento direttamente nel canvas per modificarlo; l'inspector passa a quell'elemento e il pulsante torna al widget ti riporta indietro.

#Aspetto

La categoria Aspetto è uguale in (quasi) tutti i widget: Sfondo, Bordo con Tratto del bordo (Continuo, Tratteggiato, Punteggiato), raggio, padding, Ombra (Nessuna ombra, Leggera, Media, Forte, Extra), e le opzioni di Testo — colore, Dimensione, Peso, Allinea testo. I colori accettano i token del tema dell'app o valori hex — usa i token ogni volta che è possibile, perché il widget segua il tema.

Il raggio (px) è il raggio degli angoli del widget, in pixel, e prevale sul raggio del tema in tutto il widget: la cornice e gli elementi interni (il campo di un input, le celle di una tabella, le schede di un elenco). Vuoto usa il raggio del tema; zero sono angoli retti. I widget dentro un contenitore con raggio proprio mantengono quello del tema, a meno che non abbiano il loro. Gli elenchi che si aprono sopra (le opzioni di un elenco, la finestra di scelta) mantengono il raggio del tema. KeplinGo segue la stessa regola.

I widget con intestazione propria (pannelli, tabelle, grafici…) aggiungono qui Mostra titolo e Mostra descrizione, con i rispettivi testi.

#Regole di formattazione

Sempre nell'Aspetto, le Regole di formattazione cambiano lo stile in base ai dati: colorare di rosso le righe in ritardo, nascondere un pulsante a seconda della sessione, mettere un KPI in verde sopra l'obiettivo.

1. Clicca su Nuova regola.
2. Scegli l'ambito — Il widget, Ogni riga o Una cella (riga/cella esistono solo nei widget che disegnano righe, come la Tabella).
3. In Quando, aggiungi le condizioni (campo, operatore, valore — il valore può venire da un parametro, dalla sessione, dallo stato…). Senza condizioni, la regola si applica sempre.
4. In Allora, scegli che cosa cambia: Sfondo, Colore del testo, Grassetto, Corsivo, Sottolineato, Allineamento, Formato o Nascondi.

L'ordine conta — l'ultima regola che corrisponde è quella che vale. L'interruttore Attiva disattiva una regola senza eliminarla, per fare prove. E il codice degli eventi ha sempre l'ultima parola sulle regole.

#Valori della frase

Qualsiasi testo di un widget può avere dei buchi: scrivi {n} nel testo (per esempio, "{n} account attivi") e la sezione Valori della frase appare nella categoria Contenuto, per dire da dove viene ogni valore — da un datastore, da un parametro, dalla sessione, dallo stato o da un altro widget. È il modo di mettere numeri vivi dentro frasi traducibili senza scrivere codice.

#La scheda Struttura

La scheda Struttura elenca tutti i widget del dispositivo attivo, ad albero (contenitori con i figli dentro). Serve a selezionare ciò che è coperto, vedere ciò che è nascosto (Nascosto da un contenitore padre) e commutare la visibilità iniziale di ogni widget con l'occhio — Nascondi su questo dispositivo / Mostra su questo dispositivo.

#La schermata e le sue proprietà

Clicca su una zona vuota del canvas (o premi Escape) e l'inspector passa a mostrare la schermata stessa:

Sezione	Che cosa definisce
Schermata	Il nome e il Percorso — il cammino della schermata nell'indirizzo dell'app (minuscole, numeri e trattini).
Parametri del percorso	I parametri che la schermata riceve nell'indirizzo (es.: l'id dell'account in /ficha-de-conta/:id). Ognuno può essere Obbligatorio; l'ordine si regola con Sposta su/Sposta giù.
Comportamento	Scorrimento della schermata — Automatico o Nessuno scorrimento.
Accesso	Schermata pubblica (senza sessione) — la schermata si apre senza login; i dati arrivano solo da API pubbliche.
Aspetto	Lo sfondo della pagina: Colore, Immagine (assets) e Adattamento (Copri, Contieni, Estendi, Centra, Ripeti).
Navigazione	La Schermata padre di una pagina che non è in nessun menu (un dettaglio): l'app evidenzia il suo menu e mantiene aperta la barra laterale. Vedi Navigazione dell'app.
Presentazione	Se la schermata è una pagina normale, un Modale (al centro) o un Pannello laterale (a destra) — dettagliato in Eventi e SDK. Con Barra (area widget), la schermata è il contenuto di un'area widget della Navigazione dell'app.
Template della schermata	Il Layout associato — vedi Layout e design per dispositivo.
Dati	I datastore della schermata — vedi Datastore e dati.
Eventi	Gli eventi della schermata (onLoad, onParamsChange, onUnload) — vedi Eventi e SDK.

#Perché no…?

• Perché non riesco a spostare un widget? Se appare con un lucchetto, viene da un layout — la posizione si modifica nel layout stesso, non nella schermata. Vedi Layout e design per dispositivo.
• Perché il widget non si aggancia dove voglio? Le guide e la griglia stanno vincendo sul tuo gesto — tieni premuto Alt per disattivare l'aggancio mentre trascini.
• Perché il widget è sparito dal canvas? Guarda la Struttura: può essere nascosto (occhio), dentro una scheda che non è attiva, o dietro un altro widget (usa i livelli).