Aplicaciones Metro. Hola Mundo.

En esta entrada vamos a realizar nuestra primera aplicación MetroStyle. Será el típico”Hola Mundo”. Si algo muy común pero perfectamente válido para poder entender las bases tanto a nivel de interfaz como a nivel de desarrollo necesarias para realizar este tipo de aplicaciones.

Comenzamos. Lo primero que puedes estar preguntandote es, ¿A que te refieres con realizar una aplicación MetroStyle?, ¿Qué es el MetroStyle?

Si has desarrollado o probado alguna vez un móvil con Windows Phone o  has utilizado ya Windows 8, muy probablemente hayas leído o escuchado en algun sitio la palabra Metro.

Metro es un lenguaje de diseño con ciertas peculiaridades que analizaremos brevemente a continuación y muy diferente de las tendencias en diseño utilizadas hasta ahora.

Los principios de diseño Metro son los 3 siguientes:

  • Bauhaus. Esta escuela alemana de diseño modernista (creado en la década de 1920 por el arquitecto Walter Gropius) es uno de los orígenes del diseño Metro. Esta escuela se caracteriza por una fuerte búsqueda de la simplificación del contenido evitando excesivos adornos.

  • International Typographic Style. El estilo tipográfico internacional (tipografía creada en Suiza en la década de 1950) busca recaer la atención en los aspectos funcionales, con el uso de una tipografía limpia y nítida. Se trata de la utilización de colores planos junto con el uso de la simetría. Vemos este estilo con normalidad en nuestra vida cotidiana. Por ejemplo, en aeropuertos, en líneas de metro, en paradas de autobuses, etc. Estamos en contante movimiento siempre con menos tiempo del que desearíamos por lo tanto es necesario que obtengamos la información con mayor rapidez y precisión posible.

  • Emotional impact through motion. Muchas películas se basan en la tipografía cinética, es decir, “texto en movimiento” para introducir al espectador en la película, transmitir una emoción, sobretodo en los créditos iniciales. Por poner un ejemplo, seguro que recuerdan el texto en movimiento hacia arriba utilizado en la pelicula “Star Wars”. Esto ya lo podemos ver por ejemplo, en Windows Phone, con el uso del control Panorama. El control Panorama crea este efecto de movimiento fluido.

En Windows 8 tenemos disponible dos interfaces distintas (disponibles en el mismo entorno, podemos cambiar de una a otra con suma facilidad):

  • Metro. La gran apuesta. Aparte de lo que posiblemente hayas ya leido o escuchado (adaptado a pantallas táctiles, fluidez, transiciones, etc.) nos plantea un nuevo modelo de ejecución en un sandbox sin tener acceso a recursos nativos o de otras aplicaciones. Tenemos disponible nuestro almacenamiento aislado, se debe pasar una certificación por parte de Microsoft para estar disponible en un nuevo canal de distribución, el Windows Store, donde se agruparán las aplicaciones Metro Style. Te suena, ¿verdad?. Es similar a lo ya visto en Windows Phone.
  • Clásica. Es el escritorio tradicional de Windows sin apenas importantes quizas salvando la exclusión del botón inicio. Todo el software desarrollado hasta ahora seguirá funcionando en equipos con arquitectura no ARM (WPF sigue vivo para quien lo quería enterrar).

Y… ¿como podemos desarrollar para Windows 8?

Aquí aparece una palabra que posiblemente ya hayas escuchado, WinRT.

