Habiller l'application

Aperçu des composants CSS

Le chapitre précédent a permis de créer une application respectant le pattern MVC, aux composants isolés les uns des autres et s’appuyant sur un système de routes qui permet de naviguer entre les écrans en fonction des actions utilisateur. Le fonctionnement basique d’une application mobile est donc en place et il est maintenant temps de commencer à agrémenter l’application de plusieurs fonctionnalités et notamment de mettre en forme les informations à afficher tout en offrant une expérience utilisateur la plus ergonomique possible.

L’une des grandes forces de Ionic est sa bibliothèque de composants graphiques qui offrent un rendu proche des composants disponibles sur les plateformes natives. Il est ainsi possible de reproduire une interface comme celle d’iOS ou d’Android en utilisant de simples boutons HTML, des listes, des titres et des éléments de formulaire. Ces composants peuvent ensuite être personnalisés à l’aide de règles CSS, pour offrir un rendu qui différenciera l’application des autres applications Ionic et mettra en valeur le produit ou le service présenté.

Ionic recense plus d’une trentaine de composants prêts à l’emploi qui reprennent le design et l’ergonomie de composants typiquement utilisés dans les applications mobiles natives. La liste exhaustive de ces composants ainsi que leurs paramètres sont détaillés sur la documentation officielle de Ionic accessible à l’adresse suivante : http://ionicframework.com/docs/components/

Grille et responsive design

Une application mobile n’est pas uniquement constituée d’une succession de composants présentés dans des listes. Certains éléments peuvent occuper peu de place à l’écran et par pure préoccupation esthétique ou ergonomique, le développeur devra les afficher dans une grille et non de manière linéaire. C’est particulièrement vrai pour adapter l’affichage aux grands écrans des tablettes. Là où, sur smartphone, l’affiche d’un film et son titre occupe toute la largeur de l’écran, sur tablette seule une partie de l’écran sera utilisée, donnant l’impression d’un contenu pauvre. Dans ce cas, les informations peuvent être affichées sur deux, trois ou quatre colonnes.

Ionic met à disposition du développeur un ensemble de classes CSS très simples d’utilisation qui vont permettre de construire des grilles flexibles et responsive. La technique utilisée est celle des flexbox, prise en charge par les navigateurs modernes, dont les navigateurs mobiles embarqués compatibles avec Ionic. Il en résulte une méthode universelle, simple à utiliser et reposant sur une logique de conteneurs décorés de simples classes CSS.

<div class="row"> 
     ... 
</div>
 

Aperçu des composants JS

La mécanique de Ionic repose sur plusieurs outils fondamentaux : les classes CSS, les directives et les services AngularJS.

Les classes CSS détaillées dans la section précédente ont permis d’habiller l’application et de réutiliser des composants HTML relookés qui offrent un rendu similaire à une application mobile native.

De nombreuses directives permettent à leur tour de raffiner l’affichage et surtout le comportement de l’application. Par exemple, en spécifiant comment doit réagir un champ lorsque l’utilisateur fait un glissé-déposé ou encore en rechargeant des données dynamiquement lorsque le bas de page est atteint.

Plusieurs services, accessibles depuis les contrôleurs, vont quant à eux produire diverses actions : ouverture d’une fenêtre modale pour confirmer une suppression, affichage d’une animation de chargement, ou encore gestion du bouton retour présent sur les terminaux Android.

La bonne pratique pour un développeur Ionic est donc de vérifier s’il n’existe pas déjà une directive, un service ou un paramètre, qui permette de répondre au besoin avant de s’engager dans un développement spécifique. Pour la plupart des besoins, Ionic fournit un outil prêt à l’emploi et personnalisable.

Navigation

La navigation dans une application mobile ne peut être réduite à ce qui se pratique sur le web. Sur un site web, l’utilisateur parcourt une série de pages et utilise les boutons retour et suivant pour remonter le long de son historique. Il dispose également de plusieurs onglets (ou fenêtres) pour ouvrir des pages différentes et peut facilement passer de l’un à l’autre. Ces comportements ne sont pas possibles sur mobile : l’utilisateur n’a pas accès à la barre d’outils du navigateur (qui n’existe pas du tout dans le cas des applications natives) et peut exécuter des actions uniquement avec son doigt (sans clavier, souris, ou raccourcis clavier), ce qui ne permet pas d’utiliser efficacement un système de fenêtres ou d’onglets. Les designers d’applications mobiles se sont donc adaptés et ont imposé des pratiques qui permettent de retrouver de la fluidité dans la navigation tout en prenant en compte les contraintes esthétiques et ergonomiques des smartphones.

Le résultat de ces travaux sur la navigation mobile a donné naissance à trois concepts fondamentaux :

Ces trois mécanismes sont implémentés par Ionic et peuvent être mis en place rapidement, sans avoir à coder soi-même ces composants complexes.

Configuration générale

Plusieurs composants, qu’ils soient CSS ou JavaScript, font l’objet d’un comportement par défaut qu’il est possible de surcharger. Néanmoins, si un comportement doit se retrouver dans toute l’application, le fait de devoir surcharger la configuration pour toutes les pages va vite devenir consommateur, que ce soit en développement ou en maintenance. C’est le cas par exemple pour régler les caractéristiques du cache : l’attribut cache-view peut être positionné sur toutes les directives ion-view, mais aussi positionné pour toute l’application.

La configuration générale de Ionic s’applique généralement dans la méthode config() qui est appelée au bootstrap d’AngularJS. De cette manière, lorsque AngularJS donne la main au premier contrôleur, l’ensemble des paramètres Ionic sont entrés et pris en compte. Toutes les manipulations sur la configuration vont donc s’effectuer dans le fichier app.js. C’est le service $ionicConfigProvider qui doit être injecté afin de pouvoir accéder à toutes les méthodes décrites ci-dessous.

angular.module('starter', ['ionic']) 
     .config(function($ionicConfigProvider) { 
          ... 
     }); 

.config(function($ionicConfigProvider) { 
     $ionicConfigProvider.views.maxCache(0); 
});
 

Gestes

L’utilisateur d’application mobile ne dispose que d’un seul moyen pour interagir avec elle : toucher l’écran tactile avec son doigt. Sur le web traditionnel, cela suffit généralement, mais cela devient très restrictif sur smartphone. Comment afficher des options supplémentaires sur une liste, déplacer un élément dans une liste sans déclencher le défilement de l’écran ou encore mettre en place un mécanisme de zoom ?

Ionic propose des outils simples pour répondre à ces problématiques et enrichir l’application avec la gestion des gestes de l’utilisateur.

<ion-item on-tap="MonCtrl.onTap()"></ion-item>