[Windows 10 Anniversary Update] Novedades en x:Bind, bindings compilados

Link - 05Introducción

Data binding es un mecanismo mediante el cual podemos enlazar los elementos de la interfaz de usuario con los objetos que contienen la información a mostrar. Cuando realizamos data binding, creamos una dependencia entre el valor de una propiedad llamada target con el valor de otra propiedad llamada source. Donde normalmente, la propiedad target recibirá el valor de la propiedad source.

Es el mecanismo base que nos permite utilizar el patrón MVVM en nuestras Apps móviles logrando:

  • Nos permite dividir el trabajo de manera muy sencilla (diseñadores – desarrolladores)
  • El mantenimiento es más sencillo.
  • Permite realizar Test a nuestro código.
  • Permite una más fácil reutilización de código.

Sin embargo, además de toda la potencia mencionada teníamos ciertas limitaciones. Los errores de Binding no se producían en tiempo de compilación de la App además de tener diferentes mejoras relacionadas con el rendimiento. Limitaciones existentes hasta ahora…

Con la llegada de Windows 10 nos llegaba la posibilidad de crear bindings compilados en lugar de los bindings clásicos. Ya vimos previamente su uso, pros y contras en este artículo. Ahora, con la llegada del Anniversary Update nos llegan una gran cantidad de novedades relacionadas con el desarrollo que iremos desgranando poco a poco, entre las que se incluyen novedades en x:Bind.

¿En qué consisten?, ¿qué aportan?

En este artículo vamos a centrarnos en el conjunto de novedades incluidas en el sistema de enlace a datos compilados en la actualización Anniversary Update.

Enlace a métodos

Previamente, desde la versión 1607 de Windows, {x:Bind} soportaba un evento como parte del enlace a datos.

Veamos un ejemplo. Vamos a crear una interfaz mostrando un listado de casas. La colección de casas:

private ObservableCollection<House> _houses;

public ObservableCollection<House> Houses
{
     get
     {
          if (_houses == null)
               LoadHouses();

          return _houses;
     }
}

Que cargaremos con sencillos datos locales:

private void LoadHouses()
{
     _houses = new ObservableCollection<House>();

     _houses.Add(new House
     {
          Name = "Home 1"
     });
     _houses.Add(new House
     {
          Name = "Home 2"
     });
}

La interfaz de usuario, un control ListView enlazado con un enlace compilado a la colección:

<ListView
     ItemsSource="{x:Bind Houses}"
     ItemTemplate="{StaticResource HouseDataTemplate}" />

En cuanto a la plantilla que define cada elemento del listado:

<DataTemplate
     x:Key="HouseDataTemplate"
     x:DataType="model:House">
     <Grid>
          <Grid.ColumnDefinitions>
               <ColumnDefinition Width="Auto" />
               <ColumnDefinition Width="*" />
          </Grid.ColumnDefinitions>
          <TextBlock 
               Text="{x:Bind Name}"
               x:Phase="1"
               VerticalAlignment="Center" />
          <Button 
               Grid.Column="1"
               Content="Click me!"
               Click="{x:Bind Click}" />
     </Grid>
</DataTemplate

Se utiliza x:Bind para enlazar las propiedades, estableciendo el tipo de los datos a enlazar mediante la propiedad x:DataType.

NOTA: Recuerda que x:Bind está fuertemente tipado.

¿Ves algo “raro”?. El botón incluido dentro de la plantilla enlaza el evento Click a “algo” llamado Click.

Hasta ahora no habíamos visto la definición de la entidad House:

public class House
{ 
     public string Name { get; set; }

     public void Click(object sender, RoutedEventArgs e)
     {
          Debug.WriteLine(string.Format("Clicked {0}!", Name));
     }
}

Ahora probablemente has deducido que ocurre. Se pueden realizar enlace a datos directamente a eventos. Se necesita en el evento:

  • No tener parámetros. Ejemplo void Click().
  • Coincidir los parámetros con los parámetros del evento. Ejemplo: void Click(object sender, RoutedEventArgs e).
  • O coincidir con los tipos base de los parámetros del evento. Ejemplo: void Click(object sender, object e).

Al pulsar el botón de cada plantilla, se desencadena el evento Click que tenemos disponible en la entidad.

El resultado:

Event Bindings

Event Bindings

Ahora, tras la actualización Anniversary Update, se da un paso más permitiendo enlazar con cualquier método sin necesidad de un converter. Las únicas condiciones que debe complir el método es que sea público y en caso de tener parámetros, facilitarlos. Una forma de:

  • Obtener conversión de valores avanzada.
  • Tener un enlace a datos que dependa de más de un parámetro.

Veamos un ejemplo. En algunos formularios donde hay contraseñas involucradas se ofrece feedback visual de la seguridad de la contraseña introducida. Vamos a mostrar una barra de color rojo, naranja o rojo dependiendo de la seguridad.

Tendremos una propiedad donde se enlazará la contraseña:

public string UserPassword { get; set; }

En la UI:

<ProgressBar 
     Background="Transparent"
     Foreground="{x:Bind PasswordStrengthBrush(Password.Password), Mode=OneWay}"
     Value="{x:Bind PasswordStrengthValue(Password.Password), Mode=OneWay}"
     Height="3"/>
