[Xamarin.Forms] Forms Embedding

Introducción

Cuando tratamos el desarrollo de aplicaciones Xamarin hay algunas preguntas importantes a resolver. Entre ellas, destaca con fuerza, ¿Xamarin Classic o Xamarin.Forms?. Es una pregunta habitual en diferentes charlas de diferentes temáticas, en formación y a la hora de afrontar un nuevo proyecto. La respuesta suele requerir algo de tiempo para analizar muchos aspectos como la interfaz de la aplicación, conocimiento del equipo, etc. Pero…¿y si nos quedamos con las dos opciones?.

¿Qué es Forms Embedding?

Con Xamarin.Forms podemos acceder a cualquier API nativa, podemos crear nuevos controles y acceder a la plataforma con Custom Renders o efectos e incluso podemos incrustar controles nativos con Native Views. Forms Embedding es el nombre asignado a la posibilidad de incrustar cualquier ContentPage de Xamarin.Forms en una aplicación nativa de Android, iOS o Windows.

Forms Embedding

Estará disponible entre el conjunto de novedades de la próxima versión 3.0 de Xamarin.Forms:

  • Mejoras en rendimiento (Fast Renderers y Layout Compression).
  • Nuevas plataformas (GTK#, WPF o MacOS).
  • Native Embedding.
  • XAML Standard.
  • Etc.

Suena interesante, ¿verdad?. Aquellos desarrollos utilizando Xamarin Classic (también llamado Native) se pueden beneficiar de Xamarin.Forms para compartir vistas comunes. Podemos combinar lo mejor de las dos opciones!

Haciendo Forms Embedding ahora

A pesar de llegar como opción en Xamarin.Forms 3.0, podemos hacer Forms Embedding ahora mismo. Sólo necesitamos un poco más de código. Veamos como hacerlo!

Creamos una aplicación Xamarin Classic utilizando una PCL y la plantilla Maestro y detalle:

Nueva App

Gracias a la plantilla tenemos rápidamente una aplicación Xamarin Classic completa:

Plantilla Maestro y detalle

Añadimos un nuevo proyecto, una librería portable (PCL) donde vamos a añadir las vistas Xamarin.Forms totalmente compartidas entre todas las plataformas.

PCL

Un ejemplo muy común de vista que suele tener mucho sentido tener totalmente compartida, es una vista de configuración. Añadimos una nueva ContentPage llamada SettingsView:

<ContentPage xmlns="http://xamarin.com/schemas/2014/forms"
             xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
             x:Class="FormsEmbedding.Forms.Views.SettingsView">
    <ContentPage.Content>
        <StackLayout>
            <Label Text="Welcome to Xamarin Forms Settings!" />
            <Grid>
                <Grid.ColumnDefinitions>
                    <ColumnDefinition />
                    <ColumnDefinition />
                </Grid.ColumnDefinitions>
                <Grid.RowDefinitions>
                    <RowDefinition Height="Auto" />
                    <RowDefinition Height="Auto" />
                    <RowDefinition Height="Auto" />
                    <RowDefinition Height="Auto" />
                    <RowDefinition Height="Auto" />
                </Grid.RowDefinitions>
                <Label Grid.Column="0" Grid.Row="0" Text="Settings 1" />
                <Switch Grid.Column="1" Grid.Row="0" HorizontalOptions="End" />
                <Label Grid.Column="0" Grid.Row="1" Text="Settings 2" />
                <Switch Grid.Column="1" Grid.Row="1" HorizontalOptions="End" />
                <Label Grid.Column="0" Grid.Row="2" Text="Settings 3" />
                <Switch Grid.Column="1" Grid.Row="2" HorizontalOptions="End" />
                <Label Grid.Column="0" Grid.Row="3" Text="Settings 4" />
                <Switch Grid.Column="1" Grid.Row="3" HorizontalOptions="End" />
                <Label Grid.Column="0" Grid.Row="4" Text="Settings 5" />
                <Switch Grid.Column="1" Grid.Row="4" HorizontalOptions="End" />
            </Grid>
        </StackLayout>
    </ContentPage.Content>
</ContentPage>

El resultado:

SettingsView

¿Cómo utilizamos esta página desde Android, iOS y Windows?. Lo primero es crear una aplicación Application de tipo Xamarin.Forms.

public class FormsApp : Application
{
     public FormsApp(Type page = null)
     {
         SetMainPage(page);
     }

     public void SetPage(Type page)
     {
         if (page == null) 
         {
             MainPage = new ContentPage();
             return;
         }

         MainPage = (Page)Activator.CreateInstance(page);
     }

     public static Page GetPage<T>() where T : Page 
     {
         return Activator.CreateInstance<T>();
     }
}

Establecemos como MainPage la página pasada como parámetro.

Android

Xamarin.Forms utiliza una actividad de tipo FormsAppCompatActivity donde se realiza la inicialización de Xamarin.Forms y se realiza la carga de la App. Vamos a crear una actividad nueva donde realizar la inicialización requerida de Forms así como,  recibir la vista Xamarin.Forms a mostrar y cargarla en la App.

public class FormsActivity : FormsAppCompatActivity
{
     public static bool IsFormsInitialized;

     protected override void OnCreate(Bundle bundle)
     {
         base.OnCreate(bundle);

         var view = Intent.Extras.GetString("View");
         var viewPath = typeof(FormsApp).Namespace + ".Views." + view;
         var viewType = typeof(FormsApp).Assembly.GetType(viewPath);

         if (!IsFormsInitialized)
         {
             global::Xamarin.Forms.Forms.Init(this, bundle);
             IsFormsInitialized = true;
         }

         LoadApplication(new FormsApp(viewType));
     }
}

Fíjate que esperamos un parámetro View donde tenemos el nombre de la página Xamarin.Forms a mostrar. Partiendo del nombre, obtenemos el tipo de la página y realizamos la inicialización.

Con todo esto, posiblemente tengas ya en mente como vamos a realizar la navegación a la página de Xamarin.Forms:

var intent = new Intent(this, typeof(FormsActivity));
intent.PutExtra("View", "SettingsView");
StartActivity(intent);

Navegamos a una nueva actividad, nuestra actividad FormsActivity, pasandole como parámetro la página Xamarin.Forms a mostrar.

El resultado:

Android

 

iOS

En el caso de iOS nuestro objetivo será tener un UIViewController al que poder navegar partiendo de la ContentPage de Xamarin.Forms:

var settingsViewControler = FormsApp.GetPage<SettingsView>().CreateViewController();
await PresentViewControllerAsync(settingsViewControler, true);

En Xamarin.Forms contamos con una extensión de páginas que cuenta con el método CreateViewController que nos hace la mayor parte del trabajo. Obtenemos la página de Forms, convertimos a UIViewController y navegamos!

iOS

Windows

Llegamos a UWP. En este caso, Xamarin.Forms, utiliza una vista nativa de tipo FormsWindowsPage donde se realiza la carga de la App. Creamos en el proyecto UWP una nueva página nativa:

<forms:WindowsPage
    x:Class="FormsEmbedding.UWP.Pages.FormsWindowsPage"
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
    xmlns:local="using:FormsEmbedding.UWP.Pages"
    xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
    xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
    xmlns:forms="using:Xamarin.Forms.Platform.UWP"
    mc:Ignorable="d">
    <Grid Background="{ThemeResource ApplicationPageBackgroundThemeBrush}">

    </Grid>
</forms:WindowsPage>

Reemplazamos el tipo de Page a FormsWindowsPage utilizando el namespaces correspondiente. En el código asociado de la página realizaremos dos acciones necesarias (como ya hicimos en otras plataformas). Por un lado, inicializaremos la aplicación Xamarin.Forms:

var formsApp = new FormsApp()
LoadApplication(formsApp);

Y por otro lado, estableceremos la página principal:

_formsApp.SetPage(e.Parameter as Type);

Con todo preparado, para navegar a una página de Xamarin.Forms bastaría con:

Frame.Navigate(typeof(FormsWindowsPage), typeof(SettingsView));

Navegar a la nueva página creada pasando como parámetro el tipo de la página de Forms. También podríamos pasar el nombre de la página como cadena y tras recuperarlo obtener el tipo como hicimos en Android.

El resultado:

UWP

NOTA: En todos los proyectos nativos hemos añadido la última versión del paquete estable de Xamarin.Forms.

El ejemplo de esta versión se encuentra disponible en GitHub:

Ver GitHub

Xamarin.Forms 3.0

Hoy día ya podemos probar una versión Preview de Xamarin.Forms 3.0. Para ello, debemos añadir https://www.myget.org/F/xamarinforms-dev/api/v3/index.json como nuevo origen de paquetes.

Nuevo origen de paquetes

De esta forma tendrás acceso a los paquetes previos de Xamarin.Forms 3.0:

Paquetes NuGet Xamarin.Forms 3.0

Con el paquete previo de la versión 3.0 nos llega el soporte oficial a Forms Embedding o lo que es lo mismo, todo  lo necesario para incrustar páginas Xamarin.Forms en aplicaciones nativas de forma rápida y muy sencilla.

Volvemos a crear un nuevo proyecto en una PCL donde vamos a añadir las páginas Xamarin.Forms a compartir, de igual forma a como hicimos previamente.

Veamos como utilizar la página en cada plataforma.

Android

En Android se ha añadido una extensión de página de modo que podemos hacer:

var settings = new SettingsView().CreateFragment(this);

Creamos una instancia de la página Xamarin.Forms y utilizamos el método CreateFragment para crear un Fragment Android que podemos añadir como contenido de nuestra aplicación Xamarin.Android.

iOS

En el caso de iOS nuestro objetivo será tener un UIViewController al que poder navegar partiendo de la ContentPage de Xamarin.Forms:

var settingsViewControler = FormsApp.GetPage<SettingsView>().CreateViewController();
await PresentViewControllerAsync(settingsViewControler, true);

En Xamarin.Forms contamos con una extensión de páginas que cuenta con el método CreateViewController que nos hace la mayor parte del trabajo. Si, es sumamente parecido a lo que ya vimos previamente.

Windows

Y llegamos a UWP donde al igual que en el resto de plataformas, se utiliza una extensión de página para obtener un FrameworkElement a partir de la página Xamarin.Forms.

var settingsView = new SettingsView().CreateFrameworkElement();

Muy muy sencillo, ¿cierto?.

El ejemplo de esta versión se encuentra disponible en GitHub:

Ver GitHub

Más información

[Evento SVQXDG] Rendimiento en Xamarin.Forms

El evento

Continuamos desde SVQXDG con otro nuevo evento. En esta ocasión un tema muy tratado en diferentes quedadas y mencionado en eventos pero nunca hemos profundizado hasta ahora, el rendimiento en Xamarin.Forms.

¿Sabes el ciclo de vida de un Layout?, ¿qué opciones de Layout son más óptimas?, ¿cómo afectan los Bindings al rendimiento y como tratarlos?, ¿rendimiento en listados?, ¿fast renderers?. A todas esas preguntas y a otras tantas, intentaremos dar solución en esta sesión!.

La fecha

El evento tendrá lugar el próximo Miércoles, 24 de Mayo de 19:00h a 20:30h. Tendremos una única sesión técnica de 90 minutos de duración. Además contaremos con algún detalle entre los asistentes.

¿Te apuntas?

El lugar

El evento se celebrará en la ETS de Ingeniería Informática. Dirección detallada:

E.T.S. Ingeniería Informática – Universidad de Sevilla, Aula B1.32
Av. Reina Mercedes s/n
Sevilla Se 41012

ETS de Ingeniería Informática

Más información

Probando Xamarin Live Player

Introducción

Cuando hablamos de desarrollos web e incluso desarrollos para escritorio los tiempos de despliegue y ejecucición junto con los requisitos a cumplir son extremadamente ajustados.

Cuando hablamos de movilidad, la cosa es algo diferente…

En el caso de Xamarin.iOS necesitamos contar con una conexión con Xamarin Mac Host para compilar y desplegar en el dispositivo o en el simulador.

En el caso de Xamarin.Android necesitamos contar con SDK de Android, instalar emuladores x86 para reducir tiempos de despliegue, etc.

¿Y si contámos con una opción más rápida y directa que reduzca a mínimos los requisitos para desplegar y probar la App?

Xamarin Live Player

Xamarin Live Player llega como opción para permitir editar al vuelo la aplicación y ver esos cambios reflejados directamente en el dispositivo. Se trata de una aplicación móvil (realizada con Xamarin y disponible en las diferentes Stores) que permite correr nuestro código sin necesidad de emuladores o un cable USB para desplegar la App.

Xamarin Live Player

La idea es:

  1. Tener una App Xamarin en el IDE (Visual Studio para Windows o MacOS).
  2. Emparejar un dispositivo con la App Xamarin Live Player.
  3. Lanzar la App en el dispositivo.
  4. Poder hacer cambios al vuelo!

De esta forma, se reducen tiempos y requisitos necesarios para desplegar y probar las Apps. No se necesita conexión con Mac, tener instalados emuladores, etc.

Preparando el entorno

Suena bien, ¿verdad?. Vamos a preparar el entorno y todo lo necesario.

1. Obtener la App

Comenzamos descargando la App móvil. Xamarin Live Player se encuentra disponible tanto para iOS como para Android.

Xamarin Live Player App

2. Obtener Visual Studio 2017 Preview en Windows

Para poder utilizar Xamarin Live se necesita tener instalado:

  • Visual Studio 2017 15.3 Preview
  • Xamarin Updater

La elección de canales alpha, beta o estable que teníamos en versiones anteriores de Visual Studio no está disponible en Visual Studio 2017. En su lugar, tenemos dos canales de distribución de Visual Studio:

  • Release
  • Preview

Para tener acceso a las Previews, podemos descargar una versión de Visual Studio Preview.

Descargar Visual Studio 2017 Preview

NOTA: La Preview disponible al escribir estas líneas es la 15.3.

Durante el proceso de instalación, se puede introducir un Installation Nickname que nos permite distinguir la versión Preview de la versión de VisualStudio estable. De esta forma podemos tener instalados varias instancias diferentes.

Varios Visual Studios!

Tras tener Visual Studio 2017 Preview instalado, debemos contar con Xamarin Updater disponible en Visual Studio Marketplace.

Xamarin Updater

 

2. O para Mac

En el caso de utilizar MacOS se necesita tener macOS 10.12 o superior y tener instalado Visual Studio para Mac.

Actualizar Visual Studio para Mac

Emparejando dispositivos

Todo listo para probar. Para asegurar que lo tenemos todo listo, en Visual Studio debes encontrar la opción Xamarin Live Player en la opción Herramientas:

Xamarin Live Player en el menu de Herramientas

Con Xamarin Live Player preparado, al desplegar econtraremos la opción Live Player:

Live Player

La primera vez que realizamos el despliegue, aparecerá la siguiente pantalla:

Emparejar dispositivo

Para emparejar el dispositivo, debemos abrir la aplicación Xamarin Live Player previamente instalada y utilizar la cámara para capturar el código QR o bien, introducir en el IDE el código que aparecerá en la App.

Tras emparejar, todo preparado para comenzar a utilizar la herramienta!

Probándolo todo!

Ejecutamos la aplicación y en breves instantes:

App Xamarin.iOS desde Windows sin Build Host!

Estamos utilizando una de las demos disponibles en Xamarin Live Player, una aplicación Xamarin.iOS ejecutada en un iPhone sin utilizar Mac Build Host.

NOTA: En esta demo tenenemos el iPhone conectado por USB al equipo de desarrollo con Windows para hacer Screen Mirroring. No es necesario conectar el dispositivo por cable para utilizar Xamarin Live.

Con la aplicación lanzada podemos interaccionar con ella:

La App en funcionamiento

Y podemos depurarla exactamente igual a cuando la desplegamos de forma habitual:

Depurando

Por otro lado, encontramos la opción  Live Run Current View.

Live Run Current View

Esta opción permite realizar cambios directamente al vuelo. Todo se irá compilando y ejecutando de forma continua en el dispositivo por lo que podremos ir aplicando cambios al vuelo y ver sus resultados de forma inmediata, sin recompilar todo ni esperas.

Limitaciones

No, la aplicación no es perfecta en estos momentos, ni funcionará todo. Recuerda que estamos aún ante una Preview. Entre las limitaciones encontramos:

  • Algunas características de Storyboards en iOS no están soportadas.
  • Algunas características del sistema no se soportan por la App. Sin embargo, opciones muy comunes como el uso de la cámara si están soportadas.

Entre las limitaciones más importantes tenemos:

  • No se soportan archivos AXML (diseño de interfaces en Android).
  • No se soportan archivos iOS XIB.
  • Soporte limitado a reflexión. Ojo, porque hay muchos paquetes NuGets que se pueden ver afectados como el uso de SQLite.

¿Ya no necesito un MAC?

Xamarin Live Player nos permite probar nuestras aplicaciones Xamarin Native o Xamarin.Forms en dispositivos Android e iOS. Si, podemos desplegar aplicaciones Xamarin.iOS a un dispositivo iOS sin necesidad de Mac Build Host (conexión con un Mac).

Entonces, ¿ya no necesitamos un Mac?.

¿Ya no necesitamos un Mac?

A pesar de no dudar de la evolución y soporte a más y más opciones en Xamarin Live Player, de momento cuenta con limitaciones a tener en cuenta.

Por otro lado, es necesario el Mac para el acceso a otras herramientas como diseñadores visuales de Storyboards, o bien, para crear paquetes, etc. Recuerda, necesitamos un Mac para compilar y crear el paquete.

En definitiva, tenemos una nueva opción que nos ayuda y acelera en el desarrollo e incluso, si, nos puede reducir la necesidad de conexiones con el Build Host pero no evita la necesidad del Mac en el desarrollo iOS.

Más información

Puedes descargar una presentación con un resumen de todo el artículo:

Enlaces:

Xamarin Forms FastRenderers

Introducción

Recientemente se liberaba la versión 2.3.5 de Xamarin.Forms donde entre las diferentes novedades, destaca la aparición de FastRenderers y la mejora de rendimiento. Por ahora, sólo disponible en Android e incluido en los controles Label, Button, Frame e Image. Pero.. ¿qué son los Fast Renderers?, ¿por qué se habla de mejora de rendimiento?.

Fast Renderers

Hablamos de cambios realizados en Xamarin.Forms con el objetivo de reducir a mínimos de operaciones y cálculos a realizar para renderizar el control y gestionar su tamaño y posición.

FastRenderers

Por un lado se ha simplificado notablemente el conjunto de clases implicadas para realizar los cálculos necesarios para el renderizado, tamaño y posición. Previamente, un Label en Xamarin.Forms al ejecutarse en Android realizaba:

Ahora:

Se reduce el número de participantes llegando de forma mucho más directa al renderizado. Se sigue implementando la interfaz IVisualElementRenderer que permite tener los métodos OnElementChanged y OnElementPropertyChanged.

Hasta este punto, a pesar de reducir piezas en la lógica, no se ve una reducción drástica en el ciclo del Layout. También se han realizado importantes modificaciones en el ciclo del Layout. Previamente:

  • OnLayout de la clase LabelRenderer
    • OnLayout de ViewRenderer
    • MeasureAndLayout de ViewRenderer
      • OnLayout de VisualElementRenderer
        • UpdateLayout del control

Ahora:

  • On Layout de la clase LabelRenderer
    • OnLayout View

Además, mientras que antes todos los parámetros del Layout se actualizaban (OJO: Opacity, Rotation, Scale, etc) ahora se establecen todas una vez. Tambien se añaden validaciones para evitar refrescos del Layout innecesarios (Invalidate).

NOTA: Se mantienen también los renderers anteriores de los controles Label, Image, Frame y Button por compatibilidad hacia atrás.

Comparativa de rendimiento

Dependiendo del Layout y controles utilizados en la aplicación, la mejora de rendimiento se notará en mayor o menor medida. Hablamos desde un pequeño porcentaje hasta en según que ocasiones practicamente duplicar el rendimiento.

Para profundizar en este aspecto, vamos a crear un ejemplo con dos pruebas. Realizaremos una prueba básica donde tendremos una vista con 50 Buttons y 50 Labels. Recuerda, actualmente se han añadido FastRenderers de ButtonRenderer, FrameRenderer, LabelRenderer y ImageRenderer. La segunda prueba será un listado con cientos de elementos donde la plantilla que define cada fila utilizará un control de tipo Image, y dos Labels.

El ejemplo se encuentra disponible en GitHub:

Ver GitHub

Se utiliza Stopwatch para realizar medidas de tiempo de renderizado además de pruebas con la experiencia al hacer scroll en el listado, etc. Cambiando el paquete de Xamarin.Forms de versiones previas a la versión 2.3.5 o superior podemos hacer diferentes comparativas. Se aprecian mejores resultados en los tiempos (946ms > 708ms en el ejemplo básico). Te animo a descargar el ejemplo y a realizar tus propias medidas.

No cabe duda que en futuras versiones de Xamarin.Forms nos esperan más y más renderers utilizando FastRenderers lo que al final, nos afecta como desarrolladores, en una ganancia de rendimiento sin necesidad de trabajo extra.

Más información

[Quedada Informal] CartujaDotNet & SVQXDG

Quedada múltiple

Desde CartujaDotNet, grupo de usuarios .NET de Sevilla y SVQXDG, grupo de desarrolladores Xamarin de Sevilla, vamos a realizar una quedada informal para charlar abiertamente sobre tecnologías Microsoft, Xamarin, herramientas utilizadas, intercambiar impresiones, etc. Además, se analizarán las próximas charlas ya planteadas y los eventos confirmados entre otros temas de interés. Al ser quedada de dos grupos diferentes creemos que es una gran oportunidad para conocer, intercambiar e interactuar entre ambos permitiendo a miembros de cada uno conocer a los del otro y tratar otros aspectos.

No hace falta confirmar asistencia, y por supuesto será gratuito.

¿Te apuntas?

A continuación tienes disponible la fecha, hora y lugar:

  • Día: 03 de Mayo (Miércoles)
  • Horario:  19:00h
  • Lugar: En la Terraza del McDonald’s de Santa Justa

Más información

[Material] Workshop Xamarin en PUE DAY 2017

Introducción

PUE DAY es el evento anual de referencia en nuestro país en el marco de la enseñanza de las TIC en lo que a formación y certificación oficial se refiere. Este año se celebró el pasado 26 de Abril con diferentes sesiones y workshops.

PUE Day 2017

El material

He tenido la oportunidad de participar este año hablando de Xamarin, ventajas, desarrollo, etc.

La presentación:

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

Ver GitHubNos vemos en la próxima!

Más información

[Xamarin.Forms] Un vistazo a Grial UI Kit V2

Introducción

Xamarin.Forms ofrece una capa de abstracción sobre la capa de la interfaz de usuario permitiendo definir la interfaz de usuario una única vez con código C# o XAML.

Desde los inicios de Xamarin.Forms a hoy día, todo ha evolucionado a pasos agigantados tanto las propias posibilidades de Xamarin.Forms, como el crecimiento de la comunidad así como la implicación de terceros. Hoy precisamente nos vamos a centrar en la segunda versión de Grial UI Kit.

NOTA: Gracias a los chicos de UXDivers por ceder una licencia de Grial para realizar pruebas sobre la librería.

Grial UI Kit

El objetivo principal de Grial es ofrecer un conjunto de controles y plantillas para Xamarin.Forms permitiendo crear interfaces de usuario ricas y vistosas con facilidad.

Grial UI Kit

Cuenta con soporte para:

  • Android 4.1+ (API Level 16).
  • iOS 8.0+.

Incluye:

  • Plantillas y vistas preparadas
  • Controles
  • Efectos
  • Animaciones
  • Temas
  • Iconos

Novedades

De la versión anterior a ahora se han añadido nuevas plantillas de páginas, nuevos controles, tres nuevos temas, animaciones y soporte a tabletas.

Creación de proyectos

La primera de las novedades visibles que vemos esta relacionada con la creación de proyectos. Accedemos a un portal de administración llamado Grial Admin.

Desde el panel de administración podemos crear aplicaciones añadiendo el nombre. De esta forma podemos descargar dos tipos de proyectos:

  • Full: Contiene absolutamente todos los ejemplos y controles incluidos en Grial.
  • Starter: Proyecto mínimo que cuenta con soporte a Grial, sus librerías.

Ambos cuentan con el espacio de nombres y todo lo necesario ya preparado con el nombre asignado a la aplicación.

Tras descargar el proyecto, debemos configurar el acceso a los paquetes NuGet añadiendo un nuevo repositorio de paquetes.

En Visual Studio, accedemos al menu de Opciones > Herramientas > Nuget Package Manager > Package Sources.

Nuevos paquetes

NOTA: Para configurar el repositorio será necesario introducir usuario y contraseña.

Optimización a Tablets

Una de las novedades más importantes se encuentra en las posibilidades de adaptación a diferentes factores de forma, teléfonos y tabletas.

UIs adaptadas a tabletas

Además de tener plantillas ya preparadas para funcionar correctamente tanto en teléfonos como tabletas, se añade un unos helpers Responsive.

Este helper cuenta con diferentes propiedades:

  • Default: Aplica a todos los casos. Es el valor por defecto.
  • Portrait: Aplica a todos los dispositivos en modo vertical.
  • Landscape: Aplica a todos los dispositivos en modo horizontal.
  • PortraitPhone: Aplica solo a teléfonos en modo vertical.
  • PortraitTablet: Aplica solo a tabletas en modo vertical.
  • PortraitDesktop: Aplica solo cuando el dispositivo es escritorio en modo vertical.
  • LandscapePhone: Aplica en teléfonos en modo horizontal.
  • LandscapeTablet: Aplica en tabletas en modo horizontal.
  • LandscapeDesktop: Aplica en escritorio en modo horizontal.

Su uso:

<Label
    Text="{ 
        artina:OnOrientationString 
            Portrait=IsPortrait, 
            Landscape=IsLandscape
        }" 
    IsVisible="{ 
        artina:OnOrientationBool 
            Default=true, 
            PortraitDesktop=false 
        }"
        "/>

