IONIC Section 4 - 4.17 Utilisation des components du contrôleur

Cliquez içi pour plus de vidéos disponibles sur notre chaine youtube !

Bonjour à tous, nous avons donc cette belle application de démonstration sous une forme que nous n’utiliserons plus par la suite parce que pour le reste du cours, nous utiliserons Angular, mais vous en apprendrez beaucoup sur certains des components Ionic de base et, plus important encore, où trouver plus d’informations concernant ces components et sur la façon de les utiliser en général et jeter un coup d’oeil à cette application, qui est très agréable visuellement, et avec peu de travail fournit de notre côté. C’est le pouvoir que Ionic donne tout en ajustant tous ces styles si vous en avez besoin. Et donc nous allons passer à un component qui fonctionne un peu différemment des autres et qui expliquera l’utilisation de JavaScript Angular au lieu de JavaScript basique. Disons que lorsque nous saisissons des données non valides, par exemple, nous laissons les champs vides et on clique sur « ajout des dépenses ». Nous souhaitons afficher une petite alerte qui avertit l’utilisateur que la valeur entrée est invalide . Maintenant, bien sûr, nous pourrions lancer une alerte ici, des valeurs invalides dans notre fichier JS, juste au-dessus de « return », par exemple « alert(‘Valeurs invalides’); », cela est la fonctionnalité d’alerte intégrée que chaque navigateur connaît. Et si on retourne sur notre application et que l’on recharge, alors on reçoit cette alerte par défaut ici. Et si on s'intéresse de plus près à notre documentation, dans la catégorie components, plus précisemment celui de « Aaert ». A l’intérieur vous retrouverez quelques instructions sur l’utilisation d’alert par exemple, que se soit pour Javascript ou Angular. Mais comme vous allez le découvrir avec Angular, qui est beaucoup plus pratique, concentrons-nous sur le style JavaScript pour l’instant. Pour lancer une telle alerte, tout d’abord dans notre « ion-app », par exemple juste avant la balise fermante, nous devons ajouter notre d’alerte donc « ion-alert » Maintenant si vous ajoutez cet élément, vous ne verrez aucun changement sur votre écran, car c’est un élément invisible, car il n’ajoute aucune fonctionnalité visuelle. Maintenant pour l’utiliser, nous devons avoir accès au contrôleur dans notre fichier JS, nous allons ajouter une nouvelle constante, « const alert », et on va utiliser la méthode « document.createElement(‘ion-alert’); », car même si nous ne voyons rien à l’écran, il s’agit bien sûr d’un component web normal, juste un component qui ne restitue rien, il ajoute simplement une fonctionnalité JavaScript en arrière-plan. Avec l’accès à ce component, nous pouvons puiser dans cette fonctionnalité JavaScript. Donc avec notre alerte ici, où on effectue notre validation, juste au dessus de « return », on saisi « document.body.appendChild(alert); ». Il s’agit d’une méthode fournie par notre component, et vous pouvez en apprendre davantage dans la documentation. Outre un message, nous pouvons également ajouter un en-tête d’entrées non valides et nous pouvons également ajouter un tableau de boutons qui nous permet d’étiqueter les boutons qui s’affichent et qui permet de fermer l’alerte. Ce qui nous donne : « {alert.header = 'Valeurs invalides !'; alert.message =». S’il vous plaît, entrez un motif et un montant valides "; alert.buttons = ['OK’];} Mais si on enregistre tout ça, vous ne verrez rien car cela ne s’affiche pas automatiquement. Pour ce faire, vous devez insérer au return « return alert.present();» donc sur cet élément d’alerte nous avons appliqué la méthode « present », pour le présenter à l’écran. Alors maintenant, avec ce code ajouté, si nous revenons à notre application et qu’on l’actualise, et que nous cliquons sur le boutons directement sans entrer de texte dans les champs, nous voyons cette alerte ici avec un design approprié pour grand écran. Et si je pousse ma curiosité, et que je règle sur le format iPhone, nous obtenons un style d’alerte compatible à une version mobile. Cette vidéo touche donc à sa fin, je vous invite à visionner la prochaine.