Hola a tod@s!
En esta serie de artículos que empiezo hoy, voy a desarrollar un App para Windows 8 totalmente funcional, a medida que vayamos avanzando en la serie de artículos vamos a ir adicionando funcionalidad y complejidad a nuestra App.
¿Qué Necesitamos para desarrollar para Windows 8?
- Visual Studio 2012 Express para Windows 8
- PC con Windows 8 32bits o 64bits
- Conocer un lenguaje de programación de la plataforma .NET: VB.NET, C#, C++
- Conocimientos básicos de XAML, Silverlight, WPF
Como podemos apreciar, solo necesitamos que nuestro PC de desarrollo tenga instalado Windows 8, e instalar la herramienta de desarrollo Visual Studio 2012.
Una Idea
Para construir nuestra App para la tienda de Windows 8, vamos a crear una aplicación que muestre contenido estático que provea nuestra App.
Nuestra App va a mostrar como contenido una lista de frases celebres relacionadas con el Amor, cada vez que ejecutemos o presionemos un botón se mostrará una frase diferente.
Inicialmente construiremos nuestro App con 30 frases diferentes, estas frases estarán dentro del código de nuestro App, posteriormente nuestras frases estarán en una base de datos local en nuestra tableta con Windows 8.
Desarrollo
Bien iniciemos a desarrollar nuestro primer App para Windows 8, para ello iniciamos nuestra herramienta de desarrollo: Visual Studio 2012, y seleccionamos Nuevo proyecto, al hacer esto nos muestra la siguiente pantalla:
Como podemos apreciar en la imagen, seleccionamos nuestro lenguaje de programación, para nuestro caso es C#, y seleccionamos la categoría de “Windows Store”.
En la parte central de la pantalla se encuentran los diferentes tipos de proyectos para Windows 8, vamos a seleccionar una aplicación en blanco con XAML.
Le colocamos el nombre al App: Celeste.Frases y le damos clic al botón OK de la ventana, con esto creamos el App inicialmente.
Es importante aclarar que el proyecto creado es totalmente funcional.
Ahora nuestro ambiente de desarrollo se apreciará de la siguiente manera:
En la parte izquierda tenemos el code behind del archivo App.xaml y a la derecha el Explorador de Soluciones de VS2012.
Vamos a ejecutar nuestra App en el simulador:
Este simulador es una maquina virtual con nuestro sistema operativo Windows 8 el cual nos permitirá probar todas nuestras App como si tuviéramos una tableta.
En la imagen aparece totalmente en blanco pues no tenemos nada para nuestro App, pero vean que es totalmente funcional nuestro App.
Revisemos un poco el código de nuestra pagina principal llamada MainPage.xaml, para esto vamos al explorador de soluciones y damos doble clic sobre el archivo.
Como podemos apreciar nos muestra en la parte superior el diseño grafico de la pantalla y en la parte inferior el código XAML que forma o conforma la pantalla o diseño grafico de nuestro App.
XAML
Es un lenguaje de marcado que sigue las reglas de un archivo XML, pero que se aplica a la especificación de la interface gráfica de las aplicaciones o programas para Windows 8. WPF o Silverlight.
XAML es un lenguaje que se ha venido desarrollando desde la aparición del framework .NET versión 3.0.
PAGE
Es la unidad que representa cada una de las pantallas de nuestra App, dentro de una página es donde nosotros podemos dibujar o crear nuestra interface gráfica.
Controles Contenedores
Son controles que contienen o agrupan a otros, en XAML y para nuestro desarrollo en Windows 8 tenemos los siguientes controles:
- Grid
- StackPanel
Estos son los mas utilizados y los que vamos a utilizar en nuestro App, a medida que vayamos avanzando en nuestro desarrollo, veremos algunos otros controles contenedores que podemos utilizar.
Ahora vamos a empezar a diseñar nuestra pantalla de inicio del App que muestre frases celebres.
Debemos tener en cuenta los patrones y reglas de los Apps para Windows 8, esto indica que debemos tener un espacio en la esquina superior izquierda de 140 x 140 pixeles en donde irá el icono del App o el icono de devolver.
Para lograr lo anterior, vamos a utilizar las propiedades del control Grid, el cual nos permite tener filas y columnas, por defecto un Grid tiene 1 fila y 1 columna.
La forma en que podemos definir nuestras filas y columnas en el control Grid es utilizando la sección de Rowdefinitions y la de ColumnDefinitions.
A continuación el código XAML para definir las filas y columnas de nuestra página.
1: <Grid.RowDefinitions>2: <RowDefinition Height="140"/>
3: <RowDefinition Height="*"/>
4: <RowDefinition Height="140"/>
5: </Grid.RowDefinitions> 6: <Grid.ColumnDefinitions>7: <ColumnDefinition Width="140"/>
8: <ColumnDefinition Width="*"/>
9: </Grid.ColumnDefinitions>La primera sección definimos las filas, en la primera le decimos que va atener una altura de 140 pixeles, la segunda fila va a ocupar toda la altura restante, y la tercera fila también a tener una altura de 140 pixeles.
La definición de las dos columnas se hace en la sección de ColumnDefinitions nos permiten cumplir con el diseño Metro o diseño Moderno de los Apps para Windows 8, esto es, crear una C mayúscula que encubre la información o lo que muestra nuestra App.
Entonces nuestra pantalla de diseño del App se verá de esta manera:
Se pueden apreciar las líneas que nos indican las filas y columnas de nuestro Grid para empezar a iniciar el diseño de nuestro App.
Ahora vamos a colocar el titulo de nuestra App que irá en la fila 1 columna 2 de nuestro Grid, como nuestro App va a tener más de 1 página, entonces vamos a utilizar un estilo que ya esta diseñado y que viene en nuestro App.
Vamos a añadir un control TextBlock en el cual nos permite mostrar texto en nuestro App.
1: <TextBlock x:Name="pageTitle" Grid.Column="1"
2: Text="{StaticResource AppName}"
3: Style="{StaticResource PageHeaderTextStyle}"
4: Foreground="GreenYellow"/>
Lo primero es darle un nombre a nuestro control, esto aunque no es necesario en el desarrollo de App con Windows 8, lo hacemos para poder utilizar o llamar este control desde diferentes partes de nuestro código.
El nombre a los controles lo hacemos con x:Name, y entre comillas el nombre del control.
Para lograr la ubicación de nuestro control en las celdas del Grid, lo logramos con Grid.Column y Grid.Row, aunque en este ejemplo solo utilicemos uno de ellos.
Lo segundo que tenemos que hacer es ubicar el nombre del App en un sitio de nuestro App que sea publico a toda nuestra App, para esto lo hacemos en el archivo App.xaml dentro de los recursos del App.
En la sección de Application.Resources colocamos el siguiente código para poder enlazarlo con un control del App.
1: <Application.Resources> 2: <ResourceDictionary>3: <x:String x:Key="AppName">Celeste - Frases Celebres</x:String>
4: </ResourceDictionary> 5: </Application.Resources>En donde definimos una cadena de texto, al cual le asignamos un nombre para identificar a través de x:Key en el cual colocamos el nombre de nuestro App.
Ahora ya podremos ver reflejado lo anterior en la propiedad Text del control TextBlock en le cual mostramos el titulo de nuestro App.
En la propiedad Text del control le asignamos un recurso estático, utilizando el nombre que se le asigno al Key en el App.xaml.
1: Text="{StaticResource AppName}"
Además para darle el aspecto de un título del App vamos a utilizar un estilo que ya viene definido en la plantilla de los Apps de Windows 8.
El estilo del control que muestra el Título del App lo asociamos al control de la siguiente manera:
1: Style="{StaticResource PageHeaderTextStyle}"
Lo ultimo es darle un color al titulo que lo hacemos a través de la propiedad Foreground:
1: Foreground="GreenYellow"
Nuestro diseñador de Apps se verá de la siguiente manera:
Ahora vamos a colocar un texto en la partes central y un botón que nos permitirán mostrar una frase celebre al presionar el botón.
Para esto vamos a hacer utilización del otro control contenedor: el StackPanel, para apilar controles dentro de este.
1: <StackPanel Grid.Column="1" HorizontalAlignment="Left" Height="100"
2: Margin="10,10,0,0" Grid.Row="1" VerticalAlignment="Top"
3: Width="1128">
4: <TextBlock TextWrapping="Wrap" FontSize="24"
5: Text="Este App le permitira disfrutar de diferentes frases celebres de diferentes autores, todas las frases se refieren al tema del Amor. Aqui encontrará frases para conquistar a su amor o para inspirarse y decirle palabras bonitas."/>
6: </StackPanel>Como observamos el control StackPanel lo colocamos en la columna 2 y fila 2 a través de Grid.Column y Grid.Row, recuerden que la indización de filas y columnas empieza en cero, por eso los valores son 1 en el código.
Dentro del control esta el TextBlock que muestra un texto, varias de las propiedades que mostramos nos sirven para aprender varias cosas.
La propiedad TextWrapping nos sirven para que el texto haga un scroll en la pantalla de nuestro App.
La propiedad FontSize permite darle un tamaño a la letra que queremos mostrar en la pantalla.
Para terminar con esta entrega y con la pantalla, vamos a incluir un botón el cual nos servirá para llamar una nueva página en la cual mostraremos una frase celebre.
1: <Button Content="Generar Frase" FontSize="38" Grid.Column="1"
2: HorizontalAlignment="Left" Margin="418,194,0,0"
3: Grid.Row="1" VerticalAlignment="Top" Height="75"
4: Width="279" Click="Button_Click_1"/>
Para colocar el botón en la posición adecuada pueden tomar el botón de la barra de herramientas y arrastrarlo hacia la parte grafica y soltarlo en la posición deseada.
NOTA: El control Grid no permite de una manera natural colocar en una posición especifica los controles, para ello a través de la propiedad Margin del control se posiciona un control dentro de un Grid.
Con todos estos nuevos controles, nuestro App en el diseñador se verá de la siguiente manera:
Ahora, vamos a ver como se ve nuestro App ejecutado en el simulador:
Esta es la imagen de nuestro primer App ejecutado en el simulador de Apps para Windows 8.
Esta primera entrega llega hasta este punto, para que ustedes la hagan en sus propios PC.
Muy pronto la segunta entrega de esta serie.
Feliz desarrollo!