El texto mostrará un texto diferente en modo vertical y horizontal además, siempre será visible menos en modo vertical en escritorio. Añade de forma sencilla bastante versatilidad para adaptar la interfaz de usuario en diferentes modos.

Temas

Se añaden varios temas ya preparados y tareas de compilación que permiten cambiar temas al vuelo en la aplicación.

Temas

Nuevos controles

Se han añadido nuevos controles:

  • TabControl: Control de pestañas compatible con iOS y Android que permite el posicionamiento tanto superior como inferior. Totalmente personalizable.
  • Badge: Icono numérico.
  • CircleIcon: Imagen circular.
  • Timeline: Listado con formato línea del tiempo.
  • Rating: Control para puntuar con estrellas.
  • Repeater: Control de listados con personalización de scroll, tamaño de elementos, etc.
  • Walkthroughs: Crea facilmente asistentes personalizables.
  • FontIcons: Permite mostrar iconos utilizando fuente. Incluidos más de 1500 iconos.
  • Lottie Animations: Se incluye soporte a animaciones Lottie.

TabControl

Analizando Grial

Tras ver novedades principales, vamos a continuar realizando un pequeño análisis de la librería.

El tamaño del paquete

Grial se basa en un conjunto de diferentes librerías.

PCL

  • UXDivers.Artina.Shared.dll (50KB)
  • UXDivers.Artina.Shared.Base.dll (13KB)

