Plantillas de proyecto JavaScript para aplicaciones de la Tienda

Applies to Windows and Windows Phone

En este tema se ofrece información detallada acerca de las plantillas de proyecto JavaScript para aplicaciones de la Tienda de Windows Phone y aplicaciones de la Tienda Windows, incluidos detalles de la implementación relacionados con el modelo de navegación, el modelo de datos y el control del estado de visualización, entre otros.

Para obtener las plantillas, necesitas una versión de Visual Studio que admita el desarrollo para Windows; consulta Conseguir las herramientas.

Para obtener información sobre las plantillas de proyecto para XAML, consulta Plantillas de proyecto C#, VB y C++ para aplicaciones de la Tienda Windows. Para obtener información sobre las plantillas de proyecto para Blend, consulta Crear un proyecto nuevo.

Importante  La información de este tema se actualizó para Windows Phone 8 y Windows 8.1 Update, y para Microsoft Visual Studio 2013 Update 2. Para obtener información acerca de cómo agregar compatibilidad con Windows Phone a una aplicación de la Tienda Windows existente, consulta Plantillas de aplicación universal en este tema y Migrar una aplicación de Windows en tiempo de ejecución a Windows Phone.

Guía básica: ¿Qué relación tiene este tema con los demás? Consulta la Guía básica para usar JavaScript.

Plantillas de aplicación universal

Visual Studio 2013 Update 2 incluye plantillas de proyecto JavaScript que admiten el desarrollo de aplicaciones de la Tienda de Windows Phone y la Tienda Windows utilizando código compartido. Una aplicación universal es una aplicación desarrollada a partir de código compartido que utiliza una plantilla de aplicación universal (al compilar el proyecto, se crean dos paquetes de aplicación distintos). Las plantillas de aplicación universal incluyen:

  • Un proyecto de aplicación de la Tienda de Windows Phone, con el nombre appName.Phone. Cada proyecto tiene un paquete de aplicación independiente para cargar en su respectiva Tienda.
  • Un proyecto de aplicación de la Tienda Windows, con el nombre appName.Windows.
  • Una carpeta appName.Shared para almacenar el código compartido. De forma predeterminada, se comparten todos los archivos JavaScript para el proyecto. Los archivos HTML y CSS también pueden compartirse.

Las plantillas de aplicación universal incluyen:

Para controlar las diferencias de comportamiento entre las plataformas en el código compartido:

  • Prueba si una característica es compatible antes de utilizarla. Por ejemplo, con una UI diferente, puedes comprobar su un elemento DOM específico de la plataforma está presente antes de usarlo.
  • Si la prueba de una característica no funciona correctamente en un escenario en particular, utiliza la propiedad WinJS.Utilities.isPhone adecuadamente para identificar la plataforma apropiada.
  • Algunos controles de UI como Pivot ySettingsFlyout son específicos de la plataforma. Para admitir las diferencias de la interfaz de usuario, utiliza archivos HTML independientes y mueve los archivos independientes al proyecto específico de la plataforma.
  • Cuando hay un archivo JavaScript abierto en la carpeta de recursos compartidos, una lista desplegable del selector de contexto permite cambiar rápidamente la versión deseada de la Biblioteca de Windows para JavaScript. Con esta acción, se obtiene acceso a la característica IntelliSense específica de la versión deseada de la biblioteca.

    Lista desplegable del selector de contexto en un archivo JavaScript compartido

  • Para obtener información acerca de las diferencias de API, consulta el tema relativo a los cambios de la API WinJS para Windows Phone

Sugerencia  Para cambiar el destino de compilación e implementación, como cambiar de Windows Phone Emulator al Simulador, elige Establecer como proyecto de inicio en el menú contextual de uno de los proyectos.

Hh758331.wedge(es-es,WIN.10).gifPara agregar un proyecto de Windows Phone a una solución existente de la Tienda Windows:

  1. En el Explorador de soluciones de Visual Studio, selecciona el proyecto de la Tienda Windows.
  2. En el menú contextual, elige Agregar Windows Phone 8.1.

    Visual Studio agrega el proyecto de Windows Phone y la carpeta para el código compartido a la solución. El nuevo proyecto de Windows Phone siempre es una plantilla de proyecto vacía.

    Sugerencia  De igual forma, si comienzas con un proyecto de Windows Phone, puedes agregar un proyecto de la Tienda Windows a la solución.

  3. Si tu aplicación de la Tienda Windows no está basada en la plantilla vacía, tendrás que investigar si la plantilla vacía es el punto de partida adecuado para el proyecto de Windows Phone o si necesitas crear un proyecto de Windows Phone por separado y migrar los archivos al nuevo proyecto compartido. En el caso de una aplicación basada en la plantilla Hub para aplicaciones de la Tienda Windows, la plantilla Dinámica para Windows Phone es el punto de partida recomendado. Si tu aplicación se basa en las plantillas Cuadrícula o Dividida (Grid o Split), tendrás que realizar un trabajo adicional para migrar la aplicación hasta un proyecto compartido y la plantilla Dinámica podría funcionar, o no, como punto de partida.

    Si deseas ver un ejemplo de aplicación migrada desde la plantilla Hub a la plantilla de aplicación universal Hub/Dinámica, consulta el lector web JSON que usa la plantilla Hub/Dinámica.

    Para obtener información detallada sobre cómo migrar una aplicación a Windows Phone, consulta Migrar una aplicación de Windows en tiempo de ejecución a Windows Phone.

