Esta sección y sus contenidos han sido contratados específicamente por la marca que se menciona Volver a Genbeta Dev.com

Plantilla base para desarrollar la aplicación de Genbeta Dev para Windows 8

5 comentarios

Plantilla para proyecto de app w8

Para iniciar el desarrollo de la aplicación de Genbeta Dev para Windows 8 vamos a hacer un recorrido por la documentación que ofrece Microsoft sobre el desarrollo de aplicaciones. Es necesario que los participantes en el Workshop hayáis leído y estudiado esta documentación.

Recordamos que para desarrollar aplicaciones de la Tienda Windows es necesario disponer de Visual Studio usando Windows 8. Al crear una aplicación lo primero que debemos seleccionar es el lenguaje de programación y, a continuación, una plantilla para el proyecto.

Microsoft pone a nuestra disposición distintos tipos de plantillas para cada lenguaje:

Hay tres tipos de plantillas disponibles:

  • Aplicación vacía. Un proyecto sin contenido
  • Aplicación de cuadrícula. Esta es la plantilla por la que nos decantaremos en nuestro desarrollo en GenbetaDev ya que proporciona un excelente punto de partida para crear una aplicación que permita buscar entre categorías y visualizar el contenido en detalle
  • Aplicación divida. Ideal para proyectos con una vista maestro y otra de detalle.

Plantilla de proyecto Javascript

Nosotros hemos decidido para el desarrollo de nuestra aplicación usar el stack de Javascript y HTML. A continuación, os hacemos un pequeño resumen de la estructura de las plantillas disponibles. Es decir, donde iremos colocando lo que vayamos desarollando para seguir la estructura correcta, además de comentar el modelo de navegación y de datos de una aplicación en Windows 8.

Valorando el prototipo inicial de nuestra aplicación, la plantilla de proyecto de cuadrícula es una forma estupenda para comenzar con el desarrollo. Grid Application abre de forma predeterminada una página principal en la que se recoge una lista de grupos, allí es donde tendremos las distintas categorías de artículos y los posts de portada que queremos destacar. Cuando un usuario selecciona un grupo, la aplicación abre la página de detalles en dicho grupo, con una lista de los artículos a la derecha. Seleccionando sobre ese item podemos verlo a pantalla completa.

Ficheros base sobre los que trabajaremos

Esta plantilla incluye distintos archivos HTML:

  • default.html, es el que nos servirá de contenedor
  • groupedItems.html, es el contenido principal con los grupos y elementos
  • groupDetail.html muestra el contenido en forma de lista vertical a la derecha con los grupos y los elementos en la parte izquierda
  • itemDetail.html, que constituye la vista del detalle de los elementos, es decir, los posts de forma individual

En la parte de ficheros Javascript:

  • default.js se especifica el comportamiento de la aplicación cuando se inicia
  • groupedItems.js, se especifica el comportamiento de la página principal
  • groupDetail.js se especifica el comportamiento asociado a la página de detalles del grupo
  • itemDetail.js será donde manejemos el comportamiento de la página de elementos
  • navigator.js se implementa el modelo de navaegación de las plantillas Javascript de las aplicaciones de la tienda Windows
  • data.js, es el objeto que expone los datos al resto de aplicación. Aquí manejaremos los datos del servidor que nos lleguen en formato rss para mostrarlos en la app.

Los archivos base CSS:

  • default.css especifica los estilos de la página contenedora
  • groupedItems.css especifica los estilos de la página principal CSS
  • groupDetail.css especifica los estilos CSS de los detalles de grupos
  • itemDetail.css especifica los estilos CSS de la vista de los elementos del detalle. Es decir, los posts que vamos a visualizar en la app.

Además de estos archivos, veréis que la plantilla que usaremos incluye los archivos package.appxmanifest (descriptor del paquete de la aplicación para Windows) y un archivo PFX que se usa para firmar el archivo appxmanifest. Sin olvidarnos, de que el paquete de la plantilla incluye diversas imágenes que usaremos en la app.

Repositorio en GitHub

Para el desarrollo de la aplicación contamos con un repositorio del equipo de Genbeta Dev para gestionar el código. Allí subiremos la estructura básica de la aplicación para que vayamos trabajando de forma colaborativa.

Más información | Tutorial crear la primera aplicación de la tienda Windows con Javascript
Github | genbetadev / app-genbetadev-w8

+ Deja tu comentario

Comentarios