Tutoriel Enyo : partie 2

Dans mon introduction sur Enyo, j'ai annoncé que Enyo était « très modulaire, réutilisable et encapsulé ». Aujourd'hui, nous allons créer un composant réutilisable de notre application monolithique et minimaliste en refactorisant la calculatrice de pourboire. Par la suite nous allons personnaliser l'application pour la rendre conforme aux applications que l'on distribue et aux applications du web.

Tel que mentionné dans la partie précédente du tutoriel, le guide de Enyo suggère l'utilisation des doubles quotes au lieu de simples quotes. Enyo utilise également des tabulations pour l'indentation. Bien que je préfère deux espaces en guise d'indentation et l'utilisation de simples quotes, je vais suivre ces règles au cours de ce tutoriel.

Ce tutoriel s'appuie sur la partie antérieure, qui est disponible ici : introduction et premier prototypePartie 1. Et dont le code source se trouve ici : 4f6ebCode source.

Enyo utilise des fichiers appelés package.js pour charger des dépendances. Si vous regardez dans le dossier source/ qui contient la base de l'application, vous trouverez un fichier nommé package.js. Tout ce qui se trouve dans ce fichier est chargé au démarrage de l'application. Nous allons créer un fichier nommé calc.percent.js et l'ajouter à la fin de package.js:

enyo.depends(
 "$lib/layout",
 "$lib/onyx",
 "App.css",
 "App.js",
 "calc.percent.js"
);

Les objets components utilisent les événements pour communiquer avec les kinds de leur parent. Comme décrit dans la première partie, les components peuvent s'imbriquer les uns dans les autres. Il serait plus confortable de scinder l'application en une sorte de calculatrice de pourcentage réutilisable qui pourrait servir à d'autres projets.

Le fichier calc.percent.js devrait ressembler à l'exemple suivant, je vais vous expliquer cela en détail ci-dessous.

enyo.kind({
 name: 'PercentCalculator',
 kind: enyo.Component,
 published: {
   sum: 0, // valeur par défaut (optionnelle)
   percent: 0
 },
 events: {
   onCalculated: ''
 },
 create: function() {
   this.inherited(arguments);
 },
 calculate: function() {
   var result;

   result = (this.sum * this.percent) / 100;

   this.doCalculated({percentValue: result});
 }
});

Comme le précédent, ce composant a un nom : PercentCalculator. Cette fois ce n'est pas un contrôle, nous avons choisi un composant kind de type : enyo.Component.

Les lignes suivantes sont les propriétés publiées de notre kind. Il peut, mais ce n'est pas obligatoire, avoir une valeur par défaut. Et c'est 0 dans cet exemple. Enyo crée automatiquement des accesseurs set et get pour nos propriétés. Nous allons utiliser les accesseurs de ceux-ci plus tard, mais dans ce fichier, nous allons y accéder avec this.sum et this.percent.

J'ai mentionné précédemment que les composants communiquent avec les événements. Cet exemple enregistre onCalculated qui est accessible au public. Il peut être déclenché avec this.doCalculated({percentValue: result}); dans la méthode calculate. Les résultats sont communiqués au kind du parent.

Pour pouvoir utiliser notre kind nous devons ajouter le composant à notre premier kind du fichier App.js.

{ kind: "PercentCalculator", name: "percentCalculator", onCalculated: "updateControls" }

Chaque fois que l'événement calculated est déclenché, la méthode updateControls est appelée. Cette méthode obtient la valeur et définit la nouvelle valeur du nœud DOM correspondant. Voici l'extrait de code :

updateControls: function(inSource, inEvent) {
 this.$.tipAmount.setContent(inEvent.percentValue);

 return true; // stopper la propagation
}

Notez que le résultat est disponible en tant que propriété du deuxième argument : inEvent.percentValue.

L'application, cependant, ne fonctionne pas encore. Nous devons donner les valeurs des champs d'entrée pour le composant afin qu'il soit en mesure de calculer et de renvoyer le résultat. J'ai supprimé l'ancienne méthode de calcul et ai introduit la méthode calculateWithComponent. N'oubliez pas de mettre à jour le gestionnaire du ontap sur le bouton. Voici la méthode :

