Inicio rápido: agregar controladores de eventos y controles HTML (HTML)

  • Artículo

[ 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 ]

Todas las aplicaciones necesitan controles, como botones, casillas y listas desplegables. Las aplicaciones de Windows en tiempo de ejecución que usan JavaScript pueden usar dos tipos de controles: controles HTML intrínsecos y controles de la Biblioteca de Windows para JavaScript. Los controles HTML intrínsecos son aquellos controles, como botones y casillas, que forman parte del estándar HTML.

Ahora vamos a centrarnos en cómo crear y usar los controles HTML. En el siguiente tema, Inicio rápido: Agregar controles y estilos de WinJS, describimos cómo crear y usar controles de WinJS.

(Solo Windows) Consulta esta característica en acción como parte de nuestra serie Características de aplicaciones, de principio a fin: Interacción del usuario: entrada táctil... y mucho más y Interfaz de usuario de aplicaciones de la Tienda Windows, de principio a fin

Requisitos previos

¿Qué es un control?

En muchos modelos de programación de aplicaciones, necesitas un control para mostrar contenido o interaccionar con él. Como la mayoría de los elementos HTML pueden mostrar contenido y responder a varios eventos, la distinción entre un control y un elemento no queda siempre clara en las aplicaciones de Windows en tiempo de ejecución con JavaScript. Nos referimos a los elementos y objetos cuyo propósito principal es proporcionar interactividad en forma de controles. Para ver una lista de elementos y objetos que pertenecen a esta categoría, consulta Controles según su función.

Agregar un control HTML

Puedes usar cualquier control HTML en tu aplicación de Windows en tiempo de ejecución con JavaScript.

Hh465402.wedge(es-es,WIN.10).gif Para agregar un control HTML

  • Para agregar un control HTML solo tienes que agregar el código HTML del control a la página, como en una página web típica. Este ejemplo crea un control button:

    <button id="button1">An HTML Button</button>

    Suele ser recomendable asignar un identificador o nombre de clase al control, para poder recuperarlo y manipularlo fácilmente. Más adelante, cuando te enseñemos a adjuntar eventos, usarás el id. del botón para localizarlo.

El código HTML de un control no es siempre tan simple como el de un botón. Por ejemplo, para crear un control slider, usa el elemento de entrada input:

<input type="range" />

Para ver una lista de los controles HTML disponibles y el marcado que se usa para crearlos, consulta la Lista de controles.

Controlar eventos

Todos los controles proporcionan eventos que te permiten responder a acciones del usuario. Por ejemplo, el control de botón proporciona un evento click que se genera cuando un usuario hace clic en el botón. Creas una función, llamada un controlador de eventos, para controlar el evento y después lo registras con el control.

Hay dos formas de registrar un controlador de eventos. Una manera es agregar un controlador de eventos en tu HTML definiendo el atributo de evento del control con el nombre de una función de controlador de eventos JavaScript o una instrucción JavaScript. Para obtener instrucciones sobre este enfoque, consulta Cómo establecer controladores de eventos mediante declaración.

La otra forma es agregar un controlador de eventos mediante programación.

