Programando para Windows 8

http://www.dnmplus.net

Autor: Guillermo "Guille" Som

Microsoft MVP de Visual Basic desde 1997. Es redactor de dNM, mentor de SolidQ, orador de Ineta Latam, y autor de varios libros sobre Visual Basic .NET y C#.

http://www.elguille.info

Entradilla

Que Windows 8 es una revolución, eso está claro; pero lo mismo tendría que rectificar y decir que la pantalla de inicio de Windows 8 es una revolución, aunque a los usuarios de Windows Phone 7.x seguramente les resulte más familiar, ya que su revolución empezó un poco antes. No voy a hablar sobre las características de la pantalla de Inicio (con mayúsculas) de Windows 8; bueno, un poco sí, pero más que nada será para saber qué harán nuestras aplicaciones creadas específicamente para interactuar con (o simplemente funcionar dentro de) esa pantalla de Inicio de Windows 8. De lo que sí voy a hablar es de la creación de aplicaciones para esa pantalla de Inicio de Windows 8 - lo que antes se conocía como aplicaciones estilo Metro, que ahora son aplicaciones para Windows Store (o Tienda de Windows).

Aplicaciones para la pantalla de Inicio de Windows 8

Las aplicaciones para la pantalla de Inicio de Windows 8 (Windows 8 Start Screen), también conocidas como aplicaciones para la Tienda de Windows (Windows Store), son un concepto diferente, al menos para los que estamos acostumbrados a trabajar en aplicaciones de escritorio para el sistema operativo Windows [1].

Para nosotros los desarrolladores, la diferencia empieza por la forma de instalarlas, ya que, salvo que dispongamos del código fuente y podamos compilar nosotros mismos, todas las aplicaciones diseñadas para la pantalla de Inicio de Windows 8 hay que instalarlas desde la Tienda de Windows. Y precisamente por esa característica en cuanto a la forma de instalarlas, el nombre más generalizado para llamar a este tipo de aplicaciones es: aplicaciones para la Tienda de Windows, así que, tendremos que ir olvidándonos de llamarlas aplicaciones estilo Metro o aplicaciones para la pantalla de Inicio de Windows 8, aunque es posible que a lo largo de este artículo utilice algunas de esas definiciones.

Crear una aplicación para la Tienda de Windows con Visual Studio 2012

Cuando creamos un nuevo proyecto en Visual Studio 2012, la primera opción de tipos de proyectos que éste nos muestra es precisamente la de los tipos de aplicaciones para Windows Store (Tienda de Windows). En las plantillas mostradas podemos ver tres tipos de aplicaciones (que generan ejecutables) y otras tantas plantillas para crear bibliotecas de clases y un componente de tiempo de ejecución para Windows 8 (Windows Runtime), pero sólo para usarlo con aplicaciones diseñadas para la Tienda de Windows.

En cuanto a las aplicaciones (ejecutables) que podemos crear a partir de las plantillas ofrecidas por Visual Studio, tal como vemos en la figura 1, tenemos una básica de una sola página y otras dos que están preparadas para navegar entre varias páginas, además de que las plantillas utilizan data binding (enlaces de datos) para acceder al contenido que muestran en tiempo de ejecución (e incluso en tiempo de diseño).

Figura 1. Plantillas para las aplicaciones de la Tienda de Windows

Para este proyecto usaremos la plantilla básica Aplicación vacía (Blank App) con idea de no perdernos demasiado; así podremos ver con un poco más de calma y sobre todo sin que nos agobie demasiado, los ficheros más elementales que nos encontraremos en las aplicaciones para la Tienda de Windows. Por tanto, empecemos viendo qué cosas ha añadido Visual Studio al proyecto.

Contenido básico de un proyecto para la Tienda de Windows

Veamos qué tenemos en el proyecto que hemos creado usando la plantilla de Aplicación vacía. En la figura 2 tenemos una captura del contenido del proyecto.

Figura 2. Contenido de una aplicación básica para la Tienda de Windows

La carpeta Assets es la que contiene los iconos de la aplicación, y contiene inicialmente los más comunes y con los tamaños predeterminados (en el fichero Package.appxmanifest, entre otras cosas podemos ver los diferentes tamaños que se acepta en cada uno de esos iconos, aunque por ahora no voy a entrar en detalles sobre cada uno de ellos y para qué sirven).

La carpeta Common contiene los ficheros comunes utilizados por las plantillas de proyectos y de ficheros. En este tipo de proyecto solo incluye los estilos estándar, pero, como veremos en un momento, en esa misma carpeta se alojarán otros ficheros de uso común. El fichero StandardStyles.xaml, entre otras cosas, contiene la definición de los estilos de los botones usados en las aplicaciones de Windows 8, y como comprobaremos en un momento los estilos de los botones, además de que están comentados, también están en inglés; en un momento veremos cómo modificarlos para que nos muestren el texto en el idioma de nuestra preferencia e incluso modificar el texto de los mismos en tiempo de ejecución, ya que esos botones casi seguro que los utilizará con bastante frecuencia en sus aplicaciones para la Tienda de Windows.

El fichero App.xaml, y su acompañante de código, contienen la clase que sirve como punto de entrada de la aplicación, y desde cuyo método OnLaunched se carga MainPage, que pasa a ser la clase desde la que ocurrirá todo lo que tenga que ocurrir en esta aplicación para Windows Store. En un momento añadiremos algo de código para que esta primera aplicación tenga algún contenido; antes veremos un par de detalles que debemos saber sobre el manifiesto de la aplicación, por tanto, veamos algunas de las opciones que incluye Package.appxmanifest**.**

En el fichero Package.appxmanifest es donde indicaremos, entre otras cosas, las capacidades de nuestra aplicación, es decir, qué características del sistema en el que funcionará nuestra aplicación vamos (o queremos) usar. De forma predeterminada está seleccionada la opción de Internet (cliente), que viene a significar que podremos usar Internet desde el equipo en el que está instalada la aplicación. Si no vamos a necesitar Internet, lo recomendable es quitar la marca de esta opción, ya que si la dejamos (usemos o no la conexión de Internet) tendremos que agregar un enlace a nuestra política de privacidad, es decir, indicarle al usuario qué datos recopila la aplicación y qué vamos a hacer con ellos; y si la aplicación no recopila ninguna información, también hay que indicarlo. Hay más opciones en ese fichero de configuración, pero he querido aclarar esta porque suele ser una causa muy común de que el equipo de certificación de las aplicaciones para la Tienda de Windows rechace nuestra aplicación para su publicación cuando no cumplimos con el requisito de indicar cuál es el contrato de privacidad. Y es que todas las aplicaciones que aparezcan en la Tienda de Windows deben pasar por unas fases para su certificación.

Agregar funcionalidad estándar a la aplicación

Las aplicaciones para la Tienda de Windows se diferencian básicamente de las aplicaciones para escritorio en que siempre funcionan a pantalla completa y que el tiempo de vida lo controla el propio sistema operativo. Hago esta aclaración para que seamos conscientes de que nunca debemos pensar en este tipo de aplicaciones como un ejecutable que tiene posibilidades de redimensionar la pantalla de presentación y que una vez que nosotros como desarrolladores de la misma decidamos cuándo debe finalizar.

<NOTA DENTRO DEL TEXTO>

Debo aclarar que las aplicaciones para la Tienda de Windows sí deben estar preparadas para poderlas cambiar de tamaño, pero no de la forma a la que estamos habituados con las aplicaciones de escritorio, ya que debemos tener en cuenta de que este tipo de aplicaciones pueden ejecutarse en tabletas además de en equipos de sobremesa o portátiles; por tanto, el usuario podrá girar el dispositivo y nuestra aplicación deberá estar preparada para esa circunstancia. Además de que también la aplicación puede estar acoplada en uno de los laterales de la pantalla (snapped) o bien ocupar el resto de la pantalla (filled).

</NOTA>

Añadiendo barras de aplicación

Las barras de aplicación (app bars) [2] se utilizan en las aplicaciones para la Tienda de Windows para mostrar al usuario ciertas funcionalidades. Esas barras se ocultan de forma automática al seleccionar una de las opciones mostradas, y para mostrarlas lo haremos usando el botón secundario del ratón o bien por medio del código de nuestra aplicación.