iOS

  • UXDivers.Artina.Shared.iOS.dll (19KB)
  • UXDivers.Artina.Shared.Base.iOS.dll (12KB)

Android

  • UXDivers.Artina.Shared.Droid.dll (31KB)
  • UXDivers.Artina.Shared.Base.Droid.dll (14KB)

Para utilizar los efectos tenemos otra librería:

PCL

  • UXDivers.Effects.dll (7KB)

iOS

  • UXDivers.Effects.iOS.dll (8KB)

Android

  • UXDivers.Effects.Droid.dll (93KB)

Y para controles:

PCL

  • UXDivers.Artina.Shared.Tab.dll (20KB) – Control TabControl
  • UXDivers.Artina.Shared.Repeater.dll (17KB) – Control Repeater

Dependencias

Con el firme objetivo de mejorar el rendimiento se han añadido algunas dependencias con librerías de terceros con respecto a la versión anterior. Nos encontramos con:

El XAML aportado en el proyecto PCL no está muy acoplado, sólo con los estilos definidos en App.xaml. En el proyecto Xamarin.Android, tenemos una personalización de temas nativos. Mientras que en el proyecto Xamarin.iOS, esta personalización de temas viene en forma de un archivo ThemeColors.cs.

Rendimiento

Grial hace uso de compilación de XAML, reutilización de celdas en listados y otras características incluidas en Xamarin.Forms centradas en el rendimiento. Tras hacer pruebas en emuladores y dispositivos haciendo medidas con Xamarin Profiler, no se encuentran problemas ni penalizaciones relacionadas con el rendimiento.