<PasswordBox 
     x:Name="Password"
     PlaceholderText="Insert Password"      
     Password="{x:Bind UserPassword, Mode=TwoWay}" />

Un control PasswordBox encargado de capturar la contraseña (utilizando x:Bind), y en la parte superior un ProgressBar que mostrará más o menos recorrido y distintos colores dependiendo de la seguridad de la contraseña introducida.

Fíjate en el enlace a datos de Foreground y Value del PasswordBox. ¿Qué está pasando?.

Para modificar el color se enlaza a un método público llamado PasswordStrengthBrush que recibe como parámetro la contraseña (directamente accediendo a la propiedad Password del PasswordBox!).

En cuanto al valor, de nuevo, se hace un enlace a un método público llamado PasswordStrengthValue recibiendo como parámetro de nuevo la contraseña.

El primero de los métodos:

public SolidColorBrush PasswordStrengthBrush(string password)
{
     if (string.IsNullOrEmpty(password))
          return new SolidColorBrush(Colors.Transparent);

     int length = password.Length;

     if (length >= 3 && length < 6)
          return new SolidColorBrush(Colors.Orange);
     if (length >= 6)
          return new SolidColorBrush(Colors.Green);

     return new SolidColorBrush(Colors.Red);
}

Si la longitud de la contraseña es inferior a tres carácteres, se devuelve color rojo, si es ingerior a seis carácteres, color naranja, devolviendo color verde en caso de que la longitud de la contraseña sea superior a seis carácteres.

El segundo de los métodos:

public double PasswordStrengthValue(string password)
{
     if (string.IsNullOrEmpty(password))
          return 0;

     int length = password.Length;

     if (length >= 3 && length < 6)
          return 66;
     if (length >= 6)
          return 100;

     return 33;
}

Aumentará el progreso de la barra de progreso en base a la longitud de la contraseña.

El resultado:

Function Bindings

Function Bindings

En un escenario donde se necesite un enlace a datos en modo two-way, se debe tener un segundo método encargado de hacer la operación inversa. Esto se consigue utilizando la propiedad BindBack.

Conversiones implícitas

x:Bind añade soporte a conversiones implícitas de algunos tipos.

¿Cuántas veces has creado un BoolToVisibilityConverter o similar (inverso, con opacidad, etc.)?.

Ya no sería necesario!. Podemos tener propiedades de tipo bool:

public bool IsVisible { get; set; }
public bool IsNotVisible { get; set; }

Donde una es cierta y otra falsa:

IsVisible = true;
IsNotVisible = false;

Al enlazar desde la UI:

<TextBlock 
     Text="Visible"
     Visibility="{x:Bind IsVisible}"/>
<TextBlock 
     Text="No Visible"
     Visibility="{x:Bind IsNotVisible}"/>

Podemos enlazar la propiedad Visibility directamente con bindings compilados a las propiedades de tipo bool.

¿El resultado?

Conversiones implícitas

Conversiones implícitas

El esperado, se muestra el elemento visual enlazada la propiedad verdadera. Se realiza la conversión implícita de un tipo a otro.

Castings de valor explícito soportados

Al contrario que el sistema de enlace a datos clásico que hace uso de duck typing, validación semántica, para validar el enlace, los bindings compilados verifican en tiempo de compilación que los tipos de los datos proporcionados coinciden. O lo que es lo mismo, si el valor que se estan tratando de enlazar no tiene un casting implícito al tipo de la propiedad, no se puede realizar el enlace sin un converter.

Eso era hasta ahora. Al más puro estilo C#, podemos declarar casting explícitos en un binding compilado.

Si tenemos una propiedad de tipo object:

public object Element { get; set; }

Si al crear la instancia, se crea utilizando un tipo específico (en nuestro ejemplo se utilizan tipos básicos para simplificar el ejemplo, object y TextBlock):

Element = new TextBlock
{
     Text = "Cool"
};

En la UI:

<TextBlock 
     Text="{x:Bind ((TextBlock)Element).Text}"/>

El resultado:

Casting explícito

Casting explícito

Se hace el casting al tipo TextBlock y podemos acceder a sus propiedades, enlazamos al texto.

Tenéis el código fuente del ejemplo utilizado disponible en GitHub:

Ver GitHub

Interesantes novedades, algunas de ellas muy solicitadas. También se han añadido otro tipo de actualizaciones menores como el soporte a más tipos de datos, por ejemplo, acceder a un índice específico de un diccionario clave-valor. Sin embargo, nos hemos concentrado en las que mayor impacto directo pueden tener en el desarrollo del día a día.

Y a ti, ¿qué te parecen?, ¿cúal es tu novedad favorita?, ¿qué te gustaría que se añadiese?.

Más información

[Evento SVQXDG] Xamarin Dev Days en Sevilla!

XamarinEl evento

Xamarin Dev Days son una serie de eventos celebrados a lo largo de todo el mundo que ofrecen la posibilidad de conocer las últimas novedades relacionadas con el desarrollo Xamarin, poder disfrutar de talleres y por supuesto, compartir momentos de networking.

Xamarin Dev Days

Xamarin Dev Days

La agenda:

• 9:00AM Registro y bienvenida.

• 9:30 – 10:10AM Introducción a Xamarin. Introducción a los conceptos básicos tanto de Xamarin Classic como de Xamarin.Forms así como a la integración con Visual Studio, Xamarin Test Cloud, etc. Por Josué Yeray.

