Plantillas de Proyecto JavaScript para Aplicaciones de La Tienda Windows

Plantillas de proyecto JavaScript para
aplicaciones de la Tienda Windows

(Windows)
Desarrollo de aplicaciones de la Tienda Windows
Tareas iniciales
Plantillas de Visual Studio
Plantillas de proyecto de JavaScript
Modelo de navegacin
Agregar datos a una plantilla de proyecto
Personas que lo han encontrado til: 2 de 2 - Valorar este tema

En este artculo
Plantillas de proyecto de cuadrcula para aplicaciones de la Tienda Windows
Plantillas de proyecto de aplicacin dividida para aplicaciones de la Tienda

Windows
Plantillas de proyecto de aplicacin de navegacin para aplicaciones de la Tienda

Windows
Plantillas de proyecto de aplicacin vaca para aplicaciones de la Tienda Windows
Plantilla de proyecto de aplicacin de diseo fijo para aplicaciones de la tienda

Windows
Caractersticas de codificacin comunes
Ciclo de vida de la aplicacin
Estilos CSS
Control del estado de visualizacin
En este tema se proporciona informacin detallada sobre las plantillas de proyecto para
aplicaciones de la Tienda Windows creadas con JavaScript para Windows. Aparte de un
pequeo resumen de cada plantilla, aqu encontrars informacin de implementacin

referente al modelo de navegacin, el modelo de datos o el control del estado de
visualizacin. Muchos de estos detalles de implementacin se aplican a ms de una
plantilla.
Para obtener informacin sobre las plantillas de Visual Studio y Blend para otros idiomas,
consulta el tema sobre el uso de plantillas para poner en marcha la aplicacin (C#/VB/C+
+).
Plantillas de proyecto de cuadrcula para aplicaciones de la Tienda Windows

La plantilla Aplicacin de cuadrcula es una forma estupenda de empezar con una
aplicacin de la Tienda Windows. Esta plantilla se puede personalizar para que los usuarios
puedan pasearse por las distintas categoras y buscar contenido en el que enfrascarse de
lleno. Algunos ejemplos son las aplicaciones de compras, de noticias y de fotografa o
vdeo. Esta plantilla usa el modelo de navegacin de JavaScript, recomendado para las
aplicaciones de la Tienda Windows.
Grid Application abre de forma predeterminada una pgina principal en la que se recoge
una lista de grupos. Un grupo es un conjunto de elementos con nombre asignado, como por
ejemplo, una seccin de unos grandes almacenes virtuales con artculos comerciales
individuales. Cuando un usuario selecciona un grupo, la aplicacin abre la pgina de
detalles de dicho grupo, con una lista de los artculos a la derecha. De este modo, el usuario
puede seleccionar un artculo desde la pgina principal o la pgina de detalles del grupo.
Esto abre una vista a pantalla completa que muestra los detalles de cada elemento
individual (que se muestran aqu en la parte superior).
Archivos de proyecto de la plantilla Grid

La plantilla Aplicacin de cuadrcula incluye los siguientes archivos HTML:
default.html, que es el primero en cargarse y ofrece marcado para el host de

contenido (donde cada pgina se carga en la ventana principal).
groupedItems.html, que es la pgina principal. Permite al usuario ver los grupos y

los elementos, as como seleccionar un elemento para navegar a la vista de elemento
de pgina completa, o bien una etiqueta de grupo para navegar a la pgina de
detalles del grupo en cuestin.
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 pgina completa
itemDetail.html, que constituye la vista de pgina completa de un elemento.
Esta plantilla tambin engloba los siguientes archivos JavaScript:
default.js, que especifica el comportamiento de la aplicacin cuando se inicia.
groupedItems.js, que especifica el comportamiento de la pgina principal.
groupDetail.js, que especifica el comportamiento asociado a la pgina de detalles

del grupo.
itemDetail.js, que especifica el comportamiento asociado a la pgina de elemento de

vista completa.
navigator.js, que implementa el modelo de navegacin de las plantillas JavaScript

de las aplicaciones de la Tienda Windows.
data.js, que es el objeto de origen de datos que expone los datos al resto de la
aplicacin.
La plantilla tambin incluye estos archivos CSS:
default.css, que especifica los estilos CSS de la pgina de host de contenido y de la

