Windows 8 – Creando nuestra primer aplicación Metro

Como ya sabran, hace unos meses se realizo el evento Build Windows en el cual se presentaron las versiones Preview de algunos productos de Microsoft, entre las cuales se encuentran Windows 8, Visual Studio 11 Express, Expression Blend 5, IE10… además de muchas otras novedades.

Build Windows

Build Windows

De Windows 8 una de las cosas que mas me llamo la atención respecto de su versión anterior Windows 7  fue la interfaz de usuario denominada Metro, la cual tiene cierta similitud a la de Windows Phone y esta orientada principalmente a los dispositivos “touch“.

Interfaz Metro de Windows 8

Interfaz Metro de Windows 8

Como podemos observar en la imagen de arriba, los accesos a las aplicaciones están organizadas en una especia de cuadricula, y cada una de ellla esta representada por algo similar a los “Live Tiles” de  Windows Phone 7  (son los “rectángulos” que ademas de hacer la función de “icono” de una app, pueden contener tener cierta funcionalidad extra, como por ejemplo mostrar información o notificaciones de forma dinámica sin necesidad de acceder a la misma). Esta de mas decir que los cambios respecto al tradicional escritorio (que veremos mas adelante no desapareció) son significativos.

La idea de este post es mostrarles los pasos que deben seguir para crear una app Metro utilizando Visual Studio 2011 Express y finalmente poder correrla en Windows 8.

Lo primero que vamos hacer es descargar e instalar Windows 8 Developer Preview desde aquí. Les recomiendo que descarguen la ISO Windows 8 Developer Preview with developer tools English, 64-bit (x64) que viene con el kit de desarrollo integrado. Respecto de la instalación, solo decirles que es similar a la de Windows 7.

Una vez que terminemos de instalar el SO e iniciemos sesión (podemos utilizar nuestra cuenta de Windows Live), lo siguiente que vamos a hacer será ejecutar Visual Studio 11 Express for WDP (el acceso lo podrán encontrar a la derecha de la pantalla de inicio).

Iniciando Visual Studio 2011 Express

Iniciando Visual Studio 2011 Express

Como verán, el clásico escritorio no desapareció (aunque tiene algunos cambios) y VS2011 sigue manteniendo el aspecto de VS2010, pero con varias mejoras, algunas de ellas las iremos nombrando a lo largo del post.

Continuemos, es el turno de crear una nueva aplicación Windows Metro Style con Javascript  – …sí, leyeron bien, una app de “escritorio” con Javascript – . En el menú seleccionamos “File/New/Project…” y dentro de los templates disponibles vamos a seleccionar “Javascript/Split Navigation” (dicho template esta pensado para crear aplicaciones del estilo lector de feeds muy simples y que podemos organizar en categorías):

Seleccionando el template del proyecto

Seleccionando el template del proyecto

