Parte 1: Crear una aplicación "Hello World" (HTML)

Applies to Windows only

Este tutorial te enseña a crear una sencilla aplicación de la Tienda Windows "Hello World" con JavaScript. Es el primer tutorial de una serie de 5 que te enseñarán todo lo que necesitas saber para crear aplicaciones de la Tienda Windows.

En este tutorial, aprenderás a:

  • Crear un nuevo proyecto
  • Agregar contenido HTML a tu página de inicio
  • Controlar la entrada táctil, con pluma y con mouse
  • Alternar entre las hojas de estilo claras y oscuras
  • Crear tus propios estilos personalizados
  • Usar un control de la biblioteca de Windows para JavaScript

Te mostramos cómo crear una aplicación de la Tienda Windows con HTML, JavaScript y CSS.

Sugerencia  

Si quieres pasar por alto el tutorial e ir directamente al código, consulta Introducción a JavaScript: código completo de la serie de tutoriales.

Antes de comenzar...

  • Para realizar este tutorial, debes tener Windows 8.1 y Microsoft Visual Studio Express 2013 para Windows. Para descargarlos, consulta la página Descargas.
  • También necesitas tener una licencia de desarrollador. Para obtener instrucciones, consulta Obtener una licencia de desarrollador.

Paso 1: Crear un nuevo proyecto en Visual Studio

Vamos a crear una nueva aplicación llamada HelloWorld. Pasos a seguir:

  1. Inicia Visual Studio Express 2013 para Windows.

    Aparecerá la pantalla de inicio de Visual Studio Express 2013 para Windows.

    (A partir de ahora, nos referiremos a Visual Studio Express 2013 para Windows simplemente como "Visual Studio").

  2. En el menú Archivo, selecciona Nuevo proyecto.

    Aparece el cuadro de diálogo Nuevo proyecto. El panel izquierdo del cuadro de diálogo te deja elegir el tipo de plantillas que mostrar.

  3. En el panel izquierdo, expande Instalado, después expande Plantillas, después JavaScript y selecciona el tipo de plantilla Tienda Windows. El panel central del cuadro de diálogo muestra una lista de plantillas de proyecto para JavaScript.

    La ventana Nuevo proyecto

    Para este tutorial, usamos la plantilla Blank App. Esta plantilla crea una aplicación de la Tienda Windows mínima que compila y ejecuta, pero que no contiene datos ni controles de interfaz de usuario. A lo largo de estos tutoriales, iremos agregando los controles y datos a la aplicación.

  4. En el panel central, selecciona la plantilla Blank App.
  5. En el cuadro de texto Name, escribe "HelloWorld".
  6. Desactiva la casilla Crear directorio para la solución.
  7. Haz clic en Aceptar para crear el proyecto.

    Visual Studio crea tu proyecto y lo muestra en el Explorador de soluciones.

    El Explorador de soluciones para el proyecto HelloWorld

Aunque Blank App es una plantilla mínima, contiene unos cuantos archivos:

  • Un archivo de manifiesto (package.appxmanifest) que describe tu aplicación (nombre, descripción, icono, página de inicio, página de presentación, etc.) y enumera los archivos que contiene la aplicación.
  • Un conjunto de imágenes de logotipos grandes y pequeños (logo.png y smalllogo.png) que mostrar en la pantalla Inicio.
  • Una imagen (storelogo.png) para representar tu aplicación en la Tienda Windows.
  • Una pantalla de presentación (splashscreen.png) para mostrar cuando comience tu aplicación.
  • Archivos CSS y de código para WinJS (dentro de la carpeta References).
  • Una página de inicio (default.html) y el archivo JavaScript correspondiente (default.js) que se ejecuta cuando comienza tu aplicación.

Para ver y editar los archivos, haz doble clic en el archivo que quieras en el Explorador de soluciones.

Estos archivos son esenciales para todas las aplicaciones de la Tienda Windows con JavaScript. Cualquier proyecto que crees en Visual Studio contendrá estos archivos.

Paso 2: Iniciar la aplicación

