Aplicaciones de Windows
Contraer la tabla de contenido
Expandir la tabla de contenido

Inicio rápido: Agregar clasificaciones (aplicaciones de la Tienda Windows con JavaScript y HTML)

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

Se supone que sabes crear una aplicación básica de la Tienda Windows desarrollada para Windows con JavaScript que use controles de la Biblioteca de Windows para JavaScript. Para obtener ayuda para empezar a usar controles de la biblioteca de Windows para JavaScript, 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 la biblioteca de Windows para JavaScript y debes llamar a la función WinJS.UI.processAll en el código de detrás. Para obtener 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.

Temas relacionados

WinJS.UI.Rating

 

 

Mostrar:
© 2018 Microsoft