< Zurück | Weiter >

Lerneinheit 3: Angepasstes Dojo-Widget einer Webseite hinzufügen

In dieser Lerneinheit fügen Sie Ihr angepasstes Dojo-Widget in eine Webseite ein, deren Layout mithilfe eines Dojo-Layout-Widgets angelegt wird. Sie verwenden Dojo-APIs, um Ihr Widget mit dem Ausgabefeld zu verbinden und die Ergebnisse anzuzeigen.

Nach der Erstellung eines angepassten Dojo-Widgets wird das Widget zum Fach "Andere Dojo-Widgets" der Palette hinzugefügt. Dadurch kann das Widget einfach zur Webseite hinzugefügt werden.
  1. Klicken Sie mit der rechten Maustaste auf den Ordner WebContent und wählen Sie Neu > Webseite aus.
  2. Nennen Sie die Seite index.html und klicken Sie auf Fertigstellen.
  3. Klicken Sie auf das Register Design, um die Seite in der Ansicht "Design" anzuzeigen.
  4. Öffnen Sie in der Palette das Fach Dojo-Layoutwidgets und ziehen Sie ein Widget BorderContainer auf die Seite. Der Dialog "Insert Border Container" wird geöffnet, damit Sie das Widget BorderContainer anpassen können.
    1. Wählen Sie die Kontrollkästchen Top und Center aus.
    2. Klicken Sie auf OK.
  5. Eine grafisch orientierte Ansicht des Widgets BorderContainer wird jetzt in der Ansicht "Design" angezeigt. Klicken Sie auf die BorderContainer-Darstellung und anschließend auf das Register Eigenschaften, um die Ansicht "Eigenschaften" zu öffnen.
    Eigenschaftssicht 'Border Container'
  6. Klicken Sie auf das Register Stile und aktualisieren Sie im Feld Eigenschaften die folgenden Werte für den Rahmencontainer:
    • Ändern Sie die Höhe von 500 Pixel in 700 Pixel.
    • Ändern Sie die Breite in 600 Pixel.
  7. Klicken Sie auf den Bereich, um ein Textfeld zu öffnen. Geben Sie Loan Payment Calculator ein und klicken Sie dann außerhalb des Textfensters, um Ihre Änderung anzuwenden.
    Oberer Bereich eines Rahmencontainers
  8. Blenden Sie in der Palette das Fach Andere Dojo-Widgets ein.
  9. Legen Sie das Dojo-Widget LoanInput in der Mitte des Rahmencontainers ab.
  10. Klicken Sie auf das Register Quelle, um zur Ansicht "Quelle" zu wechseln.
  11. Setzen Sie das ID-Attribut im Tag div des Widgets LoanInput auf "LoanInput":
    <div id="LoanInput" data-dojo-type="loan.LoanInput"></div>
  12. Fügen Sie einen neuen div-Tag unter dem Widget LoanInput hinzu, um die Ergebnisse anzuzeigen. Sie können den folgenden Text kopieren:
    <div>Monthly Payment: <span id="monthlyPayment"></span></div>
  13. Fügen Sie direkt hinter dem vorhandenen require-Modul "dojo" ein neues require-Modul dijit/registry hinzu.
    [ "dojo", "dijit/registry", "dojo/parser", "dijit/layout/BorderContainer", "dijit/layout/ContentPane", "loan/LoanInput" ],
  14. Fügen Sie der require-Callback-Funktion einen Registrierungsparameter hinzu.
    function(dojo, registry) {
    	dojo.ready(function() {
    	});
    });
  15. Führen Sie in der Funktion dojo.ready die folgenden Schritte aus:
    1. Geben Sie die Zeichenfolge var loanWidget = registry.b ein und rufen Sie Content-Assist auf. Wählen Sie den Vorschlag byId(id) aus, sodass er in Ihre Seite eingefügt wird.
    2. Geben Sie die Zeichenfolge "LoanInput" als Parameter für die Funktion byId ein.
    3. Geben Sie nach der rechten runden Klammer für den Parameter LoanInput ein Semikolon ein.
    4. Geben Sie in der Zeile, die sich unter Ihrem Aufruf für registry.byId befindet, die Zeichenfolge dojo.c ein und rufen Sie Content-Assist auf. Hier können Sie eine andere Standardschablone für dojo.connect auswählen. Es gibt zwei Versionen dieser Schablone. Wählen Sie die Version aus, die dijit.registry.byId verwendet und fügen Sie sie in Ihre Seite ein.
    5. Legen Sie als ersten Parameter LoanInput und als zweiten Parameter calculate fest.
    6. Fügen Sie im Funktionsparameter der Verbindungsfunktion den folgenden Code hinzu:
      var payment = loanWidget.monthlyPayment;
      if (payment == NaN) {
      	payment = 0;
      }
      
      // Ergebnisfeld aktualisieren
      var formattedValue = dojo.currency.format(payment, {currency: "USD"});
      dojo.attr("monthlyPayment", "innerHTML", formattedValue);
    7. Erforderliche Module werden der Funktion require als Zeichenfolge-Array hinzugefügt. Hierbei ist jedes Modul eine durch einen Schrägstrich getrennte Zeichenfolge von Modulsegmenten. Fügen Sie in der require-Funktion die Zeichenfolge "dojo/currency" zum Array mit den erforderlichen Abhängigkeiten hinzu.
    8. Der fertige Code für die Funktion dojo.ready wird nun folgendermaßen dargestellt:
      dojo.ready(function() {
      		// LoanInput-Widget abrufen
      		loanWidget = registry.byId('LoanInput');
      		
      		// "calculate" aus Widget "LoanInput" verarbeiten
      		dojo.connect(dijit.registry.byId("LoanInput"), "calculate", function(event) {
      			var payment = loanWidget.monthlyPayment;
      			if (payment == NaN) {
      				payment = 0;
      			}
      
      			// Ergebnisfeld aktualisieren
      			var formattedValue = dojo.currency.format(payment, {currency: "USD"});
      			dojo.attr("monthlyPayment", "innerHTML", formattedValue);
      		});
      	});
  16. Speichern Sie die Seite. Die Quelle für die Datei index.html sieht wie folgt aus:
    <!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(
    // Gruppe von Modul-IDs
    [ "dojo", "dijit/registry", "dojo/parser", "dijit/layout/BorderContainer", "dijit/layout/ContentPane", "loan/LoanInput", "dojo/currency" ],
    // Callback-Funktion aufgerufen anhand von Auswertungsergebnissen der Abhängigkeiten
    function(dojo, registry) {
    	dojo.ready(function() {
    		// LoanInput-Widget abrufen
    		loanWidget = registry.byId('LoanInput');
    		
    		// "calculate" aus Widget "LoanInput" verarbeiten
    		dojo.connect(dijit.registry.byId("LoanInput"), "calculate", function(event) {
    			var payment = loanWidget.monthlyPayment;
    			if (payment == NaN) {
    				payment = 0;
    			}
    
    			// Ergebnisfeld aktualisieren
    			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. Sie können jetzt Ihre Anwendung auf dem Server testen. Klicken Sie in der Ansicht "Enterprise-Explorer" mit der rechten Maustaste auf index.html und wählen Sie Ausführen als > Auf Server ausführen aus.
  18. Wählen Sie Webvorschauserver aus und klicken Sie auf Fertigstellen. Daraufhin wird Ihre Seite in einem Web-Browser geöffnet.
  19. Geben Sie einen Darlehensbetrag ein und prüfen Sie, ob das Ergebnissfeld aktualisiert wird.
    Monatliche Rate

Prüfpunkt für Lerneinheit

Sie haben nun Ihr angepasstes Dojo-Widget zur Seite hinzugefügt und es auf dem Server getestet.

Sie haben Folgendes erlernt:
  • Vorgehensweise zum Hinzufügen eines angepassten Widgets zu einer Webseite über die Palette.
  • Vorgehensweise zum Ausführen einer Dojo-Anwendung auf einem Server.
  • Vorgehensweise zum Testen der Dojo-Widgets, die von Ihnen erstellt wurden.
< 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_lesson3.html