aplicacin en general.
groupedItems.css, que especifica los estilos CSS de la pgina principal.
groupDetail.css, que especifica los estilos CSS de la pgina de detalles del grupo.
itemDetail.css, que especifica los estilos CSS de la vista de elemento de pgina

completa.
La plantilla Grid Application tambin incluye el archivo package.appxmanifest, que

describe el paquete de la aplicacin para Windows, y un archivo PFX que se usa para
firmar el archivo appxmanifest (este archivo se incluye como un archivo de proyecto para
admitir la creacin desde la lnea de comandos). Esta plantilla incluye adems varios
archivos de imagen, como splashscreen.png (para la imagen de la pantalla de presentacin)
y storelogo.png (que se usa en la Tienda Windows).
Cmo funciona la plantilla Grid
Para obtener ms informacin sobre la implementacin de la plantilla Grid, consulta:
Modelo de navegacin
Estilos CSS
El tema sobre cmo agregar datos incluye un ejemplo que muestra cmo se agregan datos
dinmicos a la plantilla Cuadrcula y se enlazan a la interfaz de usuario.
Plantillas de proyecto de aplicacin dividida para aplicaciones de la Tienda

Windows
La plantilla Aplicacin dividida es una forma estupenda de empezar a crear una aplicacin
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 rpidamente de un elemento a otro y, adems, la lista se puede
actualizar de forma dinmica. Entre los ejemplos encontramos un lector de noticias, una
aplicacin de resultados deportivos o una aplicacin de correo electrnico. Esta plantilla
usa el modelo de navegacin de JavaScript, que es el que se recomienda para las
Split Application abre de forma predeterminada una pgina 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 un usuario pulsa un grupo o hace clic en
l para seleccionarlo, la aplicacin abre la pgina de vista dividida. Aqu se muestran las
pginas de Split Application.
La pgina 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 funcin 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 Aplicacin dividida incluye los siguientes archivos HTML:

items.html, que es la pgina principal. Este archivo permite a los usuarios

seleccionar un grupo para navegar a la pgina de vista dividida de la aplicacin.
split.html, que es la pgina 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.
items.js, que especifica el comportamiento de la pgina principal.
split.js, que especifica el comportamiento de la pgina de vista dividida.
navigator.js, que implementa la navegacin relativa a las plantillas JavaScript de las

data.js, que es el objeto de origen de datos que expone los datos a la aplicacin.

items.css, que especifica los estilos CSS de la pgina principal.
split.css, que especifica los estilos CSS de la pgina de vista dividida.
La plantilla Split Application tambin incluye el archivo package.appxmanifest, que

Cmo funciona la plantilla Split
Para obtener ms informacin sobre la implementacin de la plantilla Split, consulta:
Modelo de navegacin
Estilos CSS
El tema sobre cmo agregar datos incluye un ejemplo que muestra cmo agregar datos
dinmicos a la plantilla Dividir y enlazarlos a la interfaz de usuario.
Para ver un ejemplo que muestra cmo agregar datos dinmicos y personalizar
caractersticas de la plantilla Split, consulta Crear un lector de blogs.
Para ver un ejemplo que muestra cmo agregar bsqueda a la plantilla Split, consulta
Adicin de una plantilla de elemento Contrato de Buscar.
Plantillas de proyecto de aplicacin de navegacin para aplicaciones de la

Tienda Windows
La plantilla Aplicacin de navegacin proporciona caractersticas de navegacin bsicas a
travs del modelo de navegacin recomendado para las aplicaciones de la Tienda Windows.
Esta plantilla contiene nicamente un fragmento de pgina mnimo al que puedes agregar
ms fragmentos fcilmente si usas la plantilla de elemento Control de pginas. Tras ello,
puedes agregar tus propios contenidos.
Navigation Application abre de forma predeterminada una pgina principal en la que se da
la bienvenida, como se muestra aqu.
Archivos de proyecto para la plantilla Navigation

La plantilla Aplicacin de navegacin incluye estos archivos HTML:

home.html, que es la pgina principal. Muestra un ttulo de bienvenida.
home.js, que especifica el comportamiento de la pgina principal.
navigator.js, que implementa el modelo de navegacin de las plantillas JavaScript

de las aplicaciones de la Tienda Windows.

home.css, que especifica los estilos CSS de la pgina principal.
La plantilla Navigation Application tambin incluye el archivo package.appxmanifest, que