Básicamente, las barras de la aplicación pueden estar en la parte superior: usada para navegar entre elementos de nuestra aplicación, pero no en el sentido de desplazamiento entre las páginas ya vistas, sino más bien como forma de acceso directo a elementos de la aplicación [3]. Por otro lado, la barra de la aplicación puede estar en la parte inferior, y en ese caso la utilizaremos para mostrar los botones de comandos o selección, aunque siempre quedará a nuestro criterio, si bien no estaría mal seguir las indicaciones de diseño propuestas por el equipo de Windows 8 [4].

Para crear cualquiera de estas barras usaremos el control AppBar, el cual agregaremos a la propiedad TopAppBar o BottonAppBar, según queramos mostrarla en la parte superior o inferior de la clase Page en la que queremos mostrarla.

Los botones que “deberíamos” usar en esas barras de aplicación son los incluidos en el fichero StandardStyles.xaml, pero como ya comenté anteriormente están comentados; por tanto, seleccionaremos los estilos que queremos usar y los quitaremos de esos comentarios para que estén disponibles.

Mejor lo vemos con un ejemplo. Vamos a diseñar una barra para mostrarla en la parte inferior. En esa barra tendremos tres botones, uno de ellos en la parte de la izquierda y los otros dos en la parte de la derecha; de esta forma aprenderemos a usar los controles StackPanel para posicionar los botones.

El código XAML de la barra inferior es el mostrado en el listado 1. Este código lo añadiremos al existente en el fichero MainPage.xaml, justo después de la cabecera de la página y antes de la definición del control Grid (el único que tiene el código predeterminado del fichero MainPage.xaml).

<Page.BottomAppBar>
    <AppBar x:Name="bottomAppBar" Padding="10,0,10,0">
        <Grid>
            <StackPanel Orientation="Horizontal" HorizontalAlignment="Left">
                <Button Style="{StaticResource MapAppBarButtonStyle}" />
            </StackPanel>
            <StackPanel Orientation="Horizontal" HorizontalAlignment="Right">
                <Button Style="{StaticResource HomeAppBarButtonStyle}" />
                <Button Style="{StaticResource HelpAppBarButtonStyle}" />
            </StackPanel>
        </Grid>
    </AppBar>
</Page.BottomAppBar>

Listado 1. Código de la barra inferior de la aplicación

< NOTA DENTRO DEL TEXTO >

En la definición del control AppBar estamos usando la propiedad Padding asignando 4 valores. En ese caso concreto, en el que asignamos un valor 10 tanto para el lado izquierdo como el derecho y 0 para el superior y el inferior, podríamos usar la cadena “10, 0”.

Tampoco confundamos Padding con Margin, ya que esta última usará los valores para “despegar” la barra de los bordes, mientras que la primera usará esos valores para hacer esa separación dentro de la propia barra.

</NOTA>

Como podemos apreciar, tenemos dos controles StackPanel en los que la orientación está definida como horizontal, de esa forma los controles que tengamos en esos paneles se apilarán horizontalmente. Y para que cada grupo lo tengamos en el lado adecuado de la pantalla usamos la propiedad HorizontalAlignment, asignándole el valor Left o Right según queramos que el panel esté alineado a la izquierda o derecha, respectivamente.

El diseño de los botones se lo damos por medio del valor indicado en la propiedad Style, y en dicha propiedad asignamos el contenido de un recurso definido en nuestra aplicación. Como ya comenté anteriormente, esos recursos están definidos en el fichero de estilos, pero están comentados; por tanto tendremos que hacer una búsqueda en ese fichero y ponerlos fuera de los comentarios.

En el listado 2 vemos la definición de los tres recursos. En último estilo he realizado un cambio en la propiedad Value para que muestre el texto en castellano. Lo mismo podríamos hacer con los otros dos estilos, cambiando Map por Mapa y Home por Inicio, pero he preferido dejarlos así para que veamos cómo asignarle el texto a mostrar mediante código; esto nos será útil para el caso de que nuestra aplicación la utilicemos en otros idiomas.

