Programar aplicaciones Metro en Windows 8: "Hola Mundo"

Gracias a las plantillas de proyecto que forman parte de la instalación de Visual Studio 2012 tenemos la posibilidad de crear una primera Aplicación Metro que sea más sofisticada y completa que el típico “Hola Mundo” al que estamos acostumbrados en otras tecnologías.

Para crear esta primera aplicación empezaremos por abrir Visual Studio 2012 y navegar al menú File -> New -> Project.

Deberemos navegar al nodo donde se encuentren las plantillas de proyecto de JavaScript y seleccionar un proyecto de tipo Grid App y darle nombres a la solución y el proyecto. En caso de no estar familiarizado con VS, es importante saber que en este IDE el código se organiza soluciones que pueden contener uno o más proyectos. Cada proyecto puede ser, a su vez, una aplicación en sí mismo, una librería de clases, un servicio web, una definición de un esquema de base de datos, etc. De esta forma, para una aplicación con código en cliente y servidor, podríamos tener una única solución con varios proyectos representando todas las piezas necesarias para su correcto funcionamiento.

Tras dar valor a los campos solicitados y pulsar OK tendremos que esperar unos segundos mientras Visual Studio crea la nueva estructura de código, con una solución y un proyecto en ella.

Estructura de los proyectos

Para poder ver la estructura de ficheros y proyectos que Visual Studio crea por nosotros al usar una plantilla de proyecto, simplemente tenemos que ir a la ventana de Solution Explorer. Nos encontraremos algo similar a lo que muestra la siguiente imagen.

Algunas ideas que es importante tener en cuenta.

• En la carpeta References podemos encontrar las referencias a código externo que va a requerir la aplicación. Por defecto Visual Studio nos carga una referencia a WinJS, que es la librería base para la creación de Aplicaciones Metro con JavaScript. A través de ella podremos invocar a WinRT.

• En la carpeta pages podemos encontrar las distintas páginas de que se compone la aplicación, organizadas en carpetas que contendrán las tres piezas que forman cada página: HTML, CSS y JavaScript.

• En la carpeta js podemos encontrar otros códigos script que la aplicación necesitará pero que no están directamente relacionados con una página concreta.

• En todo proyecto habrá ciertos ficheros obligatorios para su correcto funcionamiento, como son la página cargada por defecto al activar la aplicación (default.html), una clave para firmar la aplicación (fichero con extensión .pfx) y un manifiesto (package.appxmanifest) que permite declarar capacidades que la aplicación tiene y permisos que requiere para ejecutarse, entre otras cosas.

Por último, desde esta ventana podremos añadir nuevos elementos a los proyectos, simplemente pinchando el botón derecho del ratón para mostrar el menú contextual.

Compilación y ejecución

Compilar, desplegar, ejecutar y depurar es tan sencillo como pulsar F5. En ese momento Visual Studio compilará la aplicación, creará el paquete, lo instalará en el entorno que le hayamos indicado (nuestra máquina, por defecto), lo lanzará y conectará el depurador a la aplicación resultante. Lo que veremos, para la aplicación que acabamos de crear, será similar a esto.

En esta pantalla, la inicial de la aplicación, podemos ver elementos de información agrupados. En realidad toda esta información es simple relleno y se define en el fichero data.js contenido en la carpeta js del proyecto.

Sin embargo, es suficiente para permitirnos ver toda la funcionalidad que tiene la aplicación. Si pulsamos en el nombre de alguno de los grupos navegaremos a la página que muestra información para cada grupo.

Si, por el contrario, seleccionamos un ítem concreto, será a la pantalla de información detallada de cada ítem a donde navegaremos automáticamente.

Además la aplicación trae una implementación para Snapped View. Este tipo de vista facilita la multitarea en dispositivos táctiles, permitiendo que dos aplicaciones compartan la pantalla. Sin embargo una de las dos tendrá una vista reducida, consistente en sólo 320 pixeles de ancho, de forma que tendrá que adaptar la información que está mostrando para seguir siendo útil aún en estas circunstancias.

Para poner la aplicación en estado Snapped View simplemente tendremos que pinchar en la parte superior de la pantalla y, sin soltar, arrastrar hacia uno de los lados de la pantalla. En la siguiente figura podemos ver el resultado.

Todas las Aplicaciones Metro deben implementar este tipo de vista, puesto que gracias a ella los usuarios podrán sacarles más partido a sus dispositivos, al tiempo que los desarrolladores nos beneficiamos del hecho de que nuestra aplicación permanezca mayor tiempo en pantalla.

En Genbeta Dev | Programar aplicaciones Metro en Windows 8