Cmo funciona la plantilla Navigation
Para obtener ms informacin sobre la implementacin de la plantilla Navigation, consulta:
Modelo de navegacin
Estilos CSS
Si necesitas incluir un control especial sobre los cambios en el estado de visualizacin con
la plantilla Navigation, debers modificar el cdigo. Te recomendamos que sigas el mismo
patrn que con las plantillas Grid y Split, que consiste en implementar updateLayout en
las pginas HTML. Para obtener ms informacin, consulta el tema sobre el control del
estado de visualizacin. La compatibilidad con updateLayout se proporciona en el modelo
de navegacin compartido.
Para agregar ms pginas a la aplicacin, usa la plantilla de elementos Page Control . Para
ver un ejemplo de cmo agregar una plantilla Page Control, consulta Agregar una plantilla
de elementos Page Control.
Plantillas de proyecto de aplicacin vaca para aplicaciones de la Tienda

Windows
La plantilla Aplicacin vaca proporciona una aplicacin de la Tienda Windows mnima que
se compila y ejecuta, pero que no contiene datos ni controles de interfaz de usuario. Cuando
ejecutas una aplicacin basada en la plantilla de proyecto en blanco, vers una pantalla
negra que contiene texto de marcador de posicin.
Archivos de proyecto para la plantilla Blank
La plantilla Aplicacin vaca incluye el siguiente archivo HTML:
default.html, que es la pgina principal de la aplicacin.
La plantilla incluye este archivo JavaScript:
La plantilla incluye este archivo CSS:
default.css, que especifica los estilos CSS de la aplicacin.
La plantilla Blank Application tambin incluye el archivo package.appxmanifest, que

firmar el archivo appxmanifest. Esta plantilla incluye adems varios archivos de imagen,
como splashscreen.png (para la imagen de la pantalla de presentacin) y storelogo.png (que
se usa en la Tienda Windows).
Cmo funciona la plantilla Blank
Para obtener ms informacin sobre la implementacin 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 pginas HTML por ui-light.css. Para obtener ms informacin, consulta el tema
sobre estilos CSS.
Plantilla de proyecto de aplicacin de diseo fijo para aplicaciones de la

tienda Windows
La plantilla Aplicacin de diseo fijo ofrece una aplicacin de la Tienda Windows mnima,
que es igual a la plantilla Aplicacin vaca, excepto en que su contenido es para una
ventanilla fija. Te recomendamos esta plantilla para la mayora de las aplicaciones de
juegos creados en JavaScript.
Cuando ejecutes una aplicacin basada en la plantilla Fixed Layout, vers una pantalla
negra que contiene texto de marcador de posicin.
Archivos de proyecto para la plantilla Fixed Layout
La plantilla Aplicacin de diseo fijo incluye este archivo HTML:
default.html, que es la pgina principal de la aplicacin.
La plantilla incluye este archivo JavaScript:
La plantilla incluye este archivo CSS:
default.css, que especifica los estilos CSS de la aplicacin.
La plantilla Fixed Layout Application tambin incluye el archivo package.appxmanifest,

que describe el paquete de la aplicacin para Windows, y un archivo PFX que se usa para
firmar el archivo appxmanifest. Esta plantilla incluye adems varios archivos de imagen,
como splashscreen.png (para la imagen de la pantalla de presentacin) y storelogo.png (que
se usa en la Tienda Windows).
Cmo funciona la plantilla Fixed Layout
Para obtener ms informacin sobre la implementacin de la plantilla Fixed Layout,
consulta:
El tamao de una aplicacin Fixed Layout se ajusta para adaptarse al rea de visualizacin.
Para ajustarlo, la plantilla usa un control ViewBox. Por ejemplo, si eliges una resolucin de
768 x 1.024 para la aplicacin, pero el dispositivo que ejecuta la aplicacin no tiene un rea
de visualizacin con esta resolucin, la aplicacin se ampla o reduce para que su ventanilla
de diseo fijo aparezca ante el usuario.
La apariencia y comportamiento generales de la plantilla Fixed Layout 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 pginas HTML por ui-light.css. Para obtener ms informacin, consulta el
tema sobre estilos CSS.

Las siguientes caractersticas son comunes a todas las plantillas de proyecto:
Cada archivo JavaScript envuelve cdigo en una funcin annima de ejecucin

