Wilson Vargas
Wilson Vargas

Un programador enamorado de su código.

Wilson Vargas
Author

Un chico con una gran experiencia en el arte del desarrollo software. Desarrollador de aplicaciones de móviles, especialista en ASP.Net, Xamarin y tecnologías de computo en la Nube en especial Azure.

Share


Suscribete


Mantente al tanto de mis nuevos artículos

Tags


Featured on Planet Xamarin badge

Twitter


Novedades para desarrolladores en Windows 8.1

Wilson VargasWilson Vargas

Recientemente se ha lanzado Windows 8.1 en su versión final, esta versión de Windows está llena de características nuevas que permite a los desarrolladores crear mejores aplicaciones Windows Store. Microsoft ha proporcionado un gran documento que resume las nuevas características, pero quería dar mi opinión sobre ellas, dando a conocer una nueva versión de Contoso Cookbook, una version que es parecida a la original, pero que fue escrita desde cero para demostrar lo geniales que son las nuevas características de Windows 8.1, y lo que los desarrolladores deben esperar encontrar cuando migren sus aplicaciones de Windows 8 a la nueva plataforma.
Contoso Cookbook es una aplicación Windows Store de ejemplo hecha por Jeff Prosise el año pasado. Fue publicada en MSDN, con 300 páginas de laboratorios que los desarrolladores pueden usar para aprender rápidamente el desarrollo de una aplicación, ya sea en XAML y C# o HTML5 y JavaScript. De hecho yo siempre uso esta aplicación cuando hago algunas charlas o capacitaciones en esta plataforma y porque escogí Contoso Cookbook? Porque es una aplicación bien completa, con la cual cualquier persona puede adentrarse en el desarrollo de aplicación Windows Store rápidamente.
Así se ve la nueva versión de Contoso Cookbook:

Puedes descargar la solución de Visual Studio 2013 que contiene versión Windows 8.1 de Contoso Cookbook aquí y toquetear el código fuente de la aplicación. Se parece mucho a la versión de Windows 8 en el exterior, pero hay algunas diferencias. Por ejemplo, ahora se puede hacer clic en el charm de Configuración, seleccionar Preferencias en el menú de configuración, la página de preferencias se muestra a continuación para especificar si la aplicación debe utilizar los datos locales (en el paquete) o datos remotos. Los datos remotos se encuentran alojados en la nube de Windows Azure. Los datos locales es el predeterminado, y es útil si estás haciendo una demostración de la aplicación y no tienes conexión a Internet. Por supuesto, la página de preferencias en sí utiliza una nueva característica de Windows 8.1 y es el control SettingsFlyout, algo que faltaba en el run-time de XAML en Windows 8, como lo hace la página “Acerca de” que se accede a través del menú de configuración. SettingsFlyout es una de las muchas características de Windows 8.1 que redujo drásticamente la cantidad de código XAML necesarios para crear las aplicaciones Windows Store.

Bueno, continuación se viene una visión general de los cambios que hicieron para aprovechar la nueva infraestructura en Windows 8.1. Hicieron otros cambios, por ejemplo, reconfiguraron por completo los datos JSON que alimentan a la aplicación para mejorar su estructura y hacerla más acorde con los datos de ejemplo JSON que Visual Studio proporciona, pero eso no es lo importante :P. Lo que es importante es lo que Contoso Cookbook nos muestra las cosas nuevas de Windows 8.1, y en ese sentido, hay mucho de qué hablar.

Los Tiles

Windows 8 apoyó dos tamaños: Tiles cuadrados (150 x 150 píxeles) y Tiles anchos (310 x 150 píxeles). Windows 8.1 admite cuatro tamaños de Tiles: pequeño (70 x 70), mediano (150 x 150), ancho (310 x 150) y grande (310 x 310). Sólo se requiere el Tile mediano, pero las aplicaciones tienen la opción de usar los otros tamaños también (es lo más recomendable).
Para ello, han añadido un gran Tile para Contoso Cookbook. Tú puedes ver la imagen de 310 x 310 (LargeLogo.png) en la carpeta llamada “Assets” del proyecto, y si te fijas en el manifiesto de aplicación (en la pestaña de aplicaciones de interfaz de usuario), podrás ver dónde designan a esa imagen como un Tile grande. Ahora, si te fijas en la pantalla de inicio, puede hacer clic en el icono de Contoso Cookbook y utilizar el botón de cambio de tamaño en la barra de aplicaciones en la parte inferior de la pantalla para seleccionar cualquiera de los cuatro tamaños de tiles. Si eres curioso ya te habrás dado cuenta de que puede cambiar a un tile pequeño, pero como si en el manifiesto no hay una imagen para ese tile? Pues aunque no le proporcionamos una imagen pequeña de tile. Windows 8.1 genera la imagen del tile pequeño por si no proporcionamos uno, pero siempre tienes la opción de proporcionar su propia imagen de 70 x 70.
También hicieron un pequeño cambio en el código del archivo ItemDetailPage.xaml.cs que crea un tile secundario para anclar una receta a la pantalla de inicio de Windows. La clase SecondaryTile tiene un nuevo constructor en 8.1, así como una nueva propiedad VisualElements que le permite controlar los colores frontales y de fondo del tile, especificar si el texto se debe mostrar en el tile, y más. La documentación advierte que algunos de los antiguos constructores "se puede alterar o no está disponible para las versiones después de Windows 8.1", por lo que ahora es el momento para fijarnos el código.