Plantilla de proyecto Hub/Dinámica para aplicaciones universales

Usa la plantilla de proyecto Hub/Dinámica para crear una solución compartida para una aplicación de la Tienda de Windows Phone y agregar una aplicación de la Tienda Windows que muestre el contenido en una vista de movimiento panorámico horizontal y proporcione una variedad de formas para acceder al contenido. Algunas aplicaciones Hub/Dinámicas de ejemplo son las aplicaciones de compras, noticias, deportes y navegación multimedia centralizada.

De manera predeterminada, una aplicación Hub/Dinámica muestra varias secciones en diseño horizontal. Cada sección representa una categoría de contenido, como elementos nuevos, elementos resaltados y categorías de elementos. Si el usuario elige un elemento de una de las vistas de sección, una vista de página completa muestra detalles acerca del elemento. Esta ilustración muestra la sección 4 en Windows Phone Emulator.

Plantilla de aplicación Hub/Dinámica

Para obtener información sobre las directrices sobre la experiencia del usuario para el patrón de navegación con hub, consulta Patrones de navegación.

Archivos de proyecto para la plantilla Hub/Dinámica

La plantilla de aplicación Hub/Dinámica incluye los siguientes archivos:

  • Todos los archivos comunes, como default.html y navigator.js.
  • hub.html, que es una página de contenedor para las secciones individuales, o páginas, de la aplicación (controles HubSection o PivotItem, en función del proyecto).
  • sectionNumberPage.html, que contiene el marcado para una página dinámica individual. Por ejemplo, section1Page.html contiene el marcado para la primera página dinámica o página de sección de Hub. En algunas páginas, los usuarios pueden elegir un elemento para ver información acerca del elemento.
  • Un archivo JavaScript y CSS correspondiente a cada página de la aplicación.
  • section.html, que muestra una categoría de elementos y es específico de una aplicación de la Tienda Windows. Los usuarios pueden elegir un elemento para abrir la vista de página completa de él.
  • item.html, que constituye la vista de página completa de un elemento.
  • phone.css, donde se especifican los estilos CSS de la página de host de contenido y de toda la aplicación en general.
  • hubPhone.css, que especifica los estilos CSS para el control dinámico y las páginas dinámicas. Estos estilos invalidan los estilos configurados en hub.css.
  • Un archivo CSS específico de cada página de la aplicación, como hub.css.

Cómo funciona la plantilla Hub/Dinámica

Las secciones de la plantilla Hub/Dinámica están destinadas a proporcionar ejemplos del contenido en lugar de recomendaciones sobre este. Para ajustarse a los requisitos de contenido de la aplicación, las secciones pueden agregarse y quitarse con facilidad.

En el proyecto de Windows Phone, cada sección es un PivotItem independiente en un control Pivot. En el proyecto de Windows, cada sección es un control HubSectionindependiente.

Las secciones de la plantilla incluyen contenido estático para que sea fácil proporcionar recursos globalizados. El archivo de recursos de muestra proporciona cadenas localizadas para la configuración regional en-us.

Para obtener más información sobre la implementación de la plantilla Hub/Dinámica, consulta:

Para ver un ejemplo que muestre cómo personalizar la plantilla de Hub/Dinámica para agregar datos dinámicos a las secciones de la aplicación, consulta el lector web JSON que usa la plantilla Hub/Dinámica. Para obtener más información sobre el modelo de datos y el procedimiento para personalizarlo para una aplicación de la Tienda, consulta el tema sobre la adición de datos.

  • Applies to Windows

Plantilla de proyecto Hub para aplicaciones de la Tienda Windows

Usa la plantilla de proyecto Hub para crear una aplicación de la Tienda Windows que muestre el contenido en una vista de movimiento panorámico y que proporcione una variedad de formas para acceder al contenido. Algunas aplicaciones Hub de ejemplo son las aplicaciones de compras, noticias, deportes y concentrador multimedia. La plantilla Hub es una versión para una sola plataforma de la plantilla Hub/Dinámica.

De manera predeterminada, una aplicación Hub presenta una página de inicio que muestra varias secciones en diseño horizontal. Cada sección representa contenido, como elementos nuevos, elementos resaltados y categorías de elementos. Si el usuario puntea en el título de una sección interactiva (indicado mediante ">" después del encabezado), la aplicación abre la página de la sección, que enumera los elementos que están asociados con dicha sección. Si el usuario elige un elemento ya sea de la página de inicio o de la página de sección, una vista de página completa muestra detalles acerca del elemento. En esta ilustración se muestra una página de inicio que tiene al menos tres secciones.

Plantilla de proyecto Aplicación de concentrador

Para obtener información sobre las directrices sobre la experiencia del usuario para el patrón de navegación con hub, consulta Patrones de navegación.

