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


Windows 8.1: Trabajando con los nuevos controles.

Wilson VargasWilson Vargas

Como sabemos, el tiempo transcurrido entre el lanzamiento de Windows 8 y Windows 8.1 fue relativamente corto, tanto para usuarios y para desarrolladores. Estos cambios han traído consigo algunas de las cosas que los desarrolladores sentían que faltaban durante el desarrollo de la aplicación Windows Store.
Algunos de estos cambios son simplemente características obvias (dejadas sólo por cuestiones de tiempo), la mayoría son respuestas a las nuevas necesidades que no se podían realizar en la primera versión, y algunas pocas son el resultado del gran éxito de algunas librerías realmente útiles, como el caso de Callisto.

Este artículo es la continuación de uno anterior que trata de las Novedades para desarrolladores para Windows 8.1

En este artículo analizaremos más a fondo los nuevos controles que nos ofrece este nuevo sistema operativo.
Al frente de estas actualizaciones "víctimas del tiempo" están los pickers que simplifican la entrada de fecha y valores de tiempo, también algunos nuevos menús laterales (Flyout) para una mejor respuesta a las necesidades de los requisitos del estilo Modern UI, existe también un nuevo CommandBar, hecho para poner en práctica fácilmente la utilización de una barra de aplicaciones (AppBar), sin los dolores de cabeza procedentes de su codificación. Finalmente también hay un nuevo control Hub que hacen fácil y ampliamente disponible el paradigma "hub" presentado en algunas aplicaciones Windows Store para Windows 8. Con esta breve introducción procederemos a hacer la auptosía respectiva :P

Los pickers que faltaban…

Todas las aplicaciones, incluso las más simples, tienen la necesidad de pedir algunos datos del usuario y por lo general se trata de un punto en el que los errores de escritura por parte del usuario se hacen difíciles de controlar.
El control TextBox, era el único disponible antes de Windows 8.1, era muy difícil pedir al usuario que ingrese diferentes tipos de datos y crear una interfaz limitada para evitar errores de entrada (era un trabajo doloroso). Los valores de fecha y hora son un ejemplo muy práctico de este problema. Windows 8.1 pone nuestra a disposición los nuevos controles DatePicker y TimePicker, no sólo para evitar los errores de entrada por parte del usuario, sino también para dar un uso uniforme de las interfaces con estilo Modern UI. Aquí un ejemplo de su codificación:

Los códigos anteriores producen los siguientes resultados. En esta captura de pantalla he incluido dos culturas (ja-JP y en-US) para mostrar cómo este control se encarga de automatizar Internacionalización.

Con propiedades de formato puedes elegir entre un amplio abanico de formatos para todos los gustos y varios tipo de regiones, esto te ayuda mucho si quieres monetizar con tu aplicación, ya que podrás llegar a más mercados. También puedes excluir una o más partes de la fecha en la que no es necesario obtener la fecha completa del usuario. En cuanto al formato de tiempo, también puedes utilizar el control TimePicker para obtener el valor de la hora:

El código anterior muestra el siguiente resultado:

Con la propiedad ClockIdentifier tienes la capacidad de cambiar el formato de la hora (12/24).
Lo que devuelve cada control es un tipo de dato DateTime para el DatePicker y un TimeSpan para el TimePicker.
Los dos controles presentan una amplia lista de valores cuando se selecciona un elemento y a su vez deja al usuario seleccionar fácilmente el valor que elija, ya sea, si se está utilizando el dedo o el mouse.
Estos controles son sin duda impresionantes y están bien diseñados.

Los Menús laterales (Flyouts), algo muy útil…

