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

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

La Biblioteca de Windows para JavaScript proporciona un conjunto de controles nuevos para aplicaciones de la Tienda Windows con JavaScript, como los controles WinJS.UI.DatePicker, WinJS.UI.FlipView, WinjS.UI.ListView y WinJS.UI.Rating. También incluye dos hojas de estilos (una con un esquema de color oscuro y otra con uno claro) que proporcionan a la aplicación la apariencia de Windows 8.

Requisitos previos

¿Qué es la biblioteca de Windows para JavaScript?

La biblioteca de Windows para JavaScript es una biblioteca de archivos CSS y JavaScript. Contiene objetos JavaScript, organizados en espacios de nombres, que están diseñados para que el desarrollo de aplicación de la Tienda Windows con JavaScript resulte más sencillo. La biblioteca de Windows para JavaScript incluye objetos que te ayudan a administrar la activación, acceder al almacenamiento y definir tus propias clases y espacios de nombres. También incluye un conjunto de controles:

ControlDescripción

AppBar

Muestra comandos.

DatePicker

Permite al usuario seleccionar una fecha.

FlipView

Muestra una colección de elementos, un elemento a la vez.

Flyout

Muestra un mensaje que requiere la intervención del usuario. (A diferencia de un cuadro de diálogo, un Flyout no crea una ventana distinta).

ListView

Muestra una colección de elementos en una cuadrícula o un diseño de lista.

HtmlControl

Muestra una página HTML.

Menu

Un control flotante de menú para mostrar comandos.

PageControl

Un conjunto de HTML, JavaScript y CSS que describe una página. Puedes navegar a un control PageControl o usarlo como un control personalizado.

Rating

Permite al usuario clasificar un elemento.

SemanticZoom

Permite al usuario usar el zoom entre dos vistas distintas proporcionadas por dos controles secundarios. Un control secundario proporciona la vista alejada y el otro proporciona la vista acercada.

SettingsFlyout

Proporciona al usuario un acceso rápido y contextual a la configuración de la aplicación.

TimePicker

Permite al usuario seleccionar una hora.

ToggleSwitch

Activa o desactiva un elemento.

Tooltip

Muestra información de herramientas que admite contenido enriquecido (como imágenes y texto con formato) para mostrar más información sobre un objeto.

ViewBox

Ajusta a escala un elemento secundario para rellenar el espacio disponible sin cambiar su tamaño. El control reacciona a los cambios de tamaño del contenedor y a los cambios de tamaño del elemento secundario. Por ejemplo, este control responde si el resultado de una consulta de medios es un cambio en la relación de aspecto.

 

(Para obtener una lista completa de controles, consulta la lista de controles.)

La biblioteca de Windows para JavaScript también proporciona características de estilo en forma de clases y estilos CSS que puedes usar o invalidar. (La aplicación de estilos a controles se describe en Inicio rápido: Aplicar estilos a controles.)

Agregar la biblioteca de Windows para JavaScript a tu página

Para usar la biblioteca de Windows para JavaScript, la aplicación debe contener los archivos de la biblioteca de Windows para JavaScript y cada página que use las características de la biblioteca de Windows para JavaScript debe tener las referencias de script y CSS correctas.


    <!-- WinJS style sheets (include one) -->
    <link href="//Microsoft.WinJS.1.0/css/ui-dark.css" rel="stylesheet">
    <link href="//Microsoft.WinJS.1.0/css/ui-light.css" rel="stylesheet">

    <!-- WinJS code -->
    <script src="//Microsoft.WinJS.1.0/js/base.js"></script>
    <script src="//Microsoft.WinJS.1.0/js/ui.js"></script>

Cuando usas Microsoft Visual Studio Express 2012 para Windows 8 para crear una aplicación de la Tienda Windows con JavaScript, incluirá automáticamente los archivos que necesites. En este ejemplo se muestra la página default.html para un proyecto que usa la plantilla Aplicación vacía.


<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>Adding WinJS controls and styles</title>

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

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

Agregar un control de WinJS en el marcado

