Nell’ambito delle applicazioni di trasformazione digitale, una delle necessità più frequenti è quella di sviluppare applicazioni omnichannel, cioè per smartphone, tablet e desktop. Per ottenere questo risultato serve molto di più dei semplici framework responsive, che si limitano ad utilizzare qualche tecnica CSS per adattare la larghezza del contenuto al video.
Innanzitutto occorre un framework che generi un aspetto grafico aderente alle linee guida del tipo di device: per Apple e per Android esistono riferimenti specifici differenti fra loro.
Poi si deve tenere conto delle modalità di input specifiche dei dispositivi touch, come ad esempio, la gestione della tastiera a schermo, l’edge swipe per tornare alla pagina precedente, le dimensioni per i controlli adatte alle dita, il feedback aptico, eccetera.
Il tutto senza dimenticarsi dell’utilizzo desktop tramite mouse e tastiera, che richiede ancora una volta un adattamento del contenuto al tipo di esperienza utente atteso per le applicazioni desktop.
Per poter soddisfare queste necessità Instant Developer Cloud contiene un set di elementi grafici denominato IonicUI che permettono di realizzare applicazioni omnichannel in grado di funzionare correttamente su desktop, smartphone e tablet, sia di tipo Apple che Android.
IonicUI è un fork del noto framework Ionic per lo sviluppo di applicazioni mobile; la decisione di effettuare il fork è nata sia dalla necessità di integrazione con Instant Developer Cloud che dalla necessità di proteggere gli utenti di Instant Developer da breaking change introdotte dalla versione originale.
Elementi disponibili #
Gli elementi visuali disponibili in IonicUI sono i seguenti:
- Struttura dell’applicazione: IonSplitPane, IonNavController, IonMenu.
- Struttura della pagina: IonPage, IonHeader, IonFooter, IonContent, IonToolbar, IonSearchBar, IonButtons, IonTabs, IonTab.
- Griglie e Card: IonGrid, IonRow, IonCol, IonCard, IonCardSection.
- Liste: IonList, IonItem.
- Testi, Label e Immagini: IonTitle, IonLabel, IonNote, IonBadge, IonText, IonIcon, IonAvatar, IonThumbnail.
- Controlli: IonButton, IonCheckbox, IonToggle, IonRadio, IonSegment, IonSegmentButton, IonInput, IonRange, IonDateTime, IonSelect, IonAutocomplete, IonSwipe, IonSpinner.
Oltre a questi elementi è possibile utilizzare ogni altro elemento visuale disponibile, sia di tipo base che componenti finiti come mappe e grafici, e anche elementi personalizzati. Non è invece possibile aggiungere nella stessa applicazione anche altri template grafici come ad esempio Bootstrap.
IonicUI contiene per default il set di icone IonIcons, sia in versione 4 che 5, date le caratteristiche diverse fra loro, e consente di aggiungere icon set personalizzati come verrà spiegato nei paragrafi successivi.
Per rendere disponibile IonicUI in un proprio progetto è necessario importare il package IonicUI tramite la videata apposita dell’IDE.