Le kit d'outils Dojo inclut des douzaines de widgets standard, y compris des
zones d'entrée, des zones de liste déroulante et des boutons d'option. Vous pouvez également créer des widgets personnalisés
pour encapsuler les éléments de l'interface utilisateur réutilisables ou un partie spécifique de la
fonctionnalité. Dans cette leçon, vous créez un nouveau widget Dojo personnalisé.
Les widgets Dojo se composent de trois fichiers que l'assistant Nouveau widget Dojo crée pour vous :
- Un fichier HTML
- Un fichier JavaScript
- Un fichier CSS
Vous modifiez ensuite le modèle HTML et le fichier JavaScript.
- Dans la vue Explorateur d'entreprise, cliquez avec le bouton droit sur le dossier WebContent/Dojo
et sélectionnez . L'assistant Nouveau widget Dojo apparaît.
- Dans la zone Nom du module, entrez loan.
- Dans la zone Nom du widget, entrez LoanInput. Le modèle HTML et la feuille de style associé aux chemins de widget sont renseignés
automatiquement.
- Cliquez sur Terminer. Trois fichiers
sont créés dans un dossier nommé dojo/loan :
- templates/LoanInput.html
- Le modèle d'interface utilisateur pour le widget.
- themes/LoanInput.css
- Fournit le style pour le widget.
- LoanInput.js
- Fournit la partie logique dorsale et métier JavaScript
du widget.
- Le fichier source LoanInput JavaScript pour le
widget s'ouvre dans l'éditeur.
- Sous la zone templateString,
ajoutez trois zones supplémentaires qui seront utilisées pour les résultats de notre calcul
principal, interestPaid (Intérêts),
et monthlyPayment (Règlement mensuel). Elles doivent toutes avoir une valeur par défaut de
0. Assurez-vous d'ajouter une virgule après chaque zone.
templateString : dojo.cache("loan", "templates/LoanInput.html"),
principal: 0,
interestPaid: 0,
monthlyPayment: 0,
- Sous la fonction postCreate,
ajoutez une nouvelle fonction appelée calculate. Assurez-vous d'ajouter une virgule après la fonction
postCreate. Laissez la nouvelle fonction
calculate vide pour le moment.
postCreate : function() {
},
// this function will perform the calculations for our loan payment
calculate: function() {
}
- Dans la vue Explorateur d'entreprise, cliquez deux fois sur templates/LoanInput.html
pour ouvrir le modèle HTML pour le widget.
- Cliquez sur Suivant et acceptez les valeurs par défaut.
Cliquez sur Terminer.
- Dans le div existant, créez trois balises de div enfant supplémentaires. Vous pouvez utiliser l'assistant de contenu en tapant <d
et en appuyant sur Ctrl + Espace. Dans la fenêtre en incrustation, sélectionnez <>
div pour insérer la balise.
- Dans chaque nouvelle balise de div, ajoutez un libellé de texte – Loan
Amount:, Interest Rate:, et Term
(years):. A la fin, votre code doit avoir l'apparence suivante :
<div class="LoanInput">
<div>Loan Amount: </div>
<div>Interest Rate: </div>
<div>Term (years): </div>
</div>
- Ajoutez maintenant des widgets Dojo à chacune des zones d'entrée :
- Dans l'espace de travail, mettez la palette en surface
en cliquant sur l'onglet approprié. Vous devez voir plusieurs tiroirs contenant des widgets
Dojo.
- Développez le tiroir Widgets de formulaire Dojo
en cliquant dessus.
- Sélectionnez CurrencyTextBox et déposez-le
en regard du libellé de montant du prêt dans votre balise de div.
- Dans l'élément d'entrée venant d'être créé, tapez data- et utilisez
l'assistant de contenu (Ctrl + Espace) pour afficher une liste d'attributs. Cliquez sur data-dojo-props pour l'insérer. Pour respecter les normes HTML5, depuis Dojo Toolkit SDK 1.7, les attributs sont définis par défaut via data-dojo-props.
- dans l'attribut data-dojo-props, tapez cu et utilisez l'assistant
de contenu (Ctrl + Espace) pour afficher une liste d'attributs. Cliquez sur currency (devise) pour l'insérer.
- Dans l'attribut de devise, tapez USD.
Votre code se présente comme suit :
<div>Loan Amount: <input type="text"
data-dojo-type="dijit.form.CurrencyTextBox"
data-dojo-props="currency: 'USD'">
</div>
- Insérez ensuite le marquage de widget Dojo pour la zone
de taux d'intérêt. Placez votre curseur dans la seconde balise de div après le libellé,
tapez <input d> et avec votre curseur à côté du
d, utilisez l'assistant de contenu (Ctrl + Espace)
pour afficher une liste d'attributs. Cliquez sur data-dojo-type pour l'insérer.
- Dans l'attribut data-dojo-type, appelez l'assistant de contenu à nouveau pour
afficher une liste des widgets dojo disponibles. Commencez à taper dijit.form.N jusqu'à l'affichage de
NumberSpinner. Cliquez sur NumberSpinner pour l'insérer dans votre
page.
- Ajoutez l'attribut data-dojo-props. Dans l'attribut,
définissez les propriétés suivantes, séparées par des virgules :
- value : 5
- smallDelta : .05
- intermediateChanges : true
- constraints : {min: 0}
Vous pouvez utiliser l'assistant de contenu pour insérer ces propriétés de la
même façon que vous avez ajouté l'attribut de devise précédemment. Lorsque vous avez terminé de
définir les propriétés de l'attribut, votre code doit ressembler
à ceci :
<div>Interest Rate: <input data-dojo-type="dijit.form.NumberSpinner"
data-dojo-props="value: 5, smallDelta:= 0.05, intermediateChanges: true, constraints: {min: 0}"> </input></div>
- Dans la palette, déposez un widget ComboBox dans le div
Term (années).
- Une configuration supplémentaire pour certains widgets est disponible
lorsque vous les faites glisser de la palette, comme par exemple ComboBox. Dans la boîte de dialogue Insérer une zone de liste déroulante,
vous pouvez ajouter des valeurs pour votre ComboBox.
Ajoutez des valeurs pour 1, 2, 3, 4, 5, 10, 15, 30.
- Définissez 15 en valeur par défaut en la configurant sur True.
Cliquez sur
OK.
- Ensuite, ajoutez les attributs data-dojo-attach-point et data-dojo-attach-event
à chacun de vos widgets d'entrée. La valeur spécifiée pour l'attribut data-dojo-attach-point est le nom par lequel l'instance du widget peut être référencé dans le fichier LoanInput.js.
L'attribut data-dojo-attach-event ajoute la gestion d'événement aux
widgets.
- Utilisez l'assistant de contenu pour ajouter un attribut data-dojo-attach-point à
chaque widget. Nommez-les amount, rate,
et term, respectivement.
- Ajoutez data-dojo-attach-event="onChange: calculate" pour
chaque widget. Chaque fois qu'un événement onChange survient sur ce
widget, il appelle la fonction de calcul ajoutée au fichier LoanInput.js. Le résultat final de votre fichier LoanInput.html doit avoir l'apparence
suivante :
<div class="LoanInput">
<div>Loan Amount: <input type="text"
data-dojo-type="dijit.form.CurrencyTextBox"
data-dojo-props="currency: 'USD'"
data-dojo-attach-point="amount"
data-dojo-attach-event="onChange: calculate"></div>
<div>Interest Rate: <input data-dojo-type="dijit.form.NumberSpinner"
data-dojo-props="value:5,
smallDelta:0.05,
intermediateChanges:true,
constraints:{min: 0}"
data-dojo-attach-point="rate"
data-dojo-attach-event="onChange: calculate">
</div>
<div>Term (years): <select name="select"
data-dojo-type="dijit.form.ComboBox"
data-dojo-props="autocomplete:false"
data-dojo-attach-point ="term"
data-dojo-attach-event="onChange: calculate">
<option>1</option>
<option>2</option>
<option>3</option>
<option>4</option>
<option>5</option>
<option>10</option>
<option selected="selected">15</option>
<option>30</option>
</select>
</div>
</div>
- Sauvegardez et fermez LoanInput.html et ouvrez à nouveau
LoanInput.js.
- Ajoutez les dépendances de module Dojo pour les trois widgets utilisés dans le fichier
html. Ces dépendances chargeront les ressources nécessaires pour créer
les widgets lors de l'exécution de la page. Le second argument de la fonction
define est un tableau de dépendances.
Directement après la dépendance "dijit/_WidgetsInTemplateMixin",,
ajoutez les chemins de module suivants séparés par des virgules :
- "dijit/form/CurrencyTextBox"
- "dijit/form/NumberSpinner"
- "dijit/form/ComboBox"
Votre code se présente comme suit :
define("loan/LoanInput",
[ "dojo", "dijit", "dijit/_Widget",
"dijit/_TemplatedMixin", "dijit/_WidgetsInTemplateMixin",
"dijit/form/CurrencyTextBox",
"dijit/form/NumberSpinner",
"dijit/form/ComboBox",
"dojo/text!loan/templates/LoanInput.html"
],
- Ajoutez maintenant le code suivant pour la fonction de calcul que
vous avez créée à l'étape 7. Vous pouvez utiliser l'assistant de
contenu si vous le souhaitez. Notez que les objets JavaScript standard,
tels que l'objet Math, sont disponibles dans l'assistant de contenu. Les variables
que nous avons définies précédemment, principal, interestPaid,
et monthlyPayment sont également disponibles.
// this function will perform the calculations for our loan repayment
calculate: function() {
this.principal = this.amount.attr('value');
if(this.principal == NaN) {
this.monthlyPayment = 0;
this.principal = 0;
this.interestPaid = 0;
} else {
var interestRate = this.rate.attr('value') / 1200;
var termInMonths = this.term.attr('value') * 12;
this.monthlyPayment = Math.pow(1 + interestRate, termInMonths) - 1;
this.monthlyPayment = interestRate + (interestRate / this.monthlyPayment);
this.monthlyPayment = this.monthlyPayment * this.principal;
this.interestPaid = (this.monthlyPayment * termInMonths) - this.principal;
}
}
La fonction de calcul stocke le principal du prêt,
calcule le règlement mensuel et le montant des intérêts payés.
- Sauvegardez et fermez tous les fichiers qui constituent le
widget personnalisé.
LoanInput.js doit se présenter comme ceci :
define("loan/LoanInput", [ "dojo", "dijit", "dijit/_Widget",
"dijit/_TemplatedMixin", "dijit/_WidgetsInTemplateMixin", "dijit/form/CurrencyTextBox", "dijit/form/NumberSpinner", "dijit/form/ComboBox",
"dojo/text!loan/templates/LoanInput.html" ], function(dojo, dijit,
_Widget, _TemplatedMixin, _WidgetsInTemplateMixin, CurrencyTextBox, NumberSpinner, ComboBox) {
dojo.declare("loan.LoanInput", [ dijit._Widget, dijit._TemplatedMixin,
dijit._WidgetsInTemplateMixin ], {
// Chemin d'accès au modèle
templateString : dojo.cache("loan", "templates/LoanInput.html"),
principal: 0,
interestPaid: 0,
monthlyPayment: 0,
// Redéfinir cette méthode afin de personnaliser le comportement lors de la construction dijit.
// Opérations communes pour le constructeur :
// 1) Initialiser les types non primitifs (c-à-d objets et tableaux)
// 2) Ajouter les propriétés supplémentaires nécessaires aux méthodes de gestion du cycle de vie
constructor : function() {
},
// Lorsque cette méthode est appelée, toutes les variables héritées des superclasses sont 'mixées en entrée'.
// Opérations communes pour postMixInProperties
// 1) Affecter des valeurs ou modifier les valeurs existantes pour les variables de propriétés
// de widget définies dans le fichier HTML modèle
postMixInProperties : function() {
},
// postCreate() est appelée après buildRendering(). Utilise si vous avez besoin
// d'accéder et/ou de manipuler les noeuds DOM inclus avec votre widget.
// Les noeuds DOM et les widgets avec l'attribut dojoAttachPoint sont maintenant
// accessibles directement en tant que champs sur "this".
// Opérations communes pour postCreate
// 1) Accéder et manipuler les noeuds DOM créés dans buildRendering()
// 2) Ajouter de nouveaux noeuds DOM ou widgets
postCreate : function() {
},
//cette fonction va effectuer les calculs de règlement de prêt
calculate: function() {
this.principal = this.amount.attr('value');
if(this.principal == NaN) {
this.monthlyPayment = 0;
this.principal = 0;
this.interestPaid = 0;
} else {
var interestRate = this.rate.attr('value') / 1200;
var termInMonths = this.term.attr('value') * 12;
this.monthlyPayment = Math.pow(1 + interestRate, termInMonths) - 1;
this.monthlyPayment = interestRate + (interestRate / this.monthlyPayment);
this.monthlyPayment = this.monthlyPayment * this.principal;
this.interestPaid = (this.monthlyPayment * termInMonths) - this.principal;
}
}
});
});