• 10:20 – 11:00AM Xamarin Forms. Tras una introducción a conceptos básicos se verá como estructurar el proyecto y una serie de buenas prácticas para compartir la mayor cantidad de código posible. Finalmente se terminará con las últimas novedades como Xamarin.Forms Previewer, DataPages, Themes o Native Embedding. Por Javier Suárez.

• 11:10 – 11:50AM Xamarin + Azure. Gracias al Azure podemos crear servicios de backend, notificaciones push y otras características esenciales de forma compartida. En esta sesión aprenderemos como sacarle partido a Azure desde nuestras aplicaciones Xamarin. Por Marcos Cobeña.

• 12:00 – 2:00PM Hands on Lab. ¿Crear una aplicación Xamarin paso a paso con MVVM, uso de servicios web y accediendo a características de cada plataforma?. En este taller realizaremos una aplicación con esas características entre todos. Anímate y ven con tu portátil preparado!

• 2:00 – 3:00PM Comida.

• 3:00 – 4:00PM Hands on Lab.

El lugar

El evento se celebrará en el WorkINCompany. Dirección detallada:

Calle Rioja 13, 1º C, Sevilla

WorkINCompany

WorkINCompany

La fecha

El evento tendrá lugar el próximo Sábado, 10 de Septiembre de 9:00h a 16:00h. Tendremos tres sesiones técnicas de  40 minutos de duración cada una junto a un taller de 3 horas de duración. Además contaremos con regalos y sorpresas.

¿Te apuntas?

Más información

[Material XDev Madrid] WinObjc: De iOS a Windows y extendiendo Xamarin.Forms

El evento

El pasado 09 de Agosto, desde el grupo XDev en Madrid, se organizaba un evento veraniego centrado en desarrollo móvil multiplataforma, con temas como convertir aplicaciones de iOS a UWP o extender Xamarin.Forms, además de tener momentos para el networking y algun que otro detalle con los asistentes.

El material

Pude participar en el evento con dos sesiones.

En la primera de ellos, nos centramos en el Windows Bridge para iOS, WinObjC. Convertimos algunas aplicaciones iOS a UWP e incluso vimos como añadir características específicas de la plataforma Windows como el uso de Live Tiles.

En la segunda sesión, nos centramos en como extender Xamarin.Forms para poder acceder a características específicas de cada plataforma, crear nuevos controles o efectos con el objetivo de ofrecer la mejor experiencia posible en cada plataforma, aun compartiendo gran parte de la interfaz de usuario.

En cuanto a las demos técnicas realizadas, las tenéis disponible en GitHub:

Ver GitHub

Quisiera terminar añadiendo algunos agradecimientos. Gracias a todos los asistentes por asistir además de la constante participación con preguntas, en estas fechas y con tan poca antelación en el anuncio del evento es destacable; gracias a Dachi Gogotchuri por toda la ayuda en la organización y gracias a Liferay por sus increíbles instalaciones cediéndonos una sala. Nos vemos en la próxima!

Más información

[Evento XDev Madrid] WinObjc: De iOS a Windows y extendiendo Xamarin.Forms

600_449727003.jpegIntroducción

A finales del año pasado nació el grupo de usuario XDev en Madrid, grupo de desarrolladores multiplataforma de Madrid.

Aprovechando visita a la capital, ¿algo mejor que organizar un evento junto a un poco de coworking?

El evento

El evento tendrá lugar el próximo Martes, 09 de Agosto y contará con dos sesiones:

  • 19:00h – 20:00h – WinObjc: Cruzamos el puente desde iOS a Windows! ¿Tienes una aplicación iOS?, ¿quieres reaprovechar tus conocimientos y código Objective-C para acceder a la plataforma universal Windows?. En esta sesión conoceremos el Bridge de Windows para iOS, convertiremos algunas aplicaciones iOS a UWP e incluso veremos como añadir características específicas de la plataforma Windows como el uso de Live Tiles por ejemplo. ¿Te apuntas?
  • 20:00h – 21:00h – Profundizando y extendiendo Xamarin.Forms Xamarin.Forms es un framework que nos añade una capa de abstracción permitiendo desarrollar la interfaz de nuestras aplicaciones móviles multiplataforma una única vez, compartiendo el código de la UI. Veremos como crear aplicaciones con Xamarin.Forms además de centrarnos en cómo acceder a características propias de cada plataforma mediante la creación de servicios o Custom Renders.

Se realizará en Liferay en sus oficinas de Paseo de la Castellana, 280, 28046 Madrid.

¿Te apuntas?

Más información

[Evento Online] React Native vs Xamarin

cross-platform-logosIntroducción

No hay duda, los smartphones han llegado, y ya forman parte de la vida de todos nosotros. En muchos aspectos de nuestra vida accedemos a información, realizamos algna tarea o sencillamente nos entretenemos con uno de ellos.

Esto también nos afecta como desarrolladores. El desarrollo móvil se ha convertido en una prioridad en una gran mayoria de ámbitos.

Actualmente contamos con varias plataformas dominantes:

  • iOS
  • Android
  • Windows Phone

