Enero de 2017
Volumen 32, número 1
Aplicaciones modernas: exploración del kit de herramientas de la comunidad de UWP
Por Frank La La | Enero de 2017
.png "Frank La Vigne")
A medida que la Plataforma universal de Windows (UWP) evoluciona, emergen retos y patrones comunes de la interfaz de usuario. Mientras que UWP proporciona un amplio conjunto de API y controles de características de forma predefinida, existen algunas lagunas en cuanto a qué se proporciona, y algunas características requieren una gran cantidad de código y esfuerzo. Para abordar esta laguna y hacer que el desarrollo de UWP sea más rápido y accesible para los principiantes, Microsoft ha creado el kit de herramientas de la comunidad de UWP y lo ha colocado en GitHub (bit.ly/2b1PAJY).
El objetivo del kit de herramientas de la comunidad de UWP es involucrar a la comunidad de desarrolladores en la creación de una serie de controles y funciones auxiliares para simplificar el desarrollo de UWP. El kit de herramientas de la comunidad de UWP tiene cinco categorías de herramientas: Controles, Notificaciones, Animaciones, Servicios y Aplicaciones auxiliares. En la columna de este mes, explicaré todas las categorías y mostraré cómo implementar el kit de herramientas en sus proyectos de UWP.
UWP Community Toolkit Sample App
La mejor manera de explorar el kit de herramientas de la comunidad de UWP es descargar UWP Community Toolkit Sample App de la Tienda Windows (bit.ly/2bypOyw). La aplicación no solo exhibe todas las características del kit de herramientas (consulte la Figura 1), sino que también proporciona demos de controles interactivas, animaciones, notificaciones, etc., como se muestra en la Figura 2.
.png "Pantalla de inicio de UWP Community Toolkit Sample App")
Figura 1 Pantalla de inicio de UWP Community Toolkit Sample App
.png "Ajuste de los parámetros del control RadialGauge")
Figura 2 Ajuste de los parámetros del control RadialGauge
La aplicación también proporcionará las representaciones de código y XAML de los controles, lo que acelerará la manipulación, el retoque y la implementación de elementos de la interfaz de usuario.
Controles de interfaz Como hemos visto anteriormente, el kit de herramientas de la comunidad de UWP contiene varios controles de interfaz de usuario: 13 en el momento de la publicación. Muchos de estos controles suelen encontrarse en aplicaciones móviles o sitios web optimizados para móvil. Un ejemplo es el control HamburgerMenu. Por convención, el menú hamburguesa, que consta de tres líneas horizontales, indica que existe un menú contraído. Al hacer clic en el control o tocarlo, su estado cambia. En la Figura 3 y la Figura 4 se muestra el aspecto del control contraído y expandido, respectivamente.
.png "Menú hamburguesa contraído")
Figura 3 Menú hamburguesa contraído
.png "Menú hamburguesa expandido")
Figura 4 Menú hamburguesa expandido
Asegúrese de explorar las características y la configuración de cada control del kit de herramientas de la comunidad de UWP. Presentan un enorme grado de flexibilidad y, sin duda, agregarán valor a todos y cada uno de sus proyectos de UWP.
Notificaciones Windows 10 proporciona una completa API que permite a los desarrolladores crear iconos dinámicos y notificaciones del sistema para alertar a los usuarios de eventos puntuales y mantener a los usuarios informados. Para una exploración completa de los iconos y las notificaciones del sistema, recomiendo leer el blog Tiles and Toasts redactado por el equipo propietario de las API de iconos y notificaciones del sistema de UWP (bit.ly/2fzFsv1).
Aunque resulta útil y eficaz, la creación de notificaciones e iconos dinámicos puede suponer un reto para los desarrolladores que no están familiarizados con XML y XPath. El kit de herramientas de la comunidad de UWP simplifica esta tarea mediante la inserción de un modelo de objetos sobre la estructura subyacente para generar la interfaz de usuario de notificaciones del sistema e iconos dinámicos.
Animaciones Windows 10 introdujo Composition API, una API de modo retenido completa y declarativa, que cualquier aplicación para UWP puede usar para crear animaciones, efectos visuales y objetos de composición directamente. Fundamentalmente, es una capa entre el lenguaje XAML y la arquitectura de DirectX subyacente. Composition API está destinado a proporcionar un método para que los desarrolladores de XAML aprovechen muchas de las ventajas de rendimiento de DirectX mientras escriben código en C#. No es el objetivo de esta columna ofrecer una discusión completa de Composition API, pero puede obtener más información en bit.ly/2fzCfeQ.
El kit de herramientas de la comunidad de UWP permite acceder fácilmente a la eficacia de esta API gracias al suministro de métodos de extensión y comportamientos XAML sobre Composition API. UWP Community Toolkit Sample App presenta una superficie de control para experimentar con distintos parámetros en un conjunto de cinco animaciones. El kit de herramientas también generará el código C# y el marcado XAML para implementar la animación.
Servicios Vivimos en una época en que la nube y las aplicaciones son mejores si se conectan a servicios en la nube. No obstante, la adición de estos servicios a sus aplicaciones puede causar una gran complejidad: implementar la autenticación a través de OAuth, y trabajar con las API de REST y la naturaleza fluida de estas API. Afortunadamente, el kit de herramientas de la comunidad de UWP proporciona un extenso modelo de objetos que trata gran parte de esta complejidad. Actualmente, el kit de herramientas de UWP ofrece compatibilidad con Bing, LinkedIn, Facebook, Twitter y el servicio Microsoft Graph. Esto significa que los desarrolladores pueden conectarse fácilmente a estos servicios en línea con el mínimo esfuerzo.
Funciones auxiliares El kit de herramientas de la comunidad de UWP también incluye distintas opciones auxiliares para facilitar las tareas de desarrollo de aplicaciones comunes. Por ejemplo, antes de consultar un servicio en la nube, las aplicaciones deben comprobar si existe una conexión de red. Aunque se puede hacer sin este kit de herramientas, solo se puede hacer en una línea de código con el kit de herramientas. Las aplicaciones auxiliares también están disponibles para la impresión, las tareas en segundo plano, la obtención de información del sistema, etc.
Adición del kit de herramientas de la comunidad de UWP al proyecto
La mejor manera de agregar el kit de herramientas de la comunidad de UWP al proyecto es a través de NuGet. Cree un nuevo proyecto UWP en blanco en Visual Studio. Para ello, elija Nuevo proyecto en el menú Archivo. Seleccione Instalado | Plantillas | Windows | Universal | Aplicación vacía (Windows universal). Asigne al proyecto el nombre UWPToolKitApp y haga clic en Aceptar.
La manera más fácil de agregar el kit de herramientas de la comunidad de UWP al proyecto es agregar los paquetes NuGet. En el Explorador de soluciones, haga clic con el botón derecho en Referencias y elija Administrar paquetes NuGet en el menú contextual para que se muestre el Administrador de paquetes NuGet.
En el cuadro de búsqueda, escriba Microsoft.Toolkit.Uwp para que se muestren todos los paquetes NuGet asociados al kit de herramientas de la comunidad de UWP. Debería ver unos cuantos resultados, entre ellos el propio kit de herramientas de la comunidad de UWP, así como otros paquetes y bibliotecas. Para obtener un gráfico de referencias rápidas sobre qué funcionalidad se incluye en cada paquete, consulte la Figura 5.
Figura 5 Paquetes NuGet del kit de herramientas de la comunidad de UWP
| Nombre del paquete NuGet | Detalles |
| Microsoft.Toolkit.Uwp | El paquete NuGet principal incluye aplicaciones auxiliares de solo código, como la herramienta de conversión Colores, la detección de la conexión a Internet, la administración de archivos de almacenamiento, una clase de aplicación auxiliar de streaming, etc. |
| Microsoft.Toolkit.Uwp.Notifications | Paquete de notificaciones: genere notificaciones de icono, del sistema y de distintivo para Windows 10 por medio de código. Incluye compatibilidad con IntelliSense para evitar tener que usar la sintaxis XML. |
| Microsoft.Toolkit.Uwp.Notifications.Javascript | Paquetes de notificaciones de JavaScript. |
| Microsoft.Toolkit.Uwp.Services | Paquete de servicios: este paquete NuGet incluye las aplicaciones auxiliares de servicio para Bing, Facebook, LinkedIn, Microsoft Graph y Twitter. |
| Microsoft.Toolkit.Uwp.UI | Paquetes de interfaz de usuario: convertidores XAML, extensiones de árbol visual y aplicaciones auxiliares para la interfaz de usuario de XAML. |
| Microsoft.Toolkit.Uwp.UI.Animations | Comportamientos de composición y animaciones, como Desenfocar, Atenuar, Girar, etc. |
| Microsoft.Toolkit.Uwp.UI.Controls | Controles XAML, como RadialGauge, RangeSelector, etc. |
Por ahora, le recomendamos que agregue el paquete NuGet principal (Microsoft.Toolkit.Uwp) y el paquete de servicios (Microsoft.Toolkit.Uwp.Services). Haga clic en la entrada de Microsoft.Toolkit.Uwp y, luego, en el botón Instalar que aparece hacia el lado derecho del Administrador de paquetes NuGet. Si se le solicita con un cuadro de diálogo Revisar cambios, revise los cambios y haga clic en Aceptar. Si hace clic en Cancelar, se cancelará la instalación del paquete NuGet. Es posible que también se muestre el cuadro de diálogo Aceptación de licencia; haga clic en Acepto para aceptar los términos de licencia. Tiene la opción de revisar la licencia. También tiene la opción de rechazar la licencia. Al hacer clic en Acepto se completará la instalación del paquete. Repita el proceso para el paquete Microsoft.Toolkit.Uwp.Services, que puede presentar varios términos de licencia que deben aceptarse.
Una vez completadas estas tareas, debería ver los paquetes NuGet en la sección Referencias del proyecto en el Explorador de soluciones.
Búsqueda con Bing Ahora, va a crear una aplicación de muestra que comprobará la conectividad en línea y el modelo de dispositivo en el que se ejecuta la aplicación. Esta le presentará entonces la opción para buscar información sobre el dispositivo en Bing.
Abra el archivo MainPage.xaml y agregue el código XAML de la Figura 6 para crear una interfaz de usuario sencilla.
Figura 6 Código XAML para crear la interfaz de usuario de la aplicación de muestra
<Grid Background="{ThemeResource ApplicationPageBackgroundThemeBrush}">
<Grid.RowDefinitions>
<RowDefinition Height="33*"/>
<RowDefinition Height="607*"/>
</Grid.RowDefinitions>
<Button Name="btnSearch" Click="btnSearch_Click" Grid.Row="0">Search Bing</Button>
<ListView Name="lvSearchResults" Grid.Row="1">
<ListView.ItemTemplate>
<DataTemplate>
<StackPanel>
<TextBlock Text="{Binding Title}" FontWeight="Bold"></TextBlock>
<TextBlock Text="{Binding Published}" FontStyle="Italic" ></TextBlock>
<TextBlock Text="{Binding Link}" Foreground="Blue"></TextBlock>
<TextBlock Text="{Binding Summary}"></TextBlock>
</StackPanel>
</DataTemplate>
</ListView.ItemTemplate>
</ListView>
</Grid>
En el archivo MainPage.xaml.cs, agregue el siguiente código al método de constructor:
btnSearch.IsEnabled = ConnectionHelper.IsInternetAvailable;
btnSearch.Content = $"Search Bing for {SystemInformation.DeviceModel}";
Agregue el siguiente código al archivo MainPage.xaml.cs:
private async void btnSearch_Click(object sender, RoutedEventArgs e)
{
var searchConfig = new BingSearchConfig
{
Country = BingCountry.UnitedStates,
Language = BingLanguage.English,
Query = SystemInformation.DeviceModel,
QueryType = BingQueryType.Search
};
lvSearchResults.ItemsSource =
await BingService.Instance.RequestAsync(searchConfig, 50);
}
Visual Studio le ayudará a agregar las instrucciones using adecuadas al código.
Ahora, ejecute la solución. Si el dispositivo cuenta con conectividad a Internet, el botón Buscar debería estar habilitado. También verá el modelo de dispositivo en el texto del botón. Si el botón está habilitado, haga clic en él y verá algo similar a la imagen de la Figura 7. Naturalmente, los resultados específicos varían según el dispositivo en el que se ejecuta la aplicación.
.png "Resultados de la búsqueda del modelo de dispositivo")
Figura 7 Resultados de la búsqueda del modelo de dispositivo
Notificaciones del sistema Otra característica del kit de herramientas de la comunidad de UWP que simplifica las tareas de desarrollo comunes son las notificaciones del sistema. Las notificaciones del sistema son un componente importante de la experiencia del usuario en las aplicaciones para UWP, dado que mantienen a los usuarios informados sobre el estado de la aplicación. No obstante, Toast Notification API requiere un conocimiento profundo del lenguaje XML. Esto puede causar confusiones a los desarrolladores noveles e incluso ser frustrante para los más experimentados. El kit de herramientas de la comunidad de UWP simplifica realmente la creación de notificaciones del sistema.
Para la aplicación de muestra, agregará una notificación del sistema simple para informar al usuario de que se han devuelto los resultados de la búsqueda. Esto podría no agregar mucho valor a la aplicación de muestra, ya que Bing devuelve resultados inmediatamente. Sin embargo, resultaría útil para alertar al usuario sobre la finalización de una tarea de ejecución prolongada.
El primer paso consiste en agregar el paquete NuGet Microsoft.Toolkit.Uwp.Notifications al proyecto. Repita los pasos mencionados anteriormente para agregarlo al proyecto.
A continuación, agregue el código de la Figura 8 al archivo MainPage.xaml.cs para crear el contenido de la notificación del sistema. Usa la clase auxiliar de información del sistema para rellenar algunos detalles sobre el dispositivo en el que se ejecuta la aplicación.
Figura 8 Código para crear contenido de notificaciones del sistema de muestra
private ToastContent CreateDummyToast()
{
return new ToastContent()
{
Launch = "action=viewEvent&eventId=1983",
Scenario = ToastScenario.Default,
Visual = new ToastVisual()
{
BindingGeneric = new ToastBindingGeneric()
{
Children =
{
new AdaptiveText()
{Text = $"Bing search results returned for
{SystemInformation.DeviceModel}"},
new AdaptiveText()
{Text = $"Available Memory {SystemInformation.AvailableMemory}"},
new AdaptiveText(){Text =
$"Running {SystemInformation.OperatingSystem}
{SystemInformation.OperatingSystemVersion}
({SystemInformation.OperatingSystemArchitecture})"}
}
}
}
};
}
Si observa el código más detenidamente, verá que el kit de herramientas de la comunidad de UWP agrega un modelo de objetos alrededor del formato XML de Toast Notification API. Esto simplifica el proceso de creación de contenido para la notificación del sistema. Los desarrolladores pueden aprovechar la eficacia y la flexibilidad del formato abierto, al mismo tiempo que obtienen un modelo de objetos (e IntelliSense) en el que escribir código.
Ahora, agregue el método siguiente:
private void PopToast()
{
ToastContent toastContent = CreateDummyToast();
ToastNotificationManager.CreateToastNotifier()
.Show(new ToastNotification(toastContent.GetXml()));
}
La primera línea llama al método CreateDummyToast que compila el contenido de la notificación del sistema y la asigna a un objeto ToastContent. La segunda línea usa el método GetXml para convertir el modelo de objetos al formato XML que espera Toast Notification API.
Todo lo que queda por hacer es llamar al método PopToast justo después de que se devuelvan los resultados de la búsqueda de Bing en el controlador de eventos btnSearch_Click. Ejecute la solución e igual que antes, haga clic en el botón Buscar. Casi de manera inmediata, verá aparecer una notificación similar a la de la Figura 9.
.png "Notificación del sistema devuelta")
Figura 9 Notificación del sistema devuelta
Resumen
El kit de herramientas de la comunidad de UWP proporciona recursos fundamentales para crear aplicaciones para UWP sofisticadas y atractivas. Desde los nuevos controles hasta las bibliotecas de la API de servicios en la nube, permite a los desarrolladores crear fácilmente aplicaciones conectadas a servicios en la nube sin tener que afrontar los problemas de conexión de nivel inferior de las API de REST. Y lo mejor de todo, gracias a la comunidad de desarrolladores que contribuyen a conseguirlo, el kit de herramientas de la comunidad de UWP mejora constantemente. Este conjunto de características crece constantemente y el equipo acepta contribuciones. Es algo creado realmente para la comunidad y por la comunidad.
Frank La Vigne es un consultor independiente y ayuda a los clientes a usar la tecnología para mejorar la comunidad. Escribe publicaciones con regularidad en FranksWorld.com y tiene un canal de YouTube llamado Frank’s World TV (FranksWorld.TV).
Gracias a los siguientes expertos técnicos por revisar este artículo: David Catuhe