En este momento, hemos creado una aplicación muy simple. Si quieres ver el aspecto que tiene, presiona F5 para crear, implementar e iniciar la aplicación. Primero aparece una pantalla de presentación. La pantalla de presentación se define mediante una imagen (splashscreen.png) y un color de fondo (especificado en el archivo de manifiesto de nuestra aplicación). Aquí no lo tratamos, pero es realmente fácil personalizar la pantalla de presentación. (Para saber cómo hacerlo, consulta el tema sobre cómo agregar una pantalla de presentación).

La pantalla de presentación desaparece y, a continuación, aparece la aplicación. Contiene una pantalla negra con un texto que indica dónde va el contenido, "Content goes here".

Nuestra aplicación HelloWorld

No hay ningún botón ni comando para cerrar la aplicación. Para cerrar la aplicación, desliza desde el extremo superior hacia el extremo inferior de la pantalla, o presiona Alt+F4. Ve a la pantalla Inicio. Observa que al implementar la aplicación se agrega su icono al último grupo en la pantalla Inicio. Para volver a ejecutar la aplicación, pulsa o haz clic en su título en la pantalla Inicio o presiona F5 en Visual Studio para ejecutar la aplicación en el depurador.

No hace demasiadas cosas —aún— pero, ¡enhorabuena! Has compilado tu primera aplicación de la Tienda Windows.

Para dejar de depurar la aplicación, presiona Alt+Tab para volver a Microsoft Visual Studio. En Visual Studio, haz clic en Depurar > Detener depuración para cerrar la aplicación. No puedes editar en Visual Studio mientras estés en modo de depuración.

Si quieres más información sobre las diferentes maneras de iniciar la aplicación en Visual Studio, consulta Ejecutar aplicaciones de la Tienda Windows desde Visual Studio.

Paso 3: Modificar tu página de inicio

Uno de los archivos que ha creado Visual Studio para nosotros es default.html, la página de inicio de nuestra aplicación. Cuando se ejecuta la aplicación, muestra el contenido de la página de inicio. Esta también contiene referencias los archivos de código y hojas de estilo de la aplicación. Esta es la página de inicio que Visual Studio ha creado para nosotros:


<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />
    <title>HelloWorld</title>

    <!-- WinJS references -->
    <link href="//Microsoft.WinJS.2.0/css/ui-dark.css" rel="stylesheet" />
    <script src="//Microsoft.WinJS.2.0/js/base.js"></script>
    <script src="//Microsoft.WinJS.2.0/js/ui.js"></script>

    <!-- HelloWorld references -->
    <link href="/css/default.css" rel="stylesheet" />
    <script src="/js/default.js"></script>
</head>
<body>
    <p>Content goes here</p>
</body>
</html>

Vamos a agregar contenido nuevo a tu archivo default.html. Igual que harías para agregar contenido a cualquier otro archivo HTML, agregas tu contenido dentro del elemento body. Puedes usar elementos de HTML5 para crear tu aplicación (con unas pocas excepciones). Esto significa que puedes usar elementos de HTML5 como h1, p, button, div y img.

Hh986964.wedge(es-es,WIN.10).gifPara modificar la página de inicio

  1. Reemplaza el contenido existente en el elemento body con un encabezado de primer nivel que diga "Hello World!", algo de texto que solicite el nombre del usuario, un elemento input para aceptar el nombre del usuario, un button y un elemento div . Asigna identificadores a input, a button y a div.

    
    <body>
        <h1>Hello, world!</h1>
        <p>What's your name?</p>
        <input id="nameInput" type="text" />
        <button id="helloButton">Say "Hello"</button>
        <div id="greetingOutput"></div>
    </body>
    
    
  2. Ejecuta la aplicación.

    Nuestra aplicación HelloWorld, con el nuevo contenido

    Puedes escribir en el elemento input pero, ahora mismo, si haces clic en el button no se realiza ninguna acción. Algunos objetos, como button, pueden enviar mensajes cuando se producen ciertos eventos. Estos mensajes de eventos te dan la oportunidad de realizar alguna acción como respuesta al evento. El código para responder al evento lo pones en un método de controlador de eventos.

    En los siguientes pasos, crearemos un controlador de eventos para el button que mostrará un saludo personalizado. Agregamos el código de nuestro controlador de eventos a nuestro archivo default.js.

