31 Días de Windows 8 | Día 1: La aplicación en blanco

Este artículo es una traducción de “Día 1: La aplicación en blanco” de Jeff Blankenburg. Puedes encontrar aquí la versión original en inglés.

En el primer artículo de esta serie, pensamos que era importante cubrir las bases de una plantilla de tipo Windows Store Blank App para Visual Studio 2012. Cubriremos cada uno de los archivos y la razón por la que es importante así como muchas de las configuraciones que podrían estar ocultas en cada una. Esto debería darte una base sólida para el resto de la serie donde estaremos utilizando cada uno de estos archivos bastante.

Hay muchas otras plantillas de proyectos en Visual Studio 2012 pero somos de la opinión de que esas son excelentes plantillas de referencia en lugar de puntos de inicio para una aplicación real. Estas plantillas fueron hechas con un tipo específico de aplicación en mente y es complicado que tu idea encaje en esta arquitectura perfectamente. Casi siempre recomendamos iniciar con una plantilla en blanco cuando estás comenzando una aplicación real.

Aquí esta una vista del Explorador de Soluciones para una aplicación en blanco en una solución XAML.

Las imágenes

Comencemos con las sencillas, las imágenes en el folder “Assets”. Hay cuatro imágenes dentro de cada nuevo proyecto y cada una de ellas sirve a un propósito específico. Hemos creado cuatro versiones de esas imágenes (así como una adicional) de modo que es muy obvio de saber que imagen es cual cuando corras tu aplicación. Nosotros recomendamos ampliamente descargar estas imágenes y reemplazar las que se encuentran por defecto. Puedes descargar las 5 desde aquí. Una vez que hayas reemplazado las imágenes pre establecidas, corre tu proyecto para ver estas nuevas imágenes en sus ubicaciones como se describe abajo.

Logo.png

Esta es quizá la imagen más común que tu aplicación utilizará. Es una imagen pre establecida para el mosaico de tu aplicación en la pantalla de inicio del usuario. Es de 150 x 150 píxeles en tamaño.

SmallLogo.png

Esta imagen es usada cuando una lista de aplicaciones se muestra. Por ejemplo, cuando buscas por una aplicación en Windows 8 o en tu menú de Compartir. La imagen pequeña es de 30 x 30 píxeles. Con ese tamaño de imagen querrás asegurarte de que ti ícono realmente representa algo familiar para tu usuario. Yo recomiendo altamente solo un logo o cualquier imagen obvia.

SplashScreen.png

Esta es la imagen principal que carga cuando tu aplicación es iniciada. Hay algunos buenos trucos que puedes hacer con esto y los cubriremos más adelante en la serie. Por ahora, recuerda que esta imagen será siempre de 620 x 300 píxeles y estará vertical y horizontalmente centrada en la pantalla de tu usuario, sin importar el tamaño.

StoreLogo.png

Para ahorrar espacio en la tienda, tenemos un ícono mas pequeño a mostrar. Esta imagen es de 50 x 50 píxeles pero podrían ser los 2500 píxeles mas importantes en tu aplicación entera. Este es el ícono que los usuarios verán cuando se estén decidiendo acerca de que nuevas aplicaciones agregar a su dispositivo. Un ícono pobre indica una aplicación pobre para la mayoría de los usuario. Invierte un poco de tiempo en esta imagen.

WideLogo.png

Este es un ícono adicional que yo incluí en mi proyecto inicial. Necesitarás agregarlo en tu proyecto al dar un clic derecho en el folder Assets y escoger Agregar elemento existente. Esta imagen es de 310 x 150 píxeles y es usada para permitir que tu aplicación tenga un mosaico más amplio que únicamente un mosaico mas grande que el del tamaño predefinido de Logo.png

AssemblyInfo.cs

Este archivo contiene toda la, espera un poco, información de ensamblados para tu aplicación. Cosas como el número de las versiones, títulos, descripciones, etc. Pero recuerda… estos son los valores para tu ensamblado. Todos los nombres oficiales que son usados públicamente para tu aplicación en la tienda se encuentran en el App Manifest, nuestro siguiente archivo.

Package.appmanifest

Este archivo contiene toda la configuración, ajustes y declaraciones para tu aplicación. Es donde irás para casi cada cosa que esté relacionada a tu aplicación corriendo en una máquina con Windows 8. Por ejemplo, es aquí donde tu defines que el contrato de búsqueda sea habilitado o que ícono usar en cada situación. También define los colores por defecto del fondo, orientaciones y capacidades específicas que tu aplicación requerirá como el acceso a ubicación.

StandardStyles.xaml

Esas 1830 líneas amontonadas no son nada mas que una pila gigante de estilos predefinidos en XAML para que puedas utilizar. Estilos para cajas de texto, botones de radio, íconos de la barra de aplicación y mas. Realmente te recomiendo familiarizarte con estos estilos pero también es importante que recuerdes que cualquiera de estos estilos puede ser cambiado para encajar en tus necesidades. ¿No quieres un borde en todos tus botones? ¡Retíralo!

Quizá también consideres tus propios estilos para este archivo, solo recuerda que estos estilos estarán disponibles para cada página de tu aplicación gracias a nuestro siguiente archivo: App.xaml.

App.xaml

Este archivo es donde todo comienza. Es el primer archivo en ser cargado cuando tu aplicación inicia y contiene todos los recursos y ajustes de tu aplicación. Por defecto, este archivo solo contiene una línea valiosa de marcado.

 
<resourcedictionary Source="Common/StandardStyles.xaml"/>
Esto carga nuestro archivo de StandarStyles.xaml como un diccionario de recursos, marcando aquellos estilos disponibles en cada página de nuestra aplicación. La magia real de App.xaml se encuentra en su archivo de código C#: App.xaml.cs. Démosle un vistazo al que sigue.
App.xaml.cs
Este archivo, tal como lo hizo en Windows Phone, es donde la acción comienza. Es aquí donde se encuentran todos los métodos de inicio de tu aplicación como OnLaunched(), OnSuspending() y más. También es quí el lugar donde la página de inicio de tu aplicación será referenciada. Verás unas cuantas líneas en el método OnLaunched() que se verán como lo siguiente.
if (!rootFrame.Navigate(typeof(MainPage), args.Arguments))
{
throw new Exception("Failed to create initial page");
}
El parámetro MainPage se refiere a nuestro siguiente archivo, MainPage.xaml.
MainPage.xaml
Este archivo es la “página de inicio” por defecto de tu aplicación. Es la primera que el usuario verá después de que la pantalla de carga se haya retirado. En tu proyecto básicamente se encontrará vacía salvo por un control de tipo Grid con un estilo aplicado. Vas a querer agregar mas a esta página casi inmediatamente y hay muchos controles geniales para utilizar. Te recomiendo ver los controles de GridView o FlipView para principiantes, pero utiliza lo que tenga más sentido para tu aplicación.
MainPage.xaml.cs
De neuvo, así como MainPage.xaml, este archivo estará prácticamente vacío. Tenemos un método constructor para la página así como un manejador de eventos para el método OnNavigatedTo(). En Windows Phone, este estaba siempre disponible para su uso (y era altamente recomendado), pero ahora esta ahí por defecto significando que muchos desarrolladores comenzarán a utilizarlo en lugar del método constructor de la página.
Dia1_TemporaryKey.pfx
Cada aplicación para la tienda de Windows esta firmada por un certificado. Cuando tu creas un proyecto por primera vez en Visual Studio este creará un nuevo certificado de prueba automáticamente. En nuestro cado este certificado de prueba es llamado Dia1_TemporaryKey.pfx donde Dia_1 es nuestro proyecto. De nuevo puedes encontrar este conjunto en el archivo package.appxmanifest debajo de la tabla Packaging. Puedes incluso crear nuevos certificados de ser necesario.
Una vez que estés listo para ingresar a la tienda, necesitarás asociar tu aplicación con la cuenta de desarrollador de la tienda Microsoft. Puedes hacer esto yendo a Proyectos, Tienda, Asociar App con la tienda.

Puedes encontrar mas información acerca de firmar el paquete de una aplicación aquí.
Conclusión
Así que ¡Eso es todo! Estamos solo empezando en esta serie, pero ahora ya tienes un entendimiento más sólido de cada uno de los archivos de una plantilla en blanco para XAML. En el caso de que no hayas instalado aún Visual Studio 2012, pero aún quieras dar una revisada a los archivos de código para este tipo de proyecto puedes descargarlo aquí.

Mañana, vamos a enfocarnos en la orientación y snapping, dos aspectos importantes de tu aplicación que comúnmente son omitidos. Si aún no descargas las herramientas gratuitas para construir aplicaciones para WIndows 8, puedes hacerlo desde el enlace de abajo. ¡Nos vemos mañana!