Dopo aver analizzato la struttura dell'applicazione minimale generata a partire dal template a tab di Ionic, vediamo come modificarla per creare una nostra applicazione.
Per esplorare le principali funzionalità messe a disposizione dal framework per lo sviluppo di app mobile ibride, realizzeremo un aggregatore di notizie che mostra all'utente un elenco di titoli forniti da un server e consente di visualizzare il dettaglio di ciascuna notizia. Il risultato finale avrà un aspetto analogo a quello mostrato dalla seguente immagine:
Per prima cosa vediamo come definire l'interfaccia utente. Apriamo quindi il file home.html sotto pages/home e sostituiamo il contenuto dell'elemento <ion-content> con il seguente markup:
<h2 class="center">Principali notizie</h2>
<ion-list>
<ion-item>
<ion-thumbnail item-left>
<img src="assets/news/https://www.html.it/wp-content/uploads/2016/11/news1Preview.jpg">
</ion-thumbnail>
<h2>Incubo Brexit, le grandi banche pronte a lasciare Londra dal 2017</h2>
<p>23/10/2016</p>
<button clear item-right>Leggi</button>
</ion-item>
</ion-list>ion-list, ion-item e ion-thumbnail
Questo snippet evidenzia alcuni dei componenti di Ionic più usati nella costruzione di interfacce grafiche. L'elemento ion-list è il selettore del componente Ionic che ci consente di creare liste con una grande varietà di caratteristiche. Nell'esempio abbiamo utilizzato la modalità di base del componente. Il marcatore <ion-list> prevede al suo interno un elenco di elementi <ion-item> che rappresentano i singoli elementi della lista, in modo analogo a quanto avviene per i marcatori HTML standard <ul> e <li>.
Nel nostro caso, ciascun elemento della lista conterrà un'immagine sulla sinistra, presentata tramite il componente ion-thumbnail, un titolo, una data ed un pulsante sulla destra.
Direttive sotto forma di attributi
Come si vede, Ionic non fornisce solo componenti da utilizzare all'interno dell'HTML tramite marcatori con prefisso ion-, ma anche direttive utilizzabili come attributi HTML su elementi standard che determinano anche la modalità di visualizzazione, come la visualizzazione sulla sinistra (item-left) o sulla destra (item-right) all'interno di un elemento della lista.
ion-item-group e ion-item-divider
Ionic consente quindi di creare liste in maniera varia. Oltre all'approccio di base che abbiamo già visto, abbiamo la possibilità di inserire divisori per raggruppare gli elementi della lista in gruppi omogenei. Ad esempio, potremmo raggruppare le nostre notizie per giorno utilizzando gli elementi <ion-item-group>, <ion-item-divider> e <ion-item>, come mostrato dal seguente codice:
<ion-item-group>
<ion-item-divider>Notizie del 23/10/2016</ion-item-divider>
<ion-item>
<ion-thumbnail item-left>
<img src="assets/news/https://www.html.it/wp-content/uploads/2016/11/news1Preview.jpg">
</ion-thumbnail>
<h2>Incubo Brexit, le grandi banche pronte a lasciare Londra dal 2017</h2>
<button clear item-right>Leggi</button>
</ion-item>
<ion-item>
<!-- ... -->
</ion-item>
</ion-item-group>Il componente <ion-item-group> consente di raggruppare le notizie dello stesso giorno, mentre il componente <ion-item-divider> evidenzia il giorno specifico per ciascun gruppo. Il risultato sarà analogo a quello mostrato dalla seguente immagine:
Altre possibilità di presentazione delle liste permettono di creare liste con icone, multilinea, con elementi scorrevoli e così via. Un elenco dei possibili modi di implementare le liste in Ionic si può trovare sulla documentazione ufficiale.
