< Zurück | Weiter >

Lerneinheit 2: Angepasstes Dojo-Widget erstellen

Dojo Toolkit enthält zahlreiche Standardwidgets, einschließlich Eingabefeldern, Kombinationsfeldern und Optionsfeldern. Sie können auch angepasste Widgets erstellen, um wiederverwendbare UI-Elemente oder bestimmte Funktionselemente einzubinden. In dieser Lerneinheit erstellen Sie ein neues angepasstes Dojo-Widget.

Dojo-Widgets bestehen aus den folgenden drei Dateien, die der Assistent für neue Dojo-Widgets für Sie erstellt: Sie werden anschließend die HTML-Schablone und die JavaScript-Datei bearbeiten:
  1. Klicken Sie in der Ansicht "Enterprise-Explorer" mit der rechten Maustaste auf den Ordner "WebContent/dojo" und wählen Sie Neu > Dojo-Widget aus. Daraufhin wird der Assistent für neue Dojo-Widgets angezeigt.
  2. Geben Sie im Feld Modulname die Zeichenfolge loan ein.
  3. Geben Sie im Feld Widgetname die Zeichenfolge LoanInput ein. Die HTML-Schablone und das zugehörige Style-Sheet für die Widgetpfade werden automatisch gefüllt.
    Assistent 'Neues Dojo-Widget'
  4. Klicken Sie auf Fertigstellen. Drei Dateien werden im Order "dojo/loan" erstellt:
    templates/LoanInput.html
    Die UI-Schablone für das Widget.
    themes/LoanInput.css
    Stellt den Darstellungsstil für das Widget bereit.
    LoanInput.js
    Stellt das JavaScript-Back-End und den Teil mit der Geschäftslogik für das Widget bereit.
  5. Die JavaScript-Quellendatei LoanInput für das Widget wird im Editor geöffnet.
  6. Fügen Sie unter dem Feld templateString drei zusätzliche Felder hinzu (principal, interestPaid und monthlyPayment), in denen die Ergebnisse der Berechnung gespeichert werden. Sie sollten alle den Standardwert 0 haben. Fügen Sie unbedingt nach jedem Feld ein Komma hinzu.
    templateString : dojo.cache("loan", "templates/LoanInput.html"),
    principal: 0,
    interestPaid: 0,
    monthlyPayment: 0,
  7. Fügen Sie unter der Funktion postCreate eine neue Funktion mit dem Namen calculate hinzu. Stellen Sie sicher, dass Sie nach der Funktion postCreate ein Komma hinzufügen. Lassen Sie die neue Funktion calculate vorerst leer.
    postCreate : function() {
    },
    // Diese Funktion führt die Berechnungen für das Darlehen durch.
    calculate: function() {
    }
  8. Klicken Sie in der Ansicht "Enterprise-Explorer" doppelt auf templates/LoanInput.html, um die HTML-Schablone für das Widget zu öffnen.
  9. Klicken Sie auf Weiter und übernehmen Sie die Standardwerte. Klicken Sie auf Fertigstellen.
  10. Erstellen Sie im vorhandenen div-Tag drei weitere, untergeordnete div-Tags. Sie können Content-Assist verwenden, indem Sie <d eingeben und anschließend die Tastenkombination Strg + Leertaste drücken. Wählen Sie im Popup-Fenster <> div aus, um den Tag einzufügen.
  11. Fügen Sie für jeden neuen div-Tag eine Textbezeichnung hinzu: Loan Amount:, Interest Rate: und Term (years):. Wenn Sie damit fertig sind, wird Ihr Code folgendermaßen dargestellt:
    <div class="LoanInput">
    <div>Loan Amount: </div>
    <div>Interest Rate: </div>
    <div>Term (years): </div>
    </div>
  12. Fügen Sie jetzt Dojo-Widgets für jedes der Eingabefelder hinzu:
    1. Bringen Sie im Arbeitsbereich die Palette in den Vordergrund, indem Sie auf das entsprechende Register klicken. Sie sollte verschiedene Ablagefächer mit Dojo-Widgets sehen.
    2. Blenden Sie das Fach Dojo-Formularwidgets durch Anklicken ein.
      Fach 'Dojo-Formularwidgets'
    3. Wählen Sie CurrencyTextBox aus und legen Sie es in Ihrem "div"-Tag neben der Bezeichnung "Loan Amount" ab.
    4. Geben Sie innerhalb des neu erstellten Eingabeelements data- ein und verwenden Sie Content-Assist (Strg + Leertaste), um eine Liste von Attributen anzuzeigen. Klicken Sie auf data-dojo-props, um es einzufügen. Um HTML5-Standards zu entsprechen, werden seit Dojo Toolkit SDK 1.7 Attribute standardmäßig über data-dojo-props-Attribute definiert.
    5. Geben Sie im data-dojo-props-Attribut cu ein und verwenden Sie Content-Assist (Strg + Leertaste), um eine Liste von Attributen anzuzeigen. Klicken Sie auf currency, um es einzufügen.
    6. Geben Sie im currency-Attribut USD ein. Der Code wird nun folgendermaßen dargestellt:
      <div>Loan Amount: <input type="text"
      				data-dojo-type="dijit.form.CurrencyTextBox"
      				data-dojo-props="currency: 'USD'">
      </div>
    7. Fügen Sie als Nächstes die Dojo-Widget-Markup-Formatierung für das Feld "Interest Rate" ein. Setzen Sie den Cursor in den zweiten div-Tag hinter der Markierung, geben Sie die Zeichenfolge <input d> ein. Während sich Ihr Cursor neben dem "d" befindet, verwenden Sie die Tastenkombination Strg+Leerschritt, um Content-Assist aufzurufen und eine Liste mit Attributen anzuzeigen. Klicken Sie auf data-dojo-type, um das Attribut einzufügen.
    8. Rufen Sie im Attribut "data-dojo-type" erneut Content-Assist auf, um eine Liste mit verfügbaren Dojo-Widgets anzuzeigen. Beginnen Sie mit der Eingabe der Zeichenfolge dijit.form.N, bis Sie NumberSpinner sehen. Klicken Sie auf NumberSpinner, um das Widget in Ihre Seite einzufügen.
    9. Fügen Sie das Attribut "data-dojo-props" hinzu. Setzen Sie im Attribut die folgenden Eigenschaften durch Kommas voneinander getrennt:
      1. value : 5
      2. smallDelta : .05
      3. intermediateChanges : true
      4. constraints : {min: 0}
      Sie können Content-Assist verwenden, um diese Eigenschaften dieselbe Art und Weise einzufügen, wie beim curreny-Attribut weiter oben. Wenn Sie alle Eigenschaften für das Attribut definiert haben, wird Ihr Code folgendermaßen aussehen:
      <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. Übergeben Sie aus der Palette ein ComboBox-Widget in den div-Tag "Term (years)".
    11. Für einige Widgets sind zusätzliche Konfigurationsmöglichkeiten verfügbar, wenn Sie sie wie das ComboBox-Widget aus der Palette heraus übergeben. Sie können im Dialogfeld "Kombiniertes Feld einfügen" Werte für Ihr ComboBox-Widget hinzufügen. Fügen Sie die Werte 1, 2, 3, 4, 5, 10, 15, 30 hinzu.
    12. Legen Sie 15 als Standardwert fest, indem Sie ihn auf True setzen. Klicken Sie auf OK.
  13. Fügen Sie als Nächstes die Attribute data-dojo-attach-point und data-dojo-attach-event zu jedem Ihrer Eingabewidgets hinzu. Der für das Attribut data-dojo-attach-point angegebene Wert ist der Name, mit dem die Widgetinstanz über die Datei LoanInput.js referenziert werden kann. Das Attribut data-dojo-attach-event fügt den Widgets Ereignisverarbeitung hinzu.
    1. Verwenden Sie Content-Assist, um jedem Widget ein Attribut data-dojo-attach-point hinzuzufügen. Nennen Sie sie amount, rate und term.
    2. Fügen Sie data-dojo-attach-event="onChange: calculate" jedem Widget hinzu. Jedes Mal, wenn ein onChange-Ereignis in diesem Widget eintritt, wird die Funktion "calculate" aufgerufen, die Sie der Datei LoanInput.js hinzugefügt haben. Das Endergebnis Ihrer Datei LoanInput.html sollte folgendermaßen aussehen:
      <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. Speichern und schließen Sie die Datei LoanInput.html und öffnen Sie die Datei LoanInput.js erneut.
  15. Fügen Sie Dojo-Modulabhängigkeiten für die drei in der HTML-Datei verwendeten Widgets hinzu. Diese Abhängigkeiten werden die notwendigen Ressourcen laden, um die Widgets zu erstellen, wenn die Seite ausgeführt wird. Das zweite Argument der Funktion define ist ein Array von Abhängigkeiten. Fügen Sie direkt nach der Abhängigkeit "dijit/_WidgetsInTemplateMixin" die folgenden Modulpfade durch Kommas voneinander getrennt hinzu:
    1. "dijit/form/CurrencyTextBox"
    2. "dijit/form/NumberSpinner"
    3. "dijit/form/ComboBox"
    Der Code wird nun folgendermaßen dargestellt:
    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. Fügen Sie jetzt für die Berechnungsfunktion den folgenden Code hinzu, den Sie bereits in Schritt 7 erstellt haben. Sie können hierfür auch Content-Assist ausprobieren. Beachten Sie, dass JavaScript-Standardobjekte wie das Objekt "Math" in Content-Assist verfügbar sind. Die bereits von Ihnen definierten Variablen principal, interestPaid und monthlyPayment sind ebenso verfügbar.
    // Diese Funktion führt die Berechnungen für die Kreditrückzahlung durch.
    	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;
    		}
    }
    Die Funktion "calculate" speichert den Prinzipal des Darlehens, berechnet die monatliche Rate und die Höhe der gezahlten Zinsen.
  17. Sichern und schließen Sie alle Dateien, aus denen sich das angepasste Widget zusammensetzt.
