[Windows Phone 8] Cimbalino Toolkit: Trabajando con XAML

Cimbalino Toolkit: ApplicationBar y Servicios

Hoy vamos a continuar hablando un poco más sobre las cosas que nos ofrece este estupendo Toolkit para Windows Phone 8. En concreto, vamos a descubrir unas buenas utilidades que incorpora, y que nos ahorrarán escribir mucho código.

Pero vamos por pasos, primero vamos a presentar a un buen amigo: System.Windows.Interactivity. Seguro que muchos lo recordaréis de otros entornos como “WPF o morir”, “Silverlight shadow” o “Mi XAML se comió a tu HTML5”. Por si no es así, aquí va un curso de choque rápido sobre System.Windows.Interactivity.

System.Windows.Interactivity en diez segundos

Este ensamblado, nos permite añadir interacción a XAML sin necesidad de escribir código asociado a un evento o a un comando. Incluye dos tipos básicos: los Triggers y los Behaviors.

  • Los Triggers, nos permiten asociar una acción a un evento por código. Esta acciones las definimos creando una clase que herede de TriggerAction<T>, de esta forma, podemos añadir código al lanzamiento del evento OnSelectionChanged o Tap de una lista, sin tener que escribir code behind ni comandos en las viewmodels.
  • Los Behaviors aportan comportamiento a un control. Se definen creando una clase que herede de Behavior<T>. Al crearse el objeto, el behavior se engancha y en su código podemos tener acceso a todo el control que se ha adjuntado, podemos suscribirnos a sus eventos y modificar sus propiedades.

La principal diferencia entre ambos tipos es que, en uno (Trigger) podemos ejecutar la acción con cualquier evento que definamos y normalmente será  una acción que no modificará al propio control. Sin embargo, el otro (Behavior) ejecutará código sobre el control y su contenido.

Independientemente de usar uno u otro, esto vendrá dado por nuestras necesidades, la ventaja común es que nos permiten crear pequeñas porciones de funcionalidad, que podemos agregar a un control existente, sin tener que reescribirlo completamente.

Bien, ahora que ya nos hemos refrescado la memoria y estamos todos seguros de lo que es un Trigger y un Behavior, ¿Qué tiene esto que ver con Cimbalino? Bueno, pues tiene que ver que el bueno de Pedro Lamas se ha creado un buen número de Behaviors y TriggerActions para simplificarnos la vida, mucho muchísimo. ¿Necesitas mostrar un mensaje al usuario cuando realice cierta acción? ¿Quieres que se abra la página de review de la Store al pulsar un botón? ¿Te gustaría dar acceso a tu usuario a configurar elementos de conexión como WiFi, Bluetooth, Modo vuelo…? Pues todo esto y alguna cosa más, encontrarás en el Toolkit Cimbalino.

Behaviors

Cimbalino incluye 4 behaviors de serie. Dos de ellos referentes al ApplicationBar con capacidad de Bindings que vimos en el artículo anterior, un MultiBinding y un AutoFocus.

El MultiBindingBehavior nos permite enlazar a una misma propiedad varias fuentes de datos. De esta forma podríamos enlazar en un mismo TextBlock el nombre y apellidos de un usuario, o varias partes de una dirección postal, su uso es muy sencillo, definimos el behavior y, dentro de este, los distintos bindings que queremos realizar:

<TextBlock>
    <i:Interaction.Behaviors>
        <behaviors:MultiBindingBehavior PropertyName=«Text»>
            <behaviors:MultiBindingItem Value=»{Binding Coin}«/>
            <behaviors:MultiBindingItem Value=»{Binding Total}«/>
        </behaviors:MultiBindingBehavior>
    </i:Interaction.Behaviors>
</TextBlock>

Este código XAML enlaza las propiedades Coin y Total a la propiedad Text de nuestro TextBlock. Pero si ejecutamos, veremos que el output que obtenemos es “Object[]” simplemente. Esto ocurre porque, precisamente, el resultado del MultiBindingBehavior es un array de objetos. Tenemos que indicarle de alguna forma como tratar esos objetos para producir un resultado final. Podemos hacer esto mediante el uso de un Converter:

public class StringConcatenationConverter : IValueConverter
{
    public object Convert(object value, Type targetType, object parameter, System.Globalization.CultureInfo culture)
    {
        if (value == null)
            return string.Empty;

        var val = (object[])value;
        string result = string.Empty;
        val.ToList().ForEach(str => result = string.Format(«{0} {1}», result, str));
        return result;
    }