Archivos de proyecto para la plantilla Concentrador

La plantilla de aplicación Hub incluye los siguientes archivos:

  • Todos los archivos comunes, como default.html y navigator.js.
  • hub.html, que muestra las secciones y los elementos en la página de inicio. Los usuarios pueden elegir un elemento para abrir información acera de él, o puede elegir una etiqueta de sección para abrir información acerca de la sección.
  • item.html, que constituye la vista de página completa de un elemento.
  • section.html, que muestra una categoría de elementos y es específico de una aplicación de la Tienda Windows. Los usuarios pueden elegir un elemento para abrir la vista de página completa de él.
  • Un archivo JavaScript y CSS correspondiente a cada página de la aplicación.

Cómo funciona la plantilla concentrador

Las secciones de la plantilla Hub o concentrador están destinadas a proporcionar ejemplos del contenido en lugar de recomendaciones sobre el tipo de contenido que se ha de incluir. Para ajustarse a los requisitos de contenido de la aplicación, las secciones pueden agregarse y quitarse con facilidad.

Las secciones de la plantilla incluyen contenido estático para que sea fácil proporcionar recursos globalizados. El archivo de recursos de muestra proporciona cadenas localizadas para la configuración regional en-us.

Para obtener más información sobre la implementación de la plantilla Concentrador, consulta:

Para ver un ejemplo que muestre cómo personalizar la plantilla Hub para agregar datos dinámicos a las secciones de concentrador, consulta Lector web JSON que usa la plantilla Hub. Para obtener más información sobre el modelo de datos y el procedimiento para personalizarlo para la plantilla Hub, consulta el tema sobre la adición de datos.

  • Applies to Windows Phone

Plantilla de proyecto dinámica para aplicaciones de Windows Phone 8.1

La plantilla Dinámica es una versión para una sola plataforma de la plantilla Hub/Dinámica.

La plantilla de aplicación dinámica proporciona un modo rápido de administrar varias vistas o páginas. Puede utilizarse para filtrar grandes conjuntos de datos, ver varios conjuntos de datos o cambiar las vistas de una aplicación. La plantilla dinámica implementa un control Pivot que contiene controlesPivotItem individuales, cada uno de los cuales representa una página dinámica. El control Pivot proporciona compatibilidad integrada para la navegación y la interacción táctil.

Plantilla de aplicación dinámica

Archivos de proyecto para la plantilla dinámica

La plantilla de aplicación Dinámica incluye los siguientes archivos:

  • Todos los archivos comunes, como default.html y navigator.js.
  • hub.html, que es una página de contenedor para las páginas dinámicas individuales (controles PivotItem).
  • sectionNumberPage.html, que contiene el marcado para una página dinámica individual. Por ejemplo, section1Page.html contiene el marcado para la primera página dinámica. En algunas páginas, los usuarios pueden elegir un elemento para ver información acerca del elemento.
  • Un archivo JavaScript y CSS correspondiente a cada página de la aplicación.
  • item.html, que constituye la vista de página completa de un elemento.
  • phone.css, que especifica los estilos CSS de la página de host de contenido y de la aplicación en general.
  • hubPhone.css, que especifica los estilos CSS para el control dinámico y las páginas dinámicas. Estos estilos invalidan los estilos configurados en hub.css.

Cómo funciona la plantilla dinámica

Las secciones de la plantilla dinámica están destinadas a proporcionar ejemplos del contenido en lugar de recomendaciones sobre este. Para ajustarse a los requisitos de contenido de la aplicación, las secciones, implementadas como controles PivotItem, pueden agregarse y quitarse con facilidad.

Las secciones de la plantilla incluyen contenido estático para que sea fácil proporcionar recursos globalizados. El archivo de recursos de muestra proporciona cadenas localizadas para la configuración regional en-us.

Para obtener más información sobre la implementación de la plantilla dinámica, consulta:

Para obtener más información sobre el modelo de datos y el procedimiento para personalizarlo para una aplicación de la Tienda, consulta el tema sobre la adición de datos y consulta el lector web JSON que usa la plantilla Hub/Dinámica.

Plantilla de proyecto de navegación para aplicaciones de la Tienda

La plantilla de aplicación de navegación proporciona navegación básica a través del modelo de navegación recomendado para las aplicaciones de la Tienda. Esta plantilla contiene únicamente un fragmento de página mínimo al que puedes agregar más fragmentos fácilmente si usas la plantilla de elemento Control de páginas. Tras ello, puedes agregar tus propios contenidos.

La plantilla de navegación está disponible como aplicación universal para aplicaciones de la Tienda de Windows Phone y aplicaciones de la Tienda Windows, o como aplicación de plataforma única.

Navigation Application abre de manera predeterminada una página principal en la que se da la bienvenida, como se muestra aquí.

Plantilla de proyecto Navigation Application

Archivos de proyecto para la plantilla Navigation