A diferencia de los controles HTML, los controles de la biblioteca de Windows para JavaScript no tienen elementos de marcado dedicados: por ejemplo, no puedes agregar un elemento <rating /> para crear un control Rating. Para agregar un control de la biblioteca de Windows para JavaScript, 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".

También debes llamar a la función WinJS.UI.processAll en el código de JavaScript. WinJS.UI.processAll analiza el marcado y crea instancias de cualquier control que encuentre de la biblioteca de Windows para JavaScript.

En el siguiente conjunto de ejemplos se muestra cómo agregar un control de la biblioteca de Windows para JavaScript a un proyecto creado con la plantilla Aplicación vacía. Es más fácil seguir si creas un nuevo proyecto Aplicación vacía.

Hh465493.wedge(es-ar,WIN.10).gifPara crear un nuevo proyecto mediante la plantilla Aplicación vacía

  1. Inicia Visual Studio Express 2012 para Windows 8.

  2. En la pestaña Página de inicio, haz clic en Nuevo proyecto. Se abre el cuadro de diálogo Nuevo proyecto.

  3. En el panel Instalado, expande JavaScript y haz clic en el tipo de plantilla Aplicación de la Tienda Windows. Las plantillas de proyecto instaladas para JavaScript se muestran en panel central del cuadro de diálogo.

  4. En el panel central, selecciona la plantilla de proyecto Aplicación vacía.

  5. En el cuadro de texto Nombre, escribe un nombre para el proyecto.

  6. Haz clic en Aceptar para crear el proyecto. Esto puede tardar unos minutos.

Hh465493.wedge(es-ar,WIN.10).gifPara agregar un control de WinJS

  1. Crea un elemento div donde quieras colocar el control. Establece su atributo data-win-control en el nombre completo del control que quieras crear. En este ejemplo, se crea un control Rating en la página de inicio de la aplicación (el archivo default.html).

    
    <!DOCTYPE html>
    <html>
    <head>
        <meta charset="utf-8">
        <title>Adding WinJS controls and styles</title>
    
        <!-- WinJS references -->
        <link href="//Microsoft.WinJS.1.0/css/ui-dark.css" rel="stylesheet">
        <script src="//Microsoft.WinJS.1.0/js/base.js"></script>
        <script src="//Microsoft.WinJS.1.0/js/ui.js"></script>
    
        <!-- AddingWinJSControlsAndStyles references -->
        <link href="/css/default.css" rel="stylesheet">
        <script src="/js/default.js"></script>
    </head>
    <body>
    
        <p>Create a WinJS control in markup</p>
    
        <div id="ratingControlHost" data-win-control="WinJS.UI.Rating">
        </div>
    
    </body>
    </html>
    
    
  2. El código de JavaScript debe llamar a WinJS.UI.processAll para inicializar el control Rating que creaste en el paso anterior. Si estás usando la plantilla Aplicación vacía, el archivo default.js ya incluye una llamada a WinJS.UI.processAll:

    
    (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());
            }
        };
    
        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().
        };
    
        app.start();
    })();
    
    

    Si no vas a usar la plantilla Aplicación vacía o si vas a agregar el control a una página que has creado tú mismo, es posible que necesites agregar una llamada a WinJS.UI.processAll.

    • Si agregaste el control a la página principal de la aplicación (que suele ser el archivo default.html), agrega una llamada a WinJS.UI.processAll en el controlador de eventos onactivated, como se muestra en el ejemplo anterior.
    • Si agregaste el control a un control Page, no necesitas agregar una llamada a WinJS.UI.processAll porque el control Page lo hace automáticamente.
    • Si agregaste el control a otra página distinta de la página principal de la aplicación, controla el evento DOMContentLoaded y usa el controlador para llamar a WinJS.UI.processAll.
      
      function initialize() {
          WinJS.UI.processAll();
      }
      
      document.addEventListener("DOMContentLoaded", initialize(), false);
      
      

    La función WinJS.UI.processAll procesa el documento y activa cualquier control de la biblioteca de Windows para JavaScript que hayas declarado en el marcado.

