I. Avant-propos▲
Enyo est un framework pour ordinateurs de bureau et mobiles qui utilise JavaScript et HTML5. Développé par HP et la communauté open source, il est concédé sous licence Apache. Si vous cherchez à créer des applications pour mobiles avec JavaScript, Enyo est un excellent choix. Dans cette série de tutoriels, je vais vous présenter les principaux concepts à travers quelques exemples que vous pouvez construire ou télécharger et essayer. Le guide d'Enyo suggère 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.
II. Les kinds▲
Les applications Enyo sont construites autour de prototypes d'objets appelés kinds. Ceux-ci peuvent être soit des components, soit des controls. Les kinds de Enyo sont très modulaires, réutilisables et encapsulés.
Les controls servent à contrôler les nœuds DOM et à les manipuler. Ils peuvent s'imbriquer dans d'autres controls ou components. Ce sont des "éléments constitutifs" pour les applications. Un bon exemple serait celui d'une application utilisant un flux XML : un composant pourrait traiter le flux JSON et réorganiser les données. Les vues de cette application qui représenteraient le flux sont des controls.
III. La calculatrice de pourboire▲
Il y a des centaines d'applications de type calculatrice de pourboire. Nous pouvons faire mieux, nous allons construire une calculatrice de pourboire qui peut fonctionner sur presque n'importe quoi. De plus, notre application Enyo sera publiable en utilisant Cordova (anciennement PhoneGap).
IV. Installation▲
Enyo fournit un projet modèle : Bootplate. Tout ce que nous devons faire est de cloner le répertoire et d'initialiser les sous-modules :
git clone https://github.com/enyojs/bootplate.git
cd bootplate
git submodule update --initV. Première étape▲
Ensuite, ouvrons le fichier debug.html. Nous devrions maintenant voir l'application exemple. Dans notre console, tapons ceci :
new enyo.Control({ content: 'Bonjour tout le monde' }).write();
Cette opération crée un control. Il est représenté par une simple div :
VI. Allons plus loin : contrôles, accesseurs et événements▲
Pour commencer à développer la calculatrice, supprimons le contenu du fichier source/App.js. Nous allons le remplacer par un nouveau contenu.
Ajoutons un kind appelé App dans notre fichier App.js que l'on vient de vider :
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: "calculate"},
{tag: "div", name: "tipAmount"}
],
create: function() {
this.inherited(arguments);
},
calculate: function(inSource, inEvent) {
var sum = this.$.sumControl.hasNode().value;
var percent = this.$.percentControl.hasNode().value;
var result = (sum * percent) / 100;
this.$.tipAmount.setContent(result);
return true; // stopper la propagation
}
});
Une instance est créée et incluse dans le DOM dans notre fichier debug.html via renderInto :
new App().renderInto(document.body);
Maintenant, je vais vous expliquer l'exemple précédent en détail. La propriété kind a la valeur enyo.Control et il n'existe actuellement aucun style, la propriété style est vide. La classe CSS onyx doit être ajoutée, c'est un sous-module inclus dans le projet Bootplate qui ajoute un thème à notre application Enyo et aux éléments des autres applications.
La propriété components permet d'imbriquer plusieurs kind. J'en ai utilisé plusieurs pour définir les contrôles sur les input requis, ainsi qu'un bouton et une div pour afficher les résultats. Tous ces éléments ont une propriété name qui a son importance, nous l'expliquerons plus tard.
Le bouton possède un événement attaché, l'événement tap. Enyo prend en charge beaucoup d'autres événements, par exemple "faire glisser" sur l'écran, flick, ou crée lui-même des événements.
Lorsqu'un kind est créé, la méthode create est appelée automatiquement par le framework Enyo. Cette méthode hérite de ses parents via l'instruction this.inherited(arguments); et peut être réécrite. Il y a plusieurs autres constructeurs pour le cycle de vie d'un kind : destroy, create ou constructor. Nous allons les utiliser dans la partie 2 de cette série.
Chaque fois que nous cliquons sur notre bouton, la méthode calculate est appelée. this.$ est utilisé pour référencer et pour accéder aux contrôles dans le kind :
Cette ligne exprime l'endroit où la valeur du contrôle qui porte le nom sumControl est accessible. Après cela, nous calculons le pourboire et affichons le résultat dans l'élément :
this.$.tipAmount.setContent(result);
Chaque control possède quelques accesseurs de type get et set :
.setContent();
.getContent();
.getClasses();
.setClasses();
.getStyle();
.setStyle();
.getAttribute();
.setAttribute();
À la fin de la méthode, nous utilisons return true pour empêcher l'événement tap de se propager vers le haut.
VII. Télécharger les sources▲
Les sources sont disponibles sur mon compte GitHub : robertkowalski/enyo-dailyjsrobertkowalski/enyo-dailyjs.
VIII. Conclusion▲
Nous avons maintenant créé ensemble une calculatrice de pourboire très basique. Cet exemple pourrait être construit pour ajouter un élément canvas pour les diagrammes, des localStorage pour les statistiques, ou tout simplement pour ajouter des validations sur les input utilisateurs.
Dans la prochaine partie de cette série, nous verrons de plus près les composants et exposerons les propriétés des kind. Nous créerons également des composants plus réutilisables.
- le concept des kinds ;
- les Controls et comment les utiliser ;
- les événements ;
- les accesseurs ;
- les constructeurs et destructeurs.
- les components ;
- le mécanisme de chargement ;
- les propriétés publiées ;
- d'avantage sur les accesseurs ;
- la compilation.
IX. Remerciements▲
Cet article a été publié avec l'aimable autorisation de Robert Kowalski concernant l'article original Enyo Tutorial: Part 1 du site DailyJS.
Je remercie également ClaudeLELOUP pour sa relecture attentive et assidue.