Esto a nivel de desarrollo nos supone barreras. Contamos con múltiples plataformas de desarrollo diferentes, lenguajes diferentes, etc. suponiendo un nivel de aprendizaje y esfuerzo cada vez mayor de cara a desarrolladores. Además, la experiencia nos ha demostrado que los usuarios no aceptan aplicaciones no nativas. Buscan aplicaciones rápidas, fluidas y con consumos moderados perfectamente adaptadas a la plataforma, ofreciendo una experiencia completa.

¿Qué podemos hacer para mejorar este panorama?

Opciones multiplataforma

Aquí es donde entran en juego las tecnologías multiplataforma. En estos últimos años han aparecido diversas tecnologías que permiten aprovechar una base de código en multiples plataformas, dos de las que sin duda alguna se está hablando mucho son: Xamarin y React Native.

El evento

En este webinar estaremos Carlos Fernández y un servidor (junto a Braulio Diez) pondremos las dos tecnologías a prueba y compararemos como se desarrolla con cada una de ellas.

Xamarin VS React

Xamarin VS React

La agenda:

  • Introducción
  • Xamarin:
    • Que es y para que sirve:
      • Xamarin Forms
      • Xamarin Classic
    • Plataformas soportadas.
    • Equipo desarrollo recomendado.
  • React Native que es y para que sirve.
    • Qué es y para que sirve.
    • Plataformas soportadas.
    • Equipo desarrollo recomendado.
  • Demo time: React Native vs Xamarin, Fight!:
    • Hola Mundo.
    • Navegación.
    • Manejo de formularios.
    • Manejo de elementos del dispositivo (Mapas / GPS, Camara…)
  • Conclusiones.

El evento será el próximo Jueves, 08 de Septiembre y tendrá una duración de 2 horas.

  • 19:00 en España
  • 13:00 en Colombia
  • 12:00 en México Centro
  • 13:30 en Venezuela
  • 15:00 en Chile continental

¿Te apuntas?

Más información

[Evento Online] La importancia de la accesibilidad en el desarrollo

Show-02-WFIntroducción

La accesibilidad es un factor de vital importancia que por suerte, es tenida en cuenta cada vez con mayor frecuencia y peso en desarrollos web, móviles, etc.

La importancia de la accesibilidad

La importancia de la accesibilidad

Hemos tratado en ocasiones aspectos relacionados con el desarrollo en eventos como por ejemplo, la sintetización de textos en voz, comandos de voz o el uso de Cortana pero…y las herramientas de desarrollo, ¿cómo programa una persona ciega?, ¿cómo diseña una interfaz?, ¿hay vida después del ratón?.

El evento

En esta ocasión, me acompañaran en un Hangout Josué Yeray y Santiago Porras, y podremos disfutar de la compañia de Juanjo Montiel.

Juanjo es un apasionado de la tecnología y de la música. Es desarrollador de software y consultor de accesibilidad en una empresa de Barcelona, conjuga su trabajo con el desarrollo como hobbie de herramientas accesibles para mejorar el día a día de las personas con discapacidad. Ciego de nacimiento, considera que su discapacidad es un reto a superar. Le encantan los retos, y afirma que su ceguera, a pesar de ser un problema, también le ha hecho mejor, al tener que espabilarse y buscar los trucos necesarios para trabajar en igualdad de condiciones con el resto de sus compañeros.

En este evento de CartujaDotNet analizaremos de primera mano, las herramientas, trucos y necesidades relacionadas con la accesibilidad en el desarrollo.

El evento será el próximo Jueves, 28 de Julio.

  • 19:00 en España
  • 13:00 en Colombia
  • 12:00 en México Centro
  • 13:30 en Venezuela
  • 15:00 en Chile continental

¿Te apuntas?

Más información

Microsoft Tech Summit

Introducción

El pasado mes de Febrero, se repetía la .NET Conference Spain con más de 1700 asistentes y otras 5000 personas por streaming, sumado a grandes sesiones, stands o la presencia de Satya Nadella, un rotundo éxito.

dotNet Spain Conference 2016

dotNet Spain Conference 2016

Microsoft Tech Summit

Ante tal éxito, este año se plantea un nuevo evento para el próximo 6 de octubre en el Palacio Municipal de Congresos de Madrid, llega el Microsoft Tech Summit. Será un evento con más de 40 sesiones de más de una hora destinado a desarrolladores y profesionales de infraestructura (Xamarin, DevOps, Bots o Windows Server 2016 por poner ejemplos).

Call 4 Papers

Además de poder asistir al evento, ya esta abierto el Call 4 Papers pudiendo enviar propuesta antes del 7 de septiembre a esmsdn@microsoft.com con el asunto “Call4Papers: Microsoft Tech Summit”.

  • Windows Server 2016: Hyper-V, Containers, Identity, Nano Server, OMS, Azure Stack, etc.
  • DevOps: CHEF, Docker, Puppet, CloudBees, ARM Templates, Visual Studio Team Services, etc
  • Big Data & Analytics: Cortana Intelligence Suite, SQL Data Warehouse, Machine Learning, R, etc.
  • Cognitive Services & Conversations as a Platform: Bot Framework SDK, Cortana Proactive Actions, etc.
  • Mobile Apps & Cross-Platform: Xamarin, Apache Cordova, Windows Centennial, etc.
  • Cloud Dev: Azure App Services, Azure Functions, Service Fabric, Microservices, etc.
  • IoT: Azure IoT Hub, Azure IoT Suite, etc.
  • OSS: Linux Apps on Azure, Azure Container Services, .NET Core, etc.
  • Productivity: Office 365, Sharepoint Dev, etc.
  • Business Intelligence: PowerBI Embedded, etc.
  • Coding 4 Fun: Juegos, etc.
  • Others: Cualquier otro tema relacionado con tecnologías Microsoft.

