Blog ENI : Toute la veille numérique !
Dernière chance (fin le 29/02) : -25€ dès 75€ sur les livres en ligne, vidéos... code FUSEE25. J'en profite !
Accès illimité 24h/24 à tous nos livres & vidéos ! 
Découvrez la Bibliothèque Numérique ENI. Cliquez ici
  1. Livres et vidéos
  2. Ionic
  3. Habiller l'application
Extrait - Ionic Développez des applications mobiles multiplateformes avec Cordova et AngularJS
Extraits du livre
Ionic Développez des applications mobiles multiplateformes avec Cordova et AngularJS Revenir à la page d'achat du livre

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/

1. Header

Le premier composant permet de personnaliser le header, soit la barre de titre visible en haut de l’écran, en y ajoutant du contenu (texte, boutons) ou en modifiant sa couleur.

a. Ajout d’un header

Il existe deux manières d’introduire un header dans la page : à l’aide d’un élément HTML classique décoré avec des classes CSS ou à l’aide d’une directive Ionic spécifique. La deuxième méthode offre plus d’options pour raffiner le comportement de la barre de header et sera donc préférée. De plus, elle respecte davantage le standard AngularJS qui préconise...

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.

1. Grille simple

La grille en elle-même n’est pas matérialisée dans la page autrement qu’à l’aide de conteneurs classiques qui représentent des lignes et des colonnes. Une ligne est un simple conteneur div décoré avec la classe row.


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

Les colonnes sont ensuite matérialisées à l’aide d’autres conteneurs div, décorés cette fois de la classe col. Les colonnes d’une même ligne auront toutes la même taille si aucune précision complémentaire n’est donnée. Ionic...

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.

1. Vue principale et scroll

La vue principale est matérialisée à l’aide de la directive ion-content dans les vues. C’est dans cet élément que viennent se greffer tous les composants visuels qui constituent le contenu de l’application. Cela exclut par exemple le menu, le header, le footer, les boîtes de dialogue, etc.

Ionic propose un large panel de paramètres pour affiner le comportement de la vue lorsque le contenu dépasse la zone d’affichage : l’utilisateur peut-il scroller ? Si oui, dans quelles directions ? Doit-on afficher les barres de scroll ? Le tableau suivant récapitule l’ensemble des paramètres applicables à cette directive :

Paramètre

Type

Valeur par défaut

Description

direction

String

y

Directions autorisées pour le défilement : ’x’ pour la largeur, ’y’...

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 :

  • l’enchaînement de vues, avec le maintien d’un historique (l’utilisateur peut cliquer sur le bouton retour, jusqu’à revenir à la vue initiale)

  • l’utilisation d’un menu latéral, qui ne s’affichera que lorsque l’utilisateur le demandera et qui sera caché le reste du temps

  • le système d’onglets, qui permet de découper l’application en domaines métier, accessibles via des onglets.

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.

1. Vues

Le système de vues de Ionic repose intégralement sur les fonctionnalités du module ui-router d’AngularJS. Celui-ci permet d’associer à un identifiant (une route), une URL, un couple vue et contrôleur, et d’injecter le résultat dans la page courante. Ce mécanisme permet donc de reproduire la navigation comme sur un site web, à base de pages (ou de vues) et d’URL, mais en la réutilisant dans le contexte d’une application web dite...

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) { 
          ... 
     }); 

1. Cache

Le système de cache ne convient pas à tous les types d’applications et peut parfois amener de nombreux effets de bord. Il est possible de régler le cache pour toute l’application en utilisant la méthode views.maxCache() et en passant en paramètre le nombre de vues maximum qui doivent être mises en cache. En passant un paramètre 0, le cache est alors complètement désactivé. Par défaut, le nombre de vues mises en cache est de 10.


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

2. Navigation

La navigation complexe mise en place par Ionic fait l’objet de nombreux paramétrages, tant locaux que globaux : transitions, bouton retour, alignement des titres, etc.

a. Barre de navigation

La barre de navigation (ou barre de header) est un composant générique indispensable dans une application...

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.

1. Directives gestuelles

Les applications natives ont depuis longtemps trouvé des réponses à ces questions et proposent dans leur SDK des outils prêts à l’emploi pour identifier les gestes utilisateurs et exécuter les actions prévues par le développeur. Ionic propose également une liste de directives prêtes à l’emploi pour réaliser le même type d’identifications et d’appels de callback. Ces directives prennent la forme d’attributs qui peuvent être placés sur n’importe quelle balise HTML (notamment la balise ion-view ou ion-content pour capturer des événements sur toute la page).

Par exemple :


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

Le tableau suivant montre l’exhaustivité des directives gestuelles disponibles dans Ionic :

Directive

Comportement

on-tap

Clic bref sur l’écran : moins de 250ms

on-double-tap

Deux clics brefs consécutifs sur l’écran

on-hold

Clic de plus de 500ms sur l’écran, sans bouger le doigt

on-touch

Le doigt commence à toucher l’écran

on-release

Le doigt a quitté l’écran

on-drag

Le doigt se déplace sur l’écran sans le quitter. Par exemple pour saisir un élément et le déplacer

on-drag-up

Remplit les conditions de « on-drag » et le doigt se dirige vers le haut

on-drag-down

Remplit les conditions...