MVVM

Las páginas con diferentes plantillas, layouts y controles se encuentran asociadas a una ViewModel. La implementación del patrón así como la separación de responsabilidades se encuentra bien implementada ayudando a su correcta implementación al utilizar Grial. Los controles añadidos como por ejemplo el TabControl, añaden propiedades de dependencia necesarias para controlar el comportamiento y apariencia del control.

Soporte multiplataforma

Contamos con soporte a iOS y Android. Tras múltiples pruebas en diferentes dispositivos y emuladores nos encontramos con interfacecs robustas con una implementación prácticamente exacta en cada plataforma y condición.

No encontramos eso sí soporte a UWP (Universal Windows Platform). Es una plataforma que permite el acceso a los diferentes dispositivos de familias de Windows 10 (PCs, tabletas, teléfonos, Xbox One, Surface Hub, IoT, HoloLens).

Conclusiones

Volvemos a estar frente a un paquete bastante grande de plantillas con vistas muy comunes y necesarias en muchas aplicaciones (vista detalle de producto, sign in, registro, chat, configuración, etc.) con un diseño muy cuidado y adaptado a diferentes plataformas y factores de forma. En esta versión nos encontramos la adaptación a diferentes factores de forma, el uso de temas o la llegada de nuevos controles.

Un componente  que no solo aporta funcionalidad, también la forma de hacer ciertas necesidades en la UI con Xamarin.Forms.

¿Y a ti que te parece?

Más información

[Material] Xamarin Dev Days Sevilla 2017

El evento

El pasado sábado 08 de Abril, tenía lugar en Sevilla el Xamarin Dev Days 2o17. Una jornada con varias sesiones técnicas, taller, regalos y mucho networking.

El resultado fue un fantástico día de desarrollo Xamarin con caras nuevas en el grupo, muchas preguntas, ayuda y tiempo para charlar entre todos rodeados de unas pizzas.

El material

Pude participar en el evento con varias de las sesiones. Comenzamos el evento con una sesión introductoria a Xamarin:

A continuación, nos centramos en el desarrollo de aplicaciones móviles multiplataforma utilizando Xamarin.Forms además de ver las últimas novedades:

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

Ver GitHubQuisiera terminar añadiendo algunos agradecimientos. Comienzo por los chicos de Bitnami por las instalaciones, la comida y toda la ayuda ofrecida (muchas gracias!); a Plain Concepts por su patrocinio; a SyncFusion y Xamarin también por patrocinar el evento, los asistentes quedaron encantados con los goodies y licencias; a mi compañero Juan María Lao por sus demos y ayudar con todo y por supuesto a los asistentes. Gracias a todos. Si además están todo el día y con preguntas constantes, hace que todo sea tan apasionante y divertido que…¿cuándo la próxima?.

Más información

[Tips and Tricks] Correción errores compilación Xamarin.Androd

AndroidIntroducción

Gracias a poder participar en múltiples talleres relacionados con el desarrollo Xamarin y principalmente, a los cursos Xamarin que tengo disponible en CampusMVP tengo la posibilidad de interactuar con una gran cantidad de desarrolladores que utilizan Xamarin. Esto me ha permitido conocer las principales dudas y los principales problemas a los que se enfrentan.

En el artículo de hoy, vamos a centrarnos en un error relacionado con la compilación Android dado en mayor medida tras actualizar el paquete de Xamarin.Forms o uno de los implicados con Xamarin.Android.

El problema

Tras actualizar el paquete de Xamarin.Forms o alguno de los implicados con Xamarin.Android obtenemos el siguiente error:

Please install package: 'Xamarin.Android.Support.v4' available in SDK installer. Java library file ...\AppData\Local\Xamarin\Xamarin.Android.Support.v4\23.3.0.0\content\libs/internal_impl-23.3.0.jar doesn't exist.	

También puede ser:

error APT0000: Error retrieving parent for item: No resource found that matches the given name 'Theme.AppCompat.Light.DarkActionBar'.

Xamarin descarga paquetes relacionados con el SDK de Android en la ruta %UserProfile%\AppData\Local\Xamarin\zips tras la restauración de paquetes. Dependiendo de varios factores como la conexión a internet, el tiempo de respuesta puede verse afectado. La implicación es el “congelado” del proceso de compilación en Visual Studio. Puedes creer que no esta sucediendo nada o bien, que algún error ha ocurrido. Ante esta situación, si se cancela la compilación o se cierra Visual Studio, todo puede quedar un estado indeterminado.

La solución

Lo primero que se suele intentar es limpiar y recompilar el proyecto. No funciona. Nos ponemos “más serios” y limpiamos la carpeta packages, bin y obj. Tampoco es suficiente.

Debemos de volver a permitir realizar la descarga de los paquetes relacionados con el SDK Android desde cero. Para ello:

  1. Cerrar Visual Studio.
  2. Acceder a la carpeta del proyecto, limpiar la carpeta packages.
  3. Limpiar todos los paquetes de Xamarin.Android disponibles en la cache de NuGet disponible en la ruta %UserProfile%\.nuget\packages\Xamarin.Android.*.
  4. Limpiar todos los paquetes de Xamarin.Android disponibles en la cache de Xamarin disponible en la ruta %UserProfile%\.nuget\packages\Xamarin.Android.*.
  5. ¿Recuerdas la ruta donde se descargaban los paquetes relacionados con el SDK de Android?. Limpiar las descargas no completadas de la ruta %UserProfile%\AppData\Local\Xamarin\zips.

Tras el proceso anterior, recompilar y esperar (es importante, paciencia!). Todo correcto de nuevo.

Más información

[Xamarin] Gráficas con Oxyplot

ChartIntroducción

En ocasiones en nuestras aplicaciones tendremos la necesidad de mostrar al usuario cierta información de la manera más directa y sencilla posible de modo que de un solo vistazo el usuario sea capaz de obtener la mayor información posible. A nivel de interfaz tenemos muchísimas opciones muy interesantes sin embargo, un excelente recurso muy utilizado para este tipo de situaciones es el uso de gráficas. Por ejemplo, estamos realizando una aplicación de compra de viviendas. Sería fantástico mostrarle al usuario la información de como ha oscilado el precio de la viviendo en el último trimestre por ejemplo. ¿Como lo hacemos?, ¿Que piensas que sería lo más acertado?. Posiblemente una gráfica de barras u otra similar te haya pasado por la mente.

En esta entrada vamos a aprender como utilizar gráficas en nuestras aplicaciones Xamarin utilizando OxyPlot.

Añadiendo las dependencias necesarias

Tras crear la solución Xamarin.Forms, comenzamos añadiendo las dependencias necesarias. Hacemos clic secundario sobre la solución, Administrar paquetes NuGet para la solución…

Añadir paquetes NuGet

Buscamos por Oxyplot.Xamarin.Forms:

Oxyplot.Xamarin.Forms

Inciando renderers Oxyplot

Es necesario añadir código específico en cada plataforma para inicializar renderers de Oxyplot.

iOS

Utilizamos el método FinishedLaunching del delegado de la aplicación:

OxyPlot.Xamarin.Forms.Platform.iOS.PlotViewRenderer.Init();

Android

En el método OnCreate de la actividad principal debemos añadir:

OxyPlot.Xamarin.Forms.Platform.Android.PlotViewRenderer.Init();

Windows

En este caso, en la clase App.xaml.cs, donde se define Application en Windows, utilizamos el método OnLaunched:

OxyPlot.Xamarin.Forms.Platform.UWP.PlotViewRenderer.Init();

PlotView

Tras inicializar OxyPlot, estamos preparados para comenzar a trabajar con la librería. OxyPlot cuenta con un control llamado PlotView. Este control se encuentra disponible en el namespace XAML:

xmlns:oxyplot="clr-namespace:OxyPlot.Xamarin.Forms;assembly=OxyPlot.Xamarin.Forms"

El control cuenta con una propiedad fundamental Model de tipo PlotModel:

<AbsoluteLayout>
     <oxyplot:PlotView
          AbsoluteLayout.LayoutFlags="All"
          AbsoluteLayout.LayoutBounds="0, 0, 1, 1"
          Model="{Binding PlotModel}" />
</AbsoluteLayout>

PlotModel define el origen de la fuente de información de la gráfica así como, información relacionada con el tipo de gráfica.

Enlazar datos

A nivel de ViewModel, necesitamos definir una propiedad de tipo PlotModel:

private PlotModel _plotModel;

Propiedad pública:

public PlotModel PlotModel
{
     get { return _plotModel; }
     set
     {
          _plotModel = value;
          RaisePropertyChanged();
     }
}

PlotModel cuenta con diferentes propiedades que permiten definir el renderizado de la gráfica. Tenemos desde propiedades sencillas y comunes como Title que permite definir el título de la gráfica a otras más complejas como Series.

La propiedad Series espera un valor de tipo OxyPlot.Series. Esta propiedad permite definir el tipo de gráfica a utilizar.

Veamos un sencillo ejemplo para crear una gráfica de columnas utilizando ColumnSeries:

PlotModel = new PlotModel
{
     Title = "Column"
};

var columnSerie = new ColumnSeries
{
     StrokeThickness = 2.0
};

columnSerie.Items.Add(new ColumnItem(1));
columnSerie.Items.Add(new ColumnItem(2));
columnSerie.Items.Add(new ColumnItem(3));
columnSerie.Items.Add(new ColumnItem(4));
columnSerie.Items.Add(new ColumnItem(5));

PlotModel.Series.Add(columnSerie);

El resultado:

Gráfica de columnas

Tipos de gráficas

Tenemos una enome variedad de tipos de gráficas diferentes:

  • Área
  • Líneas
  • Barras
  • Columnas
  • Puntos
  • Circular
  • Mapa de calor
  • Etc

Además se pueden realizar composiciones haciendo combinaciones de varias de ellas, por ejemplo, barras con líneas.

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

Ver GitHub

Recuerda, cualquier tipo de duda o sugerencia es bienvenida en los comentario del artículo.

Más información