automtica del siguiente modo:
JavaScript
Copiar
(function () {
// . . .
})();
Los miembros que se incluyen en esta funcin annima son privados, pero los
puedes convertir en pblicos con la funcin WinJS.Namespace.define. El uso de la
funcin annima cambia el modo en el que se escribe un determinado cdigo, como
el que necesitas para agregar tus propios controladores de eventos Para obtener ms
informacin, consulta el tema sobre codificacin de aplicaciones bsicas.
Cada archivo JavaScript especifica el uso de modo strict con la instruccin "use
strict". Para obtener ms informacin, consulta el tema sobre el modo strict en la
referencia de lenguaje JavaScript.
Default.js incluye una llamada WinJS.Binding.optimizeBindingReferences. Esta

funcin ayuda a evitar prdidas de memoria cuando se usa el enlace declarativo en
una aplicacin, como suele ocurrir en las plantillas.
El procesamiento declarativo estricto siempre est activado. Debes usar

WinJS.Utilities.markSupportedForProcessing para especificar que una funcin
pueda usar el procesamiento declarativo.
En algunas partes del archivo JavaScript se usan comentarios de documentacin XML para
ofrecer una experiencia de IntelliSense ms completa. Para obtener ms informacin,
consulta el tema sobre IntelliSense de JavaScript.

La implementacin del ciclo de vida de la aplicacin 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 aplicacin se inicia o se cierra. Las plantillas de proyecto incluyen un
patrn genrico de administracin del ciclo de vida de la aplicacin. Si creas aplicaciones

basadas en una plantilla de proyecto, probablemente debas incluir cdigo que permita
abordar ms escenarios, como controlar los datos cuando la aplicacin se suspende o
finaliza.
El archivo default.html est configurado como pgina principal de cada plantilla. El archivo
JavaScript correspondiente para default.html incluye la llamada al mtodo
WinJS.Application.start, con el que se inicia la distribucin de eventos de aplicacin.
JavaScript
Copiar
var app = WinJS.Application;
// . . .
app.start();
El mejor sitio en el que agregar cdigo para administrar el ciclo de vida de la aplicacin es
default.js. La implementacin de default.js es igual en todas las plantillas de proyecto. Este
archivo incluye cdigo para controlar el evento onactivated de WinJS, que se genera
cuando se activa Windows en tiempo de ejecucin. El cdigo en el controlador de eventos
de onactivated comprueba si la aplicacin se inici en la pantalla Inicio de Windows y
llama al mtodo WinJS.UI.processAll. La funcin processAll carga todos los controles
que incluyan el atributo data-win-control en el elemento DIV del control. Este es el cdigo
que contiene la funcin processAll.
JavaScript
Copiar
app.addEventListener("activated", function (args) {
if (args.detail.kind === activation.ActivationKind.launch) {
if (args.detail.previousExecutionState !==
activation.ApplicationExecutionState.terminated) {
// . . .
} else {
// . . .
}
// . . .
}
args.setPromise(WinJS.UI.processAll().then(function () {
// The code in this section navigates to the current page, if
one
// is set, or the home page if a current page is not set.
// . . .
}));
}
});
Si tienes cdigo que deba ejecutarse cuando la aplicacin configure su estado inicial,
conviene que lo incluyas en el controlador del evento onactivated de WinJS. Puede que
tambin tengas que incluir ms cdigo si la aplicacin se ha reactivado despus de
suspenderse. Agrega este cdigo donde te indiquen los comentarios del cdigo.
JavaScript
Copiar
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 cdigo para controlar
la suspensin de la aplicacin. Para administrar este estado de la aplicacin en tu cdigo,
puedes agregar cdigo al controlador del evento oncheckpoint de WinJS, que se muestra
aqu en default.js, o agregar cdigo para registrar para el evento suspending de Windows
en tiempo de ejecucin (que llama a oncheckpoint).
JavaScript
Copiar
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 ejecucin (o bien una combinacin de

ambos) sirven para administrar el ciclo de vida de la aplicacin. No obstante, en la mayora
de las aplicaciones basta con recurrir a los eventos y funciones de WinJS. Para obtener ms
informacin, consulta Cmo suspender una aplicacin y Cmo reanudar una aplicacin.
Aqu tienes algunos de los eventos y funciones de WinJS relacionados con el ciclo de vida
de la aplicacin:
activated
loaded
ready
checkpoint
unload
sessionState
Estilos CSS
La apariencia y comportamiento generales de las plantillas se crean mediante la hoja de
estilo CSS ui-dark.css. Se trata de una hoja de estilo de WinJS en la que se definen la
combinacin de colores principal, las fuentes y otras propiedades de estilo. La referencia
del proyecto se muestra aqu:
HTML
Copiar
<link href="//Microsoft.WinJS.1.0/css/ui-dark.css" rel="stylesheet">
Puedes cambiar esta referencia en todas las pginas HTML por ui-light.css, que es la
alternativa recomendada de combinacin de colores y estilo para las aplicaciones de la
Tienda Windows:
HTML
Copiar
<link href="//Microsoft.WinJS.1.0/css/ui-light.css" rel="stylesheet">
La mayora de las pginas HTML de las plantillas de proyecto Grid y Split emplean una o
ms 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 pgina, 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:
HTML
Copiar
<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, segn el contexto, puede ser un grupo o un elemento de datos individual.
Los estilos CSS que se asocian a las pginas HTML, as como sus plantillas de WinJS, son
estilos CSS con mbito. Cuando se usan estilos con mbito, la utilizacin de estilos queda
reducida a determinadas pginas, 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 seccin de
cdigo en items.css muestra las propiedades de CSS del elemento IMG de la plantilla de
elemento anterior. Este elemento representa la imagen asociada de cada elemento en
ListView.
CSS
Copiar
.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

aplicacin de CSS a los elementos que haya en el elemento DIV itemspage declarado en
items.html. La entrada itemslist acota an ms el estilo CSS a la seccin de contenido
principal de la pgina principal, y as sucesivamente. La seccin de contenido principal en
items.html, que declara el objeto ListView, tiene el siguiente aspecto:
HTML
Copiar
<div class="itemslist win-selectionstylefilled"
aria-label="List of groups"
data-win-control="WinJS.UI.ListView"
data-win-options="{ selectionMode: 'none' }">
</div>

Las plantillas de proyecto como aplicacin de cuadrcula y aplicacin dividida estn
pensadas para controlar varios estados de visualizacin, como los estados vertical,
acoplado, de pantalla completa o lleno. Para obtener ms informacin sobre los estados de
visualizacin en las aplicaciones de la Tienda Windows, consulta Directrices para diseos.
Las plantillas Aplicacin de cuadrcula y Aplicacin dividida controlan el estado de
visualizacin dentro del modelo de navegacin de la plantilla del proyecto. Para obtener
ms informacin, consulta Modelo de navegacin.
Cuando el control de navegacin (PageControlNavigator) carga una pgina, pasa una
ubicacin (un URI de pgina) y un estado, pero tambin informacin sobre el estado de
visualizacin. Primero, en navigator.js, el control de navegacin crea un controlador para el
evento window.onresize.
JavaScript
Copiar
window.onresize = this._resized.bind(this);
En el cdigo de constructor de PageControlNavigator, el evento onresize acaba

asignndose a la funcin updateLayout que se implementa en el archivo JavaScript
asociado a la pgina HTML actual. En el tiempo de ejecucin, el evento onresize llama a
esta funcin, que reenva el estado de visualizacin a la pgina.
La implementacin de updateLayout es especfica de cada pgina. Este cdigo refleja la
implementacin de updateLayout y _initializeLayout en items.js en la plantilla Split.
(La pgina de elementos es la pgina principal que permite al usuario seleccionar un grupo
de un ListView. Cuando el usuario selecciona el grupo, la aplicacin navega a la pgina de
vista dividida, que es la vista maestra/detallada).
JavaScript
Copiar
updateLayout: function (element, viewState, lastViewState) {
/// <param name="element" domElement="true" />
var listView = element.querySelector(".itemslist").winControl;
if (lastViewState !== viewState) {
if (lastViewState === appViewState.snapped || viewState ===
appViewState.snapped) {
var handler = function (e) {
listView.removeEventListener("contentanimating", handler,
false);
e.preventDefault();
}
listView.addEventListener("contentanimating", handler, false);
var firstVisible = listView.indexOfFirstVisible;
this._initializeLayout(listView, viewState);
if (firstVisible >= 0 && listView.itemDataSource.list.length >
0) {
listView.indexOfFirstVisible = firstVisible;
}
}
}
},
_initializeLayout: function (listView, viewState) {
},
if (viewState === appViewState.snapped) {

listView.layout = new ui.ListLayout();
} else {
listView.layout = new ui.GridLayout();
}
La primera lnea del cdigo en updateLayout obtiene el control ListView a travs del
mtodo querySelector:
JavaScript
Copiar
var listView = element.querySelector(".itemslist").winControl;
El cdigo restante de updateLayout comprueba el estado de visualizacin, configura una