Hh465402.wedge(es-es,WIN.10).gifPara registrar un controlador de eventos mediante programación

  1. Crea el control y asígnale un identificador. En este ejemplo, creas un botón y le asignas el identificador "button1".

    <button id="button1">An HTML button</button>

  2. Solo para este ejemplo, crea un elemento de párrafo y asígnale el identificador "button1Output". Lo usarás para mostrar información sobre el evento click del botón.

    <p id="button1Output"></p>

  3. En el código JavaScript, define un controlador de eventos. La mayoría de los controladores de eventos toman un único argumento, un objeto Event que contiene información acerca del evento. Otros eventos probablemente devuelvan otros tipos de objetos de información de evento que proporcionan información específica para ese evento.

    El evento click proporciona un objeto MouseEvent que contiene información acerca del evento, como qué botón del mouse se presionó y qué objeto activó el evento. En este ejemplo se crea un controlador de eventos click que usa el objeto MouseEvent para obtener las coordenadas x- e y- del punto en el que el usuario hizo clic.

    (El evento click también responde a funcionalidad táctil y de teclado. Los ejemplos de este tema asumen que el usuario están haciendo clic con un mouse. Para obtener más información acerca de la interacción con diferentes dispositivos y funcionalidad táctil, consulta Responder a la interacción del usuario).

    function button1Click(mouseEvent) {
    var button1Output = document.getElementById("button1Output");
    button1Output.innerText =
    mouseEvent.type
    + ": (" + mouseEvent.clientX + "," + mouseEvent.clientY + ")";

}

  4. Ahora tienes que adjuntar el evento a tu control. Para hacerlo, recupéralo y llama a addEventListener. La cuestión es, ¿cuándo deberías recuperar el control? Lo podrías agregar en cualquier punto del código JavaScript, pero existe el riesgo de que se llame al control antes de que exista.

    • Si vas a agregar el control a la página de inicio de la aplicación (que se define mediante default.html y default.js) usa la función WinJS.UI.processAll para registrar los controladores de eventos. Cada plantilla de Microsoft Visual Studio crea un archivo default.js que llama a WinJS.UI.processAll en el controlador de eventos activated. El método WinJS.UI.processAll, al ser asincrónico, devuelve un objeto Promise. Para adjuntar los controladores de eventos, debes proporcionar una función then o done para el objeto Promise devuelto por WinJS.UI.processAll, y usar esa función para adjuntar los controladores de eventos. Para más información sobre las promesas, consulta Programación asincrónica en JavaScript.

      En este ejemplo se usa WinJS.UI.processAll para adjuntar el controlador de eventos del botón.

      (function () {
    "use strict";

    var app = WinJS.Application;
    var activation = Windows.ApplicationModel.Activation;
    WinJS.strictProcessing();

    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().done(function () {
                var button1 = document.getElementById("button1");
                button1.addEventListener("click", button1Click, 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().
    };

    // The click event handler for button1
    function button1Click(mouseEvent) {
        var button1Output = document.getElementById("button1Output");
        button1Output.innerText =
            mouseEvent.type
            + ": (" + mouseEvent.clientX + "," + mouseEvent.clientY + ")";

    }

    app.start();
})();

      Para obtener más información sobre el método WinJS.UI.processAll, consulta Inicio rápido: Agregar controles y estilos de WinJS.

    • Si vas a agregar tu control al control de una Página, usa la función ready del control Página para adjuntar los controladores de eventos (y usar querySelector en lugar de document.getElementById, como se muestra a continuación).

      El control Page de WinJS proporciona una forma de dividir el contenido en unidades modulares reutilizables. Tu aplicación puede contener automáticamente uno o varios controles Page, según la plantilla de Visual Studio que hayas usado para crearla.

      Cuando se crea un control Page, se incluye automáticamente una función ready que se puede usar para agregar un controlador de eventos para el botón. Este ejemplo muestra el código JavaScript para un control Page que agrega un controlador de eventos click a un botón.

      
// home.js
(function () {
    "use strict";

    WinJS.UI.Pages.define("/pages/home/home.html", {
        ready: function (element, options) { // Fires when the user navigates to home.html
            var button1 = element.querySelector("#button1");
            button1.addEventListener("click", this.button1Click, false);
        },

        button1Click: function(mouseEvent) {
            var button1Output = document.getElementById("button1Output");
            button1Output.innerText =
            mouseEvent.type
            + ": (" + mouseEvent.clientX + "," + mouseEvent.clientY + ")";
        }
    });
})();

      En el ejemplo anterior, this hace referencia al objeto de página que ha creado la llamada WinJS.UI.Pages.define. Además, button1Click: function(mouseEvent) {...} crea una propiedad (que es una función anónima) para dicho objeto de página. Por lo tanto, this.button1Click (en button1.addEventListener("click", this.button1Click, false)) efectivamente hace referencia a la función button1Click:

      
button1Click: function(mouseEvent) {
    var button1Output = document.getElementById("button1Output");
    button1Output.innerText =
    mouseEvent.type
    + ": (" + mouseEvent.clientX + "," + mouseEvent.clientY + ")";
}

      Para obtener más información acerca de los controles Page, consulta el tema sobre cómo agregar controles Page.

    • Si vas a agregar el control a tus propios archivos HTML y JavaScript personalizados, controla el evento DOMContentLoaded y úsalo para llamar a WinJS.UI.processAll. Puedes registrar el evento DOMContentLoaded en cualquier lugar del código porque el objeto document ya existe cuando se ejecuta tu código. Proporciona una función then o done para el objeto Promise devuelto por WinJS.UI.processAll y usa esa función para adjuntar tus controladores de eventos.

Cuando ejecutas la aplicación y haces clic en el botón, muestra las coordinadas del punto donde se hizo clic.

Observaciones

No uses URI JavaScript

No uses URI JavaScript en el controlador de eventos porque la aplicación no los ejecutará. Por ejemplo, si intentas esto, no pasa nada cuando haces clic en el botón:


<!-- Incorrect code. Do not use this in your solution. -->
<button id="button1" onclick="javascript: 2 + 2;">An HTML Button</button>

Esta restricción se aplica al código en el contexto local de la aplicación (es decir, el código incluido en el paquete de aplicación) pero no al código en las páginas web externas a las que accede tu aplicación.

Usar formularios

En un sitio web HTML tradicional, los controles y otros elementos de entrada se suelen incluir en un elemento form. Los elementos form se usan para pasar datos al servidor. Como la mayoría de la programación para una aplicación típica se basa en el cliente, no sueles necesitar un elemento form.

Usar capas transparentes

Es un procedimiento habitual usar una capa transparente de pantalla completa, como un elemento div vacío, para detectar ciertas interacciones del usuario o para mostrar animaciones. Sin embargo, si se cubre un control HTML con una capa transparente, puede reducir su capacidad de respuesta a la interacción del usuario. Para evitar que pase esto con los controles HTML, no coloques una capa transparente sobre ellos.

Resumen y siguientes pasos

Has aprendido a crear controles HTML y a adjuntarlos a controladores de eventos.

Ahora aprenderás a usar los nuevos controles de WinJS proporcionados para las aplicaciones de Windows en tiempo de ejecución con JavaScript en Inicio rápido: Agregar controles y estilos de WinJS.

Para aprender más sobre controles específicos, consulta la Lista de controles.

Muestras

Temas relacionados

Codificar aplicaciones básicas

Inicio rápido: Agregar controles y estilos de WinJS

Lista de controles