<Style x:Key="MapAppBarButtonStyle" TargetType="ButtonBase" 
       BasedOn="{StaticResource AppBarButtonStyle}">
    <Setter Property="AutomationProperties.AutomationId" Value="MapAppBarButton"/>
    <Setter Property="AutomationProperties.Name" Value="Map"/>
    <Setter Property="Content" Value="&#xE1C4;"/>
</Style>

<Style x:Key="HomeAppBarButtonStyle" TargetType="ButtonBase" 
       BasedOn="{StaticResource AppBarButtonStyle}">
    <Setter Property="AutomationProperties.AutomationId" Value="HomeAppBarButton"/>
    <Setter Property="AutomationProperties.Name" Value="Home"/>
    <Setter Property="Content" Value="&#xE10F;"/>
</Style>

<Style x:Key="HelpAppBarButtonStyle" TargetType="ButtonBase" 
       BasedOn="{StaticResource AppBarButtonStyle}">
    <Setter Property="AutomationProperties.AutomationId" Value="HelpAppBarButton"/>
    <Setter Property="AutomationProperties.Name" Value="Ayuda"/>
    <Setter Property="Content" Value="&#xE11B;"/>
</Style>

Listado 2. Los estilos a usar en los botones de la barra de la aplicación

En la figura 3 vemos el resultado mostrado en el diseñador de Visual Studio 2012 después de “sacar” esos recursos de los comentarios y de modificar el texto a mostrar en uno de los botones.

Figura 3. La barra de la aplicación en modo diseño

Modificar el texto de los botones de la barra de la aplicación por medio de código

Para asignar en tiempo de ejecución el texto que mostrarán los botones, debemos asignar el texto a la propiedad AutomationProperty.Name del botón. Para ello utilizaremos el método estático SetName de la clase AutomationProperties, que está definida en el espacio de nombres Windows.UI.Xaml.Automation. A ese método le pasamos como primer parámetro el control al que queremos acceder, y a continuación el texto o valor a asignar. Por tanto, necesitamos darles nombres a nuestros botones. El nombre de un control podemos definirlo utilizando x:Name y asignándole el nombre que deseemos darle. Los nombres que he usado en este ejemplo son MapButton, HomeButton y HelpButton.

El código a utilizar para realizar esas asignaciones sería algo parecido al que podemos ver en el listado 3, en el cual se asigna texto de forma directa, pero dicho texto podría proceder de un fichero de recursos (en el listado 4 veremos un ejemplo de una asignación a partir del texto almacenado en un fichero de recursos, aunque sin entrar en detalles de cómo está definido, ya que eso sería tema para otro artículo posterior). En el listado 3 utilizamos una variable que nos servirá para no repetir la asignación cada vez que la página se cargue, algo que en una aplicación normal ocurrirá cada vez que volvamos a la página principal (MainPage).

// para saber cuando entramos por primera vez en OnNavigatedTo
bool primerOnNavigatedTo = false;

protected override void OnNavigatedTo(NavigationEventArgs e)
{
    if (!primerOnNavigatedTo)
    {
        primerOnNavigatedTo = true;

        // asignar los textos
        // aquí lo hacemos directamente...
        AutomationProperties.SetName(HomeButton, "Inicio");
        AutomationProperties.SetName(MapButton, "Mapa");
        AutomationProperties.SetName(HelpButton, "Acerca de");
    }
}

Listado 3. Asignar los textos a mostrar en los botones en tiempo de ejecución

var rl = new Windows.ApplicationModel.Resources.ResourceLoader();

AutomationProperties.SetName(HomeButton, rl.GetString("Inicio"));
AutomationProperties.SetName(MapButton, rl.GetString("Mapa"));
AutomationProperties.SetName(HelpButton, rl.GetString("Acerca"));

Listado 4. Asignar los textos a partir del contenido de un fichero de recursos

< NOTA DENTRO DEL TEXTO >

La clase ResourceLoader tiene un constructor que recibe un parámetro de tipo string. Con ese constructor podemos acceder directamente al fichero que tenga el mismo nombre de la cadena indicada. Por ejemplo: ResourceLoader(“Botones”) utilizará el fichero de recursos Botones.resw. Aunque lo habitual es usar los recursos para localizar nuestra aplicación.

</NOTA>

