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 :
padding
ion-item *ngFor="let appareil of appareilsList" (click)="onLoadAppareil(appareil.name)"
{{ appareil.name }}
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});
}
ion-item *ngFor="let appareil of appareilsList" (click)="onLoadAppareil(appareil)"
{{ appareil.name }}
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 :
{{ appareil.name }}
padding
{{ appareil.name }}
*ngFor="let line of appareil.description"{{ line }}
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 :
Réglages
padding
ion-button icon-start (click)="onToggleLights()"
name="power"
Lumières
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é depuisionic-angular;vous créez l'alerte à l'aide de la méthode
create()d'AlertControlleret la stockez dans la variablealert;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-button clear (click)="dismissModal()"Fermer
{{ appareil.name }}
Ç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 :
padding
{{ appareil.name }}
*ngFor="let line of appareil.description"{{ line }}
ion-button full color="danger"Eteindre
ion-button full color="secondary"Allumer
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.