Otro problema con Windows 8, especialmente en XAML son los menús laterales. Flyout es un nombre genérico que tiene cada parte de la interfaz de usuario que "flota" sobre otro control, aquí también están incluidos los Popups genéricos, algún menú y los paneles de configuración.
Para resolver estos problemas, Windows 8.1 incluye algunos nuevos controles Flyout dirigidos a estas cuestiones. Cada FrameworkElement puede obtener un Flyout adjunto, con una propiedad especial llamada "FlyoutBase.AttachedFlyout". Esto permite colocar un Flyout y luego posicionarlo en el lado que tú desees, estableciendo la propiedad "Placement" en uno de sus cinco valores. Una vez que el menú lateral se ha añadido a un elemento, puede mostrar con el método FlyoutBase.ShowAttachedFlyout (). Aquí un ejemplo:

Podemos ver que agregamos un Flyout a un rectángulo y definimos su contenido con una Elipse. Para abrir el Flyout tenemos que manejar manualmente el evento "Tapped" y luego llamar al método ShowAttachedFlyout() pasando una referencia al rectángulo al que se adjunta el Flyout.

Este código, nos muestra que el Flyout se abre como se esperaba, posicionándose en la parte superior del elemento. El Flyout es un área rectangular con un borde, obviamente a manera de ejemplo le pusimos una elipse, pero en la práctica esto puede ser un menú con controles como TextBlock, Button, etc.

El botón es un caso especial de menús laterales, ya que tiene una propiedad "Flyout" que automáticamente maneja el evento click para abrir el Flyout adjunto, esto lo hicieron para mejorarnos la vida a los desarrolladores. Y sólo tiene que escribir algo parecido a este código:

Como puedes ver el código de este botón no tiene ningún código subyacente, es decir, no haces el manejo de los evento tú, sino todo lo hace Windows Runtime, es maravilloso!!

El control Flyout es un simple contenedor donde puedes poner cualquier elemento XAML sin formato, y se comportará como si estuviera en la vista principal. Tú también puedes controlar los eventos, el uso de enlace a datos y recursos. Si tú quieres crear un menú flotante, hay un control Flyout especial llamado “MenuFlyout”. En su interior puedes utilizar un conjunto de elementos de menú y separadores para crear una lista de opciones que el usuario puede seleccionar.

El control es muy sencillo e incluye elementos de texto, botones de alternancia (Toggle Buttons) que aparecen como una aspita cuando se selecciona y un control especial que es un separador.

Y por último de los controles Flyout está el control SettingsFlyout que te permite crear un panel de configuración con pocas líneas de código.
Implementar un panel de configuración no era tan simple en Windows 8, Callisto era una librería demasiada buena para crear toda la interfaz de usuario para estos paneles laterales. En Windows 8.1, puedes crear un control de usuario especial llamado SettingsFlyout y diseñar su aspecto como lo harías con una página normal. Haz clic derecho en tu proyecto luego “Agregar elemento”, después elige el control SettingsFlyout y ya puedes comenzar a personalizar tu interfaz en el diseñador de Visual Studio.

Aquí un ejemplo de cómo puedes personalizar tu panel de configuración en tu proyecto:

Luego, en el archivo App.xaml.cs, agregamos un controlador del evento CommandRequested para el panel de configuraciones que tiene que tener una porción de código para abrir el menú lateral que hemos creado. En el controlador de evento se crea una instancia del menú lateral que hemos creado y luego llamamos al método Show como se hace en un Popup.

Ven? Ahora todo es más fácil y sencillo.

Simplifica tu trabajo haciendo un AppBar con “CommandBar”

La creación de una barra de aplicaciones (AppBar) en XAML es una tarea fácil, la mayoría de las veces sólo hay que poner algunos botones en su interior, lo que es tedioso o molesto es la presentación y estilo de estos botones, anteriormente Visual Studio nos ayudaba un poco en esto, creando un archivo llamado StandardStyle.xaml donde podíamos encontrar una serie de estilos para los “botones redonditos” (así los llamo yo), pero aun así era demasiado tedioso ese trabajo. El nuevo control CommandBar que hizo Microsoft fue diseñado para evitar la sobrecarga de trabajo que tienen los desarrolladores en estos casos y también para poder consolidar las directrices de diseño del estilo Modern UI que tienen una fuerte necesidad de colocar botones dentro de una barra de aplicaciones. El CommandBar aparece como un simple contenedor que alberga una serie de botones.