La plantilla Navigation Application también incluye los siguientes archivos:

  • La mayoría de los archivos comunes, como default.html y navigator.js.
  • home.html, que es la página principal. Muestra un título de bienvenida. En la aplicación universal, este archivo está compartido.
  • home.js, que especifica el comportamiento de la página principal. En la aplicación universal, este archivo está compartido.
  • home.css, que especifica los estilos CSS de la página principal. En la aplicación universal para la plantilla de navegación, cada proyecto incluye este archivo.

Cómo funciona la plantilla Navigation

Para obtener más información sobre la implementación de la plantilla Navigation, consulta:

Para agregar más páginas a la aplicación, usa la plantilla de elementos Page Control . Para ver un ejemplo de cómo agregar una plantilla Page Control, consulta Agregar una plantilla de elementos Page Control.

Para una implementación simple de la plantilla Navigation, consulta la muestra "Button-Tab Navigator". Esta aplicación de muestra incluye algunas personalizaciones del control de navegación.

Si necesitas incluir un control especial sobre los cambios en el estado de visualización con la plantilla Navigation, deberás modificar el código. Te recomendamos que sigas el mismo patrón que con las plantillas Grid y Split, que consiste en implementar updateLayout en las páginas HTML. Para obtener más información, consulta el tema sobre el control del estado de visualización. La compatibilidad con updateLayout se proporciona en el modelo de navegación compartido.

Para ayudarte a elegir el mejor patrón de navegación para tu aplicación, consulta Patrones de navegación. También puedes ver el patrón de navegación simple en acción como parte de nuestra serie Características de aplicaciones, de principio a fin.

  • Applies to Windows

Plantillas de proyecto de cuadrícula para aplicaciones de la Tienda Windows

La plantilla Aplicación de cuadrícula es una forma estupenda de empezar con una aplicación de la Tienda Windows. Esta plantilla se puede personalizar para que los usuarios puedan pasearse por las distintas categorías y buscar contenido en el que enfrascarse de lleno. Algunos ejemplos son las aplicaciones de compras, de noticias y de fotografía o vídeo. Esta plantilla usa el modelo de navegación de JavaScript, que es el que se recomienda para las aplicaciones de la Tienda Windows.

Grid Application abre de manera predeterminada una página principal en la que se recoge una lista de grupos. Un grupo es un conjunto de elementos con nombre asignado, como por ejemplo, una sección de unos grandes almacenes virtuales con artículos comerciales individuales. Cuando un usuario selecciona un grupo, la aplicación abre la página de detalles de dicho grupo, con una lista de los artículos a la derecha. De este modo, el usuario puede seleccionar un artículo desde la página principal o la página de detalles del grupo. Esto abre una vista a pantalla completa que muestra los detalles de cada elemento. La página de inicio se muestra aquí.

Plantilla de proyecto Aplicación de cuadrícula

Archivos de proyecto de la plantilla Grid

La plantilla Aplicación de cuadrícula incluye los siguientes archivos:

  • Todos los archivos comunes, como default.html y navigator.js.
  • groupedItems.html, que es la página principal. Permite al usuario ver los grupos y los elementos, así como seleccionar un elemento para navegar a la vista de elemento de página completa, o bien una etiqueta de grupo para navegar a la página de detalles del grupo en cuestión.
  • groupDetail.html, que permite que los usuarios vean los detalles del grupo a la izquierda y los elementos a la derecha, así como seleccionar un elemento para navegar a la vista de elemento de página completa
  • itemDetail.html, que constituye la vista de página completa de un elemento.
  • Un archivo JavaScript y un archivo CSS correspondiente a cada página de la aplicación, como groupedItems.js.

Cómo funciona la plantilla Grid

Para obtener más información sobre la implementación de la plantilla Grid, consulta:

El tema sobre cómo agregar datos incluye un ejemplo que muestra cómo se agregan datos dinámicos a la plantilla Cuadrícula y se enlazan a la interfaz de usuario.

  • Applies to Windows

Plantillas de proyecto de aplicación dividida para aplicaciones de la Tienda Windows

La plantilla Aplicación dividida es una forma estupenda de empezar a crear una aplicación de la Tienda Windows que puedes personalizar para que los usuarios vean una lista de elementos y detalles de los elementos en una vista de dos columnas. En dicha vista, existe la posibilidad de cambiar rápidamente de un elemento a otro y, además, la lista se puede actualizar de forma dinámica. Entre los ejemplos encontramos un lector de noticias, una aplicación de resultados deportivos o una aplicación de correo electrónico. Esta plantilla usa el modelo de navegación de JavaScript, que es el que se recomienda para las aplicaciones de la Tienda Windows.

Split Application abre de manera predeterminada una página principal en la que se recoge una lista de grupos. Un grupo es un conjunto de elementos con nombre asignado, como una fuente de noticias que suministra noticias. Cuando el usuario selecciona un grupo punteando o haciendo clic en él, la aplicación abre la página de vista dividida, con los elementos en la izquierda y los detalles del elemento actual en la derecha. Aquí se muestra la página de vista dividida.

Plantilla de proyecto Aplicación dividida

La página de vista dividida muestra una vista de dos columnas (o vista Maestro y detalles), donde los detalles que se ven a la derecha van cambiando en función de los elementos que el usuario selecciona en la izquierda. Siguiendo con el ejemplo inicial, piensa en una lista donde figuran noticias a la izquierda y las historias reales, a la derecha.

