Inicio rápido: agregar clasificaciones (HTML)
[ Este artículo está destinado a desarrolladores de Windows 8.x y Windows Phone 8.x que escriben aplicaciones de Windows Runtime. Si estás desarrollando para Windows 10, consulta la documentación más reciente ]
Usa el control Rating para que el usuario pueda clasificar algo al hacer clic en un icono que represente una clasificación. En este inicio rápido se muestra cómo agregar el control Rating a la aplicación de la Tienda Windows con JavaScript.
Requisitos previos
Damos por hecho que sabes crear una aplicación de la Tienda Windows básica con JavaScript que usa controles de WinJS. Para obtener instrucciones sobre cómo empezar a usar controles de WinJS, consulta Inicio rápido: Agregar controles y estilos de WinJS.
Crear un control Rating
Para crear un control Rating, crea un elemento div y establece la propiedad data-win-control en "WinJS.UI.Rating". Aquí tienes un ejemplo de cómo crear un control Rating básico:
<div id="ratingControl" data-win-control="WinJS.UI.Rating"></div>
Nota Para poder crear una instancia del control, la página debe incluir los archivos JavaScript de WinJS y debes llamar a la función WinJS.UI.processAll en el código subyacente. Para más información, consulta Inicio rápido: Agregar controles y estilos de WinJS.
Establecer la clasificación media y la máxima
La propiedad averageRating especifica la clasificación media del elemento que se va a clasificar. (De ti dependerá cómo determines la clasificación media para ese elemento). Si estableces la propiedad averageRating, el control Rating la muestra hasta que el usuario seleccione su propia clasificación. En el ejemplo siguiente se establece averageRating en 3.4.
<div id="ratingControl" data-win-control="WinJS.UI.Rating"
data-win-options="{averageRating : 3.4}"></div>
La propiedad maxRating especifica la clasificación máxima posible. La predeterminada es 5. En el ejemplo siguiente se establece maxRating en 7. Cuando se muestra el control, muestra 7 estrellas en lugar de 5.
<div id="ratingControl" data-win-control="WinJS.UI.Rating"
data-win-options="{averageRating : 3.4, maxRating : 7}"></div>
Obtener la clasificación del usuario
Cuando el usuario elige una clasificación, se desencadena el evento change. Puedes obtener la clasificación del usuario si obtienes el valor de la propiedad userRating.
Este ejemplo usa el controlador de eventos activado de la página de inicio para agregar un controlador de eventos change al control Rating. (Para obtener más información sobre el mejor lugar para adjuntar eventos, consulta Inicio rápido: Agregar controles HTML y administrar eventos.)
(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();
})();
La función del controlador de eventos de ejemplo, changeRating, recupera la clasificación del usuario y la almacena.
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.
}
}
}
En el ejemplo siguiente se modifica el controlador de eventos activado que se mostró anteriormente para que recupere la clasificación del usuario almacenada y la use para establecer el control 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();
})();
Resumen y pasos siguientes
Aprendiste a crear un control Rating y a almacenar y recuperar su propiedad userRating. A continuación, aprenderás a sacar el máximo partido del control Rating en Directrices y lista de comprobación para controles Rating.