Schnellstart: Hinzufügen von Bewertungen (HTML)
[ Dieser Artikel richtet sich an Windows 8.x- und Windows Phone 8.x-Entwickler, die Windows-Runtime-Apps schreiben. Wenn Sie für Windows 10 entwickeln, finden Sie weitere Informationen unter neueste Dokumentation ]
Mit dem Rating-Steuerelement können Benutzer etwas bewerten, indem sie auf ein Symbol klicken, das eine Bewertung darstellt. In dieser Schnellstartanleitung erfahren Sie, wie Sie Ihrer Windows Store-App mit JavaScript ein Bewertungssteuerelement hinzufügen.
Voraussetzungen
Es wird davon ausgegangen, dass Sie eine einfache Windows Store-App mit JavaScript erstellen können, die WinJS-Steuerelemente verwendet. Anweisungen zu den ersten Schritten mit WinJS-Steuerelementen finden Sie unter Schnellstart: Hinzufügen von WinJS-Steuerelementen und -Stilen.
Erstellen eines Bewertungssteuerelements
Zum Erstellen eines Rating-Steuerelements erstellen Sie ein div-Element und legen die data-win-control-Eigenschaft auf "WinJS.UI.Rating" fest. Dies ist ein Beispiel für das Erstellen eines einfachen Bewertungssteuerelements:
<div id="ratingControl" data-win-control="WinJS.UI.Rating"></div>
Hinweis Für die Instanziierung des Steuerelements muss Ihre Seite die WinJS JavaScript-Dateien enthalten, und Sie müssen die WinJS.UI.processAll-Funktion auf der CodeBehind-Seite aufrufen. Weitere Informationen finden Sie unter Hinzufügen von WinJS-Steuerelementen und -Stilen.
Festlegen von Durchschnitts- und Höchstbewertung
Die averageRating-Eigenschaft gibt die durchschnittliche Bewertung des Elements an. (Sie legen selbst fest, wie die Durchschnittsbewertung ermittelt wird.) Wenn Sie die averageRating-Eigenschaft festlegen, wird das Rating-Steuerelement angezeigt, bis der Benutzer eine eigene Bewertung angibt. Das folgende Beispiel legt averageRating auf 3,4 fest.
<div id="ratingControl" data-win-control="WinJS.UI.Rating"
data-win-options="{averageRating : 3.4}"></div>
Die maxRating-Eigenschaft gibt die höchste mögliche Bewertung an. Der Standardwert ist 5. Das nächste Beispiel legt maxRating auf 7 fest. Bei der Anzeige stellt das Steuerelement 7 Sterne anstelle von 5 dar.
<div id="ratingControl" data-win-control="WinJS.UI.Rating"
data-win-options="{averageRating : 3.4, maxRating : 7}"></div>
Abrufen der Benutzerbewertung
Wenn der Benutzer eine Bewertung auswählt, löst dies das change-Ereignis aus. Sie erhalten die Bewertung des Benutzers, indem Sie den Wert der userRating-Eigenschaft abrufen.
Dieses Beispiel verwendet den auf der Startseite aktivierten Ereignishandler, um dem Rating-Steuerelement einen change-Ereignishandler hinzuzufügen. (Weitere Informationen zur besten Vorgehen beim Anfügen von Ereignissen finden Sie unter Hinzufügen von Steuerelementen und Behandeln von Ereignissen.)
(function () {
"use strict";
var app = WinJS.Application;
// This function responds to all application activations.
app.onactivated = function (eventObject) {
if (eventObject.detail.kind === Windows.ApplicationModel.Activation.ActivationKind.launch) {
// TODO: Initialize your application here.
WinJS.UI.processAll()
.done(function () {
// Get the rating control
var ratingControl = document.getElementById("ratingControl").winControl;
ratingControl.addEventListener("change", changeRating);
});
}
};
app.start();
})();
Die changeRating-Funktion des Beispielereignishandlers ruft die Bewertung des Benutzers ab und speichert sie.
function changeRating(ev) {
var ratingControl = ev.target.winControl;
if (ratingControl) {
if (ratingControl.userRating != 0) {
// Put your code here to save user rating and re-calculate average rating.
WinJS.Application.sessionState.userRating = ratingControl.userRating;
var appData = Windows.Storage.ApplicationData.current;
var roamingValues = appData.roamingSettings.values;
// Write a setting
roamingValues.insert("userRating", ratingControl.userRating);
} else {
// Put your code here to delete user rating.
}
}
}
Das nächste Beispiel ändert den zuvor gezeigten, aktivierten Ereignishandler, damit dieser die gespeicherte Benutzerbewertung abruft und damit das Rating-Steuerelement festlegt.
(function () {
"use strict";
var app = WinJS.Application;
// This function responds to all application activations.
app.onactivated = function (eventObject) {
if (eventObject.detail.kind === Windows.ApplicationModel.Activation.ActivationKind.launch) {
// TODO: Initialize your application here.
WinJS.UI.processAll()
.done(function () {
// Get the rating control
var ratingControl = document.getElementById("ratingControl").winControl;
// Retrieve stored state info
var appData = Windows.Storage.ApplicationData.current;
var roamingValues = appData.roamingSettings.values;
// Read a setting
var currentRating = parseFloat(roamingValues.lookup("userRating"));
if (currentRating > 0) {
ratingControl.userRating = currentRating;
}
ratingControl.addEventListener("change", changeRating);
});
}
};
function changeRating(ev) {
var ratingControl = ev.target.winControl;
if (ratingControl) {
if (ratingControl.userRating != 0) {
// Put your code here to save user rating and re-calculate average rating.
WinJS.Application.sessionState.userRating = ratingControl.userRating;
var appData = Windows.Storage.ApplicationData.current;
var roamingValues = appData.roamingSettings.values;
// Write a setting
roamingValues.insert("userRating", ratingControl.userRating);
} else {
// Put your code here to delete user rating.
}
}
}
app.start();
})();
Zusammenfassung und nächste Schritte
Sie haben erfahren, wie Sie ein Rating-Steuerelement erstellen und dessen userRating speichern und abrufen. Wie Sie Bewertungssteuerelemente am besten verwenden, erfahren Sie unter Richtlinien und Prüfliste für Bewertungssteuerelemente.