Archivos de proyecto para la plantilla Split

La plantilla Aplicación dividida incluye los siguientes archivos:

  • Todos los archivos comunes, como default.html y navigator.js.
  • items.html, que es la página principal. Este archivo permite a los usuarios seleccionar un grupo para navegar a la página de vista dividida de la aplicación.
  • split.html, que es la página de vista dividida. En este archivo se definen dos secciones, una para la lista de elementos de la izquierda y otra para los detalles de elemento de la derecha.
  • Un archivo JavaScript y CSS correspondiente a cada página de la aplicación, como split.js y split.css.

Cómo funciona la plantilla Split

Para obtener más información sobre la implementación de la plantilla Split, consulta:

El tema sobre cómo agregar datos incluye un ejemplo que muestra cómo agregar datos dinámicos a la plantilla Dividir y enlazarlos a la interfaz de usuario.

Para ver un ejemplo que muestra cómo agregar búsqueda a la plantilla Split, consulta Adición de una plantilla de elemento Contrato de Buscar.

Plantilla de proyecto vacía para aplicaciones de la Tienda Windows

La plantilla de aplicación vacía proporciona una aplicación de la Tienda mínima que se compila y ejecuta, pero que no contiene datos ni controles de interfaz de usuario. Cuando ejecutas una aplicación basada en la plantilla de proyecto vacía, verás una pantalla negra que contiene texto de marcador de posición.

La plantilla vacía está disponible como aplicación universal para aplicaciones de la Tienda de Windows Phone y aplicaciones de la Tienda Windows, o como aplicación de plataforma única.

Archivos de proyecto para la plantilla Blank

La plantilla Aplicación vacía incluye los siguientes archivos:

  • La mayoría de los archivos comunes, como default.html y package.appxmanifest.

Cómo funciona la plantilla Blank

Para obtener más información sobre la implementación de la plantilla Blank, consulta:

La apariencia y comportamiento generales de la plantilla Blank se crean mediante la hoja de estilo CSS ui-dark.css. Puedes reemplazar la referencia que se hace a esta hoja de estilo en las páginas HTML por ui-light.css. Para obtener más información, consulta el tema sobre estilos CSS.

Archivos de plantilla de proyecto comunes

Los siguientes archivos son comunes a la mayoría de las plantillas de proyecto.

ArchivoDescripción
default.htmlEsta página es la primera que se carga. Para las aplicaciones de plantilla que incluyen el modelo de navegación de una página, esta página proporciona el marcado del host del contenido (donde cada página se carga en la ventana principal). En las plantillas de aplicación universal, cada uno de los proyectos incluye este archivo.
navigator.jsImplementa el modelo de navegación de una página de las plantillas de proyecto JavaScript. La plantilla de proyecto vacía no incluye este archivo.

Normalmente no es necesario personalizar el comportamiento de la navegación implementado en las plantillas. No obstante, el control de navegación (navigator.js) se implementa como archivo de proyecto estándar para que puedas realizar modificaciones, si es necesario. Para obtener más información, consulta lo siguiente:

data.jsProporciona un objeto de fuente de datos (una WinJS.Binding.List) que expone los datos al resto de la aplicación. Este archivo incluye datos de muestra. Para obtener más información acerca del modelo de datos, consulta Personalizar los datos de una plantilla de proyecto. Las plantillas de proyecto Navigation y Blank no incluyen este archivo.
package.appxmanifestDescribe el paquete de aplicación para las aplicaciones de la Tienda Windows y la Tienda de Windows Phone. En una plantilla de aplicación universal, cada uno de los proyectos incluye este archivo.
Archivo PFXEste archivo se usa para firmar el archivo appxmanifest. Se incluye como un archivo de proyecto para permitir la creación de aplicaciones de la Tienda Windows desde la línea de comandos.
default.jsEspecifica el comportamiento de la aplicación cuando se inicia. En las plantillas de aplicación universal, cada uno de los proyectos incluye este archivo.
default.cssEspecifica los estilos CSS de la aplicación. En las plantillas de aplicación universal, cada uno de los proyectos incluye este archivo.
Varios archivos de imagen Los archivos de imagen que se incluyen de forma predeterminada son splashscreen.png para la imagen de la pantalla de presentación y storelogo.png, que se usa para la Tienda Windows, además de otros archivos.
resources.jsonUn archivo de recursos de muestra que contiene cadenas de localización.

 

Características de codificación comunes

Las siguientes características son comunes a todas las plantillas de proyecto:

  • Cada archivo JavaScript envuelve código en una función anónima de ejecución automática del siguiente modo:
    
    (function () {
        // . . .
    })();
    
    

    Los miembros que se incluyen en esta función anónima son privados, pero los puedes convertir en públicos con la función WinJS.Namespace.define. El uso de la función anónima cambia el modo en el que se escribe un determinado código, como el que necesitas para agregar tus propios controladores de eventos Para obtener más información, consulta el tema sobre codificación de aplicaciones básicas.

  • Cada archivo JavaScript especifica el uso de modo strict con la instrucción "use strict". Para obtener más información, consulta el tema sobre el modo strict en la referencia de lenguaje JavaScript.
  • El procesamiento declarativo estricto siempre está activado. Debes usar WinJS.Utilities.markSupportedForProcessing para especificar que una función pueda usar el procesamiento declarativo.

