Hola UWP: Hola Universal Windows Platform

El post originar lo puedes leer en el blog de Satur

Con la salida de Windows 10 han llegado las Universal Windows Platform Apps y ahora dedicaré un tiempo para escribir una serie acerca de cómo iniciarse en el desarrollo de estas aplicaciones y algunos cambios que son importantes. Resolvamos primero la siguiente pregunta.

¿Qué son las Universal Windows Platform?

En resumen, las aplicaciones Universal Windows Platform son las nuevas aplicaciones de Windows 10, las cuales incluyen un núcleo común para todos los dispositivos con Windows 10 y que además incluye un API específica para cada una de las familias de dispositivos, permitiéndonos desarrollar aplicaciones con tiempo, esfuerzo y recursos menores en los diferentes dispositivos de la familia Windows 10 comparado con el desarrollo por separado.

Si necesitas más información puedes ver la presentación que he realizado hace algún tiempo en este link o ver el siguiente vídeo.

Las herramientas

Veamos las herramientas que nos serán necesarias para el desarrollo de estas aplicaciones.

Visual Studio 2015 y Microsoft Blend

Primero vamos a necesitar Visual Studio 2015 en cualquiera de sus versiones Enterprise, Professional o Community que además incluyen Blend (una herramienta para hacer interfaces de usuario mucho más atractivas con menor esfuerzo que en Visual Studio).

Te dejo el link donde puedes descargar la versión Community y ver precios de las otras versiones aquí.

Visual Studio

SDK de desarrollo

Por lo general al inicio de la instalación de Visual Studio 2015 se te ofrece la opción de agregar las herramientas de desarrollo para Universal Windows Platform Apps, selecciónala y el asistente instalará todo lo necesario, asegúrate de seleccionar también los emuladores.

Si no elegiste la instalación anterior siempre puedes descargar el SDK por separado en el Dev Center, solo tienes que buscar la opción que aparece en la siguiente imagen y descargar el instalador.

sdk

Creando nuestro primer proyecto UWP

Para generar nuestra primer aplicación UWP, solo tienes que ir al menú File -> New -> Project.
uwp1
A continuación, seleccionemos la opción Windows y después una aplicación en blanco tal como se muestra en la siguiente figura.
uwp2

Cambiemos un poco el código de MainPage.xaml y agreguemos la siguiente línea dentro del Grid.

 <TextBlock Text="¡Hola Windows 10!" VerticalAlignment="Center" HorizontalAlignment="Center" FontSize="35"></TextBlock>  

Ahora compilemos, ejecutemos nuestra aplicación y ¡Listo!

Si tienes acceso a una raspberry con Windows 10 IoT también puedes ejecutar la aplicación y puedes probar en los dispositivos móviles con Windows 10.

Una pregunta que surgió en un grupo y que considero es común, es como podemos quitar el contador de frames que aparece en la esquina superior izquierda el cual es útil para monitorear aplicaciones que utilicen muchos gráficos, la respuesta es muy sencilla solo tenemos que cambiar el valor de la propiedad EnableFrameRateCounter a false en el archivo App.xaml.cs.

 #if DEBUG
    if (System.Diagnostics.Debugger.IsAttached)
    {
        this.DebugSettings.EnableFrameRateCounter = false;
    }
#endif

¿Cuál es la estructura general de los Universal Windows Platform?

Existen componentes comunes en todos los proyectos UWP y que van a resultar conocidos para todos los desarrolladores que tengan experiencia con proyectos con XAML,veamos los más relevantes.

Los archivos App.xaml y App.xaml.cs

App.xaml.cs es el archivo de entrada a todas las aplicaciones UWP y contiene los métodos que se encargan de controlar los eventos de activación (el cual es sobrescrito) y suspensión.
En el proyecto que hemos generado por default nos ha agregado una llamada al método InitializeComponent() también ha inicializado Application Insights(Un sistema de monitorización que veremos más adelante) y ha agregado el método encargado de controlar el evento Suspending.

Nuestra página principal MainPage

Esta vista está compuesta por MainPage.xaml y MainPage.xaml.cs y hereda de la clase Page, en la primera podemos manejar todos nuestros elementos gráficos de una manera muy cómoda y en el segundo archivo podemos agregar toda nuestra lógica y manejadores de eventos, aunque como hemos visto en una serie anterior en aplicaciones empresariales lo más recomendable es implementar el patrón MVVM.

Para mayor información del patrón MVVM visita el siguiente link

El archivo de manifiesto del paquete

En el archivo Package.appxmanifest se encuentra la descripción y la identificación de tu aplicación, es en este archivo donde podemos agregar capabilities y extensions además de que puedes administrar las pantallas de inicio, los Tiles y logos. Para modificar este archivo, no es necesario que conozcas todos los tags XML de cada una de las características ya que contamos con el Manifest editor (editor de manifiesto) que nos permite manejar todo de una forma gráfica, ¿Fácil no?

Package.appxmanifest

El folder de referencias

Es común en todos los proyectos utilizar librerías adicionales de terceros y estas están dentro del folder references en el cual puedes también almacenar los archivos de los paquetes que agregues de Nuget.

Las propiedades del proyecto

El archivo de propiedades es donde puedes definir como se compilará tu proyecto, actualizar las versiones de tu proyecto y configuraciones para hacer debug de tu proyecto entre otras cosas.

Con esto llegamos al final de este post, te invito a suscribirte a la lista de correos para mantenerte informado de las nuevas entradas de esta serie antes que nadie y si tienes alguna duda puedes encontrarme en twitter como @saturpimentel.

Nos vemos.

¡Saludos!