animacin (no se muestra) y luego llama a _initializeLayout. _initializeLayout
establece la disposicin de los elementos en horizontal o vertical en ListView. Si la vista
actual es la vista acoplada, los elementos aparecern verticalmente. Si no, lo harn en una
vista de cuadrcula.
JavaScript
Copiar
if (viewState === appViewState.snapped) {
listView.layout = new ui.ListLayout();
} else {
listView.layout = new ui.GridLayout();
}
El patrn que siguen estos ejemplos de cdigo se usa en las plantillas Split y Grid. La
plantilla Split tambin admite un comportamiento nico en relacin con el estado de
visualizacin. De manera predeterminada, la pgina de vista dividida (split.html) de la
plantilla Split es una vista de dos columnas denominada vista Maestro y detalles. Con la
plantilla Split se define adems otra vista, denominada vista de una sola columna, cuando
el estado de visualizacin es acoplado o vertical. El cdigo que define y controla este
estado de visualizacin est en split.js. La funcin _isSingleColumn define el estado de
visualizacin de una sola columna:
JavaScript
Copiar
_isSingleColumn: function () {
var viewState = Windows.UI.ViewManagement.ApplicationView.value;
return (viewState === appViewState.snapped || viewState ===
appViewState.fullScreenPortrait);
},
La funcin _updateVisibility es una de las diversas funciones de split.js que llama al

mtodo _isSingleColumn. La funcin _updateVisibility activa y desactiva la
visibilidad de las columnas segn el estado de visualizacin actual y el elemento
seleccionado. Se llama a esta funcin en split.js mediante la funcin ready cuando la
pgina se carga y, de igual modo, mediante la funcin updateLayout cuando el estado de
visualizacin cambia. Lo que esta funcin hace en primer lugar es quitar la columna
principal, en caso de haber una definida (es decir, si la aplicacin ya se encontraba en la
vista de una sola columna).
JavaScript
Copiar
_updateVisibility: function () {
var oldPrimary = document.querySelector(".primarycolumn");
if (oldPrimary) {
utils.removeClass(oldPrimary, "primarycolumn");
}
if (this._isSingleColumn()) {
if (this._itemSelectionIndex >= 0) {
utils.addClass(document.querySelector(".articlesection"),
"primarycolumn");
document.querySelector(".articlesection").focus();
} else {
utils.addClass(document.querySelector(".itemlistsection"),
"primarycolumn");
document.querySelector(".itemlist").focus();
}
} else {
document.querySelector(".itemlist").focus();
}
}
Si la aplicacin est en la vista de una sola columna, _updateVisibility especifica una

nueva columna principal, cuyo tipo de columna se corresponde con el elemento
seleccionado. Si hay un elemento seleccionado, updateVisibility agrega la seccin de
detalles de dicho elemento (articlesection en el HTML), tal como se muestra aqu.
JavaScript
Copiar
utils.addClass(document.querySelector(".articlesection"),
"primarycolumn");
Si no lo hay, updateVisibility agrega en su lugar la seccin de lista de elementos

(itemlistsection en el HTML), tal como se muestra aqu.
JavaScript
Copiar
utils.addClass(document.querySelector(".itemlistsection"),
"primarycolumn");
Algunas funciones de split.js modifican el historial del botn Atrs o el comportamiento de

navegacin segn cul sea el estado de visualizacin. La funcin ready y la funcin
updateLayout modifican el historial del botn Atrs. Por su parte, la funcin
selectionChanged (a la que se llama cuando se selecciona un elemento de la vista de lista)
modifica el comportamiento de navegacin. Ya no veremos ms ejemplos aqu. Para
obtener ms informacin sobre la administracin del estado de visualizacin, consulta
Directrices para diseos.

Plantillas de Proyecto JavaScript para Aplicaciones de La Tienda Windows

Uploaded by

Document Information

Original Title

Copyright

Available Formats

Share this document

Share or Embed Document

Sharing Options