En algunas partes del archivo JavaScript se usan comentarios de documentación XML para ofrecer una experiencia de IntelliSense más completa. Para obtener más información, consulta el tema sobre IntelliSense de JavaScript.

Ciclo de vida de la aplicación

La implementación del ciclo de vida de la aplicación es igual en todas las plantillas de proyecto JavaScript para aplicaciones de la Tienda Windows. Este ciclo de vida se inicia y finaliza cuando la aplicación se inicia o se cierra. Las plantillas de proyecto incluyen un patrón genérico de administración del ciclo de vida de la aplicación. Si creas aplicaciones basadas en una plantilla de proyecto, probablemente debas incluir código que permita abordar más escenarios, como controlar los datos cuando la aplicación se suspende o finaliza.

El archivo default.html está configurado como página principal de cada plantilla. El archivo JavaScript correspondiente para default.html incluye la llamada al método WinJS.Application.start, con el que se inicia la distribución de eventos de aplicación.


var app = WinJS.Application;
// . . .
app.start();

El mejor sitio en el que agregar código para administrar el ciclo de vida de la aplicación es default.js. La implementación de default.js es igual en todas las plantillas de proyecto. Este archivo incluye código para controlar el evento onactivated de WinJS, que se genera cuando se activa Windows en tiempo de ejecución. El código en el controlador de eventos onactivated comprueba si la aplicación se inició en la pantalla Inicio de Windows y llama al método WinJS.UI.processAll. La función processAll carga todos los controles que incluyan el atributo data-win-control en el elemento DIV del control. Este es el código que contiene la función processAll.



app.addEventListener("activated", function (args) {
    if (args.detail.kind === activation.ActivationKind.launch) {
        if (args.detail.previousExecutionState !== activation.ApplicationExecutionState.terminated) {
            // . . .
        } else {
            // . . .
        }
        // . . .
        }
        // . . .

        // . . .
        var p = ui.processAll().then(function () {
            return nav.navigate(nav.location || Application.navigator.home, nav.state);
        }).then(function () {
            return sched.requestDrain(sched.Priority.aboveNormal + 1);
        }).then(function () {
            ui.enableAnimations();
        });

        args.setPromise(p);
    }
});

Si tienes código que deba ejecutarse cuando la aplicación configure su estado inicial, conviene que lo incluyas en el controlador del evento onactivated de WinJS. Puede que también tengas que incluir más código si la aplicación se ha reactivado después de suspenderse. Agrega este código donde te indiquen los comentarios del código.



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.
}


Tal y como hemos comentado anteriormente, las plantillas carecen de código para controlar la suspensión de la aplicación. Para administrar este estado de la aplicación en tu código, puedes agregar código al controlador del evento oncheckpoint de WinJS, que se muestra aquí en default.js, o agregar código para registrarlo para el evento suspending de Windows en tiempo de ejecución (que llama a oncheckpoint).


app.oncheckpoint = function (args) {
    // TODO: This application is about to be suspended. Save any state
    // that needs to persist across suspensions here. If you need to 
    // complete an asynchronous operation before your application is 
    // suspended, call args.setPromise().
    app.sessionState.history = nav.history;
};

Los eventos de WinJS o Windows en tiempo de ejecución (o bien una combinación de ambos) sirven para administrar el ciclo de vida de la aplicación. No obstante, en la mayoría de las aplicaciones basta con recurrir a los eventos y funciones de WinJS. Para obtener más información, consulta Cómo suspender una aplicación y Cómo reanudar una aplicación.

Aquí tienes algunos de los eventos y funciones de WinJS relacionados con el ciclo de vida de la aplicación:

Modelo de navegación

El modelo de navegación usado en las plantillas de proyecto de aplicación Concentrador, Cuadrícula, Dividir y Navegación es el modelo de navegación recomendado para las aplicaciones de la Tienda Windows creadas con JavaScript. En este modelo, las páginas HTML, cargadas a través del URI de la página, se cargan en el contexto de una sola aplicación. Las páginas se cargan según convenga, normalmente como respuesta a las acciones del usuario. Los desarrolladores web suelen referirse a este tipo de modelo de navegación como navegación de una página. El archivo navigator.js implementa el modelo de navegación. El modelo de navegación de una sola página permite una transición entre páginas más fluida y similar al de las aplicaciones y, además, facilita la administración del estado, ya que los scripts nunca se descargan.

Sugerencia  Para ayudarte a elegir el mejor patrón de navegación para tu aplicación, consulta Patrones de navegación. También puedes ver el patrón de navegación simple en acción como parte de nuestra serie Características de aplicaciones, de principio a fin.