Cuando ejecutas la aplicación, el control Rating aparece en el lugar donde colocaste el elemento host div.

Un control rating

Establecer las propiedades de un control de WinJS en el marcado

Cuando creas un control HTML, puedes establecer sus propiedades mediante atributos dedicados. Por ejemplo, para establecer las propiedades type, min y max de un control input , puedes establecer los atributos type, miny max en el marcado:


<input type="range" min="0" max="20" />

A diferencia de los controles HTML, los controles de la biblioteca de Windows para JavaScript no tienen etiquetas de atributo o elemento dedicado. Por ejemplo, no podrías crear un control Rating y establecer sus propiedades con este marcado:


<!-- Not valid markup. -->
<rating maxRating="10" averageRating="6" />

En su lugar, usa el atributo data-win-options para establecer una propiedad en el marcado. Toma una cadena que contiene uno o varios pares propiedad/valor:

data-win-options="{propertyName: propertyValue}"

 

En este ejemplo se establece la maxRating de un control Rating en 10.


<div id="ratingControlHost" data-win-control="WinJS.UI.Rating"
    data-win-options="{maxRating: 10}">
</div>

Cuando ejecutas la aplicación, el control Rating tiene este aspecto:

El control Rating muestra un sistema de clasificación de 10 estrellas.

Para establecer más de una propiedad, sepáralas con comas:

data-win-options="property1Name: property1Value, property2Name: property2Value"

 

En el ejemplo siguiente se establecen dos propiedades del control Rating.


<div id="ratingControlHost" data-win-control="WinJS.UI.Rating"
    data-win-options="{maxRating: 10, averageRating: 6}">
</div>

Cuando ejecutas la aplicación, el control Rating tiene ahora este aspecto:

El control Rating muestra una clasificación de 6 de 10 estrellas.

Si el valor de la propiedad es una cadena en sí, inclúyela en un tipo de comillas (' o ") que sean distintas a las usadas para establecer el atributo data-win-options. En este ejemplo se muestra cómo establecer la propiedad current del control TimePicker, que toma una cadena:


<div id="timepicker" data-win-control="WinJS.UI.TimePicker" 
    data-win-options="{current: '10:29 am'}">
</div>

Un control TimePicker muestra la hora en 10:29 A.M.

Para averiguar si una propiedad es compatible con un determinado control de la biblioteca de Windows para JavaScript, consulta su página de referencia.

Recuperar un control que creaste en el marcado

También puedes establecer las propiedades de un control de la biblioteca de Windows para JavaScript mediante programación. Para acceder al control en el código, recupera el elemento host y usa su propiedad winControl para recuperar el control. En los ejemplos anteriores, el elemento host del control Rating es "ratingControlHost".



var control = document.getElementById("ratingControlHost").winControl; 


En algunos casos, es posible que quieras recuperar y manipular el control tan pronto como esté disponible. Asegúrate de que el método WinJS.UI.processAll es asincrónico, para que cualquier código que siga se pueda ejecutar antes de que se complete WinJS.UI.processAll. Por este motivo, no intentes manipular inmediatamente el control porque podría no estar disponible:



WinJS.UI.processAll();

// Don't do this:
var control = document.getElementById("ratingControlHost").winControl; 
control.averageRating = 3; 
			


El WinJS.UI.processAll devuelve un objeto WinJS.Promise que puedes usar para llamar a la función cuando el método WinJS.UI.processAll se complete. En este ejemplo se define la función de acabado que recupera el control y establece su averageRating en 3.



// Do this instead:
WinJS.UI.processAll().then(function () {
    var control = document.getElementById("ratingControlHost").winControl;
    control.averageRating = 3; 
});

En la sección siguiente se describe cómo agregar escuchas de eventos a un control de la biblioteca de Windows para JavaScript.

Administrar eventos para controles de WinJS

Al igual que con los controles HTML, la mejor manera de adjuntar escuchas de eventos para los controles de la biblioteca de Windows para JavaScript es usar la función addEventListener. Sin embargo, el proceso para recuperar un control de la biblioteca de Windows para JavaScript es algo distinto que el de recuperar un control HTML.

Para administrar un evento:

  1. En JavaScript, recupera el elemento host del control y usa su propiedad winControl para recuperar el control.
  2. Llama a la función addEventListener del control y especifica un evento y un controlador de eventos.

En el ejemplo siguiente se muestra cómo administrar el evento change de un control Rating.

Hh465493.wedge(es-ar,WIN.10).gifPara administrar el evento change de un control rating

  1. En el archivo HTML, agrega un párrafo y asígnale el identificador "outputParagraph". Los resultados de la escucha de eventos se obtendrán en este párrafo.
    
            <p>Create a WinJS control in markup</p>
    
            <div id="ratingControlHost" data-win-control="WinJS.UI.Rating"
                data-win-options="{maxRating: 10, averageRating: 6}">
            </div>
     
            <!-- This paragraph will be used to demonstrate event handling. -->
            <p id="outputParagraph"></p>
    
    
  2. En JavaScript, crea una función de controlador de eventos denominada ratingChanged que tome un parámetro. En el ejemplo siguiente se crea un controlador de eventos que muestra las propiedades y los valores incluidos en el objeto de eventos.
    
    
        function ratingChanged(event) {
    
            var outputParagraph = document.getElementById("outputParagraph");
            var output = event.type + ": <ul>";
            var property;
            for (property in event) {
                output += "<li>" + property + ": " + event[property] + "</li>";
            }
    
            outputParagraph.innerHTML = output + "</ul>";
    
        }
    
    
    
  3. Usa la propiedad winControl para recuperar el control de su elemento host y llama a la función addEventListener para agregar el controlador de eventos. En este ejemplo se recupera el control tan pronto como se crea y se agrega el controlador de eventos:
    
        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 () {
                    var control = document.getElementById("ratingControlHost").winControl;
                    control.addEventListener("change", ratingChanged, false); 
                }));
            }
        };
    
    