No te lo puedes perder!

Más información

[Xamarin] Xamarin UITest y Test Recorder desde Visual Studio

Bug - 02La calidad en movilidad cuesta

La calidad en el software es algo innegociable. Un buen proceso en el desarrollo y gestión del proceso es fundamental para conseguir ese objetivo. Debemos entregar Apps móviles perfectamente adaptadas a cada plataforma, ofreciendo la mejor experiencia de usuario posible pero sobretodo, funcional. Una App funcional debe cubrir y cumplir unos mínimos exigentes de calidad.

Como desarrolladores, somo humanos y el código no estara libre de errores. Sin embargo, el proceso que apliquemos para la detección y corrección a los mismos, es vital.

Podemos crear dos tipos de pruebas diferenciadas:

  • Pruebas unitarias: Pruebas de pequeñas unidades funcionales de nuestra App. Utilizaremos NUnit para realizar estas pruebas unitarias generalmente de ViewModels, Helpers y Servicios.
  • Pruebas de interfaz de usuario: Pruebas sobre la interfaz de usuario, escritura en cajas de texto, pulsaciones de botones, etc. Utilizaremos Xamarin UITest para estas pruebas.

Xamarin UITest

Xamarin.UITest es un framework de testing que permite realizar pruebas de comportamiento de la aplicación automatizando interacciones con la misma.

Integrado con Xamarin.iOS y Xamarin.Android, aunque puede usarse con proyectos iOS y Android escritos con Objective-C y Java, permite automatizar la gestión con la interfaz con pulsación de botones, introducir textos, gestos, tomar capturas, etc.

Cada UITest es un método escrito en C# que sigue el patrón Arrange-Act-Assert:

  • Arrange: El test inicializa todo lo necesario para que pueda ser lanzado.
  • Act: La interacción automatizada con la aplicación, introducir textos, pulsar botones, etc.
  • Assert: El test verifica resultados de las acciones realizadas en Act. Por ejemplo, verifica que tras introducir un valor incorrecto en una caja de texto, aparece un mensaje de error.

Nuestra aplicación:

Calculadora

Calculadora

Para poder analizar y profundizar en las pruebas, vamos a utilizar una aplicación realmente sencilla, una calculadora. Vamos a ver y analizar el proyecto de tipo Xamarin UITest de nuestra aplicación.

Todas las interacciones automatizadas con la aplicación ocurren mediante una instancia de Xamarin.UITest.IApp. Esta interfaz define los métodos utilizados para realizar la interacción. Cuenta con dos implementaciones:

  • Xamarin.UITest.iOS.iOSApp: Automatiza en aplicaciones iOS.
  • Xamarin.UITest.Android.AndroidApp: Automatiza en aplicaciones Android.

Ambos objetos, iOSApp y AndroidApp, se instancian utilizando la clase ConfigureApp. Esta clase se asegura de instanciar correctamente la aplicación en cada caso.

Tras instanciar la aplicación, la interacción con la aplicación se realiza utilizando querys. Los métodos de Xamarin.UITest esperan en la mayoría de casos un parámetro de tipo Func<AppQuery, AppQuery> para localizar los elementos visuales.

En nuestra aplicación, queremos realizar una prueba sencilla de suma, donde accederemos al botón numérico dos, al operador de suma y al símbolo igual. Esto nos permitirá verificar que el comportamiento de sumar dos más dos es el esperado.

Utilizando querys accedemos a cada elemento visual:

static readonly Func<AppQuery, AppQuery> TwoButton = c => c.Marked("Digit2");
static readonly Func<AppQuery, AppQuery> PlusButton = c => c.Marked("Operator+");
static readonly Func<AppQuery, AppQuery> EqualsButton = c => c.Marked("OperatorEquals");

Por supuesto, antes de lanzar el test, debemos realizar el proceso de inicialización de IApp. Normalmente, en una clase de tests tendremos agrupados múltiples tests. Cada uno de ellos debe correr en una condiciones limpias, es decir, se debe realizar la inicialización de IApp en cada caso. Este proceso se suele realizar en el método SetUp.

private IApp _app;

[SetUp]
public void SetUp()
{
     switch (TestEnvironment.Platform)
     {
          case TestPlatform.Local:
               var appFile =
                    new DirectoryInfo(Path.Combine("..", "..", "testapps"))
                        .GetFileSystemInfos()
                        .OrderByDescending(file => file.LastWriteTimeUtc)
                        .First(file => file.Name.EndsWith(".app") || file.Name.EndsWith(".apk"));

                _app = appFile.Name.EndsWith(".app")
                        ? ConfigureApp.iOS.AppBundle(appFile.FullName).StartApp() as IApp
                        : ConfigureApp.Android.ApkFile(appFile.FullName).StartApp();
                break;
           case TestPlatform.TestCloudiOS:
                _app = ConfigureApp.iOS.StartApp();
                break;
           case TestPlatform.TestCloudAndroid:
                _app = ConfigureApp.Android.StartApp();
                break;
     }
}

