Démarrage rapide : ajout d’évaluations (HTML)
[ Cet article est destiné aux développeurs Windows 8.x et Windows Phone 8.x qui créent des applications Windows Runtime. Si vous développez une application pour Windows 10, voir la Documentation ]
Utilisez le contrôle Rating pour permettre à l’utilisateur d’évaluer un élément en cliquant sur une icône qui représente une évaluation. Ce guide de démarrage rapide vous montre comment ajouter un contrôle d’évaluation à votre application du Windows Store en JavaScript.
Prérequis
Nous partons du principe que vous savez créer une application élémentaire Windows Store en JavaScript qui utilise les contrôles WinJS. Pour obtenir des instructions sur l’utilisation des contrôles WinJS, voir Démarrage rapide : ajout de contrôles et styles WinJS.
Création d’un contrôle d’évaluation
Pour créer un contrôle Rating, créez un élément div et définissez la propriété data-win-control sur "WinJS.UI.Rating". Voici un exemple qui illustre la création d’un contrôle d’évaluation de base :
<div id="ratingControl" data-win-control="WinJS.UI.Rating"></div>
Remarque Pour que le contrôle soit instancié, votre page doit inclure les fichiers JavaScript WinJS et vous devez appeler la fonction WinJS.UI.processAll dans votre code-behind. Pour plus d’informations, voir Démarrage rapide : ajout de contrôles et de styles WinJS.
Définition de l’évaluation moyenne et de l’évaluation maximale
La propriété averageRating spécifie l’évaluation moyenne de l’élément en cours d’évaluation. (La façon de déterminer l’évaluation moyenne est de votre ressort.) Si vous définissez la propriété averageRating, le contrôle Rating l’affiche jusqu’à ce que l’utilisateur sélectionne sa propre évaluation. L’exemple suivant définit la propriété averageRating sur 3.4.
<div id="ratingControl" data-win-control="WinJS.UI.Rating"
data-win-options="{averageRating : 3.4}"></div>
La propriété maxRating spécifie l’évaluation maximale possible. La valeur par défaut est 5. L’exemple suivant définit la propriété maxRating sur 7 ; lorsque le contrôle apparaît, il affiche 7 étoiles au lieu de 5.
<div id="ratingControl" data-win-control="WinJS.UI.Rating"
data-win-options="{averageRating : 3.4, maxRating : 7}"></div>
Récupération de l’évaluation de l’utilisateur
Lorsque l’utilisateur sélectionne une évaluation, l’événement change est déclenché. Vous pouvez récupérer l’évaluation de l’utilisateur en obtenant la valeur de la propriété userRating.
L’exemple suivant utilise le gestionnaire d’événements d’activation de la page de démarrage pour ajouter un gestionnaire d’événements change au contrôle Rating. (Pour plus d’informations sur l’emplacement idéal pour les événements, voir Démarrage rapide : ajout de contrôles et gestion des événements.)
(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();
})();
L’exemple de fonction du gestionnaire d’événements, changeRating, récupère l’évaluation de l’utilisateur et la stocke.
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.
}
}
}
L’exemple suivant modifie le gestionnaire d’événements d’activation illustré plus haut afin qu’il récupère l’évaluation de l’utilisateur stockée et qu’il l’utilise pour définir le contrôle Rating.
(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();
})();
Récapitulatif et étapes suivantes
Vous avez appris à créer un contrôle Rating, puis à stocker et à récupérer sa propriété userRating. À présent, pour savoir comment utiliser au mieux le contrôle d’évaluation, consultez les Recommandations et liste de vérification sur les contrôles d’évaluation.