Guida introduttiva: Aggiunta di classificazioni (HTML)
[ Questo articolo è rivolto agli sviluppatori per Windows 8.x e Windows Phone 8.x che realizzano app di Windows Runtime. Gli sviluppatori che usano Windows 10 possono vedere Documentazione aggiornata ]
Puoi usare il controllo Rating per consentire all'utente di classificare qualcosa facendo clic su un'icona che rappresenta una classificazione. Questa guida introduttiva spiega come aggiungere un controllo della classificazione a un'app di Windows Store in JavaScript.
Prerequisiti
Partiamo dal presupposto che tu sappia come creare una semplice app di Windows Store scritta in JavaScript che usi controlli WinJS. Per istruzioni di base sui controlli della WinJS, vedi Guida introduttiva: Aggiunta di controlli e stili WinJS.
Creare un controllo della classificazione
Per creare un controllo Rating, devi creare un elemento div e impostare la proprietà data-win-control su "WinJS.UI.Rating". Ecco un esempio di come creare un controllo della classificazione di base:
<div id="ratingControl" data-win-control="WinJS.UI.Rating"></div>
Nota Per poter creare un'istanza del controllo, la tua pagina deve includere i file JavaScript di WinJS e tu devi chiamare la funzione WinJS.UI.processAll nel code-behind. Per altre informazioni, vedi Guida introduttiva: Aggiunta di controlli e stili WinJS.
Impostare la classificazione media e massima
La proprietà averageRating specifica la classificazione media dell'elemento che viene classificato. Il criterio in base al quale tu determini la classificazione media è a tua totale discrezione. Se imposti la proprietà averageRating, il controllo Rating la visualizzerà finché l'utente non selezionerà la propria classificazione. L'esempio seguente imposta la proprietà averageRating su 3.4.
<div id="ratingControl" data-win-control="WinJS.UI.Rating"
data-win-options="{averageRating : 3.4}"></div>
La proprietà maxRating specifica la massima classificazione possibile. Il valore predefinito è 5. L'esempio seguente imposta la proprietà maxRating su 7; quando il controllo è visualizzato, mostra 7 stelle invece di 5.
<div id="ratingControl" data-win-control="WinJS.UI.Rating"
data-win-options="{averageRating : 3.4, maxRating : 7}"></div>
Ottenere la classificazione utente
Quando l'utente sceglie una classificazione, viene generato l'evento change. Puoi ottenere la classificazione utente recuperando il valore della proprietà userRating.
Questo esempio usa il gestore dell'evento activated della pagina iniziale per aggiungere un gestore dell'evento change al controllo Rating. Per altre informazioni sulle posizioni migliori per aggiungere eventi, vedi Guida introduttiva: Aggiunta di controlli e gestione di eventi.
(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();
})();
Questa funzione di esempio del gestore eventi, changeRating, recupera e archivia la classificazione utente.
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'esempio seguente modifica il gestore dell'evento activated mostrato in precedenza, in modo da recuperare la classificazione utente archiviata e usarla per impostare il controllo 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();
})();
Riepilogo e passaggi successivi
Hai imparato a creare un controllo Rating e ad archiviare e recuperare la relativa proprietà userRating. Ora puoi imparare a usare al meglio il controllo della classificazione leggendo Linee guida ed elenco di controllo per i controlli della classificazione.