Paso 4: Crear un controlador de eventos

Cuando creamos nuestro proyecto, Visual Studio creó un archivo /js/default.js. Este archivo contiene código para controlar el ciclo de vida de tu aplicación, un concepto que explicaremos en la Parte 2: Administrar el ciclo de vida y el estado de la aplicación. También es donde escribes código adicional que proporciona interactividad para tu archivo default.html.

Abre el archivo default.js.

Antes de empezar a agregar código a nuestro propio código, echemos un vistazo a las primeras y últimas líneas de código del archivo:



(function () {
    "use strict";

     // Omitted code 

 })(); 

Te estarás preguntando qué sucede en ellas. Estas líneas de código envuelven al resto de código de default.js en una función anónima de ejecución automática.

Ahora que ya sabes lo que hace, probablemente te estarás preguntando por qué encapsulamos nuestro código en una función anónima de ejecución automática. Porque hace que sea más sencillo evitar conflictos de nomenclatura o situaciones donde accidentalmente modifiques un valor que no tenías intención de modificar. Además, mantiene los identificadores innecesarios lejos del espacio de nombres global, lo que contribuye a mejorar el rendimiento. Parece una cosa un poco rara, pero es un procedimiento recomendado de programación.

La siguiente línea de código activa el modo strict para tu código JavaScript. El modo strict proporciona una comprobación adicional de errores para el código. Por ejemplo, impide que uses variables declaradas implícitamente o que asignes un valor a una propiedad de solo lectura.

Echa un vistazo al resto del código en default.js. Controla los eventos activated y checkpoint de tu aplicación. Más adelante, veremos con más detalle esos eventos. Por ahora, solo debes saber que el evento activated se desencadena cuando se inicia tu aplicación.

Vamos a definir un controlador de eventos para tu button. Nuestro nuevo controlador de eventos obtiene el nombre de usuario del control nameInput input y lo usa para mostrar un saludo al elemento greetingOutput div que creaste en la sección anterior.

Usar eventos que funcionan con entradas táctiles, de mouse y de pluma

Con Windows 8.1, no debes preocuparte por las diferencias entre táctil, mouse y otras formas de entrada de puntero. Puedes usar los eventos que conoces, como click, y funcionarán para todos los tipos de entrada.

Sugerencia   Tu aplicación también puede usar los nuevos eventos MSPointer* y MSGesture*, que funcionan para una entrada táctil, de mouse y de pluma, y que pueden proporcionar información adicional sobre el dispositivo que activó el evento. Para obtener más información, consulta Responder a la interacción del usuario y Gestos, manipulaciones e interacciones.

Continuemos y vamos a crear el controlador de eventos.

Hh986964.wedge(es-es,WIN.10).gifPara crear el controlador de eventos

  1. En default.js, después del controlador de eventos app.oncheckpoint y antes de la llamada a app.start, crea una función de controlador de eventos click llamada buttonClickHandler que acepte un único parámetro llamado eventInfo.
    
        function buttonClickHandler(eventInfo) {
     
        }
    
    
  2. Dentro de nuestro controlador de eventos, recupera el nombre de usuario del control nameInput input y úsalo para crear un saludo. Usa greetingOutput div para mostrar el resultado.
    
        function buttonClickHandler(eventInfo) {
            var userName = document.getElementById("nameInput").value;
            var greetingString = "Hello, " + userName + "!";
            document.getElementById("greetingOutput").innerText = greetingString; 
        }
    
    

Hemos agregado nuestro controlador de eventos a default.js. Ahora debemos registrarlo.

Paso 5: Registrar el controlador de eventos cuando se inicia la aplicación