calculateWithComponent: function(inSource, inEvent) {
 var sum = this.$.sumControl.hasNode().value;
 var percent = this.$.percentControl.hasNode().value;

 this.$.percentCalculator.setSum(sum);
 this.$.percentCalculator.setPercent(percent);

 this.$.percentCalculator.calculate();
}

Comme auparavant, le kind est accessible avec this.$ et son nom. Les accesseurs générés automatiquement sont utilisés pour les propriétés publiées. Ensuite, calculate peut être appelée sur notre kind. À ce stade, le composant renvoie le résultat calculé. Il y a également des contrôleurs change pour modifier les propriétés, mais nous ne les utilisons pas ici.

Voici la mise à jour dans son intégralité :

enyo.kind({
 name: "App",
 kind: enyo.Control,
 style: "",
 classes: "onyx",
 components: [
   {kind: "onyx.InputDecorator", components: [
     {kind: "onyx.Input", name: "sumControl", placeholder: "Entrez le montant"}
   ]},
   {kind: "onyx.InputDecorator", components: [
     {kind: "onyx.Input", name: "percentControl", placeholder: "Entrez le pourcentage"}
   ]},
   {kind: "onyx.Button", content: "Calculer le pourboire", ontap: "calculateWithComponent"},
   {tag: "div", name: "tipAmount"},
   {kind: "PercentCalculator", name: "percentCalculator", onCalculated: "updateControls"}
 ],
 create: function() {
   this.inherited(arguments);
 },
 updateControls: function(inSource, inEvent) {
   this.$.tipAmount.setContent(inEvent.percentValue);

   return true; // stopper la propagation
 },
 calculateWithComponent: function(inSource, inEvent) {
   var sum = this.$.sumControl.hasNode().value;
   var percent = this.$.percentControl.hasNode().value;

   this.$.percentCalculator.setSum(sum);
   this.$.percentCalculator.setPercent(percent);

   this.$.percentCalculator.calculate();
 }
});

Vous pouvez la voir ici : 8f931Code source.

J'ai réduit les styles du fichier App.css à un simple background-color: #c6c6c6; et une classe CSS :

.center {
 text-align: center;
}

Puis j'ai changé le kind de type enyo.Control dans App.js avec le kind de type enyo.FittableRows. Utiliser le premier a été un bon choix pour vous montrer les rudiments de Enyo et les kinds, mais nous voulons en utiliser un plus complexe qui est fourni par le framework.

Comme cela a été notifié (8bb19Code source), j'ai ajouté une barre onyx.Toolbar au premier enfant du composant :

{kind: "onyx.Toolbar", class: "center", content: 'Tip calculator'},

Cela affichera une barre en haut de l'écran (ou de la page), de manière similaire à la barre UINavigationBar utilisée dans les applications iOS. Le résultat final ressemble à ceci :

Vous pouvez exécuter deploy.sh dans le dossier tools/ pour démarrer le déploiement. Cela va diminuer et fusionner les fichiers sources du projet. Le résultat sera enregistré dans le dossier deploy/ et pourra alors être utilisé avec Cordova ou tout simplement téléchargé sur un serveur web.

Vous devriez maintenant avoir appris les concepts fondamentaux de Enyo et avoir construit une petite application. Voici un bref résumé :

Partie 1 :Partie 1

• le concept des kinds ;
• les Controls et comment les utiliser ;
• les événements ;
• les accesseurs ;
• les constructeurs et destructeurs.

Partie 2 :Partie 2

• les components;
• le mécanisme de chargement ;
• les propriétés publiées ;
• d'avantage sur les accesseurs ;
• la compilation.

enyojs.comEnyo
API EnyoEnyo API

Cet article a été publié avec l'aimable autorisation de Robert Kowalski concernant l'article original Enyo Tutorial: Part 2 du site DailyJS.
Je remercie également _Max_ pour sa relecture attentive et assidue.