Para personalizar la navegación en tus aplicaciones usando el modelo de navegación de una página que se proporciona en las plantillas de proyecto:

  • Asegúrate de que tu aplicación incluye navigator.js y el marcado del host de contenido requerido para el control de navegación en default.html (consulta más adelante).
  • Asegúrate de que cada página se implementa como un PageControl. (Puedes usar Visual Studio para agregar una plantilla de elemento PageControl).
  • Implementa el código de inicialización para cada página en la función ready o en función init.
  • Llama a WinJS.Navigation.navigate para ir a las nuevas páginas.

A continuación encontrarás más información sobre estos requisitos.

Las plantillas de proyecto como la plantilla Blank no incluyen un archivo navigator.js. En esta plantilla, deberás implementar navegación personalizada si no agregas el archivo de proyecto navigator.js manualmente. Si usas el modelo de navegación de una página y WinJS.Navigation.navigate para navegar entre las páginas, recuerda que WinJS.Navigation.navigate no realiza la navegación directamente, sino que se trata de una función de contenedor que almacena un objeto de estado asociado a tu ubicación actual y después invoca el evento WinJS.Navigation.onnavigated. Para obtener más información sobre la navegación y ver un ejemplo de la navegación de una página en las aplicaciones de la Tienda Windows creadas para Windows con JavaScript, consulta Inicio rápido: usar la navegación de una página

En el modelo de navegación de una página usado en las plantillas Grid, Split, Hub y Navigation App, un elemento DIV que se declara como el control de navegación de la aplicación proporciona el host de contenido para todas las páginas de la aplicación. Todo el contenido de las páginas se carga en este DIV. El elemento, mostrado aquí, se incluye en default.html en las plantillas de proyecto.


<div id="contenthost" data-win-control="Application.PageControlNavigator"
    data-win-options="{home: '/pages/items/items.html'}">
</div>

El control de navegación en sí se implementa en navigator.js y, para la mayoría de las aplicaciones, no es necesario modificarlo. El control de navegación establece los controladores para el evento WinJS.Navigation.onnavigated.

Las páginas que se cargan en el host de contenido deben ser objetos PageControl. Cada control de página representa una unidad modular de código HTML, CSS y JavaScript. Cuando el control de navegación carga una página, llama a los métodos definidos internamente de la interfaz IPageControlMembers, por ejemplo, ready.

Las plantillas de proyecto implementan la función ready y, en algunas plantillas, la función init. La función ready se llama cuando se carga el fragmento de página y se procesa completamente.

Sugerencia  Para obtener más información sobre el proceso de carga de páginas, consulta IPageControlMembers.init.

Para navegar a una página nueva, cada aplicación de plantilla llama a WinJS.Navigation.navigate. Como resultado de estas llamadas, el control de navegación carga el archivo HTML en el elemento DIV del host de contenido. Varias funciones de las páginas de plantillas llaman a la función navigate de la biblioteca de Windows para JavaScript (WinJS):

  • La función _itemInvoked, que controla la selección de un elemento en una vista de lista. Según la página y el contexto actuales, podría seleccionarse un elemento individual o un grupo.
  • La función _selectionChanged, que controla la selección de un elemento en split.html (en la plantilla Split).

En algunas plantillas, determinadas funciones de los archivos JavaScript de las páginas HTML podrían modificar el historial del botón Atrás según el estado de visualización actual. Por ejemplo, en la plantilla Aplicación dividida, la aplicación modifica el historial del botón Atrás si la aplicación está en un estado especial de visualización definida por plantilla que se denomina vista maestro y detalles. Para obtener más información, consulta el tema sobre el control del estado de visualización.

Para obtener más detalles sobre la implementación de la navegación de páginas, consulta Navegación entre páginas.

Estilos CSS

La apariencia y el comportamiento generales de las plantillas se crean mediante la hoja de estilos CSS: ui-dark.css. Se trata de una hoja de estilo de WinJS en la que se definen la combinación de colores principal, las fuentes y otras propiedades de estilo. La referencia del proyecto se muestra aquí:


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

Puedes cambiar esta referencia en todas las páginas HTML por ui-light.css, que es la alternativa recomendada de combinación de colores y estilo para las aplicaciones de la Tienda Windows:


<link href="//Microsoft.WinJS.1.0/css/ui-light.css" rel="stylesheet">

La mayoría de las páginas HTML de las plantillas de proyecto Grid y Split emplean una o más plantillas de WinJS (que no son las mismas que las plantillas de proyecto de Visual Studio y elemento) para dar formato a varias instancias de datos y visualizarlas. Por ejemplo, cada vez que exista un control ListView en una página, habrá una plantilla de WinJS con un nombre de clase itemtemplate. Los nombres de clase sirven para recuperar elementos de los archivos JavaScript y especificar CSS. Esta es la plantilla de elemento que se encuentra en items.html en la plantilla de proyecto Split:


<div class="itemtemplate" data-win-control="WinJS.Binding.Template">
    <div class="item">
        <img class="item-image" src="#" data-win-bind="src: backgroundImage; alt: title" />
    <div class="item-overlay">
        <h4 class="item-title" 
            data-win-bind="textContent: title"></h4>
        <h6 class="item-subtitle win-type-ellipsis" 
            data-win-bind="textContent: subtitle"></h6>
    </div>
