< Précédent | Suivant >

Leçon 2 : Création d'un widget Dojo personnalisé

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 : Vous modifiez ensuite le modèle HTML et le fichier JavaScript.
  1. Dans la vue Explorateur d'entreprise, cliquez avec le bouton droit sur le dossier WebContent/Dojo et sélectionnez Nouveau > Widget Dojo. L'assistant Nouveau widget Dojo apparaît.
  2. Dans la zone Nom du module, entrez loan.
  3. 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.
    Assistant Nouveau widget Dojo
  4. 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.
  5. Le fichier source LoanInput JavaScript pour le widget s'ouvre dans l'éditeur.
  6. 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,
  7. 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() {
    }
  8. Dans la vue Explorateur d'entreprise, cliquez deux fois sur templates/LoanInput.html pour ouvrir le modèle HTML pour le widget.
  9. Cliquez sur Suivant et acceptez les valeurs par défaut. Cliquez sur Terminer.
  10. 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.
  11. 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>
  12. Ajoutez maintenant des widgets Dojo à chacune des zones d'entrée :
    1. 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.
    2. Développez le tiroir Widgets de formulaire Dojo en cliquant dessus.
      Tiroir Widgets de formulaire Dojo
    3. Sélectionnez CurrencyTextBox et déposez-le en regard du libellé de montant du prêt dans votre balise de div.
    4. 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.
    5. 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.
    6. 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>
    7. 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.
    8. 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.
    9. Ajoutez l'attribut data-dojo-props. Dans l'attribut, définissez les propriétés suivantes, séparées par des virgules :
      1. value : 5
      2. smallDelta : .05
      3. intermediateChanges : true
      4. 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>
    10. Dans la palette, déposez un widget ComboBox dans le div Term (années).
    11. 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.
    12. Définissez 15 en valeur par défaut en la configurant sur True. Cliquez sur OK.
  13. 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.
    1. Utilisez l'assistant de contenu pour ajouter un attribut data-dojo-attach-point à chaque widget. Nommez-les amount, rate, et term, respectivement.
    2. 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>
  14. Sauvegardez et fermez LoanInput.html et ouvrez à nouveau LoanInput.js.
  15. 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 :
    1. "dijit/form/CurrencyTextBox"
    2. "dijit/form/NumberSpinner"
    3. "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"
    ],
  16. 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.
  17. 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;
			}
}
	});
});

Point de contrôle

Vous avez créé un widget Dojo personnalisé.

Ce que vous avez appris :
  • Comment utiliser l'assistant de contenu et les modèles pour écrire rapidement le code Dojo
  • Comment modifier le modèle HTML pour un widget Dojo personnalisé.
  • Comment modifier le fichier JavaScript pour un widget Dojo personnalisé.
< Précédent | Suivant >
Icône indiquant le type de rubrique Rubrique de leçon de tutoriel
Dispositions pour les centres de documentation | Commentaires en retour

Icône d'horodatage Dernière mise à jour: May 29, 2014 10:11

Nom de fichier : loan_lesson2.html