Lo único que necesitas hacer ahora es registrar el controlador de eventos con el botón. La forma recomendada de registrar un controlador de eventos es llamar a addEventListener desde nuestro código. Un buen lugar para registrar el controlador de eventos es cuando se activa nuestra aplicación. Afortunadamente, Visual Studio generó algo de código en nuestro archivo default.js que controla la activación de nuestra aplicación: el controlador de eventos app.onactivated. Echemos un vistazo a este código.



    var app = WinJS.Application;
    var activation = Windows.ApplicationModel.Activation;

    app.onactivated = function (args) {
        if (args.detail.kind === activation.ActivationKind.launch) {
            if (args.detail.previousExecutionState !== activation.ApplicationExecutionState.terminated) {
                // TODO: This application has been newly launched. Initialize
                // your application here.
            } else {
                // TODO: This application has been reactivated from suspension.
                // Restore application state here.
            }
            args.setPromise(WinJS.UI.processAll());
        }
    };

Dentro del controlador onactivated, el código comprueba qué tipo de activación se ha producido. Existen diferentes tipos de activación. Por ejemplo, tu aplicación está activada cuando el usuario inicia tu aplicación y cuando el usuario quiere abrir un archivo que está asociado con tu aplicación. (Si quieres más información, consulta el tema sobre el ciclo de vida de la aplicación).

A nosotros nos interesa la activación launch. Una aplicación se inicia siempre que no está en ejecución y, a continuación, un usuario la activa.



    app.onactivated = function (args) {
        if (args.detail.kind === activation.ActivationKind.launch) {


Si la activación es una activación de inicio, el código comprueba cómo se apagó la aplicación la última vez que se ejecutó.




            if (args.detail.previousExecutionState !== activation.ApplicationExecutionState.terminated) {
                // TODO: This application has been newly launched. Initialize
                // your application here.
            } else {
                // TODO: This application has been reactivated from suspension.
                // Restore application state here.
            }


A continuación, llama a WinJS.UI.processAll.




            args.setPromise(WinJS.UI.processAll());           
        }
    };

Llama a WinJS.UI.processAll, con independencia de si se apagó la aplicación en el pasado o de si es la primera vez que se inicia. WinJS.UI.processAll está incluido en una llamada al método setPromise, que se asegura de que la pantalla de presentación no desaparezca hasta que la página de la aplicación no esté lista.

Sugerencia  La función WinJS.UI.processAll analiza tu archivo default.html en busca de controles de WinJS y los inicializa. Hasta ahora, no hemos agregado ninguno de estos controles, pero te recomendamos dejar este código en caso de que quieras agregarlos más adelante. Para obtener más información sobre los controles de WinJS, consulta Inicio rápido: Agregar estilos y controles de WinJS.

Un buen punto donde registrar controladores de eventos para controles que no sean de WinJS es justo después de la llamada a WinJS.UI.processAll.

Hh986964.wedge(es-es,WIN.10).gifPara registrar tu controlador de eventos

  • En el controlador de eventos onactivated en default.js, recupera helloButton y usa addEventListener para registrar nuestro controlador de eventos para el evento click. Agrega este código después de la llamada a WinJS.UI.processAll.

    
        app.onactivated = function (args) {
            if (args.detail.kind === activation.ActivationKind.launch) {
                if (args.detail.previousExecutionState !== activation.ApplicationExecutionState.terminated) {
                    // TODO: This application has been newly launched. Initialize
                    // your application here.
                } else {
                    // TODO: This application has been reactivated from suspension.
                    // Restore application state here.
                }
                args.setPromise(WinJS.UI.processAll());
    
                // Retrieve the button and register our event handler. 
                var helloButton = document.getElementById("helloButton");
                helloButton.addEventListener("click", buttonClickHandler, false);
    
            }
        };
    
    

He aquí el código completo para nuestro archivo default.js actualizado:


// For an introduction to the Blank template, see the following documentation:
// http://go.microsoft.com/fwlink/p/?linkid=232509
(function () {
    "use strict";

    var app = WinJS.Application;
    var activation = Windows.ApplicationModel.Activation;

    app.onactivated = function (args) {
        if (args.detail.kind === activation.ActivationKind.launch) {
            if (args.detail.previousExecutionState !== activation.ApplicationExecutionState.terminated) {
                // TODO: This application has been newly launched. Initialize
                // your application here.
            } else {
                // TODO: This application has been reactivated from suspension.
                // Restore application state here.
            }
            args.setPromise(WinJS.UI.processAll());

            // Retrieve the button and register our event handler. 
            var helloButton = document.getElementById("helloButton");
            helloButton.addEventListener("click", buttonClickHandler, false);
        }
    };

    app.oncheckpoint = function (args) {
        // TODO: This application is about to be suspended. Save any state
        // that needs to persist across suspensions here. You might use the
        // WinJS.Application.sessionState object, which is automatically
        // saved and restored across suspension. If you need to complete an
        // asynchronous operation before your application is suspended, call
        // args.setPromise().
    };

    function buttonClickHandler(eventInfo) {

        var userName = document.getElementById("nameInput").value;
        var greetingString = "Hello, " + userName + "!";
        document.getElementById("greetingOutput").innerText = greetingString;
    }

    app.start();
})();

Ejecuta la aplicación. Cuando escribas tu nombre en el cuadro de texto y hagas clic en el botón, la aplicación muestra un saludo personalizado.

Un saludo personalizado de nuestra aplicación HelloWorld

Nota  Si te preguntas por qué usamos addEventListener para registrar nuestro evento en código en lugar de configurar el evento onclick en nuestro HTML, consulta Codificar aplicaciones básicas, donde encontrarás una explicación más detallada.

Paso 6: Dar estilo a tu página de inicio

Es fácil personalizar la apariencia de tu aplicación. Las aplicaciones de la Tienda Windows te permiten usar hojas de estilo en cascada, nivel 3 (CSS3), de forma muy parecida a lo que harías con un sitio web.

El default.html que creó Visual Studio contiene una referencia a la hoja de estilos de WinJS:



    <!-- WinJS references -->
    <link href="//Microsoft.WinJS.2.0/css/ui-dark.css" rel="stylesheet" />


¿Qué hace esta hoja de estilo? ¡Un montón de cosas! Proporciona las siguientes ventajas:

  • Un conjunto de estilos que automáticamente aportan a tu aplicación el aspecto de Windows 8. Con solo incluir la hoja de estilos, los controles tendrán un aspecto excelente y también funcionarán a la perfección con pantallas táctiles.
  • Compatibilidad automática para modos de alto contraste. Estos estilos se diseñaron teniendo en cuenta el alto contraste, para que cuando se ejecute nuestra aplicación en un dispositivo en modo de alto contraste, se visualice correctamente.
  • Compatibilidad automática en otros idiomas. Las hojas de estilos de WinJS seleccionan automáticamente la fuente correcta para cada idioma compatible con Windows 8. Incluso puedes usar varios idiomas en la misma aplicación y todos ellos se mostrarán correctamente.
  • Compatibilidad automática con otros sentidos de la lectura. Ajusta de forma automática los controles, diseños y estilos de HTML y de WinJS para los idiomas que se leen de derecha a izquierda.

De manera predeterminada, cada página HTML del proyecto contiene una referencia a la hoja de estilos oscura. WinJS también proporciona una hoja de estilos clara. Vamos a probarlo y ver cómo es.

Hh986964.wedge(es-es,WIN.10).gifPara cambiar a la hoja de estilos clara

  1. En tu archivo default.html, reemplaza la referencia a la hoja de estilos oscura:
    
    
        <!-- WinJS references -->
        <link href="//Microsoft.WinJS.2.0/css/ui-dark.css" rel="stylesheet" />
    
    
    

    Con esta:

    
    
        <!-- WinJS references -->
        <link href="//Microsoft.WinJS.2.0/css/ui-light.css" rel="stylesheet" />
    
    
    
  2. Ejecuta tu aplicación. Ahora usa la hoja de estilos clara.

    Nuestra aplicación HelloWorld con la hoja de estilos clara