</div>


Importante  La plantilla itemtemplate se usa para cualquier tipo de elemento de ListView que, según el contexto, puede ser un grupo o un elemento de datos individual.

Los estilos CSS que se asocian a las páginas HTML, así como sus plantillas de WinJS, son estilos CSS con ámbito. Cuando se usan estilos con ámbito, la utilización de estilos queda reducida a determinadas páginas, lo que ayuda a reducir el tiempo que se tarda en solucionar los problemas que surgen cuando el origen de un estilo CSS en concreto no está del todo claro. Aquí puedes ver un ejemplo del uso de estilos con ámbito. Esta sección de código en items.css muestra las propiedades de CSS del elemento IMG de la plantilla del elemento anterior. Este elemento representa la imagen asociada de cada elemento en ListView.


.itemspage .itemslist .item .item-image {
    -ms-grid-row-span: 2;
}


En el ejemplo anterior, la entrada itemspage define el ámbito del estilo y limita la aplicación de CSS a los elementos que haya en el elemento DIV itemspage declarado en items.html. La entrada itemslist acota aún más el estilo CSS a la sección de contenido principal de la página principal, y así sucesivamente. La sección de contenido principal en items.html, que declara el objeto ListView, tiene el siguiente aspecto:


<div class="itemslist win-selectionstylefilled" 
    aria-label="List of groups" 
    data-win-control="WinJS.UI.ListView" 
    data-win-options="{ selectionMode: 'none' }">
</div>


Se proporciona compatibilidad con las hojas de estilos para los sistemas de escritura de derecha a izquierda en las plantillas incluidas en Microsoft Visual Studio 2012 Update 1. El siguiente ejemplo muestra un estilo CSS para un encabezado de grupo que aparece de derecha a izquierda en groupedItems.css (plantilla Grid).


.groupeditemspage .groupeditemslist.win-rtl .group-header .group-chevron:before {
    content: "\E26C";
}

Para usar los estilos de derecha a izquierda, debes incluir recursos para un idioma de derecha a izquierda en tu proyecto y establecer la configuración de idioma correcta en Windows. Para obtener más información, consulta Inicio rápido: traducir recursos de interfaz de usuario. Para obtener instrucciones para admitir sistemas de escritura de derecha a izquierda en aplicaciones de la Tienda Windows, consulta Cómo admitir interfaces de usuario bidireccionales.

Control del estado de visualización

Las plantillas de concentrador y de cuadrícula no implementan compatibilidad especial para los diferentes estados de vista, más allá de lo que los controles de diseño proporcionan, pero sí proporcionan un marco básico para habilitar la personalización en respuesta a los cambios de diseño. Es posible que los cambios de diseño se controlen dentro del modelo de navegación de la plantilla de proyecto. Para obtener más información, consulta Modelo de navegación.

En navigator.js, el control de navegación crea un controlador para el evento window.onresize.


window.onresize = this._resized.bind(this);


En el código de constructor de PageControlNavigator, el evento onresize acaba asignándose a la función updateLayout que se implementa en el archivo JavaScript asociado a la página HTML actual. En tiempo de ejecución, el evento onresize llama a esta función.

La implementación de updateLayout es específica para cada página, pero generalmente no se implementa en las plantillas de proyecto. Este código muestra el código auxiliar paraupdateLayout en la página de la sección de la plantilla Concentrador.


updateLayout: function (element) {
    /// <param name="element" domElement="true" />

    // TODO: Respond to changes in layout.
},


La plantilla Dividir sí admite un comportamiento único en relación con el estado de visualización. De manera predeterminada, la página de vista dividida (split.html) de la plantilla Dividir es una vista de dos columnas — denominada vista Maestro y detalles. La plantilla Dividir define una vista alternativa llamada de una sola columna, que se establece comprobando el ancho del nodo raíz del documento. El código que define y controla este estado de visualización de una sola columna está en split.js. La función _isSingleColumn define el estado de visualización de una sola columna:


_isSingleColumn: function () {
    return document.documentElement.offsetWidth <= 767;
},


Varios métodos diferentes en split.js, como _updateVisibility, llaman a _isSingleColumn. La función _updateVisibility activa o desactiva la visibilidad de las columnas, según si la aplicación se encuentra actualmente en una vista de una sola columna y si se seleccionó un elemento. Se llama a _updateVisibility en split.js mediante la función ready cuando la página se carga y, de igual modo, mediante updateLayout cuando se produce el cambio en el tamaño del evento. Para obtener más información, consulta split.js en la plantilla Dividir.

Algunas funciones de split.js modifican también el historial del botón Atrás o el comportamiento de navegación según cuál sea el estado de visualización. La función ready y la función updateLayout modifican el historial del botón Atrás. Por su parte, la función selectionChanged (a la que se llama cuando se selecciona un elemento de la vista de lista) modifica el comportamiento de navegación.

Para obtener más información sobre la administración de cambios de diseño, consulta Directrices para tamaños de ventana y escalado en pantallas.

 

 

Mostrar:
© 2014 Microsoft