Todos los elementos que están directamente dentro del control CommandBar se consideran botones "primarios" y por defecto se alojan en la derecha de la barra de aplicaciones como las directrices de de diseño prescriben. Cuando necesites agregar botones a la izquierda (elementos contextuales), tienes que utilizar la propiedad SecondaryButtons como en el siguiente ejemplo.

Este es el resultado que muestra la siguiente barra de aplicaciones:

En este CommandBarse puedes ver un separador y el botón Negrita se define como AppBarToggleButton para que pueda activarse o desactivarse. La propiedad Icon de los botones se puede configurar con una serie predefinida de valores dados, no usaremos más el archivo StandardStyle.xaml. Esto ayuda a mantener la apariencia de tu aplicación y los iconos que utilizas en la barra de aplicaciones. También puedes utilizar un Bitmap para definir una imagen en la propieda Icon del botón, en caso de que no esté en los valores predefinidos:

Haz bonitas tus aplicaciones con el control Hub

Una de las características más solicitadas en Windows 8, justo después de que se lanzó oficialmente, era el control Hub que muchas aplicaciones mostraban desde los primeros días. No solo la aplicación de noticias, sino también la de deportes, clima y viajes tenían un aspecto similar que permitía que el usuario se deslice de lado a lado horizontalmente, entre las diferentes secciones apiladas. En Windows 8.1 el control hub ya es una realidad y la siguiente imagen muestra cómo se ejecuta.

Este ejemplo, simula una aplicación de imágenes, la he creado con poco esfuerzo usando algunas imágenes de internet, verás que tiene tres secciones apiladas. La primera (la parte blanca) es la sección principal, por lo general reservada para introducir la información más importante. La segunda sección contiene una galería de las fotos “Más Recientes” (no sabía que poner en el encabezado XD) y finalmente, otra sección que muestran algunas categorías. Nada te impide añadir otras secciones y el desplazamiento horizontal desde la pantalla por lo general sólo cubre los primeros tramos (en este ejemplo, la primera y parte de la segunda). El código para crear este ejemplo es un poco simple, al principio, solo agregas un control hub, algo así:

Aquí se define el título principal del hub. Este título se fija a la pantalla y el scroll horizontal del hub debajo de este. Luego se crea una sección usando un elemento HubSection dentro del control Hub.

Esta porción de código muestra la primera sección. Dentro de un hub se tiene que usar un DataTemplate para llenar el contenido. Luego dentro del DataTemplate se coloca los elementos de lo que vas a mostrar. Cada sección tiene un título en sí mismo, esto mediante la propiedad “Header”, también puedes convertirlo en un hipervínculo utilizando la propiedad "IsHeaderInteractive".
Las otras secciones se apilan en el control hub. Aquí está el código de ejemplo que utilizo para este artículo. Puedes descargarlo aquí.

Nota:
Una cosa interesante es que el control Hub implementa la interfaz ISemanticZoomInformation. Esto te permite utilizar el control en las propiedades ZoomedIn / ZoomedOut del control SemanticZoom y que el usuario navegue entre las diferentes vistas utilizando el gesto pich.

Entonces…

A mi parecer esta versión de Windows parece aumentar fuertemente la experiencia del desarrollador y la solución de muchos de los problemas que tuvimos anteriormente.
Los controles que he mostrado en este artículo vienen junto con una serie de nuevas características en el conjunto de controles existentes. Es muy importante que realices una búsqueda de estos cambios, porque gran parte de las veces te hace más rápido y productivo el trabajo que realizas, puedes revisar más de estos controles en la documentación oficial de Microsoft.

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