< Précédent | Suivant >

Leçon 3 : Ajout du widget Dojo personnalisé à une page Web

Au cours de cette leçon, vous insérez votre widget Dojo personnalisé dans une page Web affichée à l'aide d'un widget de présentation de Dojo. Vous utilisez les API Dojo pour connecter votre widget à la zone de sortie et afficher les résultats.

Dès lors qu'un widget Dojo personnalisé est créé, celui-ci vient s'ajouter dans le tiroir Autres widgets Dojo de la palette, ce qui facilite son insertion dans la page Web.
  1. Cliquez avec le bouton droit sur le dossier WebContent et sélectionnez Nouveau > Page Web.
  2. Nommez la page index.html et cliquez sur Terminer.
  3. Cliquez sur l'onglet Conception pour afficher la page dans la vue Conception.
  4. Dans la palette, ouvrez le tiroir Widgets de présentation Dojo et déposez un BorderContainer sur la page. La boîte de dialogue Insertion du conteneur à bordure s'ouvre pour vous permettre de personnaliser le widget BorderContainer.
    1. Cochez les cases du haut et du centre.
    2. Cliquez sur OK.
  5. Une vue graphique du widget BorderContainer est maintenant affichée dans la vue de conception. Cliquez sur la visualisation BorderContainer, puis cliquez sur l'onglet Propriétés pour ouvrir la vue Propriétés.
    vue de propriétés du conteneur à bordure
  6. Cliquez sur l'onglet Styles et dans la zone Propriétés, mettez à jour les valeurs suivantes pour le conteneur à bordure :
    • Changez la hauteur de 500px en 700px.
    • Changez la largeur en 600px.
  7. Cliquez deux fois sur la région pour ouvrir une zone de texte.Tapez Calculatrice de paiement de prêt et cliquez en-dehors de la zone de texte pour appliquer vos modifications.
    Région supérieure de BorderContainer
  8. Dans la palette, développez le tiroir Autres widgets Dojo.
  9. Ajoutez le LoanInput suivant dans la partie centrale du conteneur à bordure
  10. Cliquez sur l'onglet Source pour passer à la vue Source.
  11. Dans le widget LoanInput balisediv tag, définissez l'attribut d'ID sur "LoanInput":
    <div id="LoanInput" data-dojo-type="loan.LoanInput"></div>
  12. Ajoutez une nouvelle balise div sous le widget LoanInput pour afficher les résultats. Vous pouvez ajouter le texte suivant :
    <div>Monthly Payment: <span id="monthlyPayment"></span></div>
  13. Ajoutez une nouvelle instruction require de module pour dijit/registry immédiatement après l'instuction require dojo existante.
    [ "dojo", "dijit/registry", "dojo/parser", "dijit/layout/BorderContainer", "dijit/layout/ContentPane", "loan/LoanInput" ],
  14. Ajoutez un paramètre de registre à la fonction d'appel require.
    function(dojo, registry) {
    	dojo.ready(function() {
    	});
    });
  15. Dans la fonction dojo.ready, procédez comme suit :
    1. Tapez var loanWidget = registry.b et appelez l'assistant de contenu. Sélectionnez la suggestion byId(id) pour qu'elle s'insère dans votre page.
    2. Tapez "LoanInput" en paramètre pour la fonction byId.
    3. Tapez un point-virgule après la parenthèse de fermeture pour le paramètre LoanInput.
    4. Sur la ligne sous votre appel à registry.byId, tapez dojo.c et appelez l'assistant de contenu. Vous pouvez sélectionner ici un autre modèle par défaut pour dojo.connect. Il existe deux versions de ce modèle. Choisissez la version quiutilise dijit.registry.byId et insérez-la dans votre page.
    5. Définissez le premier paramètre en LoanInput et le second en calculate.
    6. Dans le paramètre de fonction de la fonction de connexion, ajoutez le code suivant :
      var payment = loanWidget.monthlyPayment;
      if (payment == NaN) {
      	payment = 0;
      }
      
      // update the result field
      var formattedValue = dojo.currency.format(payment, {currency: "USD"});
      dojo.attr("monthlyPayment", "innerHTML", formattedValue);
    7. Les modules requis sont ajoutés à la fonction require en grappe de chaînes, où chaque module est une chaîne séparée par une barre oblique de segments de module. Dans la fonction require, ajoutez "dojo/currency" à la grappe de dépendances require.
    8. Votre code final pour la fonction dojo.ready doit ressembler à ceci :
      dojo.ready(function() {
      		// get the LoanInput widget
      		loanWidget = registry.byId('LoanInput');
      		
      		// handle "calculate" from widget "LoanInput"
      		dojo.connect(dijit.registry.byId("LoanInput"), "calculate", function(event) {
      			var payment = loanWidget.monthlyPayment;
      			if (payment == NaN) {
      				payment = 0;
      			}
      
      			// update the result field
      			var formattedValue = dojo.currency.format(payment, {currency: "USD"});
      			dojo.attr("monthlyPayment", "innerHTML", formattedValue);
      		});
      	});
  16. Enregistrez la page. La source pour le fichier index.html ressemble à :
    <!DOCTYPE HTML>
    <html>
    <head>
    <link rel="stylesheet" type="text/css"
    	href="dojo/dijit/themes/dijit.css">
    <link rel="stylesheet" type="text/css"
    	href="dojo/dijit/themes/claro/claro.css">
    <title>t1</title>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
    <script type="text/javascript"
    	data-dojo-config="isDebug: false, async: true, parseOnLoad: true"
    	src="dojo/dojo/dojo.js"></script>
    <script type="text/javascript">
    require(
    // Ensemble d'identificateurs de modules
    [ "dojo", "dijit/registry", "dojo/parser", "dijit/layout/BorderContainer", "dijit/layout/ContentPane", "loan/LoanInput", "dojo/currency" ],
    // Fonction de rappel, appelée sur les résultats d'évaluation des dépendances
    function(dojo, registry) {
    	dojo.ready(function() {
    		// get the LoanInput widget
    		loanWidget = registry.byId('LoanInput');
    		
    		// handle "calculate" from widget "LoanInput"
    		dojo.connect(dijit.registry.byId("LoanInput"), "calculate", function(event) {
    			var payment = loanWidget.monthlyPayment;
    			if (payment == NaN) {
    				payment = 0;
    			}
    
    			// update the result field
    			var formattedValue = dojo.currency.format(payment, {currency: "USD"});
    			dojo.attr("monthlyPayment", "innerHTML", formattedValue);
    		});
    	});
    });
    </script>
    </head>
    <body class="claro">
    	<div id="BorderContainer" style="height: 500px; width: 500px"
    		data-dojo-type="dijit.layout.BorderContainer"
    		data-dojo-props="design:'headline'">
    		<div data-dojo-type="dijit.layout.ContentPane"
    			data-dojo-props="region:'top'">Loan Payment Calculator</div>
    		<div data-dojo-type="dijit.layout.ContentPane"
    			data-dojo-props="region:'center'">
    			<div id="LoanInput" data-dojo-type="loan.LoanInput"></div>
    			<div>Monthly Payment: <span id="monthlyPayment"></span></div>
    		</div>
    	</div>
    
    	</body>
    </html>
  17. A présent, il est temps de tester votre application sur le serveur. Dans la vue Explorateur d'entreprise, cliquez avec le bouton droit sur index.html et sélectionnez Exécuter en tant que > Exécuter sur le serveur.
  18. Sélectionnez Serveur de prévisualisation Web et cliquez sur Terminer. Votre page s'ouvre dans un navigateur Web.
  19. Entrez un montant de prêt et vérifiez que la zone de résultat est mise à jour.
    règlement mensuel

Point de contrôle

Vous avez ajouté votre widget Dojo personnalisé à la page et vous l'avez testé sur un serveur.

Ce que vous avez appris :
  • Comment ajouter un widget personnalisé à une page Web à partir de la palette.
  • Comment exécuter une application Dojo sur un serveur.
  • Comment tester les widgets Dojo que vous avez créés.
< 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_lesson3.html