Cuando ejecutes la aplicación y cambies la clasificación, se creará una lista de valores y propiedades de información del evento.

El resultado del evento change.

Agregar un control de WinJS en el código

En los ejemplos anteriores se mostró cómo crear y manipular un control de la biblioteca de Windows para JavaScript que creaste en el marcado. Sin embargo, también puedes crear un control de la biblioteca de Windows para JavaScript mediante el código de JavaScript.

Hh465493.wedge(es-ar,WIN.10).gifPara crear un control de WinJS en el código

  1. En el marcado, crea un elemento que hospede el control.
    
    <div id="hostElement"></div>
    
    
  2. En el código (preferiblemente en el controlador de eventos DOMContentLoaded), recupera el elemento host.

    
    var hostElement = document.getElementById("hostElement");
    
    
  3. Para crear tu control, llama a su constructor y pasa el elemento host al constructor. Este ejemplo crea un control Rating:
    
    var ratingControl = new WinJS.UI.Rating(hostElement); 
    
    

    Cuando ejecutes el programa, se mostrará el Rating que creaste:

    Un control rating creado en el código

    No es necesario llamar a WinJS.UI.processAll—solo tienes que llamar a WinJS.UI.processAll cuando crees un control de la biblioteca de Windows para JavaScript en el marcado.

Resumen y pasos siguientes

Aprendiste a crear controles de la biblioteca de Windows para JavaScript, configurar sus propiedades y adjuntar controladores de eventos.

En el siguiente tema, Inicio rápido: Aplicar estilos a controles, se describe cómo usar las hojas de estilo en cascada (CSS) y las funcionalidades de aplicación de estilo mejoradas de las aplicaciones de la Tienda Windows con JavaScript. Para obtener más información sobre los controles específicos, consulta los temas sobre la lista de controles y los controles por función.

Muestras

Temas relacionados

Lista de controles
Controles por función
Referencia de API para Windows en tiempo de ejecución y la biblioteca de Windows para JavaScript

 

 

Mostrar:
© 2018 Microsoft