    public object ConvertBack(object value, Type targetType, object parameter, System.Globalization.CultureInfo culture)
    {
        throw new NotImplementedException();
    }
}

Básicamente lo que hacemos en este converter es obtener el array de objetos y recorrerlo concatenando sus valores. Ten en cuenta que este caso, un ejemplo, se basa en cadenas, pero podrías estar pasando diferentes tipos de datos, por lo que tendría más lógica.

Simplemente tenemos que añadir este StringConcatenationConverter a la propiedad Converter del MultiBindingBehavior y veremos el resultado correctamente:

image

El AutoFocusBehavior va a facilitarnos mucho la vida en páginas en las que el usuario pueda meter datos en varios TextBox. Este Behavior lo definimos a nivel de página y permite que configuremos dos opciones:

<i:Interaction.Behaviors>
    <behaviors:AutoFocusBehavior SelectAllOnFocus=«True»
                                 CycleNavigation=«True»/>
</i:Interaction.Behaviors>

SelectAllOnFocus, indica si se debe seleccionar todo el texto que contenga el TextBox cuando le llegue el foco. CycleNavigation indica si, cuando lleguemos al último TextBox de la página, debemos regresar al primero. Además tenemos un evento y un comando, AfterAutoFocus y AfterAutoFocusCommand, que nos permiten ejecutar código después de que un control reciba el foco. Para establecer el orden en que los TextBox de una página reciben el foco solo tenemos que indicar la propiedad TabIndex de cada uno. Cuando el usuario pulse el enter del teclado en pantalla, se saltará al siguiente en la lista. Fácil, ¿no?

TriggerActions

Además de estos behaviors, Cimbalino incluye un gran número de TriggerActions, dispuestas a ser usadas directamente en nuestro código XAML:

  • ClipboardAction, nos permite indicar el origen del texto y lo copia al portapapeles cuando se ejecute el trigger.
  • ConnectionSettingsAction, nos permite indicar el tipo de conexión y al lanzarse el trigger se abre la pantalla de configuración del sistema.
    • WiFi
    • Cellular
    • Bluetooth
    • Airplane Mode
  • EmailComposerAction, permite componer un email y enviarlo sin necesidad de escribir código C#.
  • MessageBoxAction, muestra un mensaje en pantalla.
  • SearchAction, lanza la busqueda del sistema con el texto que indiquemos.
  • WebBrowserAction, lanza el navegador del sistema con la url que indiquemos.
  • ShareStatusAction, comparte un texto en las redes sociales.
  • MarketplaceReviewAction, lanza la página de revisión de nuestra aplicación en el sistema.
  • Muchos más…

A continuación os pongo unos ejemplos de como funcionan algunas de estas TriggerActions:

SearchAction
<Button Content=«Search term ‘Dr Who'»>
    <i:Interaction.Triggers>
        <i:EventTrigger EventName=«Click»>
            <actions:SearchAction SearchQuery=«Dr Who»/>
        </i:EventTrigger>
    </i:Interaction.Triggers>
</Button>

ConnectionSettingsAction
<Button Content=«Open Bluetooth settings»>
    <i:Interaction.Triggers>
        <i:EventTrigger EventName=«Click»>
            <actions:ConnectionSettingsAction ConnectionSettingsType=«Bluetooth»/>
        </i:EventTrigger>
    </i:Interaction.Triggers>
</Button>

EmailComposerAction
<Button Content=«Send email»>
    <i:Interaction.Triggers>
        <i:EventTrigger EventName=«Click»>
            <actions:EmailComposeAction To=«josueyeray@gmail.com» Subject=«Hola» Body=«Mira mama, sin C#»/>
        </i:EventTrigger>
    </i:Interaction.Triggers>
</Button>

Muy sencillo de usar y sobretodo, una forma genial de simplificar nuestro código con ciertas tareas que no necesitan re implementarse una y otra vez en cada aplicación.

Conclusión

Como hemos podido ver, los Behaviors y las TriggerActions que incorpora Cimbalino pueden facilitarnos mucho el desarrollo, así que no los dejéis de probar. Para que os sea más fácil, aquí os dejo un ejemplo con algunos Behaviors y TriggerActions implementados. Espero que os sea de utilidad.

Un saludo y Happy Coding!

4 comentarios sobre “[Windows Phone 8] Cimbalino Toolkit: Trabajando con XAML”

Responder a anonymous Cancelar respuesta

Tu dirección de correo electrónico no será publicada. Los campos obligatorios están marcados con *