Die Datei LoanInput.js sollte folgendermaßen aussehen:
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 ], {
		// Pfad zur Schablone
		templateString : dojo.cache("loan", "templates/LoanInput.html"),
		principal: 0,
		interestPaid: 0,
		monthlyPayment: 0,

   // Diese Methode außer Kraft setzen, um bei der Dijit-Konstruktion angepasstes Verhalten durchzuführen.
		// Allgemeine Operationen für Konstruktor:
		// 1) Nicht primitive Typen initialisieren (d. h. Objekte und Arrays)
	// 2) Zusätzliche Eigenschaften hinzufügen, die von aufeinanderfolgenden
 //    Lebenszyklusmethoden benötigt werden
		constructor : function() {
			
		},

  // Wenn diese Methode aufgerufen wird, werden alle Variablen "untergemischt".
		// Allgemeine Operationen für postMixInProperties
	// 1) Werte für in der HTML-Dateischablone definierte Widget-Eigenschaftsvariablen bearbeiten und zuordnen
		postMixInProperties : function() {
		},

		// postCreate() wird nach buildRendering() aufgerufen.  Es ist hilfreich, dies außer Kraft zu setzen,
		// wenn Sie Zugriff auf DOM-Knoten in Ihrem Widget benötigen oder diese bearbeiten müssen.
		// Bei DOM-Knoten und Widgets mit dem Attribut "dojoAttachPoint" ist jetzt ein
		// ein direkter Zugriff als Felder auf "this" möglich.
		// Allgemeine Operationen für postCreate
 	// 1) In buildRendering() erstellten DOM-Knoten aufrufen und bearbeiten
		// 2) Neue DOM-Knoten oder Widgets hinzufügen 
		postCreate : function() {
		},
// Diese Funktion führt die Berechnungen für das Darlehen durch.
		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;
			}
}
	});
});

Prüfpunkt für Lerneinheit

Sie haben ein angepasstes Dojo-Widget erstellt.

Sie haben Folgendes erlernt:
  • Vorgehensweise zur Verwendung von Content-Assist und Schablonen zum schnellen Schreiben von Dojo-Code.
  • Vorgehensweise zum Ändern der HTML-Schablone für ein angepasstes Dojo-Widget.
  • Vorgehensweise zum Ändern der JavaScript-Datei für ein angepasstes Dojo-Widget.
< Zurück | Weiter >
Symbol das den Typ des Artikels anzeigt. Artikel für Lerneinheit
Nutzungsbedingungen für Information Center | Feedback

Symbol für Zeitmarke Letzte Aktualisierung: 29.04.2014

Dateiname: loan_lesson2.html