< NOTA DENTRO DEL TEXTO >

Para agregar un fichero de recursos a nuestro proyecto debemos usar el tipo Resources File (.resw) (Archivo de recursos), que no tiene nada que ver con el tipo Resource Dictionary (Diccionario de recursos), que sería el tipo de fichero a añadir para definir estilos de forma similar a como se hace en el fichero StandardStyles.xaml.

</NOTA>

Mostrar un cuadro de diálogo al pulsar en un botón

Para terminar este artículo, vamos a añadir código al botón de ayuda (“Acerca de…”) para que nos muestre un cuadro de diálogo al estilo Windows 8.

Lo primero que haremos es indicar qué método utilizaremos cuando el usuario pulse en el botón de ayuda. Para ello editaremos la definición del botón en el código XAML (ver figura 4), y el editor de Visual Studio se encargará de añadir la definición del manejador de eventos.

Figura 4. Visual Studio nos ayuda a la hora de crear los métodos de evento

Como queremos interceptar el evento de pulsación, podemos definir un método que intercepte tanto el evento Click como el evento Tapped, ya que tienen la misma funcionalidad (al menos en los equipos no táctiles); dicha definición será como la mostrada en el listado 5, mientras que en el listado 6 tenemos el código en el que invocamos al método asíncrono ShowAsync de la clase MessageDialog, definida en el espacio de nombres Windows.UI.Popups.

<Button x:Name="HelpButton" Style="{StaticResource HelpAppBarButtonStyle}" 
        Tapped="HelpButton_Tapped_1" />

Listado 5. Código XAML del botón de ayuda

private async void HelpButton_Tapped_1(object sender, TappedRoutedEventArgs e)
{
    var dlg = new MessageDialog("Ejemplo para la revista dNM número 100");
    dlg.Title = "Acerca de aplicación para dNM #100";
    
    await dlg.ShowAsync();
}

Listado 6. Código que intercepta la pulsación en el botón de ayuda

Como comentaba antes, el cuadro de diálogo mostrado es al estilo de las aplicaciones de la Tienda de Windows (en la figura 5 vemos cómo lo podemos ver en el simulador), que como sabemos siempre (o casi siempre) funcionan a pantalla completa.

Figura 5. El cuadro de diálogo mostrado con el código del listado 6

Y con esto finalizamos esta primera incursión a la creación de aplicaciones para la Tienda de Windows. Espero que haya otras ocasiones y podamos ver cómo realizar otras tareas con este nuevo tipo de aplicaciones para el “casi” recién llegado Windows 8.

Conclusiones

En este artículo hemos visto cómo crear una aplicación para la Tienda de Windows en la que mostramos una barra de aplicación con una serie de botones en los que posteriormente hemos personalizado el texto mostrado, tanto mediante código XAML como con código C#, y en este último caso usando texto directo y el obtenido por medio de ficheros de recursos. Finalmente, hemos mostrado un mensaje de diálogo totalmente al estilo de las aplicaciones para la página de Inicio de Windows 8.

Referencias

[1] Conoce Windows: https://windows.microsoft.com/es-ES/windows-8/basics

[2] Agregar barras de la aplicación: https://msdn.microsoft.com/es-es/library/windows/apps/xaml/hh781232.aspx

[3] Barra de la aplicación superior: https://msdn.microsoft.com/es-es/library/windows/apps/xaml/hh761500.aspx#flat_system

[4] Diseño de comandos para aplicaciones de la Tienda Windows: https://msdn.microsoft.com/es-es/library/windows/apps/xaml/hh761499.aspx

POSIBLES SUMARITOS

Las aplicaciones para la pantalla de Inicio de Windows 8 son un concepto diferente, al menos para los que estamos acostumbrados a trabajar en aplicaciones de escritorio para el sistema operativo Windows.

Las aplicaciones para la Tienda de Windows se diferencian básicamente de las aplicaciones para escritorio en que siempre son a pantalla completa y que el tiempo de vida lo controla el propio sistema operativo

El control AppBar lo agregaremos a la propiedad TopAppBar o BottonAppBar, según queramos mostrarlo en la parte superior o inferior de la clase Page

| Página de inicio |Artículos Técnicos | Comunidad