Tal como comentaba antes, desde ahora vamos a poder crear aplicaciones de escritorio utilizando HTML5 , CSS y Javascript, una excelente noticia para quienes desarrollamos aplicaciones web! 🙂 (no obstante, tenemos la posibilidad de crear aplicaciones en C# o VB utilizando XAML para definir la interfaz).

Si inspeccionamos un poco el proyecto, vamos a ver elementos mas que conocidos: una carpeta con archivos CSS en donde tendremos nuestras hojas de estilos, documentos HTML 5 en donde construiremos la interfaz de nuestras apps y los script de Javascript que tendrán toda la lógica de las mismas.

Estructura del proyecto

Estructura del proyecto

Dentro de la carpeta winjs están las librerías Javascript que la gente de Microsoft ha creado especialmente para este tipo de aplicaciones. Esta nuevas libs nos proveen de un conjunto de archivos (CSS y JS) que nos permitirá construir y personalizar aplicaciones Metro de una manera sencilla.

Un ejemplo bien simple del uso de esta librería es la siguiente instrucción que nos permite iniciar la app:

WinJS.Application.start();

También podemos definir el comportamiento de eventos, como en el siguiente ejemplo:

WinJS.Application.onmainwindowactivated = function (e) {
    ...
}

Luego de crear la app lo que hice fue meter un poco de mano en el código y modificar la lógica existente para que podamos leer las entradas del blog (inicialmente solo utiliza datos estáticos que genera por código). No voy a entrar en detalles acerca del código en este caso, pero he utilizado entre otras cosas algunas funciones de la nueva librería WinJS, como por ejemplo la función WinJS.xhr que me permitió hacer un XMLHttpRequest (xhr) a los feeds del blog.

Otro punto a favor (aunque no una novedad), es la integración con Expression Blen 5 Developer Preview, el cual utilice para modificar algunos aspectos de diseño – sigo teniendo bien en el fondo espíritu de diseñador – :

Modificando la interfaz con Expression Blend

Modificando la interfaz con Expression Blend

Algunas de las mejoras de VS2011 que fui encontrando mientras “trabajaba” en la aplicación, fueron el Intellisense para Javascript, el editor de CSS (a continuación un ejemplo del selector de colores) y un buscador bastante mas práctico que el anterior:

Nuevas características de W8

Nuevas características de W8

Finalmente llego el momento de ejecutar nuestra app, así que le presionamos F5, esperamos a que compile y que no haya errores 😀 y a disfrutar de nuestro lector del blog Metro!

Mi primera aplicación Metro corriendo en Windows 8

Mi primera aplicación Metro corriendo en Windows 8

Si bien en este ejemplo no lo he utilizado, podríamos perfectamente trabajar con librerías como jQuery, así que seguimos sumando puntos a favor los desarrolladores web! 🙂

Este ha sido un breve resumen de lo que podemos hacer en Metro, espero que les haya sido de utilidad y que les sirva como base para empezar a trabajar con todo lo nuevo que se viene! (….mejor dicho, que llegó!).

Expression Blend 4 – Creando diccionario de estilos

En este post vamos a ver como podemos generar estilos personalizados de nuestros controles y agruparlos en un único lugar (una especie de Theme de nuestros controles) para nuestras aplicaciones WPF y porque no Silverlight.

Para este ejemplo vamos a trabajar con los controles de una aplicación WPF y la técnica que vamos a utilizar es la de los diccionarios de recursos que nos ofrece este tipo de aplicaciones.

El primer paso será crear una aplicación WPF y a continuación abrirla con Expression Blend, en mi caso la versión 4 (recuerden que no es necesario trabajar con EB para poder crear nuestros diccionarios de recursos, podemos hacerlo directamente en Visual Studio, pero por comodidad voy a trabajar con dicha herramienta).

Abierto el proyecto, desde la pestaña Projects hacemos click derecho en el proyecto y agregamos un nuevo item (“Add new item…“) del tipo Resource Dictionary , al cual llamaremos SkyResourceDictionary.xaml y en el cual estará contenido las definiciones de los estilos.

Creando nuestro diccionario de recursos

Creando nuestro diccionario de recursos

Vamos a definir los estilos de los controles, para esto abrimos el archivo MainWindow.xaml y agregamos un botón, seleccionamos el mismo y vamos a la siguiente opción del menú “Object/Edit Style/Create Empty…“. Se nos abrirá una ventana como la siguiente, y es aquí donde vamos a tener que hacer las configuraciones más importantes:

Creando un estilo

Creando un estilo

Detengamonos a observar un poco los campos de esta ventana:

  • Name (Key): aquí es donde especificamos si queremos que el estilo se aplique a todos los elementos de ese tipo (Apply to All), en este caso sería a todos los Button o si preferimos especificar un “nombre” y que solamente se aplique a todos aquellos objetos a los que les definamos dicho estilo. En este ejemplo elegiremos la segunda opción y llamaremos al estilo EstiloBoton.
  • Define in: en nuestro caso nos interesa que la definición del estilo esté dentro de nuestro diccionario de recursos, por lo tanto elegiremos la opción Resource dictionary y seleccionamos nuestro archivo anteriormente creado.

Aceptamos y vamos a ver que solo aparece nuestro botón, es aquí donde definimos todas las cuestiones estéticas:

Aplicando los estilos a nuestro control

Aplicando los estilos a nuestro control

Y una vez terminado pulsamos sobre el siguiente boton ubicado en la pestaña Objects and Timeline:

Finalizando la edición

Finalizando la edición

De esta forma volvemos al formulario sobre el que estábamos trabajando inicialmente. Ya tenemos definido nuestro primer estilo y agregado a nuestro diccionario de recursos! (ahora podemos ir haciendo lo mismo para los demás controles).

Para aplicar estilos sobre nuevos controles simplemente hacemos click derecho sobre el control y vamos a la opción “Edit Template/Apply Resource/” y elegimos el estilo que deseamos aplicarle, en nuestro caso si lo hariamos sobre un control Button elegiríamos EstiloBoton.

Para saber que grupo de estilos esta asociado a nuestra aplicación, podemos ir a la pestaña Properties y expandir el archivo App.xaml (que contiene las definiciones de configuración de nuestra aplicación), en el mismo podemos observar, en el caso de que exista, el diccionario de recursos asociado mirando la referencia Linked To.

Archivos de recursos asociado a la aplicación

Archivos de recursos asociado a la aplicación

Espero que les sea de utilidad!

Expression Blend

Expression Blend es una herramienta de diseño que nos permitirá interactuar con los proyectos Silverlight, mejorando la experiencia sobre todo en el trabajo de diseñar y animar nuestras aplicaciones.

Esta herramienta trabaja de forma totalmente integrada con Visual Studio, y un proyecto Silverlight puede ser abierto por ambas aplicaciones, además un cambio realizado en alguna de las herramientas, se ve reflejado instantáneamente en la otra.

Nuestra aplicación abierta con Expression Blend 3

Nuestra aplicación abierta con Expression Blend 3

Todo esta facilita el trabajo en conjunto entre diseñadores y desarrolladores, ya que los primeros podrán trabajar en los “enmaquetados” – controles personalizados, animaciones en objetos, CSS… – dejando a los desarrolladores libres de estas tareas.

Otra ventaja para los diseñadores (atento @joamuriel): podremos importar nuestros trabajos realizados en Adobe Photoshop y Adobe Illustrator :D.

Algunas caracteristicas de esta versión son:

  • Intellisense: posee intellisense para código C#, VB y XAML.
  • Importación de Adobe Photoshop e Illustrator: podremos ver y seleccionar capas, personalizarlas y reagruparlas, y tener elementos de Photoshop/Illustrator que mantienen los formatos originales en XAML mediante la conversión de vectores a XAML.
  • Datos de ejemplo: nos permite trabajar con datos de ejemplo en tiempo de diseño, permitiendo, de una manera sencilla, ver cómo se verá nuestra aplicación sin tener que acceder a los datos.
  • TFS: incluye soporte para Team Foundation Server (TFS) – teniendo todas las ventajas que nos ofrece el control de código fuenta.
  • Sketchflow: Sketchflow permite crear prototipos, experimentar con experiencias dinámicas, e incorporar feedback de los clientes mucho más fácilmente.
  • Behaviors: podremos encapsular interacciones complejas de diseño en componentes reusables que pueden aplicarse directamente a un control en el diseño.
  • Otras mejoras: soporte para animaciones, transformaciones 3D, efectos visuales…

En nuestro desarrollo trabajaremos con Expression Blend 3 y una de nuestras primeras tareas con esta herramienta será trabajar en el diseño de nuestro control.

Más sobre esta herramienta aquí.