Snapping, View State y Window Size

En Windows 8, cualquier aplicación Windows Store podía cambiar su tamaño a una vista reducida capaz de ocupar un espacio 320 píxeles del ancho de la pantalla, a esto se le llamaba Snnaped View. Ese tamaño era exactamente de 320 píxeles de ancho, y si no le gustaba al usuario, bueno... sólo tenía que acostumbrarse a él.
Windows 8.1 le permite al usuario cambiar el tamaño de las aplicaciones de forma continua hasta un ancho de 500 píxeles. Y al seleccionar en la lista desplegable de manifiesto, puedes permitir que tu aplicación pueda cambiar el tamaño a un ancho de 320 píxeles. En otras palabras, “Snnaped View” como lo conocíamos, se ha ido. La mayoría de las aplicaciones no tienen que hacer nada especial para dar cabida a más anchos de ventana, ya que Microsoft cree que 500 píxeles es lo suficientemente amplio como para dar cabida a la mayoría de las interfaces de usuario, incluso los que utilizan controles GridView para desplazarse horizontalmente. Sin embargo, tú tienes la opción de responder a los cambios de tamaño de la ventana y ajustar el diseño de tu interfaz (si es necesario) para proporcionar una experiencia de usuario atractiva. Si su aplicación es la que muestra información en tiempo real, por ejemplo, una aplicación de correo electrónico o una que muestra precios de las acciones en la bolsa de valores, puede optar por habilitar la opción de 320 píxeles para que el usuario pueda mantenerse al tanto de la información que tu aplicación ofrece. En ese caso, es casi seguro que empezarás a escribir la lógica para ajustar el diseño cuando se está ocupando una porción muy limitada en la pantalla. Pero, cómo se implementa esta lógica? ha cambiado en Windows 8.1?
Bien, la mayoría de las aplicaciones de Windows 8 escritas en XAML y C# utiliza la lógica integrada en el archivo LayoutAwarePage.cs (que es generado por Visual Studio) para hacer los cambios en el diseño a través de Visual State Manager basado en los cambios en el estado de las vistas. El estado de vista actual se obtiene de ApplicationView.Value y siempre se establece en uno de los cuatro valores: Snapped, Filled, FullScreenPortrait, o FullScreenLandscape. Olvídate de estos estados de vista predefinidos, no existen más. Por cierto, tampoco existe el archivo LayoutAwarePage.cs.
En Windows 8.1, debes registrar tu propio controlador de eventos, como Window.SizeChanged, en cada página cuyo diseño quieres que cambie, cuando cambia el tamaño de la ventana, y cualquiera de estos efectos debes cambiarlos en el código, o llamar a VisualStateManager.GoToState y dejar que Visual State Manager lo haga por ti.
Según el autor de Contoso Cookbook, en la versión original hizo a un gran esfuerzo para asegurarse de que las tres páginas se vieran bien en el modo Snnaped View. Ya que ContosoCookbook, probablemente no es una aplicación que la mayoría de usuarios querrían mantener en la pantalla, adaptó el ancho mínimo predeterminado de 500 píxeles. Sin embargo, incluyo la lógica para cambiar el diseño de las páginas group-detail e item-detail pages en el modo portrait. El modo “Portrait” no significa necesariamente que la orientación de la pantalla es vertical, sino significa que la aplicación se está ejecutando en una ventana que es más alta que ancha. En la siguiente captura de pantalla, la página item-detail se muestra en el modo portrait, ya que está ocupando la mitad de la pantalla, y el ancho es actualmente inferior a la altura. Pero si arrastras la barra un poco más a la derecha, la página se ajustará de nuevo en el modo landscape y diseñará el contenido de la misma manera que lo hace cuando se está ejecutando en pantalla completa.

Mira el código XML en el archivo ItemDetailPage.xaml y verás el Visual State Manager que escribió para definir dos estados de vistas llamados “Portrait” y “Landscape”

Luego abre el archivo ItemDetailPage.xaml.cs y encontrarás el código C# que escribió para cambiar hacer el cambio entre estos estados:

Observe cómo ha usado la propiedad ApplicationView.Orientation, que es algo nuevo en Windows 8.1, para generar la cadena " Portrait" o " Landscape" (cualquiera de los dos), que identifica el estado visual. ApplicationView ahora también tiene propiedades denominadas IsFullScreen ,AdjacentToLeftDisplayEdge y AdjacentToRightDisplayEdge , que se puede utilizar para realizar ajustes en el diseño, basados en el tamaño y la posición de la aplicación. Por supuesto, también se puede utilizar todo el ancho de la ventana para lanzar cambios de diseño. En un controlador Window.SizeChanged, puede obtener el ancho desde WindowSizeChangedEventArgs.Size.Width, y fuera de SizeChanged (por ejemplo, en OnNavigatedTo), se puede obtener desde Window.Current.Bounds.Width.

Búsqueda

En Windows 8, se animó a los desarrolladores a implementar el contrato de búsqueda para hacer consultas dentro de la aplicación. La idea era que en cualquier momento, el usuario podría sacar la barra de charms, tocar el charm de búsqueda e iniciar una búsqueda. Sonaba bien en un momento, pero no funcionó tan bien en la práctica. Por un lado, la mayoría de los usuarios nunca se dieron cuenta de que existía el charm de búsqueda.

Para incorporar las nuevas directrices de Microsoft de cómo debe implementarse una búsqueda, en ContosoCookbook empezaron quitando el método implementado OnSearchActivated del archivo App.xaml.cs. Esto porque al parecer las aplicaciones no pueden activar el contrato de búsqueda desde fuera de la aplicación, ya que el panel de búsqueda en Windows 8.1 ya no muestra una lista de las aplicaciones que soportan este contrato. También han añadido un nuevo control SearchBox a la página de inicio de Contoso Cookbook (lo puedes ver en la esquina superior derecha de la primera captura de pantalla que mostré arriba) e implementaron controladores para los eventos SuggestionsRequested y QuerySubmitted para controlar los llamados de ellos. Estos controladores son esencialmente los mismos que solían ser usados para la implementación del contrato de búsqueda en Windows 8. Cuando Microsoft diseñó el control de SearchBox, intencionalmente basaron estas API en la clase SearchPane para hacer la portabilidad fácil. En consecuencia, si quieres hacer una búsqueda dentro de la aplicación de alguna receta en el nuevo Contoso Cookbook, ya no vas al charm de búsqueda, sino que solo debes escribir el término de tu búsqueda en la caja de búsqueda en la página de inicio y pulsar ENTER o tocar el icono de lupa.

Appbars y CommandBars

Otro cambio inminente en Windows 8.1 es la forma de implementar las barras de aplicaciones, a menudo conocido simplemente como “Appbar”. En Windows 8, declarabas un AppBar y dentro de él declarabas un Grid de dos columnas que contenía dos StackPanel en su interior, para separar controles a la derecha y a la izquierda respectivamente, y llenabas los StackPanel con controles Button estilizados para parecerse botones AppBar (los botones redonditos, por si no los recuerdas), el archivo StandardStyles.xaml contenía más de 200 estilos para estilizar estos botones.
El control AppBar aún es compatible por motivos de una compatibilidad hacia atrás y porque puede haber momentos en los que todavía es necesario implementarlo, por ejemplo, si deseas incluir controles TextBox u otros controles que no son botones en un Appbar. Sin embargo, Windows 8.1 a introducido el control CommandBar, lo que hace que implementes la barra de apliciones, de forma mágica y sencilla en tus aplicaciones. Y para mejorar la vida de los desarrolladores hay nuevos controles como: AppBarButton, AppBarToggleButton y AppBarSeparator, que no requieren de un estilo externo. Y se ordenan automáticamente por si solos para utilizar el espacio de manera más eficiente en las ventanas que ocupan sólo una parte de la pantalla.

Si te fijas en ItemDetailPage.xaml, verás cómo me declararon un CommandBar en ese archivo:

Ahora compara esto, con el esfuerzo para escribir código XAML necesarios para crear el mismo AppBar en el ContosoCookbook antiguo y podrás ver lo sencillo que es en Windows 8.1. Ah! Y date cuenta del control MenuFlyout escrito en el primer AppBarButton. Esa es otra de las nuevas cosas que hay en Windows 8.1. Para crear un menú flotante que aparece cuando haces clic en un botón de AppBar en Windows 8, tenías que crear un nuevo objeto de la clase PopupMenu y llamar algunas propiedades XAML para posicionarlo sobre el botón. En 8.1, simplemente se declara un MenuFlyout, y lo posicionas sobre el botón mediante la propiedad Flyout, y dejas que WinRT haga el trabajo.
Aunque no se muestra en el ejemplo de Contoso Cookbook, tú puedes poner los botones AppBar en un elemento <Command.SecondaryCommands> para colocarlos en la otra mitad del CommandBar.

