Ionic 2 partie 2: Menu et navigation

    Nous allons voir dans cette deuxième partie la mise en place d’un menu et de la navigation pour notre application mobile NFC. Pour la structure du projet, n’hésitez pas à relire l’article précédent (Ionic 2 partie 1 : Structure de projet)

    Sources

    Pour rappel vous pouvez récupérer les sources du projet sur notre gitub.

    Point d’entrée

    Le point d’entrée de notre application se situe dans le fichier index.html via la directive <ion-app></ion-app> :

    Cette directive est définie par l’annotation @App qui est une surcouche à l’annotation @Component d’Angular 2 avec comme sélecteur  ion-app .

    On ajoute également deux scripts :

    • cordova.js qui contient l’api Cordova elle-même. Le fichier est ajouté physiquement lors du packaging de l’application, il est donc normal que ce fichier ne soit pas présent dans les sources.  
    • build/js/app.bundle.js : Il s’agit du fichier de sortie de webpack après que le packaging soit effectué. Il est donc normal de pointé sur ce fichier.

    Mais revenons à notre point d’entrée, il nous faut définir une classe TypeScript avec la métadonnée @App  que nous trouvons dans le fichier app/app.ts :

     Les différentes options pour cette annotation sont:

    • config: Configuration globale d’Ionic et des différentes plateformes (voir la documentation officielle pour connaître les différentes options).
    • prodMode: Booléen qui permet de désactiver un certain nombre de vérifications faites par le framework en mode développement.
    • pipes: Liste des pipes de l’application
    • providers: Liste des providers de l’application
    • templateUrl: Url vers le template associé au composant app.
    • template: Template associé au composant app.

    Si on fait une analogie avec une application pure Angular 2, c’est ici que le bootstrap de l’application se fait et c’est donc aussi ici que vous pouvez injecter vos services de manière globale comme nous le verrons par la suite.

    Plusieurs variables sont définies sur la classe ainsi qu’en paramètre du constructeur :

    • app : Instance de la classe IonicApp qui est une classe utilitaire permettant de récupérer / rechercher un composant par son identifiant.
    • rootPage : Contient la page initiale et est lié à l’instance de NavController (voir ci-dessous).
    • pages : Tableau de pages à afficher dans le menu.
    • nav : Depuis Ionic2 beta 7 (qui repose sur Angular 2 RC1) il faut utiliser l’annotation @ViewChild pour faire référence au composant de navigation  ion-nav .
    • menu : Depuis Ionic2 beta 7, il faut utiliser l’annotation @ViewChild pour faire référence à l’instance ion-menu .

    Le fichier app.html contient notre layout de base avec le menu latéral et la vue principale :

    ion-menu  permet de déclarer notre menu, ion-view  notre vue principale et ion-nav  est le composant parent qui nous permettra de naviguer dans notre application. 

    Le menu

    Template

    • La directive ion-menu  est associée à la variable menu grâce à la syntaxe Angular 2 #menu, on pourra ainsi accéder au menu via cette variable dans notre page NfcApp
    • L’attribut [content]  permet d’écouter les actions effectuées sur le composant de navigation ion-nav.  
    • La propriété side sert à positionner le menu.

    Dans notre exemple, le menu est constitué :

    • D’un titre affiché grâce aux directives ion-toolbar  et ion-title 
    • D’une liste de pages qui est constituée à partir d’une itération ( *ngFor ) sur un tableau contenant la liste des pages de notre application.
    • D’un lien « logout » pour la déconnexion.
    • D’un lien pour fermer le menu.

    Interactions

    Les variables et interactions liées au menu sont définies dans le fichier app.ts mais il aurait tout à fait été possible de séparer la définition du menu dans un fichier TypeScript dédié. On retrouve notamment la déclaration de la variable  pages qui contient la liste des pages de notre application :

    On retrouve bien les différentes propriétés de la page visible dans le template HTML comme title, component et icon.

    Pour chacun des liens du menu, un événement (click) est associé et appel la méthode openPage également définie dans la classe NfcApp :

    • Dans un premier temps on récupère le menu et on l’active / affiche grâce à la méthode  enable disponible sur une instance de la classe Menu
    • On change de page grâce à l’instance de Nav et la méthode setRoot qui remplace alors la première page de la pile.
    • On ferme le menu après la redirection vers la page grâce à la méthode close .

    Mais comment fonctionne la navigation au sein d’Ionic 2 ?

    Navigation

    Dans Ionic 2 la navigation des pages est faite par un système de « push » des vues qui sont alors empilées ou dépilées au fil des appels. Les animations entre les pages sont gérées automatiquement.

    Template

    Comme on l’a vu ci-dessus, la directive ion-nav  nous permet de définir l’élément parent de notre navigation.

    Dans les faits, Ionic 2 va créer une instance de NavController qui est la classe de base pour toute navigation au sein d’une application ionic. 

    • L’attribut [root] est lié à une variable (ici rootPage ) contenant la page initiale.
    • Souvenez-vous, #content est associé au menu et permet la détection des événements sur le conteneur courant pour afficher/masquer le menu par exemple.
    • swipe-to-go-back permet d’activer la fonction « retour » lorsque l’utilisateur swipe c’est à dire fait glisser son doigt sur l’écran. 

    Page par défaut

    Dans notre application, on affiche la page de login si l’utilisateur n’est pas authentifié ou la home page si il a coché l’option « Remember me » lors de son authentification. Dans la classe NfcApp c’est grâce à la méthode setRoot  sur une instance de NavController (voir chapitre suivant) qu’il est possible de faire cela :

    NFCPage (notre home page) et LoginPage ne sont pas des instances mais bien des types qui sont accessibles simplement grâce aux imports ES6. Suivant si l’utilisateur est en mode login automatique (remember me), on affecte la propriété rootPage  avec la page de login ou la home page et c’est suffisant grâce au binding de la propriété [root] .

    StorageUtils.hasAccount()  est une méthode utilitaire permettant de savoir si l’utilisateur est déjà authentifié ou non (informations en local storage).

    Changement de page

    Le changement de page est réalisé via l’instance de NavController qu’il est possible d’injecter dans le constructeur d’une page. Dans le cas de la page de login, si l’authentification est un succès on ne souhaite pas faire un push de la vue mais bien la remplacée purement et simplement pour ne pas se retrouver sur la page de login si un retour en arrière est fait.

    Pour cela on utilise la méthode setRoot sur la classe NavController pour changer la page initiale :

    La navigation remplacera ainsi la page initiale avec la page NFCPage en cas de succès au login. Pour ce qui est de la navigation pure et simple la classe NavController possède de simples méthodes comme push et pop qui vont alors ajouter / dépiler les vues.

    Toutes ces méthodes prennent 3 paramètres:

    • page: La nouvelle vue
    • params: les données à transmettre (optionnel)
    • opts: Les options de navigations (optionnel) : Par exemple, c’est ici que l’on va activer/désactiver les effets de transitions, le délai de la transition, le type de transtion, l’affichage ou non du clavier pendant la transition et bien d’autres. opts est de type NavOptions

    Enfin sachez que toutes les méthodes de changements de vues (push, pop, setRoot, popTo,pushTo, etc..) retournent une promise dont le callback de succès sera déclenché une fois le changement de vue terminé (transition compris).

    Transmission de données

    Si vous souhaitez transmettre de la data entre deux pages ionic rien de plus simple :

    Comme vu précédemment, les méthodes de navigation prennent un pramètre qui nous permettent de transmettre de la données (ici un id qui vaut 5).

    Si l’on souhaite récupérer cet id dans la page NFCPage , on peut utiliser une injection de dépendance sur la classe NavParams et utiliser la méthode get :

    Il est evidemment possible de transmettre des objets et pas seulement des types primitifs.

    Bouton de retour

    Il est possible pour chacune des pages de définir un bouton de retour « back » qui va alors faire un « pop » sur la liste des vues et afficher la dernière. Tout se passe dans le template, voici un exemple avec le fichier nfc.html

    • Le composant ion-navbar  crée une barre de navigation qui permet de rajouter, par exemple, un bouton de retour ou un titre.
    • Par défaut un bouton back sera rajouté mais il est possible de le masquer avec l’attribut hideBackButton 
    • L’attribut menuToggle présent sur le bouton permet de faire le lien entre le bouton et l’affichage du menu c’est à dire de l’afficher ou de le masquer.

    Les modals

    NavController se charge également de l’affichage des modals dans ionic 2 via sa méthode present qui prend en paramètre une instance de la classe Alert.

    Exemple avec la page de login :

    La liste exhaustive des propriétés est définie dans la documention officielle.

     

    Directives

    Sachez qu’il exite des directives pour le changement de page à la manière de [routerLink]  pour Angular 2. Il s'agit de navPush et nav-pop pour respectivement empiler ou déplier une vue.

     

    Dans le prochain article nous aborderons la partie authentification de l’application.