Il template IonicUI permette di suddividere l’interfaccia utente dell’applicazione in pagine diverse, in cui ogni pagina corrisponde ad una videata. La struttura base di una pagina è costituita dagli elementi mostrati nell’immagine seguente.
Il primo elemento è di tipo IonPage e rappresenta il contenitore dell’intera pagina. All’interno troviamo i tre elementi principali, header (IonHeader), footer (IonFooter) e content (IonContent). Header e footer rappresentano le intestazioni fisse, mentre content è un contenuto scorrevole.
Di solito l’intestazione e il contenuto sono sempre presenti, mentre il piede può mancare. Se la videata è contenuta in una tabbed view, il piede non è mai presente.
Nei dispositivi con tastiera a video, se nella videata è presente un campo di input, quando la tastiera appare si sovrappone al piede della videata. Per default, la videata viene ristretta ed il piede si sposta apparendo subito sopra la tastiera. In alcuni casi, tuttavia, si preferisce lasciare che il piede rimanga nascosto dalla tastiera, ad esempio se è troppo ingombrante o se è meglio che l’utente chiuda la tastiera prima di accedere al contenuto del piede. Per mantenere il piede fisso sotto la tastiera è necessario impostare position:fixed come stile in linea dell’oggetto IonFooter.
All’interno dell’elemento header troviamo sempre un elemento navbar (IonNavBar) che gestisce il pulsante di ritorno alla videata precedente o del menu; all’interno della navbar troviamo sempre un elemento title (IonTitle) che rappresenta il titolo della videata. Usando questi specifici elementi otterremo un’applicazione in grado di adattarsi alle linee guida dei vari tipi di dispositivi supportati.
Il contenuto del footer può variare. È possibile inserire direttamente nel footer un elemento IonButton per ottenere un floating action button in stile material design, altrimenti è preferibile inserire una toolbar (IonToolbar) in cui verrà composto il contenuto del piede.
Per quanto riguarda il content, è possibile includere elementi di qualunque tipo. Tuttavia il template IonicUI suggerisce di presentare il contenuto usando una struttura costituita da una IonList che a sua volta contiene elementi di tipo IonItem.
Nota importante: per ottenere velocemente la struttura di default della pagine è consigliabile inserire direttamente all’interno della videata vuota un template di elementi chiamato IonStdPage che è possibile trovare sempre nella barra degli elementi visuali dell’IDE. A questo punto sarà possibile eliminare le parti non necessarie o modificare le proprietà di quelle esistenti. Nell’immagine seguente è mostrata una videata in cui è stato inserito il template IonStdPage.
Il template IonStdPage
Toolbar e pulsanti #
L’intestazione e il piede di pagina sono spesso utilizzate per contenere pulsanti di azione o ulteriori controlli come barre di ricerca o contenuti testuali di riepilogo.
Per inserire pulsanti nelle intestazioni o nei piè di pagina, a parte il caso “floating action button” visto in precedenza, il metodo migliore è quello di utilizzare un elemento contenitore di tipo IonButtons. Nell’immagine seguente possiamo vedere un esempio di questa struttura.
Per inserire ulteriori controlli nell’intestazione o nel piede, è possibile utilizzare elementi di tipo IonToolbar, che, a loro volta, potranno contenere barre di ricerca (IonSearchBar), contenitori di pulsanti (IonButtons), label (IonLabel), o altri elementi visuali. L’immagine seguente mostra un esempio di barra di ricerca nell’intestazione.
Le tabbed view #
Una struttura di pagina molto utilizzata è la visualizzazione a schede, in cui nella pagina viene visualizzata una barra di selezione di contenuti alternativi. Questo è un buon pattern se si hanno al massimo cinque contenuti alternativi ed essi non sono correlati fra loro.
La struttura base di una tabbed view è mostrata nell’immagine seguente:
L’elemento base della pagina è di tipo IonTabs e a sua volta contiene un elemento IonTab per ogni contenuto alternativo. Nell’immagine ci sono tre IonTab, ognuno per i vari contenuti alternativi che si desiderano mostrare.
All’interno di ogni IonTab deve essere contenuta una pagina completa. Nell’esempio è stata inserita una IonStdPage in ogni tab eliminando il footer da ognuna di esse perché non interferisca con la barra sottostante.
Per rendere le varie tab ancora più indipendenti, al posto di creare la struttura visuale all’interno della medesima videata, è possibile creare videate separate per ogni contenuto, renderle utilizzabili come componenti di design time e poi inserire direttamente le videate come unico contenuto di ogni tab. Per maggiori informazioni sull’utilizzo di videate a design time, si legga il paragrafo Videate come elementi visuali successivo.
Si noti infine che l’elemento IonTabs ha la possibilità di essere posizionato nella parte alta dello schermo oppure in basso. Se non si specifica alcuna opzione, esso apparirà in basso su dispositivi iOS oppure in alto per Android o nel browser. Per una maggiore uniformità della user experience, si consiglia di impostare la proprietà Placement dell’oggetto IonTabs a bottom.