Settings Flyouts

Uno de los elementos notoriamente ausente en WinRT de Windows 8 fue el control SettingsFlyout, que sirve para mostrar una configuración desplegando un menú desde la parte izquierda de la pantalla , algo que casi todas las aplicaciones Windows Store hace. Bueno para esto había que diseñar una desde cero, o conseguirlo de una biblioteca de terceros, tales como Callisto. Pues hay buenas noticias: Windows 8.1 incluye un control SettingsFlyout que nos ayuda en muchas cosas a los desarrolladores. Ahora no hay manera más fácil para codificar un SettingsFlyout, el control incluye una serie de propiedades útiles, como HeaderBackground y HeaderForeground que te permiten personalizarlo para que coincida con el estilo de tu aplicación.
Para agregar un SettingsFlyout a tu proyecto, en Visual Studio haz clic derecho sobre el proyecto, luego Agregar nuevo y selecciona "SettingsFlyout”, luego se deriva una clase de SettingsFlyout y la crea en tu proyecto, muy parecido a un control de usuario (User Control). En tu archivo XAML abierto debes insertar el contenido que desea que aparezca en el menú lateral (SettingsFlyout), y luego mostrarlo es una simple cuestión de crear una instancia de esa clase y llamar su método Show (o al método ShowIndependent).

Contoso Cookbook contiene dos controles SettingsFlyout: un SettingsFlyout para la opción “Preferences” y otro para la opción “About”. Se los puede ver haciendo clic en el charm de Configuración y seleccionando “About” o “Preferences”. Te darás cuenta de que el color del HeaderBackground en ambos SettingsFlyout tiene el mismo color anaranjado que se usa en el SplashScreen de Contoso Cookbook. Algo que me gustaría que implemente Microsoft sería la manera de dar a elegir al usuario el color que quiere utilizar para ese encabezado en el SettingsFlyout, pero por ahora sólo hay que elegir un color que sea coherente con el estilo de la aplicación.

HTTP Networking

En Windows 8, Windows RunTime tenía un gran soporte para conexiones de red, WebSocket, Bluetooth, e incluso la creación de redes NFC. Pero, inexplicablemente, no tenía un soporte realmente aceptable para conexiones HTTP. En consecuencia, las aplicaciones Windows 8 que querían comunicarse con servicios REST utilizaban la clase HttpClient pero esta clase estaba basada en .NET y no basada en aplicaciones Windows Store.
La versión .NET de la clase HttpClient está ahí todavía. Pero el nuevo Windows RunTime de Windows 8.1 introduce una clase HttpClient propia. Ubicada en un nuevo namespace Windows.Web.Http, la clase HttpClient de WinRT ofrece una serie de características que .NET no lo hace, incluyendo soporte para filtros de peticiones HTTP en cadena que le permite añadir soporte para la autenticación, reintentos, y otras cosas súper interesantes. En Contoso Cookbook volvieron a escribir la parte en que hacen las conexiones HTTP para utilizar la versión WinRT de la clase HttpClient. Aquí está el código en RecipeDataSource que recupera datos de recetas JSON de Azure:

Si te das cuenta han incluido la lógica del tiempo de espera de la llamada al metodo HttpClient.GetAsync por si la solicitud no se completa en 5 segundos, él llama al método AsTask para convertir el IAsyncOperationWithProgress devuelto por el método GetAsync en un tipo Task, y le pasa un CancellationToken conteniendo el tiempo de espera, que es de 5000 milisegundos. Esto es algo que algunos desarrolladores no hacen. Su aplicación no tiene garantías de cuando una tarea asíncrona terminará (o si va a terminar completamente), por lo que es siempre una buena práctica incluir un tiempo de espera para que su aplicación no se cuelgue y dejar al usuario preguntándose qué está pasando.

En conclusión…

Contoso Cookbook no aprovecha todas las nuevas características de Windows 8.1, pero sin duda usa las características más importantes. No he comparado todo el código de la versión antigua y nueva, pero puedo dar fe de que la versión 8.1 de Contoso Cookbook requiere sustancialmente menos código y esfuerzo para codificar, gracias en gran parte a los nuevos controles como SettingsFlyout y otros más que ahora existen en Windows 8.1.
Bueno, sé que tal vez es mucho y de hecho hay mucho más en Windows 8.1, pero es lo que este humilde desarrollador ha podido darse cuenta con esta maravillosa aplicación de ejemplo, por mi parte esto ha sido todo por el momento, no se despeguen de este blog que estaré publicando cosas más interesantes.

Un chico con una gran experiencia en el arte del desarrollo software. Desarrollador de aplicaciones de móviles, especialista en ASP.Net, Xamarin y tecnologías de computo en la Nube en especial Azure.

Comentarios