Développez une application mobile multiplateforme avec Ionic 3

L'un des multiples avantages d'Ionic est sa base importante de components.  Dans les chapitres suivants, vous en découvrirez quelques-uns des plus utiles. Vous découvrirez également la logique et le fonctionnement généraux des components ; il vous sera ainsi plus facile d'apprendre à utiliser tous les autres.

Lists et Cards

Le component  ion-list  est extrêmement utile pour beaucoup de types d'applications mobile.  Il permet, comme son nom l'indique, de créer une liste très facilement.  Vous allez l'utiliser pour la page Appareils pour la liste de vos appareils.

Tout d'abord, plutôt que créer les items un à un, créez un array dans  AppareilsPage  :

  appareilsList = [
    {
      name: 'Machine à laver'
    },
    {
      name: 'Télévision'
    },
    {
      name: 'Ordinateur'
    }
  ];

Cela vous permettra d'utiliser  *ngFor  dans le template et la structure par objet vous permettra d'ajouter d'autres propriétés aux appareils par la suite.

Pour créer une  ion-list  fonctionnelle dans le template, il faut la peupler de  button  comportant la directive  ion-item  :

<ion-content padding>
  <ion-list>
    <button ion-item *ngFor="let appareil of appareilsList" (click)="onLoadAppareil(appareil.name)">
      {{ appareil.name }}
    </button>
  </ion-list>
</ion-content>

Ainsi, vous avez une liste fonctionnelle où vous pouvez toucher les éléments pour afficher la page correspondante.

Une autre manière d'organiser les données d'une page est d'utiliser des  ion-card . Pour illustrer, ajoutez un champ description à vos appareils :

  appareilsList = [
    {
      name: 'Machine à laver',
      description: [
        'Volume: 6 litres',
        'Temps de lavage: 2 heures',
        'Consommation: 173 kWh/an'
      ]
    },
    {
      name: 'Télévision',
      description: [
        'Dimensions: 40 pouces',
        'Consommation: 22 kWh/an'
      ]
    },
    {
      name: 'Ordinateur',
      description: [
        'Marque: fait maison',
        'Consommation: 500 kWh/an'
      ]
    }
  ];

Avant de créer la card sur  SingleAppareilPage  , il faut pouvoir lui passer toutes ces données, donc il faut quelques modifications.  Il faut d'abord modifier la méthode  onLoadAppareil()  et son intégration :

onLoadAppareil(appareil: {name: string, description: string[]}) {
    this.navCtrl.push(SingleAppareilPage, {appareil: appareil});
}

<button ion-item *ngFor="let appareil of appareilsList" (click)="onLoadAppareil(appareil)">
      {{ appareil.name }}
</button>

Il faut ensuite modifier  SingleAppareilPage  pour réceptionner correctement l'appareil fourni :

export class SingleAppareilPage implements OnInit {

  appareil: {
    name: string,
    description: string[]
  };

  constructor(public navParams: NavParams) {
  }

  ngOnInit() {
    this.appareil = this.navParams.get('appareil');
  }

}

Maintenant, vous pouvez modifier le template en y ajoutant la  ion-card , séparant son  ion-card-header  de son  ion-card-content  :

<ion-header>
  <ion-navbar>
    <ion-title>{{ appareil.name }}</ion-title>
  </ion-navbar>
</ion-header>

<ion-content padding>
  <ion-card>
    <ion-card-header>{{ appareil.name }}</ion-card-header>
    <ion-card-content>
      <p *ngFor="let line of appareil.description">{{ line }}</p>
    </ion-card-content>
  </ion-card>
</ion-content>

Les components  ion-list  et  ion-card  proposent beaucoup de possibilités : n'hésitez pas à visiter ionicframework.com pour personnaliser vos interfaces.

Alerts

Les alerts permettent, par exemple, de proposer une action, une confirmation ou une notification à l'utilisateur.  Pour illustrer ces éléments, vous allez créer un bouton sur la page Réglages, sans fonctionnalité, qui simulera l'allumage et l'extinction des lumières de la maison, par exemple.

Commencez par créer le bouton dans le template, en lui associant un click-listener :

<ion-header>
  <ion-navbar>
    <ion-title>Réglages</ion-title>
  </ion-navbar>
</ion-header>

<ion-content padding>
  <button ion-button icon-start (click)="onToggleLights()">
    <ion-icon name="power"></ion-icon>
    Lumières
  </button>
</ion-content>

Vous remarquerez la nouvelle directive  icon-start  sur le bouton, qui permet d'aligner correctement l'icône et le texte du bouton (pour aligner l'icône à droite, utilisez  icon-end ).

Ensuite, vous allez créer la méthode  onToggleLights()  qui affichera une alerte demandant la confirmation à l'utilisateur.

import { Component } from '@angular/core';
import { AlertController } from 'ionic-angular';

@Component({
  selector: 'page-settings',
  templateUrl: 'settings.html'
})
export class SettingsPage {

  constructor(private alertCtrl: AlertController) {}

  onToggleLights() {
    let alert = this.alertCtrl.create({
      title: 'Êtes-vous certain(e) de vouloir continuer ?',
      subTitle: 'Cette action allumera ou éteindra toutes les lumières de la maison !',
      buttons: [
        {
          text: 'Annuler',
          role: 'cancel'
        },
        {
          text: 'Confirmer',
          handler: () => console.log('Confirmé !')
        }
      ]
    });
    alert.present();
  }

}

Analysez le code :

• vous injectez  AlertController  , importé depuis  ionic-angular  ;

• vous créez l'alerte à l'aide de la méthode  create()  d' AlertController  et la stockez dans la variable  alert  ;

• la méthode  create()  prend comme argument un objet d'options comprenant ici un titre, un sous-titre et deux boutons ;

• les boutons ont chacun un texte : le bouton Annuler prend le rôle  'cancel' , ce qui retire l'alerte sans conséquence et le bouton Confirmer prend une handler function, exécutée si l'utilisateur clique dessus ;

• la méthode  present()  est ensuite exécutée, présentant l'alerte à l'utilisateur.

Les alerts sont idéales pour des actions rapides ou des options simples : pour des interactions plus approfondies, on utilisera plutôt des modals.

Modals

Les modals sont une autre façon d'ajouter une page au stack de navigation.  Elles sont souvent utilisées pour proposer des choix à l'utilisateur, ou pour effectuer une modification.  Dans l'application exemple, vous allez transformer la page  SingleAppareilPage  en modal.  Dans  AppareilsPage  :

constructor(private modalCtrl: ModalController) {}

  onLoadAppareil(appareil: {name: string, description: string[]}) {
    let modal = this.modalCtrl.create(SingleAppareilPage, {appareil: appareil});
    modal.present();
  }

En injectant  ModalController  (vous pouvez retirer l'injection de  NavController , puisque vous n'en avez plus besoin), vous utilisez la méthode  create()  pour créer la modal, en passant la page cible en premier argument et les données à passer en deuxième argument.  Vous appelez ensuite la méthode  present()  pour présenter la modal.

Pour fermer une modal, il faut lui injecter  ViewController  et exécuter sa méthode  dismiss()  :

  constructor(public navParams: NavParams, public viewCtrl: ViewController) {
  }

  ngOnInit() {
    this.appareil = this.navParams.get('appareil');
  }

  dismissModal() {
    this.viewCtrl.dismiss();
  }

Vous pouvez ensuite intégrer cette méthode  dismissModal()  à un bouton que vous placerez dans votre  ion-navbar . Pour vous assurer d'une mise en page propre, vous le placerez dans un component  ion-buttons  et lui attribuerez la directive  clear , ce qui retire le contour et la couleur de fond du bouton :

<ion-header>
  <ion-navbar>
    <ion-buttons>
      <button ion-button clear (click)="dismissModal()">Fermer</button>
    </ion-buttons>
    <ion-title>{{ appareil.name }}</ion-title>
  </ion-navbar>
</ion-header>

Ça y est !  Votre modal est prête.  Comme vous pouvez le constater, vous n'avez pas eu besoin de modifier la structure de  SingleAppareilPage  pour l'utiliser en tant que modal :  ModalController  crée une modal à partir d'une page standard.

Grid

Ionic fournit un système de grid très similaire à celui de Bootstrap, avec 12 divisions pour les colonnes.  Il permet de positionner très facilement des éléments les uns par rapport aux autres. Un  ion-grid  peut être utilisé pour la mise en page générale d'une page, mais peut aussi s'intégrer dans n'importe quel autre élément : vous allez l'utiliser dans les card pour afficher des boutons pour allumer et éteindre un appareil.

Un  ion-grid  contient des rangées  ion-row  et des colonnes  ion-col . Si vous ne définissez pas une largeur de colonne, les colonnes se partagent automatiquement la largeur de manière égale :

<ion-content padding>
  <ion-card>
    <ion-card-header>{{ appareil.name }}</ion-card-header>
    <ion-card-content>
      <p *ngFor="let line of appareil.description">{{ line }}</p>
    </ion-card-content>
    <ion-grid>
      <ion-row>
        <ion-col>
          <button ion-button full color="danger">Eteindre</button>
        </ion-col>
        <ion-col>
          <button ion-button full color="secondary">Allumer</button>
        </ion-col>
      </ion-row>
    </ion-grid>
  </ion-card>
</ion-content>

La directive  full  crée un bouton qui prend la largeur totale de son élément conteneur.

Le component  ion-grid  crée automatiquement un padding pour ses colonnes ; vous pouvez annuler ce comportement si vous le souhaitez en ajoutant la directive  no-padding  à votre  ion-grid .

Maintenant que vous avez créé une application simple, vous allez apprendre quelques techniques pour l'enrichir.