¿Qué hoja de estilos deberías usar? La que más te guste. Te recomendamos que uses la hoja de estilos oscura para las aplicaciones que muestran principalmente imágenes o vídeo, y la hoja de estilos clara para las aplicaciones que contienen mucho texto. (Si vas a usar un esquema de colores personalizado, usa la hoja de estilos que mejor se ajuste al aspecto de la aplicación.)

Crear tus propios estilos

Si quieres personalizar el aspecto de la aplicación, no tienes que desechar los estilos de WinJS y empezar desde cero. Puedes hacer cambios incrementales de manera sencilla si invalidas los estilos que quieres cambiar.

De hecho, es preferible invalidar los estilos de WinJS a crear los tuyos propios. Cuando la aplicación se ejecuta en modo de alto contraste, cualquier cambio en los colores de los estilos predeterminados se reemplazará automáticamente por un esquema de colores que admita alto contraste.

Puedes invalidar cualquier estilo de la hoja de estilos predeterminada si creas tu propia hoja de estilos y la incluyes más adelante en la hoja de estilos de WinJS: La plantilla Blank App lo hace por ti. Crea una hoja de estilos llamada default.css que puedes usar para crear tus propios estilos.



    <!-- WinJS references -->
    <link href="//Microsoft.WinJS.2.0/css/ui-light.css" rel="stylesheet" /> 
    <script src="//Microsoft.WinJS.2.0/js/base.js"></script>
    <script src="//Microsoft.WinJS.2.0/js/ui.js"></script>

    <!-- HelloWorld references -->
    <link href="/css/default.css" rel="stylesheet" />
    <script src="/js/default.js"></script>


Vamos a crear algunos estilos propios.

  1. Primero agregaremos algunos elementos y clases div a nuestro HTML para que sea más fácil crear un estilo.
    1. En Visual Studio, abre el archivo default.html.
    2. Establece el atributo class del encabezado de tu página en "headerClass". Crea un elemento div y úsalo para que incluya el contenido principal de tu página. Asígnale la opción de configuración class con el valor "mainContent".
      
      
      <body>
          <h1 class="headerClass">Hello, world!</h1>
          <div class="mainContent">
              <p>What's your name?</p>
              <input id="nameInput" type="text" />
              <button id="helloButton">Say "Hello"</button>
              <div id="greetingOutput"></div>
          </div>
      </body>
      
      
      
  2. Ahora ya podemos definir nuestro estilo. Abre el archivo default.css.

    En este momento está prácticamente en blanco:

    
    body {
    }
    
    
    
  3. De acuerdo con el tema sobre cómo diseñar una página de la aplicación, el título tiene un margen superior de 45 píxeles y un margen izquierdo de 120 píxeles. El área de contenido también tiene un margen izquierdo de 120 píxeles, un margen superior de 31 píxeles, y un margen inferior de 50 píxeles.

    Define las clases headerClass y mainContent y establece sus márgenes para que sigan estas directrices. Crea además un estilo para greetingOutput div con un alto de 20 píxeles y un margen inferior de 40 píxeles.

    
    
    body {
    }
    
    .headerClass {
        margin-top: 45px;
        margin-left: 120px; 
    }
    
    .mainContent {
        margin-top: 31px;
        margin-left: 120px;
        margin-bottom: 50px; 
    }
    
    #greetingOutput {
        height: 20px; 
        margin-bottom: 40px;
    }
    
    
  4. Ejecuta la aplicación. Observa el cambio en el espaciado.

    La aplicación Hello World! con márgenes

Las aplicaciones de la Tienda Windows son compatibles con CSS3, así que puedes aplicar un montón de personalizaciones a tu aplicación. (Si quieres obtener más información sobre cómo aplicar estilos a tu aplicación, consulta Inicio rápido: aplicar estilos a los controles).

Paso 7: Agregar un control de la biblioteca de Windows para JavaScript

Además de los controles HTML estándar, tus aplicaciones de la Tienda Windows con JavaScript pueden utilizar cualquiera de los controles nuevos de WinJS, como los controles WinJS.UI.DatePicker, WinJS.UI.FlipView, WinjS.UI.ListView y WinJS.UI.Rating.