WinRT (Windows Runtime) es la nueva API que utilizaremos para desarrollar aplicaciones Metro Style. Es una API  orientada a objetos que nos permite el desarrollo con distintos lenguajes:

  • C++(lógica) usando XAML (interfaz).
  • .NET (lógica, tanto C# como VB) usando XAML (interfaz).
  • JavaScript (lógica) usando HTML5 con CSS3 (interfaz).

La API aparece de cara al desarrollador como algo totalmente nativo independientemente del lenguaje elegido.

Por debajo de las aplicaciones Metro se usa el CLR del Framework de .NET (4.0) junto a una versión reducida de la BCL del Framework .NET (4.5). No confundir dicha versión reducida con el .NET Framework Client Profile.

Bien, vamos a comenzar a desarrollar. Los requisitos y como preparar el entorno es algo de lo que hablamos en esta entrada. A continuación, abrimos Visual Studio 11 y creamos un nuevo proyecto. Nos aparecerá una ventana como la siguiente:

Como se puede ver en la captura tenemos por defectos distintas plantillas de proyectos (vamos a mencionar las principales):

  • Blank Application. Proyecto base más simple. Contamos con una simple página por defecto además de todos los recursos necesarios para la aplicación.
  • Split Application. Especialmente pensado para mostrar una lista de elementos junto a su vista de detalles. Muy utilizado en aplicaciones tipo gestor de correo, cliente rss, etc.

  • Grid Application. Si estás familiarizado con el desarrollo de Windows Phone y has utilizado el control panorama puede ayudarte a hacerte una idea. Mostramos un conjunto de elementos organizados en grupos. Nos movemos utilizando un scroll horizontal. Al pulsar sobre la cabecerá se redireccionará a una página donde se muestran los detalles de la colección. En caso de pulsar sobre un elemento de la colección se nos mostrará una página con los detalles del elemento seleccionado. Realizaremos múltiples ejemplos en próximas entradas donde trataremos con más detalle esta plantilla. Muy usado en aplicaciones de noticias, colecciones multimedias de fotos o videos, etc.

En nuestro caso seleccionaremos la plantilla más básica de todas (“Blank Application”). El lenguaje utilizado será XAML junto con C#.

¿Porque?

Es el hemos estado utilizando ahora para el desarrollo de Windows Phone por ejemplo. El objetivo es conseguir el aprendizaje lo más rápido posible. En futuras entradas el combinado de XAML más C# seguirá siendo el lenguaje más elegido. Sin embargo, realizaremos también ejemplo utilizando otros lenguajes (principalmente usando HTML5 al ser la opción más novedosa).

Al crear nuestra aplicación utilizando C#, la interfaz la definiremos usando XAML, y la lógica de la aplicación se escribirá en el code behind subyacente utilizando en este caso C#.

Al crear el proyecto se nos creará de forma automática la siguiente estructura (archivos principales):

  • AssemblyInfo.cs Contiene metadatos que definen información básica sobre la aplicación como por ejemplo la versión.
  • App.xaml Necesaria para que la interfaz se muestre.
  • App.xaml.cs Archivo base de la aplicación. Controla el ciclo de vida de la aplicación, etc.
  • Assets/* Es el conjunto de imágenes utilizadas por el proyecto (imágen utilizada como logo en el Tile, etc.).
  • BlankPage.xaml Página que utilizaremos para definir la interfaz de nuestra aplicación.
  • BlankPage.xaml.cs Archivo de código perteneciente a la página BlankPage.xaml.
  • Package.appxmanifest Contiene metadatos importantes que definen el comportamiento de nuestra aplicación.
  • StandardStyles.xaml Contiene los estilos por defecto utilizados en la aplicación.

Centremonos en el código. Antes que nada tengamos claro el objetivo a conseguir. Añadiremos un botón que al ser pulsado nos mostrará en pantalla un saludo. Vamos a modificar el archivo BlankPage.xaml. Como podemos ver la extesión del fichero es .xaml. Para los que tengan experiencia con el desarrollo en .NET les será totalmente familiar.  Para los que no, XAML es un lenguaje declarativo pensado para la creación de interfaces gráficas. Ya se utilizaba para la creación de interfaces en WPF o Silverlight por ejemplo. El código que tenemos antes de hacer cualquier tipo de modificación es el siguiente:

<Page
  x:Class="Hola_Mundo.BlankPage"
  xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
  xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
  xmlns:local="using:Hola_Mundo"
  xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
  xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
  mc:Ignorable="d">
     <Grid>

     </Grid>
</Page>

Nos centramos en el cuadro de herramientas (situado por defecto a la izquierda) donde seleccionaremos un Button y un Textblock y los arrastraremos a la vista de diseño. Tras arrastrar los controles:

<Grid>
     <Button Content="Saludar"/>
     <TextBlock x:Name="tbSaludo"/>
</Grid>

Nos dirigimos a las propiedades del botón (clic derecho sobre el control y pulsamos sobre propiedades). Seleccionamos la pestañas de eventos. Nos aparecerá el listado de eventos a los que puede responder el botón.

Para suscribirnos al evento Click del botón bastará con realizar doble clic sobre dicho evento.  Seremos redirigidos a la zona donde escribiremos todo el código que controlará y responderá a la interfaz de usuario, BlankPage.xaml.cs, creandose de manera automática el manejador del evento:

private void Button_Click(object sender, RoutedEventArgs e)
{

}

Añadiremos dentro del evento clic la lógica necesaria para mostrar un mensaje tras pulsarlo. Para ello utilizaremos la propiedad Text del TextBlock que añadimos anteriormente:

private void Button_Click(object sender, RoutedEventArgs e)
{
     tbSaludo.Text = "Hola Mundo!";
}

Si volvemos al XAML donde definimos el botón veremos que se ha añadido de manera automática el evento clic del botón:

<Grid Background="Orange">
     <StackPanel HorizontalAlignment="Center" VerticalAlignment="Center">
          <Button Content="Saludar" Click="Button_Click"/>
          <TextBlock x:Name="tbSaludo" FontSize="44"/>
     </StackPanel>
</Grid>

Llegado a este punto es hora de compilar nuestro proyecto. Basta con pulsar el botón F5.

Puedes ver en video el resultado de nuestro ejemplo a continuación:

También puedes descargar el ejemplo realizado:

Nada más en esta entrada. En resumen:

  • Hemos visto los principios de las aplicaciones Metro Style.
  • Hemos realizado una leve introducción a WinRT.
  • Hemos visto las plantillas básicas con las que contamos por defecto.
  • Hemos creado un pequeño proyecto utilizando XAML para definir la interfaz y C# para la lógica.

En próximas entradas seguiremos viendo particularidades del desarrollo de aplicaciones Metro Style. Espero que lo visto en esta entrada os sea de utilidad. Recordar que cualquier tipo de duda o sugerencia podéis dejarla en los comentarios.

Más información:

Responder

Introduce tus datos o haz clic en un icono para iniciar sesión:

Logo de WordPress.com

Estás comentando usando tu cuenta de WordPress.com. Cerrar sesión / Cambiar )

Imagen de Twitter

Estás comentando usando tu cuenta de Twitter. Cerrar sesión / Cambiar )

Foto de Facebook

Estás comentando usando tu cuenta de Facebook. Cerrar sesión / Cambiar )

Google+ photo

Estás comentando usando tu cuenta de Google+. Cerrar sesión / Cambiar )

Conectando a %s