Por último, tras tener la inicialización (creada automáticamente al crear nuevo proyecto de tipo Xamarin UITest) y las querys, nuestro test de suma de dos más dos será:

[Test]
public void TheTwoPlusTwoIsFourTest()
{
     _app.WaitForElement(c => c.Marked("OperatorEquals"));

     _app.Tap(TwoButton);
     _app.Tap(PlusButton);
     _app.Tap(TwoButton);
     _app.Tap(EqualsButton);
     _app.Screenshot("When I get the result value");

     AppResult[] results = _app.WaitForElement(c => c.Marked("DisplayValue").Text("4"));

     Assert.IsTrue(results.Any());
}

Pulsamos en cada botón, tomamos captura del resultado y finalmente verificamos el resultado.

Corriendo Xamarin UITests desde Visual Studio

Para lanzar pruebas unitarias y Xamarin.UITests desde Visual Studio, utilizaremos el explorador de pruebas disponible desde el menu Test.

Explorador de pruebas

Explorador de pruebas

En nuestro proyecto con la calculadora realizada en Xamarin.Forms con pruebas con Xamarin.UITests vemos lo siguiente…

¿Por qué no aparecen los tests?

¿Por qué no aparecen los tests?

No aparecen, ¿qué ocurre?. El explorador de pruebas solo muestra por defecto tests realizados con MSTests. En nuestro proyecto Xamarin utilizamos NUnit para las pruebas unitarias y además XAmarin UITests, hace uso de NUnit también.

Vamos a solucionar el problema añadiendo la posibilidad de lanzar tests realizados con NUnit. Desde el menu de Herramientas->Extensiones y actualizaciones…

Extensions

Extensiones y actualizaciones

Dentro del conjunto Online buscamos por NUnit Test Adapter. Debemos instalar el adaptador correspondiente a NUnit 2 a pesar de estar disponible la versión correspondiente a NUnit 3. Esto es así ya que Xamarin UITest hace uso de la versión 2 de NUnit.

NUnit Test Adapter

NUnit Test Adapter

Tras instalar la extensión, al compilar el proyecto:

Aparecen los tests!

Aparecen los tests!

Ahora podemos lanzar o depurar cualquiera de las pruebas (o todas) sencillamente haciendo clic derecho sobre las mismas.

Xamarin Test Recorder

Podemos crear Xamarin UITests a mano y haciendo uso del REPL, sin embargo, es mucho más sencillo hacer uso de Xamarin Test Recorder.

Xamarin Test Recorder es una herramienta que nos permite, seleccionar un paquete de aplicación, lanzar la aplicación, interaccionar con la interfaz de usuario capturando los movimientos necesarios y la herramienta generará automáticamente el test en base a la interacción realizada.

Para poder utilizar la herramienta desde Visual Studio debemos instalar la extensión Xamarin Test Recorder 2015.

NOTA: Existe una versión de la extensión preparada para usar desde Visual Studio 2013.

Xamarin Test Recorder Extension

Xamarin Test Recorder Extension

Tras instalar la extensión, para poder utilizarla debemos cumplir unos requisitos básicos:

  1. Tener abierto un proyecto de tipo Xamarin UITest. En caso de no contar con ninguno en el proyecto, crear uno.
  2. Tener abierto un emulador o bien conectado por USB un dispositivo.

Tras cumplir los requisitos, podemos ver el siguiente indicador visual:

Indicador visual

Indicador visual

Pulsando sobre el indicador visual, nos aparecerá una opción para grabar un nuevo test.

Grabar nuevo test

Grabar nuevo test

En este punto, podremos elegir el paquete de la aplicación que deseamos probar.

Seleccionar paquete

Seleccionar paquete

Tras seleccionar el paquete de la aplicación, se lanzará la misma en el emulador o dispositivo conectado además de crear un nuevo método de Test vacío en el editor.

Con la aplicación en ejecución, y la grabación del test, cualquier interacción realizada quedará reflejada en un nuevo paso del nuevo método de test creado por la herramienta.

Una vez completada la interacción, vamos a detener la grabación. Pulsamos sobre el icono de grabación y nos aparecerá un menu como el siguiente:

Detener grabación

Detener grabación

Bastará con elegir la primera de las opciones para detener la grabación. Tendremos el código C# resultante de las interacciones realizadas en un nuevo método creado por la herramienta.

En el proceso de grabación del test, podemos tomar capturas de pantalla en cualquier momento pulsando sobre el icono de grabación y utilizando la opción Take Screenshot.

Sencillo, ¿cierto?. Las pruebas creadas las podemos lanzar directamente en local en nuestros emuladores o dispositivos físicos o hacer uso de Xamarin Test Cloud.

Tenéis el código fuente del ejemplo utilizado disponible en GitHub:

Ver GitHub

Recordad que podéis dejar cualquier comentario, sugerencia o duda en los comentarios.

Más información

[Xamarin.Forms] Utilizando DataPages

Forms-01-WFIntroducción a DataPages

En no pocas ocasiones nos planteamos realizar una aplicación sencilla para consultar información existente desde un servidor o infraestructura cloud.

En el marco del pasado Evolve 2016, Xamarin anunciaba la disponibilidad e la preview de Xamarin.Forms DataPages.

Los DataPages llegan para facilitar la creación de aplicaciones de tipo maestro-detalle con acceso a una fuente de información de la forma más rápida y sencilla posible. Se renderizarán listados y detalles automáticamente en base a los datos pudiendo personalizar con el uso de diferentes controles y el uso de temas.

DataPages

DataPages

DataPages se puede utilizar consumiendo el paquete NuGet Xamarin.Forms.Pages.

Permite acceder a diferentes fuentes de información con data sources prefabricados:

  • JsonDataSource: Una URL que contiene un JSON.
  • AzureDataSource (paquete NuGet separado): Azure Mobile Services.
  • AzureEasyTableDataSource (paquete NuGet separado).

Para mostrar la información correspondiente a la fuente de información contamos con una serie de páginas y controles.

Las páginas disponibles son:

  • ListDataPage: Muestra un listado de elementos.
  • DirectoryPage: Listado de elementos agrupados.
  • PersonDetailPage: Página de detalles que muestra la información correspondiente a un tipo de objeto.

En cuanto a controles:

  • ListItem: Vista prefabricada destinado a mostrar un elemento de un listado. Puede mostrar título, detalles e imagen.
ListItem

ListItem

  • CardView: Este control es similar al CardView nativo de Android. Permite mostrar un texto principal, uno secundario y una imagen.
CardView

CardView

  • HeroImage: Control que permite mostrar título, detalles e imagen, dándole peso a esta última. Tambien cuenta con una propiedad para modificar el aspecto.
HeroImage

HeroImage

Preparando la solución

Comenzamos creando una aplicación Xamarin.Forms utilizando una librería portable (PCL):

Nueva aplicación Xamarin.Forms

Nueva aplicación Xamarin.Forms

Tras crear el proyecto debemos añadir la referencia a DataPages y Themes. Para ello, utilizaremos NuGet para añadir:

  • Xamarin.Forms.Pages
  • Xamarin.Forms.Theme.Base
  • Xamarin.Forms.Themes.Light o Xamarin.Forms.Themes.Dark
Añadir paquetes utilizando NuGet

Añadir paquetes utilizando NuGet

NOTA: Debemos añadir los paquetes NuGet tanto en la libería portable como en el proyecto específico de cada plataforma, tanto en iOS como en Android.

DataPages requiere el uso de temas para poder renderizar correctamente. Para ello, en App.xaml debemos añadir el namespace detema y añadirlo en los recursos de la aplicación.

Dependiendo del tema elegido, los espacios de nombre a utilizar son:

xmlns:light="clr-namespace:Xamarin.Forms.Themes;assembly=Xamarin.Forms.Theme.Light"    
xmlns:dark="clr-namespace:Xamarin.Forms.Themes;assembly=Xamarin.Forms.Theme.Dark"

Y para añadir el tema a utilizar dentro del conjunto de recursos de la aplicación:

<ResourceDictionary MergedWith="dark:DarkThemeResources" />        
<ResourceDictionary MergedWith="light:LightThemeResources" />

Por ahora, para completar el proceso de uso del tema, debemos añadir algo de código específico por cada plataforma para cargar las librerías correspondientes.

var x = typeof(Xamarin.Forms.Themes.DarkThemeResources);    
x = typeof(Xamarin.Forms.Themes.LightThemeResources);    
x = typeof(Xamarin.Forms.Themes.Android.UnderlineEffect);

En el caso de iOS código a ejecutar en el AppDelegate, en el de Android, en la actividad principal MainActivity.

Ejemplo básico

Añadimos la vista XAML principal de la aplicación. Incluimos el espacio de nombres correspondiente a DataPages para acceder y utilizar las páginas, controles y data sources incluidos.

xmlns:p="clr-namespace:Xamarin.Forms.Pages;assembly=Xamarin.Forms.Pages"

Añadimos:

<?xml version="1.0" encoding="UTF-8"?>
<p:ListDataPage xmlns="http://xamarin.com/schemas/2014/forms"
             xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
             xmlns:p="clr-namespace:Xamarin.Forms.Pages;assembly=Xamarin.Forms.Pages"
             x:Class="DataPagesDemo.SessionDataPage"
             Title="Sessions" StyleClass="Events">
    <p:ListDataPage.DataSource>
        <p:JsonDataSource Source="http://demo3143189.mockable.io/sessions" />
    </p:ListDataPage.DataSource>
</p:ListDataPage>

El resultado:

El resultado

El resultado

Increíble, ¿cierto?. Vamos a analizar el código  (escaso) añadido.

Hemos modificado el tipo de página de una ContentPage, página básica para añadir contenido en Xamarin.Forms por una ListDataPage. Xamarin.Forms DataPages nos ofrece este tipo de página que nos permite crear un maestro-detalle con suma facilidad en base una fuente de información.

Utilizando la propiedad DataSource de la página, creamos un JsonDataSource que se encargará de acceder a la información realizando la petición HTTP necesaria y parseando la información para permitir mostrarla en la UI realizando bindings.

¿Dónde realizamos el enlace de la UI con la información?. La propiedad StyleClass de la página permite acceder a un estilo. En este caso se utiliza “Events”, estilo prefabricado que ya define lo necesario para enlazar correctamente con la fuente de información (“title”, “image”, “presenter”).

Tenéis el código fuente del ejemplo básico disponible en GitHub:

Ver GitHub

Añadiendo personalización

Vamos a crear un segundo ejemplo donde personalizar aspectos como la fuente de información, el aspecto visual modificando controles utilizados y por supuesto, también los enlaces a la información.

Vamos a generar una fuente de información de pruebas utilizando Json generator. Reemplazamos la fuente utilizando el datasource de tipo JsonDataSource:

<p:ListDataPage.DataSource>
     <p:JsonDataSource Source="http://www.json-generator.com/api/json/get/clOPFoTImW?indent=2" />
</p:ListDataPage.DataSource>

A continuación, vamos a modificar la propiedad DefaultItemTemplate que permite especificar la apariencia de cada elemento dentro del listado. En lugar de utilizar el control CardView utilizado por defecto en el ejemplo anterior, vamos a utilizar un ListItem.

<p:ListDataPage.DefaultItemTemplate>
     <DataTemplate>
          <ViewCell>
               <p:ListItemControl
                    Title="{p:DataSourceBinding name}" 
                    Detail="{p:DataSourceBinding email}" 
                    ImageSource="{p:DataSourceBinding picture}"
                    DataSource="{Binding Value}">
               </p:ListItemControl>
          </ViewCell>
     </DataTemplate>
</p:ListDataPage.DefaultItemTemplate>

ListItem cuenta con propiedades Title, Detail e ImageSource para especificar sus valores, utilizando la palabra reservada DataSourceBinding enlazaremos con los campos deseados del archivo JSON.

Nuestra página quedaría finalmente:

<p:ListDataPage xmlns="http://xamarin.com/schemas/2014/forms"
             xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
             xmlns:p="clr-namespace:Xamarin.Forms.Pages;assembly=Xamarin.Forms.Pages"
             x:Class="DataPages.MainView"
                   StyleClass="Events" 
                   Title="Users">   
    <p:ListDataPage.DataSource>
        <p:JsonDataSource Source="http://www.json-generator.com/api/json/get/clOPFoTImW?indent=2" />
    </p:ListDataPage.DataSource>
    <p:ListDataPage.DefaultItemTemplate>
        <DataTemplate>
            <ViewCell>
            <p:ListItemControl
                Title="{p:DataSourceBinding name}" 
                Detail="{p:DataSourceBinding email}" 
                ImageSource="{p:DataSourceBinding picture}"
                  DataSource="{Binding Value}">
                </p:ListItemControl>
            </ViewCell>
        </DataTemplate>
    </p:ListDataPage.DefaultItemTemplate>
</p:ListDataPage>

Tras ejecutar:

Personalización

Personalización

Además de contar con el listado, tenemos también disponible la vista de detalles mostrando más información a partir de los diferentes datos del JSON.

Y hasta aquí el repaso a las posibilidades de Xamarin.Forms DataPages. Una forma bastante rápida y sencilla para crear aplicaciones sencillas o prototipos con posibilidades interesantes en personalización y extensión. Siempre repitiendo cuatro sencillos pasos:

  1. Instalar paquetes NuGet.
  2. Seleccionar tema.
  3. Añadir DataPage.
  4. Configurar data source y personalización.

Tenéis el código fuente disponible e GitHub:

Ver GitHub

Recordad que podéis dejar cualquier comentario, sugerencia o duda en los comentarios.

¿Y próximamente?

DataPages continuará evolucionando y madurando con varios objetivos en mente. Xamarin ya ha confirmado que:

  • En próximas versiones no necesitaremos añadir código específico de plataforma para realizar la carga de las librerías correspondientes a temas.
  • Se incluirá la posibilidad de CRUD (create-read-update-delete).

Más información

[VideoBlog] Un vistazo a XenForms

XenFormsIntroducción

Xamarin.Forms es un framework que añade una capa de abstracción sobre la parte de UI permitiendo crear aplicaciones multiplataforma nativas compartiendo tanto la lógica de negocio como la interfaz de usuario. En los últimos tiempos hemos ido recibiendo tanto por parte de Xamarin como por parte de la comunidad gran cantidad de mejoras para aumentar el rendimiento en el desarrollo como el editor visual, Xamarin.Forms Previewer o Gorilla Player.

XenForms

La comunidad sigue creciendo a un ritmo imparable ofreciendo cada vez más y mejores opciones. Hoy estamos ante XenForms, herramienta creada por Michael Davis destinada a editar interfaces en Xamarin.Forms. Permite crear interfaces partiendo desde cero añadiendo Layouts y Views.

Construyendo la UI desde cero

Construyendo la UI desde cero

Además de poder editar cada propiedad de cada elemento, o los eventos.

Modificación de propiedades

Modificación de propiedades

También podemos cargar un proyecto ya existente para previsualizar la interfaz, hacer cambios al vuelo con el editor visual editando propiedades, hacer cambios a nivel de XAML, etc.

Carga de proyectos existentes

Carga de proyectos existentes

Suena interesante, ¿cierto?. Si te lo parece, no te pierdas el siguiente recorrido por la herramienta en video.

También se puede trabajar con Apps utilizando MVVM realizando pruebas de enlaces a datos (interactuar con la aplicación a la par que se edita), uso de propiedades avanzadas y adjuntas, etc.

Una herramienta interesante y sin duda con mucho potencial, ¿y a ti, qué te parece?.

Más información