A diferencia de los controles HTML, los controles de WinJS no tienen elementos de marcado dedicados: por ejemplo, no puedes agregar un elemento <rating /> para crear un control Rating. Para agregar un control de WinJS, crea un elemento div y usa el atributo data-win-control para especificar el tipo de control que quieras. Para agregar un control Rating, establece el atributo en "WinJS.UI.Rating".

Vamos a agregar un control Rating a nuestra aplicación.

  1. En el archivo default.html, agrega un control label y Rating después de greetingOutput div.

    
    
    <body>
        <h1 class="headerClass">Hello, world!</h1>
        <div class="mainContent">
            <p>What's your name?</p>
            <input id="nameInput" type="text" />
            <button id="helloButton">Say "Hello"</button>
            <div id="greetingOutput"></div>
            <label for="ratingControlDiv">
                Rate this greeting: 
            </label>
            <div id="ratingControlDiv" data-win-control="WinJS.UI.Rating">
            </div>
        </div>
    </body>
    
    
    

    Para que se cargue Rating, la página debe llamar a WinJS.UI.processAll. Puesto que nuestra aplicación está usando una de las plantillas de Visual Studio, nuestro archivo default.js ya incluye una llamada a WinJS.UI.processAll, como se describió en el Paso 5, de modo que no es necesario agregar más código.

  2. Ejecuta la aplicación. Observa el nuevo control Rating.

    La aplicación Hello World! con un control de la biblioteca de Windows para JavaScript

Ahora mismo, al hacer clic en el control Rating se cambia la clasificación, pero no ocurre nada más. Vamos a usar un controlador de eventos para que cuando el usuario cambie la clasificación ocurra algo.

Paso 8: Registrar un controlador de eventos para un control de la biblioteca de Windows para JavaScript

Registrar un controlador de eventos para un control de WinJS es algo distinto a registrar un controlador de eventos para un control HTML estándar. Antes hemos mencionado que el controlador de eventos onactivated llama al método WinJS.UI.processAll para inicializar WinJS en el marcado. WinJS.UI.processAll está incluido en una llamada al método setPromise.



            args.setPromise(WinJS.UI.processAll());           


Si Rating fuese un control HTML estándar, podrías agregar el controlador de eventos después de esta llamada a WinJS.UI.processAll. Pero resulta algo más complicado cuando se trata de un control de WinJS, como nuestro control Rating. Como WinJS.UI.processAll crea el control Rating, no podemos agregar el controlador de eventos a Rating hasta que WinJS.UI.processAll haya finalizado su procesamiento.

Si WinJS.UI.processAll fuese un método típico, podríamos registrar el controlador de eventos Rating justo después de llamarlo. Pero como el método WinJS.UI.processAll es asincrónico, cualquier código que siga se pueda ejecutar antes de que WinJS.UI.processAll se complete. Entonces, ¿qué debemos hacer? Usamos un objeto Promise para recibir una notificación cuando se complete WinJS.UI.processAll.

Al igual que todos los métodos asincrónicos de WinJS, WinJS.UI.processAll devuelve un objeto Promise. Un objeto Promise es la "promesa" de que algo ocurrirá en el futuro; cuando tal cosa ocurra, se habrá completado Promise.

Los objetos Promise tienen un método then que toma una función "completed" como parámetro. El objeto Promise llama a esta función cuando se completa.