Did you find this document useful?

Is this content inappropriate?

Copyright:

Available Formats

Plantillas de Proyecto JavaScript para Aplicaciones de La Tienda Windows

Uploaded by

Copyright:

Available Formats

Plantillas de proyecto JavaScript para

aplicaciones de la Tienda Windows

Personas que lo han encontrado til: 2 de 2 - Valorar este tema

Plantillas de proyecto de cuadrcula para aplicaciones de la Tienda Windows

Plantillas de proyecto de aplicacin dividida para aplicaciones de la Tienda

Plantillas de proyecto de aplicacin de navegacin para aplicaciones de la Tienda

Plantillas de proyecto de aplicacin vaca para aplicaciones de la Tienda Windows

Plantilla de proyecto de aplicacin de diseo fijo para aplicaciones de la tienda

Caractersticas de codificacin comunes

Ciclo de vida de la aplicacin

Control del estado de visualizacin

pequeo resumen de cada plantilla, aqu encontrars informacin de implementacin

Plantillas de proyecto de cuadrcula para aplicaciones de la Tienda Windows

Archivos de proyecto de la plantilla Grid

default.html, que es el primero en cargarse y ofrece marcado para el host de

groupedItems.html, que es la pgina principal. Permite al usuario ver los grupos y

itemDetail.html, que constituye la vista de pgina completa de un elemento.

Esta plantilla tambin engloba los siguientes archivos JavaScript:

default.js, que especifica el comportamiento de la aplicacin cuando se inicia.

groupedItems.js, que especifica el comportamiento de la pgina principal.

groupDetail.js, que especifica el comportamiento asociado a la pgina de detalles

itemDetail.js, que especifica el comportamiento asociado a la pgina de elemento de

navigator.js, que implementa el modelo de navegacin de las plantillas JavaScript

La plantilla tambin incluye estos archivos CSS:

default.css, que especifica los estilos CSS de la pgina de host de contenido y de la

groupedItems.css, que especifica los estilos CSS de la pgina principal.

itemDetail.css, que especifica los estilos CSS de la vista de elemento de pgina

La plantilla Grid Application tambin incluye el archivo package.appxmanifest, que

Para obtener ms informacin sobre la implementacin de la plantilla Grid, consulta:

Caractersticas de codificacin comunes

Ciclo de vida de la aplicacin

Agregar datos a una plantilla de proyecto

Control del estado de visualizacin

Plantillas de proyecto de aplicacin dividida para aplicaciones de la Tienda

default.html, que es el primero en cargarse y ofrece marcado para el host de

items.html, que es la pgina principal. Este archivo permite a los usuarios

split.html, que es la pgina de vista dividida. En este archivo se definen dos

Esta plantilla tambin engloba los siguientes archivos JavaScript:

default.js, que especifica el comportamiento de la aplicacin cuando se inicia.

items.js, que especifica el comportamiento de la pgina principal.

split.js, que especifica el comportamiento de la pgina de vista dividida.

navigator.js, que implementa la navegacin relativa a las plantillas JavaScript de las

La plantilla tambin incluye estos archivos CSS:

default.css, que especifica los estilos CSS de la pgina de host de contenido y de la

items.css, que especifica los estilos CSS de la pgina principal.

split.css, que especifica los estilos CSS de la pgina de vista dividida.

La plantilla Split Application tambin incluye el archivo package.appxmanifest, que

Caractersticas de codificacin comunes

Ciclo de vida de la aplicacin

Agregar datos a una plantilla de proyecto

Control del estado de visualizacin

Plantillas de proyecto de aplicacin de navegacin para aplicaciones de la

Archivos de proyecto para la plantilla Navigation

default.html, que es el primero en cargarse y ofrece marcado para el host de

home.html, que es la pgina principal. Muestra un ttulo de bienvenida.

Esta plantilla tambin engloba los siguientes archivos JavaScript:

default.js, que especifica el comportamiento de la aplicacin cuando se inicia.

home.js, que especifica el comportamiento de la pgina principal.

navigator.js, que implementa el modelo de navegacin de las plantillas JavaScript

La plantilla tambin incluye estos archivos CSS:

default.css, que especifica los estilos CSS de la pgina de host de contenido y de la

home.css, que especifica los estilos CSS de la pgina principal.

La plantilla Navigation Application tambin incluye el archivo package.appxmanifest, que