Ejemplo práctico de desarrollo Metro: MetroTask

Estos días, en la serie de desarrollo para Windows 8 usando la interfaz Metro se han visto varias características que lo hacen bastante diferente, y qué mejor manera que mostrarlas que con un ejemplo completo?

Para ello ha surgido MetroTask, un simple gestor de tareas, organizadas en proyectos. Consiste en 3 proyectos:

  • Una aplicación Metro (C#).
  • Un servicio web WCF.
  • Una aplicación de consola que uso para depuración.
Para poder abrir el proyecto, se necesita Windows Developer Preview, así como Visual Studio 11 Developer Preview.

Es un proyecto en curso, y por ahora es poco funcional, pero espero que se convierta en un ejemplo completo que poder mostrar y continuar su desarrollo.

Entre las características comentadas, y que se incluyen, están:

  • Conexión a un servicio WCF
  • Uso de la App Bar para crear tareas
  • Uso de la opción de compartir para crear tareas a partir de otras aplicaciones.
Las características que pienso incluir de cara a una primera versión estable son:
  • Creación, edición y eliminación de tareas.
  • Creación, edición y eliminación de proyectos.
  • Alertas cuando la tarea caduque.
  • Uso de los tiles para recuento de tareas pendientes, y similar.
Por ahora la funcionalidad, como he comentado antes, es limitada, por lo tanto solamente se pueden agregar tareas a proyectos actuales, que solo se pueden editar en la base de datos de manera manual (estoy trabajando en ello, y portar la App Bar a la otra ventana).
Cualquier funcionalidad adicional, o crítica sobre el estilo de código será amablemente recibida, se puede dejar el comentario aquí en el blog, o en la página del proyecto en CodePlex.

Más información

Roslyn CTP: Compiler as a service

Microsoft acaba de lanzar la Comunity Tech Preview de la herramienta Roslyn, que representa otra herramienta para los desarrolladores, esta vez en un servicio basado en extender capacidades del compilador para dar funcionalidades a los programas bastante más allá de nuestra imaginación.

Qué hace un compilador

Hasta la fecha los compiladores han sido, para algunos, una caja negra que generaba el ejecutable de manera mágica. Para otros un programa que convertía el fichero en un código objeto y posteriormente lo enlazaba, y, finalmente para los que hemos sufrido asignaturas del tipo Procesadores de lenguaje, es un programa que realiza varios pasos:

  • Análisis morfológico: Comprueba que los caracteres signifiquen variables, comandos, no nos falte ningún punto y coma o que no pongamos caracteres ilegales en el código
  • Análisis sintáctico: Comprueba que la formación del código sea la correcta, te falta un paréntesis o una llave que has borrado accidentalmente? esto lo detecta el analizador sintáctico.
  • Análisis semántico: Comprueba que el significado del código sea correcto, estás asignando un entero a una variable de tipo cadena?, o no devuelves un valor en una función declarada como void. Esto lo detecta el analizador semántico.
  • Generación de tabla de símbolos: La tabla de símbolos permite comprobar el estado de las variables, y donde buscar su significado (gestión de variables globales, argumentos, puntos de retorno de las funciones, etc).
  • Generación de código: Si el código es correcto, se sustituyen las porciones por código ensamblador correspondiente, se sustituyen valores y se genera un fichero ensamblable. Existen compiladores que generan directamente código objeto y se saltan este paso.
  • Optimización: Mediante técnicas como el desenrollamiento de bucles, se pueden conseguir unos ciclos de ejecución más, además de posibles técnicas para múltiples procesadores.

De hecho, hacer un compilador no es demasiado difícil. Se requieren ciertos conocimientos de Ensamblador, teoría de lenguajes formales, y paciencia. El análisis morfológico, sintáctico y semántico se puede hacer con las herramientas flex y bison, y generar un fichero ensamblador usando la herramienta NASM, en un proceso que lleva aproximadamente… un cuatrimestre para un grupo de 5 personas.

El caso, es que para arquitecturas como .net el proceso será un poco más complicado.

Las novedades

Lo que hace a Roslyn una herramienta tan especial, es que cada una de las fases que se han comentado antes tendrá una API específica, con lo cual nos encontraremos con varias API diferentes para las siguientes fases:

  • Árbol sintáctico
  • Tabla de símbolos
  • Enlace y análisis de flujo (semántico)
  • Generación de código.

Estas API proporcionan nuevos servicios para los lenguajes de programación, como resaltado de sintaxis, explorador de objetos, capacidad de refactoring, que podremos extender para nuestros proyectos.

Esto nos permite tener la capacidad de compilar código de manera dinámica (en tiempo de ejecución) desde un programa, o definir funciones que son creadas sobre la marcha, es decir, hacer programas que creen programas o metaprogramación, algo bastante común a lenguajes funcionales como LISP.

Esta capacidad permite tener una consola REPL (Read-Eval-Print-Loop) para poder usar C# o Visual Basic, o ejecutar directamente un código seleccionado. Esta consola se incluye con la CTP de Roslyn, y tiene IntelliSense, completado de código, opciones de refactor, ejecución de LINQ, generar interfaces de forma dinámica… para un código que estamos escribiendo en una consola, no esta nada mal.

En resumen, una utilidad muy interesante que seguramente hará las delicias de algunos, y que ahora está disponible para jugar con ello, y descubrir nuevas maneras de generar y usar el código (como por ejemplo hacer una utilidad que convierta de C# a VB).

Más información:

Hands-on Labs de desarrollo de aplicaciones Metro

Microsoft ha agregado, como parte del Training Kit de Visual Studio 11 Developer Preview, varios Hands-on Labs para aprender a usar las características de Metro. Estos tutoriales, de aproximadamente una hora de duración, cubren una buena cantidad de novedades de Metro, algunas de las que se han descrito en este blog.

Hay en total casi 20 labs usando C#, Visual Basic, Javascript y C++, entre los que se incluyen los anteriormente comentados, ejemplos de creación de juegos con C++, diseño de interfaz con Blend, pruebas o interacción de Javascript y C#, entre otros.

Sin duda una manera muy práctica de aprender a desarrollar aplicaciones Metro.

Más información:

Consumir ficheros en aplicaciones Metro

En artículos anteriores se ha visto cómo compartir contenido desde nuestras aplicaciones así como consumir contenido de otras. En este artículo y en el siguiente se hablará de cómo consumir ficheros del sistema de archivos, y como proporcionar opciones para que otras aplicaciones puedan hacerlo usando el contrato File Picker.

Consumiendo ficheros

Para poder consumir ficheros solamente es necesario cargar un menú, de la misma manera que lo haríamos con una aplicación Windows Forms.

Lo primero necesario es una referencia a Windows.Storage.Pickers así como a Windows.Storage

Tras agregar la referencia, el siguiente paso es cargar el filePicker, para ello, se puede asignar a un botón, enlazandolo con el evento Click, o también se podría cargar automáticamente (por ejemplo, si estuviese vacía una base de datos, para una importación inicial). Estos métodos, como se ha visto en otros artículos relacionados con Metro, deberán ser asíncronos.

Finalmente se podrán establecer filtros para seleccionar una extensión concreta, la manera de mostrar el menú de selección, o si lo que se carga es una selección simple o una múltiple.

De esta manera para seleccionar un único fichero txt situado en la biblioteca Documents, y que se muestre como una lista de ficheros, el código a usar será este:

async void Button_Click(object sender, RoutedEventArgs e)
{
    FileOpenPicker openPicker = new FileOpenPicker();
    openPicker.ViewMode = PickerViewMode.List;
    openPicker.SuggestedStartLocation = PickerLocationId.DocumentsLibrary;
    openPicker.FileTypeFilter.Add(".txt");
    StorageFile file = await openPicker.PickSingleFileAsync();
}

Como alternativas a este código, si el objetivo es cargar múltiples ficheros, se ha de cambiar la última llamada del código por pickMultipleFilesAsync(). En caso de que el contenido sean imágenes, lo más recomendable sería cambiar la cuarta línea del código para que se mostraran como miniaturas, para lo que se usaría PickerViewMode.Thumbnail.

En el próximo artículo se mostrará cómo se pueden proporcionar ficheros a otras aplicaciones y al sistema como si de otro origen de datos se tratara.

Más información

Interacción en Metro: Application Bar

En el artículo anterior se ha visto cómo agregar un menú contextual a una aplicación Metro. La otra interacción disponible es la Application Bar, que sustituye la barra de menús y las diferentes barras de herramientas. En este artículo se verán las caracteristicas que hacen diferente la Application Bar y cómo implementar una.

Características

La Application Bar se puede situar encima o debajo de la pantalla, ya que los laterales están reservados para el cambio de aplicaciones y las diferentes charms, de las que se ha hablado en este artículo.

Otra característica, es que es deseable, y así se muestra en las aplicaciones de ejemplo, que los controles se sitúen a los lados de la pantalla, ya que, al estar enfocado a tablets, los laterales hacen el acceso táctil más fácil al sostener el ordenador con ambas manos.

Además, usando este control se podrán mostrar notificaciones, como la que aparece al terminar de descargar un fichero en Internet Explorer.

Implementación

Para poder implementar esta funcionalidad se agrega un control de tipo ApplicationBar a la página, dentro del contenedor principal (Un grid o un StackPanel). En este control se especifican las propiedades como la alineación, el color de fondo, su persistencia y el estado que tendrá al cargar la página.

<ApplicationBar x:Name="AppBar" Grid.ColumnSpan="2" Grid.Row="2" VerticalAlignment="Bottom" IsPersistent="False" IsOpen="True"
                Height="Auto" DismissMode="EdgeSwipe" HorizontalAlignment="Stretch" Background="#548D8D8D">

El resto del comportamiento es similar a cualquier otro contenedor de XAML como se aprecia en el código completo:

     <ApplicationBar x:Name="AppBar" Grid.ColumnSpan="2" Grid.Row="2" VerticalAlignment="Bottom" IsPersistent="False" IsOpen="True"
                Height="Auto" DismissMode="EdgeSwipe" HorizontalAlignment="Stretch" Background="#548D8D8D">
            <ApplicationBar.Resources>
                <Style TargetType="TextBlock">
                    <Setter Property="FontFamily" Value="SegoeUI" />
                    <Setter Property="FontSize" Value="12" />
                    <Setter Property="Foreground" Value="White" />
                    <Setter Property="HorizontalAlignment" Value="Center" />
                </Style>
            </ApplicationBar.Resources>
            <Grid Margin="15,0,15,0">
                <Grid.ColumnDefinitions>
                    <ColumnDefinition Width="90" />
                    <ColumnDefinition Width="70" />
                    <ColumnDefinition Width="*" />
                    <ColumnDefinition Width="70" />
                    <ColumnDefinition Width="90" />
                </Grid.ColumnDefinitions>
                <StackPanel Orientation="Vertical" Margin="0,14,0,5" Grid.Column="0">
                    <Button Margin="0,0,0,10"/>
                    <TextBlock Text="Back" />
                </StackPanel>
                <StackPanel Orientation="Vertical" Margin="0,14,0,5" Grid.Column="4">
                    <Button Margin="0,0,0,10"/>
                    <TextBlock Text="View Full" />
                </StackPanel>
            </Grid>
        </ApplicationBar>

El resultado será una barra como la que se muestra en la siguiente pantalla:

Mas información en MSDN:

Interacción en Metro: Menú contextual

En cualquier aplicación de escritorio existen varias maneras de interactuar, podemos usar botones dentro de una aplicación, como es el caso de un instalador o un asistente de cualquier tipo, podemos hacer click derecho sobre una palabra o un elemento y obtener un menú contextual, o podemos recurrir al menú, situado habitualmente en la esquina superior izquierda con múltiples opciones a nuestra disposición.

Esta idea también ha cambiado, o mejor dicho, evolucionado en Windows 8, ya que ahora veremos aplicaciones donde es más importante el contenido que las propias opciones de la aplicación, quedando la interacción de menús en un discreto segundo plano. Para ello, en este, y en el siguiente artículo vamos a comentar dos opciones de interacción que han cambiado razonablemente en Windows 8, el menú contextual y la barra de menús, denominada a partir de ahora Application Bar.

Menú contextual

Acostumbrado a aparecer cuando pulsamos click derecho, nos ofrece una serie de opciones sobre el elemento sobre el que estamos en este momento, como copiar, comprimir o borrar, entre las mas habituales del explorador de Windows.

En metro la idea es similar, accederemos mediante click derecho con teclado y ratón. sin embargo, con metro tenemos una limitación que es que no podemos tener mas de 5 elementos presentes en el menú, y como se aprecia la interfaz está preparada para interacción táctil, con más espacio y una apariencia más ligera.

Para implementar este click derecho, nos dirigimos al objeto al que querramos aplicarlo (en mi caso fue un ContentControl que contenía un texto) y agregamos una función handler que responda al evento RightTapped, que viene a significar click derecho.

ItemDetail.RightTapped += new Windows.UI.Xaml.Input.RightTappedEventHandler(ItemDetail_RightTapped);

En el cuerpo de la función definimos nuestro menú contextual y las diferentes opciones que tendremos. Tenemos dos opciones para recibir la información del menú:

  • En el segundo parámetro del constructor de UICommand especificamos un callback (una función que se llame en caso de seleccionarlo.)
  • Recoger el resultado de la función ShowForSelectionAsync y a partir de ahí seleccionar en base al indice obtenido.
        async void ItemDetail_RightTapped(object sender, Windows.UI.Xaml.Input.RightTappedEventArgs e)
        {
            PopupMenu menu = new PopupMenu();
            menu.Commands.Add(new UICommand("Enviar por e-mail", null));
            menu.Commands.Add(new UICommand("Borrar", null));
            await menu.ShowForSelectionAsync(GetElementRect((FrameworkElement)sender));
        }

El otro parámetro que será necesario definir será la posición, para lo cual hemos recurrido a algo de ayuda de los ejemplos de la API, y es una función que genera el rectángulo del elemento que está efectuando la llamada.

        Rect GetElementRect(FrameworkElement element)
        {
            GeneralTransform buttonTransform = element.TransformToVisual(null);
            Point point = buttonTransform.TransformPoint(new Point());
            return new Rect(point, new Size(element.ActualWidth, element.ActualHeight));
        }

Conclusión

Pese a que ahora parece distinto, el menú contextual sigue teniendo especial importancia en el desarrollo de interfaces, y no deberíamos por tanto descuidarlo o ignorarlo. Al final del artículo está una referencia a la documentación de interfaz de usuario de Metro.

En el siguiente artículo veremos cómo usar la Application Bar como sustituto de la barra de menús en nuestra aplicación.

Mas información en MSDN

Capacidad de compartir para nuestra aplicación Metro

Una de las opciones que incorpora Windows 8, es el chime o pestaña Share, que permite que nuestras aplicaciones puedan enviar contenidos a otras de una manera sencilla. Para ello, tanto la aplicación origen como la destino tiene que tener la capacidad de aceptar elementos (ShareTarget) o de enviarlos (SendTarget).

Leer más “Capacidad de compartir para nuestra aplicación Metro”

Instalando Windows 8 Developer Preview + Visual Studio 11 en un Macbook Pro

Instalar un sistema operativo que está en fase pre-beta puede tener sus complicaciones. Si lo instalas en un Mac, la cosa se puede complicar aún más. El sistema que tengo (Un MacBook Pro 13′ de mediados de 2010) con una única partición de OSX. No quiero instalarlo en nativo 100%, así que instalaré vía Bootcamp una copia de Windows 7 Profesional x64 y encima de ella, Windows 8 versión x64.

1. Particionar

El primer paso será reducir el tamaño de nuestra partición para poder hacer hueco para Windows.

Para ello, usamos el Asistente Boot Camp que nos permite reducir el tamaño de nuestra partición de OSX, aunque podemos encontrarnos con un error de este tipo:

El disco no puede dividirse en particiones porque algunos archivos no pueden moverse. Guarde una copia de seguridad del disco y utilice la Utilidad de Discos para formatearlo como un único volumen Mac OS Plus (con registro). Restituya la información en el disco y vuelva a usar el Asistente Boot Camp

Evidentemente no queremos formatear el ordenador, ya que sería cuanto menos, un contratiempo. Podemos omitir este error usando los pasos siguientes:

  1. Abrir Utilidad de discos.
  2. Seleccionar el disco que queremos reparticionar.
  3. Reparar disco y Reparar permisos.
  4. En la pestaña Particiones reduciremos el tamaño al tamaño que querramos.
  5. Una vez que hayamos reducido la partición la volveremos a ampliar, y ya podremos usar Boot Camp.

En este proceso lo que hemos hecho ha sido mover los ficheros a otra parte del disco, un proceso que el asistente de BootCamp no soporta, pero Utilidad de Discos sí.

2. Instalar Windows 7

Tras usar el asistente de Boot Camp, instalamos Windows 7 (en mi caso versi’on  siguiendo los pasos del instalador. Puede pasar que en el transcurso de la instalación el instalador se quede colgado (En el apartado de “Completando Instalación”), si ese es tu caso, vuelve a grabar la iso de Windows 7 que tengas (si eres estudiante universitario puedes acceder mediante el programa Microsoft Academic Alliance) porque tendrás archivos corruptos.

3. Instalar Windows 8

En la web de Scott Hanselman recomienda instalarlo mediante un pen-drive USB, eso es genial porque ahorras en grabar discos, además es mucho más rápido. Desafortunadamente los mac no permiten arranque desde USB de nada que no sea un disco con una instalación de Mac OSX (http://support.apple.com/kb/HT1948) así que nos tocará grabar la ISO y luego instalarlo a la vieja usanza, la pega en este caso es que perdemos las herramientas de desarrollo, pero todo se puede arreglar.

Antes de reiniciar, crearemos el disco virtual siguiendo los siguientes pasos:

  1. Abrir Panel de Control / Herramientas Administrativas / Administración de Equipos
  2. Desplazarse al apartado Discos
  3. Crear un Nuevo VHD, asignamos una capacidad de 60 GB, con 40 deberían bastar, pero nos aseguramos.

Ahora podremos reiniciar el ordenador, cargar el disco de Windows 8, y comenzar el instalador. (Nota. Es recomendable, o bien tener un teclado externo para los próximos pasos, o bien poner la distribución del teclado en inglés y poner los caracteres especiales a ciegas, ya que en mi caso el instalador no reconocía la tecla correspondiente a \).

Al llegar al apartado de selección de discos pulsamos Shift + F10, lo que nos mostrará una ventana de comandos, y tendremos que montar el disco virtual que hemos creado antes, para poder instalarlo ahí. Los comandos son los siguientes (cuando lo instalas por 5ª vez te los aprendes de memoria, palabra).

  • select vdisk file=”C.\ruta\a\disco”
  • attach vdisk

Si volvemos al instalador, y pulsamos el botón de Actualizar (o click en F5, para el mismo efecto) y nos dejará seleccionar el disco que hemos creado hace un rato, y podremos instalar Windows ahí, y completar la instalación.

4. Instalar los drivers

En este caso es igual que anteriormente, solo que si no nos deja ejecutarlo tendremos que usar compatibilidad con Windows 7. Para ello, click derecho sobre el instalador, pestaña compatibilidad y seleccionamos Windows 7. Tras ejecutar el instalador, tendremos audio, resolución decente, e incluso compatibilidad con el Magic Mouse para el scroll.

5. Instalar Visual Studio 11

En mi caso el instalador web no funcionó, así que recurrí a la versión ISO (disponible aquí: http://www.microsoft.com/download/en/details.aspx?id=27538) para la instalación. Como Windows 8 incorpora gestión de imágenes ISO, podemos montarla directamente sin tener que recurrir a otros programas.

En mi caso la instalación se congeló (literalmente), en varias ocasiones, para lo cual reiniciaba el ordenador, tras lo que la instalación continuaba. Tras 5 o 6 reinicios y varios quebraderos de cabeza, se instaló toda la suite.

Aún faltaba un pequeño detalle, y es que Visual Studio 11, pese a incluir las herramientas para desarrollar aplicaciones Metro, no incluye elementos clave para ejecutarlas. Estos elementos sí que están disponibles en la ISO que incluye las herramientas de desarrollador (que ocupa unos 5 GB y no pude instalar al no contar con DVDs de doble capa).

Por suerte se han publicado los ficheros necesarios en esta web http://weblogs.asp.net/bsimser/archive/2011/09/17/fixing-the-makepri-exe-error-on-windows-8.aspx para que así podamos tener las herramientas para empezar a jugar con Windows 8.

Como última recomendación, si tenéis errores a la hora de ejecutar vuestras aplicaciones, probad a cambiar la resolución un par de veces, y se solucionará.

Fuentes: