Tutoriel Enyo : partie 2

Robert Kowalski

Traducteur

vermine

Robert Kowalski est un développeur qui apprécie le JavaScript. Il aime explorer divers frameworks et c'est d'ailleurs ce qu'il a fait avec le framework Enyo. Aujourd'hui il désire nous apprendre à maîtriser efficacement ce dernier.
Cet article est la traduction de Enyo Tutorial: Part 2 publié sur DailyJS.
Commentez

- Titre : Tutoriel Enyo : partie 2

- Auteur : Robert Kowalski

- Traducteur : vermine

- Parution : 4 octobre 2012

- Licence : Les sources présentées sur cette page sont libres de droits et vous pouvez les utiliser à votre convenance. Par contre, la page de présentation constitue une œuvre intellectuelle protégée par les droits d'auteur. Copyright ® 2012 Robert Kowalski. Aucune reproduction, même partielle, ne peut être faite de ce site et de l'ensemble de son contenu : textes, documents, images, etc. sans l'autorisation expresse de l'auteur. Sinon vous encourez selon la loi jusqu'à trois ans de prison et jusqu'à 300 000 € de dommages et intérêts.

Sommaire

- I. Avant-propos

- II. Mécanisme de chargement

- III. Composants

- IV. Propriétés publiées

- V. Refactorisation et intégration

- VI. Styles

- VII. Compilation

- VIII. Conclusion

- IX. Références

- X. Remerciements

I - Avant-propos

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 prototype. Et dont le code source se trouve ici : 4f6eb.

II - Mécanisme de chargement

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"
);

III - Composants

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.

IV - Propriétés publiées

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.

V - Refactorisation et intégration

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 : 8f931.

VI - Styles

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é (8bb19), 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 :

VII - Compilation

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.

VIII - Conclusion

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

Partie 1 :

- le concept des kinds ;

- les Controls et comment les utiliser ;

- les événements ;

- les accesseurs ;

- les constructeurs et destructeurs.

Partie 2 :

- les components;

- le mécanisme de chargement ;

- les propriétés publiées ;

- d'avantage sur les accesseurs ;

- la compilation.

IX - Références

enyojs.com
API Enyo

X - Remerciements

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.