Si agregas el código a una función "completed" y lo pasas al método then del objeto Promise, puedes estar seguro de que el código se ejecutará después de que se complete WinJS.UI.processAll.

  1. Vamos a hacer que se muestre el valor de clasificación cuando el usuario seleccione una clasificación. En el archivo default.html, crea un elemento div para mostrar el valor de clasificación y asígnale id "ratingOutput".
    
    
    <body>
        <h1 class="headerClass">Hello, world!</h1>
        <div class="mainContent">
            <p>What's your name?</p>
            <input id="nameInput" type="text" />
            <button id="helloButton">Say "Hello"</button>
            <div id="greetingOutput"></div>
            <label for="ratingControlDiv">
                Rate this greeting: 
            </label>
            <div id="ratingControlDiv" data-win-control="WinJS.UI.Rating">
            </div>     
            <div id="ratingOutput"></div>
        </div>
    </body>
    
    
    
  2. En nuestro archivo default.js, crea un controlador de eventos para el evento change denominado ratingChanged del control Rating. El parámetro eventInfo contiene una propiedad detail.tentativeRating que proporciona la nueva clasificación de usuario. Recupera este valor y muéstralo en el div de salida.

    
    
        function ratingChanged(eventInfo) {
    
            var ratingOutput = document.getElementById("ratingOutput");
            ratingOutput.innerText = eventInfo.detail.tentativeRating; 
        }
    
    
    
  3. Actualiza el código de nuestro controlador de eventos onactivated que llama a WinJS.UI.processAll; para ello, agrega una llamada al método then y pasa una función completed. En la función completed, recupera el elemento ratingControlDiv que hospeda el control Rating. Después usa la propiedad winControl para recuperar el control Rating real. (Este ejemplo define la función completed en línea.)

    
                args.setPromise(WinJS.UI.processAll().then(function completed() {
    
                    // Retrieve the div that hosts the Rating control.
                    var ratingControlDiv = document.getElementById("ratingControlDiv");
    
                    // Retrieve the actual Rating control.
                    var ratingControl = ratingControlDiv.winControl;
    
                    // Register the event handler. 
                    ratingControl.addEventListener("change", ratingChanged, false);
    
                }));
    
    
  4. Si bien es correcto registrar los controladores de eventos para los controles HTML después de la llamada a WinJS.UI.processAll, también es correcto registrarlos dentro de la función completed. Para hacerlo más sencillo, sigamos adelante y movamos todos nuestros registros de controladores de eventos al controlador de eventos then.

    Este es nuestro controlador de eventos onactivated actualizado:

    
        app.onactivated = function (args) {
            if (args.detail.kind === activation.ActivationKind.launch) {
                if (args.detail.previousExecutionState !== activation.ApplicationExecutionState.terminated) {
                    // TODO: This application has been newly launched. Initialize
                    // your application here.
                } else {
                    // TODO: This application has been reactivated from suspension.
                    // Restore application state here.
                }
                args.setPromise(WinJS.UI.processAll().then(function completed() {
    
                    // Retrieve the div that hosts the Rating control.
                    var ratingControlDiv = document.getElementById("ratingControlDiv");
    
                    // Retrieve the actual Rating control.
                    var ratingControl = ratingControlDiv.winControl;
    
                    // Register the event handler. 
                    ratingControl.addEventListener("change", ratingChanged, false);
    
                    // Retrieve the button and register our event handler. 
                    var helloButton = document.getElementById("helloButton");
                    helloButton.addEventListener("click", buttonClickHandler, false);
    
                }));
    
            }
        };
    
    
  5. Ejecuta la aplicación. Cuando selecciones un valor de clasificación, aparecerá el valor numérico debajo del control Rating.

Nota  En esta sección y en la última se ha mencionado lo que necesitas saber para empezar a usar controles de WinJS. Para obtener más información y ver una lista de controles, consulta Inicio rápido: Agregar controles y estilos de WinJS.

Resumen

Enhorabuena, ¡ya has acabado con el segundo tutorial! Has aprendido a agregar contenido a una aplicación de la Tienda Windows. También has aprendido a agregar interactividad y a aplicar estilo a la aplicación.

Descargar la muestra

¿Te has quedado atascado o quieres revisar tu trabajo? En este caso, descarga las muestras de la introducción a JavaScript.

Pasos siguientes

En la siguiente parte de esta serie de tutoriales, aprenderás más cosas sobre cómo funciona el ciclo de vida de la aplicación y a guardar el estado de tu aplicación. Ve a la Parte 2: Administrar el ciclo de vida y el estado de la aplicación.

Temas relacionados

Introducción a JavaScript: código completo de la serie de tutoriales
Programming Windows 8 Apps with HTML, CSS, and JavaScript (libro electrónico)

 

 

Mostrar:
© 2014 Microsoft