Hello World Windows 8 Metro! (II)
Introducción
En la entrada previa, vimos como crear un proyecto de Windows 8 Metro desde Visual Studio 2012, y expliqué cada una de las carpetas y archivos que conforman un proyecto Metro.
En esta ocasión, vamos a continuar avanzando con nuestro ejemplo «Hello World» con los siguientes pasos que ya indiqué en la primera entrada.
Trabajo con la capa de presentación (XAML) de un proyecto Windows 8 Metro
Ya vimos en la primera entrada de esta pequeña serie, que el fichero App.xaml va a ser el encargado de contener la lógica a nivel de aplicación. Gracias a este fichero, el usuario podrá ejecutar la interfaz de nuestra aplicación.
El fichero MainPage.xaml por su parte, va a contener la página de inicio de la aplicación, y es sobre esta sobre la que nos vamos a centrar en un primer momento.
Para ello, vamos a pensar en como va a ser nuestra primera aplicación.
En primer lugar, vamos a insertar un control TextBlock y dos controles Button.
El control TextBlock lo utilizaremos para mostrar un mensaje o título por pantalla. Ese control lo reutilizaremos para dar un feedback a nuestra aplicación.
De los dos controles Button, uno de ellos lo utilizaremos para que al pulsarlo actúe de forma que muestre un mensaje por pantalla, mientras que el segundo control Button, tendrá como efecto el cerrar nuestra aplicación Metro.
Indudablemente, hay comportamientos en cada uno de los botones que deberemos completar, como que por ejemplo, al pulsar el botón de «Hello World«, éste control Button se deshabilite. Pero estos comportamientos son añadiduras para que nuestro ejemplo «Hello World» tenga algo más que el típico y mítico saludo por pantalla.
Estas son las propiedades más importantes de cada control:
Control: TextBlock
Name: lblTitle
Text: Windows 8 Metro – Hello World Application
Control: Button
Name: btnHelloWorld
Content: Hello World
Control: Button
Name: btnClose
Content: Close
En resumen, nuestra aplicación tendrá un aspecto parecido al siguiente:
Generación y uso de eventos en XAML y su correspondiente programación
Una vez que tenemos ya preparada la capa de presentación de nuestra aplicación Metro, vamos a empezar a programar un poco el aspecto y comportamiento de la misma.
En primer lugar, vamos a prestar atención a la capa de presentación o código XAML que encontraremos en nuestro fichero MainPage.xaml y que conformará lo que hemos visto en la imagen anterior.
El código de nuestra aplicación será el siguiente:
1: <Page
2: x:Class="App1.MainPage"
3: IsTabStop="false"
4: xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
5: xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
6: xmlns:local="using:App1"
7: xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
8: xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
9: mc:Ignorable="d">
10:
11: <Grid Background="{StaticResource ApplicationPageBackgroundThemeBrush}">
12: <Grid.ColumnDefinitions>
13: <ColumnDefinition/>
14: </Grid.ColumnDefinitions>
15: <TextBlock x:Name="lblTitle" HorizontalAlignment="Left" Margin="264,84,0,0"
16: TextWrapping="Wrap" Text="Windows 8 Metro - Hello World Application"
17: VerticalAlignment="Top" FontSize="38" Height="46" Width="734"/>
18: <Button x:Name="btnHelloWorld" Content="Hello World" HorizontalAlignment="Left"
19: Margin="264,149,0,0" VerticalAlignment="Top" Click="btnHelloWorld_Click"
20: Height="38" Width="114"/>
21: <Button x:Name="btnClose" Content="Close" HorizontalAlignment="Left"
22: Margin="264,202,0,0" VerticalAlignment="Top" Click="btnClose_Click"
23: Height="38" Width="70"/>
24: </Grid>
25: </Page>
Como podemos apreciar, aquí además de escribir el código de presentación, hemos otorgado a dos de sus controles una respuesta a un evento.
Cada control Button tendrá un evento Click al que hemos asociado una llamada.
Para el control btnHelloWorld, el evento que se lanzará al hacer clic sobre este botón corresponderá con el evento Click=»btnHelloWorld_Click».
Por su parte, y para el control btnClose, el evento que se lanzará al hacer clic sobre el este botón, corresponderá con el evento Click=»btnClose_Click».
Presentación de un mensaje en pantalla (el MessageBox de .NET)
Sin embargo, aún no hemos aplicado ninguna lógica pura o comportamiento concreto a nuestra aplicación.
Es el momento.
Para ello, junto al fichero MainPage.xaml, encontraremos asociado otro fichero que en el caso de C# tiene el nombre de MainPage.xaml.cs, mientras que para VB tendrá el nombre de MainPage.xaml.vb.
En nuestro caso es C#, así que escribiremos el código de lógica en este lenguaje.
Dentro de este código, nos fijaremos en el control Button btnHelloWorld.
Lo que queremos es que al hacer clic sobre el botón, aparezca un mensaje en pantalla y cambie el contenido del control TextBlock lblTitle, y al mismo tiempo deshabilite el control Button btnHelloWorld.
Es decir:
- Mostrará el clásico mensaje Hello World por pantalla.
- Modificará el contenido del control lblTitle.
- Deshabilitará el control Button btnHelloWorld.
Lo único que debemos hacer aquí es escribir nuestro código.
No obstante, debemos tener en cuenta varios aspectos.
En primer lugar vamos a notar una diferencia entre .NET y Metro en cuanto a la llamada para mostrar la típica caja de mensaje.
En .NET utilizamos MessageBox para mostrar un mensaje en pantalla dentro de Windows, pero en Metro, esto ha cambiado y ahora se utiliza MessageDialog.
MessageDialog pertenece al namespace Windows.UI.Popups.
Algo parecido a esto:
1: MessageDialog messageDialog =
2: new MessageDialog("Well done! - Hello World Windows 8 Metro!", "My first Windows 8 Metro Application. I'm feel great!");
Aún y así, en las instrucciones anteriores, no hemos mostrado nada por pantalla aún. Y por otro lado, es preciso recordar algo muy importante. La asincronía en nuestras aplicaciones Metro.
Por lo tanto, antes de continuar, recordemos dos aspectos:
- El primero de ellos, tal y como comenté en una de las entradas de mi blog (¿Qué es WinRT?), es que todas nuestras aplicaciones Metro funcionarán como aplicaciones asíncronas.
- El segundo y dependiente del primero, tiene que ver con el uso de IAsyncOperation<IUICommand> que utilizaremos por ejemplo en el caso de mostrar un mensaje por pantalla (el típico MessageBox de .NET). Esto es debido principalmente a que el tipo IAsyncOperation<IUICommand> representa una operación asíncrona y en su caso, el método ShowAsync de MessageDialog ejecuta una operación asíncrona.
1: IAsyncOperation<IUICommand> command = messageDialog.ShowAsync();
El hecho es que cualquier método que dure más de 50 milisegundos para ser completado en WinRT, debe ser asíncrono o debe ser expuesto como una operación asíncrona.
El método ShowAsync() de MessageDialog, devuelve una operación awaitable. Esto significa que la operación debe ser ejecutada explícitamente.
De ahí que en la primera parte declaremos esta instrucción y en la siguiente la ejecutemos de forma asíncrona.
Nota adicional: Existen otras formas de hacer esto como veremos en otras entradas, pero sirva este código para mostrar una de las formas de llevarlo a cabo.
El código completo quedará por lo tanto de la siguiente manera:
1: private void btnHelloWorld_Click(object sender, RoutedEventArgs e)
2: {
3: MessageDialog messageDialog =
4: new MessageDialog("Well done! - Hello World Windows 8 Metro!", "My first Windows 8 Metro Application. I'm feel great!");
5: IAsyncOperation<IUICommand> command = messageDialog.ShowAsync();
6: this.lblTitle.Text = "Done!";
7: this.btnHelloWorld.IsEnabled = false;
8: }
Posibilidad de cerrar nuestra aplicación a través de un botón
Sin embargo, y para completar nuestra pequeña aplicación demostrativa, vamos a dar un último comportamiento al control Button btnClose.
El comportamiento es muy simple, y es hacer que nuestra aplicación se pueda cerrar.
Para ello y utilizando el evento Click del control btnClose, vamos a escribir el siguiente código:
1: private void btnClose_Click(object sender, RoutedEventArgs e)
2: {
3: Application.Current.Exit();
4: }
Al hacer clic sobre el control Button btnClose, nuestra aplicación se cerrará.
Aplicación Metro en ejecución
Nuestra aplicación en ejecución, tendrá un aspecto similar al siguiente:
En la próxima entrada, veremos otros aspectos asociados con nuestra aplicación que no debemos dejar pasar por alto, aunque lo más importante ya está hecho.
Referencias
