Lerneinheit 7: Angepasstes Dojo-Widget erstellen

<div data-dojo-type="dijit.Dialog" data-dojo-attach-point="dialogbox"></div>

1. Platzieren Sie den Cursor hinter den Attributwert "data-dojo-attach-point" und drücken Sie die Leertaste.
2. Drücken Sie zum Öffnen von Content-Assist STRG+Leertaste, um nach dem Attribut data-dojo-props zu suchen, und wählen Sie dieses Attribut mit Content-Assist aus:
   
3. Platzieren Sie den Cursor in den Attributwert "data-dojo-props".
4. Öffnen Sie Content-Assist und suchen Sie nach dem Attribut title und wählen Sie dieses Attribut mit Content-Assist aus.
5. Legen Sie den Titel-Attributwert auf Bewerten und Kommentieren! fest.

<div data-dojo-type="dijit.Dialog" data-dojo-attach-point="dialogbox" data-dojo-props="title: 'Bewerten und Kommentieren!'"></div>

1. Geben Sie Bewerten: < ein und drücken Sie STRG+Leertaste, um Content-Assist zu öffnen.
2. Wählen Sie in Content-Assist div aus:
   
3. Platzieren Sie den Cursor in den eingefügten <div>-Tag und drücken Sie die Leertaste.
4. Öffnen Sie Content-Assist, um nach dem Attribut data-dojo-type zu suchen, und wählen Sie dieses Attribut mit Content-Assist aus:
   
5. Platzieren Sie den Cursor zwischen den Anführungszeichen und öffnen Sie Content-Assist. Eine Liste von Dojo-Widgets wird angezeigt.
6. Suchen Sie nach dem Widget dojox.form.Rating. Während Sie den Namen des Widgets eingeben, wird die Liste, die von Content-Assist angezeigt wird, weiter eingegrenzt.
   
7. Bearbeiten Sie den Tag <div> so, dass er wie das folgende Code-Snippet aussieht:

   Rate: <div data-dojo-type="dojox.form.Rating" data-dojo-attach-point="rating" data-dojo-props="numStars:='5'"></div>

   Weitere Informationen zur Überprüfung

   Im Editor wird die Echtzeitüberprüfung unterstützt. Wenn Sie ein ungültiges Element schreiben, wird es überprüft und es werden Warnungen ausgegeben, die beschrieben werden, wenn Sie den Mauszeiger über das ungültige Element bewegen. Im Folgenden ist ein Beispiel für das Schreiben eines nicht definierten Attributs für das Dojo-Widget dojox.form.Rating aufgeführt:

   
8. Kopieren und fügen Sie den folgenden Code im Widget "Dialog" in den Editor ein. Platzieren Sie das Element dabei unterhalb des Widgets "Rating":

   <br>
   <br>
   Comments:<div data-dojo-type="dijit.form.Textarea" data-dojo-attach-point = "comments" style="width: 60%;"></div>
   <br>
   <button data-dojo-type="dijit.form.Button" data-dojo-attach-event="onClick: saveFeedback">Submit</button>

   Benutzer können das Widget für den Textbereich (Text area) verwenden, um Kommentare einzugeben. Mit dem Button-Widget können Benutzer Bewertungen und Kommentare übergeben.

<div data-dojo-type="dijit.TitlePane" data-dojo-props="title: 'Protokoll der Bewertungen und Kommentare'">
<ol data-dojo-attach-point="feedbacklist"></ol>
</div>

dojox/form/Rating
dojo/data/ItemFileWriteStore
dijit/form/Textarea
dijit/Dialog
dijit/form/Button
dijit/TitlePane

movieTitle : "",

	rcStore : new dojo.data.ItemFileWriteStore({
		data : {
			items : []
		}
	}),

getComment : function(){
		return this.comments.attr('value');
	},

	getRating : function(){
		return this.rating.attr('value');
	},

	setComment : function(value){
		this.comments.attr("value", value);
	}, 
	
	setRating : function(value){
		this.rating.attr("value", value);
	},

showFeedbackTools : function(movieTitle){
		this.movieTitle = movieTitle;
		this.dialogbox.show();
		},

saveFeedback : function(){
				},

1. Verwenden Sie die zuvor geschriebenen Getter-Funktionen, um die Werte abzurufen, die vom Benutzer im Dialogfenster festgelegt wurden. Innerhalb der Funktion müssen Sie Folgendes eingeben: var userRating = this. Drücken Sie anschließend STRG+Leertaste, um mithilfe von Content-Assist in einer JavaScript-Datei nach der Bewertungseigenschaft zu suchen. Wählen Sie getRating() aus.
2. Definieren Sie eine Variable für die Kommentare, indem Sie var userComment = this.getComment(); unter der Variablen userRating eingeben.
3. Speichern Sie die Rückmeldedaten durch den folgenden Code:

   	this.rcStore.newItem({
   		title : this.movieTitle,
   		comment : userComment,
   		rating : userRating
   	});

   Die Daten werden in rcStore als neues Element gespeichert. Dieses neue Element enthält den Filmtitel, der definiert wird, wenn das Dialogfenster geöffnet wird und die Bewertung und die Kommentare vom Benutzer hinzugefügt werden.
4. Fügen Sie die Werte zu der Liste hinzu, die das Protokoll der Kommentare und Bewertungen enthält. Sie werden als untergeordnete Elemente des HTML-Elements <ol > hinzugefügt, das im Teilfenster für den Titel in der HTML-Schablone des Widgets definiert wurde.

   dojo.create("li", {
   			innerHTML : "<b>Title:</b> " + this.movieTitle + " <b>Rating:</b>"
   					+ userRating + "<br> <b>Comments:</b> " + userComment
   		}, this.feedbacklist);

5. Kopieren Sie den folgenden Code und fügen Sie ihn nach dem Code aus dem vorherigen Schritt ein, um Werte zurückzusetzen und das Dialogfenster auszublenden.

   this.dialogbox.hide();
   this.setComment("");
   this.setRating(0);

   Durch das Zurücksetzen der Werte werden die Felder bereinigt. Die Werte der Felder aus einer vorherigen Bewertungs- und Kommentaraktion für eine neue Bewertungs- und Kommentaraktion bleiben nicht erhalten. Das Ausblenden des Dialogs ermöglicht es dem Benutzer, mit der Bewertung anderer Filme innerhalb des Datenrasters fortzufahren.

getCommentsByMovieTitle : function(movieTitle){

		var comments = [];
		var store = this.rcStore;
		this.rcStore.fetch({
			query : {
				title : movieTitle
			},
			onComplete : function(items, request){
				dojo.forEach(items, function(item){
					comments.push(store.getValue(item, "comment"));
				});
			}
		});

		return comments;
	},