[Tips and Tricks] Librería para reutilizar estilos entre diferentes Apps Xamarin.Forms

Introducción

En toda aplicación móvil la apariencia visual es vital. Cada vez es mayor el esfuerzo depositado a la hora de crear aplicaciones atractivas a la par que intuitivas y en muchos casos conseguir una imagen única que diferencia a la Aplicación del resto es prioritario. Por este motivo, debemos de contar con opciones sencillas de poder personalizar los distintos elementos que componen la interfaz.

Los estilos permitir definir múltiples propiedades visuales de elementos de la interfaz de forma reutilizable.

En ocasiones, se desarrollan diferentes aplicaciones para la misma empresa o marca comercial. Hablamos de aplicaciones totalmente diferentes pero que sin duda, van a compartir algunos elementos visuales específicos como colores, logos e incluso algunos estilos visuales (forma de botones, etc.).

¿Cómo lograr reutilizar estilos entre diferentes aplicaciones Xamarin.Forms?

ResourceDictionary

Los recursos XAML son objetos que podemos reutilizar más de una vez. Hablamos desde un sencillo color o tamaño de fuente, a el uso de estilos. Los diccionarios de recursos o ResourceDictionaries permiten definir una zona donde definir recursos.

Podemos definir recursos a nivel de elemento visual, a nivel de página e incluso a nivel de Aplicación.

¿Cómo definimos recursos en otra librería?.

Buscamos tener una librería con recursos, estilos y/o converters que sea compartida entre diferentes aplicaciones:

Librería

  • Aplicación 1
  • Aplicación 2

Creando una librería

Comenzamos creando una librería portable (PCL). En Visual Studio, nuevo proyecto de tipo PCL:

PCL

Añadimos el paquete NuGet de Xamarin.Forms. Y a continuación, añadimos una página de tipo ContentPage:

ContentPage

Renombramos ContentPage por ResourceDictionary en la página recien creada.

Todo listo!.

Bastará con añadir recursos, estilos o converters. Ejemplo:

<Style x:Key="SharedButtonStyle" TargetType="Button">
     <Setter Property="BackgroundColor" Value="Red" />
     <Setter Property="Rotation" Value="45" />
</Style>

Utilizando la librería

Para utilizar la librería desde una aplicación Xamarin.Forms, comenzamos añadiendo la referencia a la librería desde la aplicación:

Referencias

Añadida la referencia, llega el paso de mayor importancia. A nivel de Aplicación, tenemos la posibilidad de añadir recursos en un diccionario de recursos:

<Application.Resources>
     <ResourceDictionary>

     </ResourceDictionary>
</Application.Resources>

Vamos a utilizar la propiedad MergedWith para añadir a los estilos de la aplicación, los estilos de la librería:

<Application
     xmlns:styles="clr-namespace:Styles;assembly=Styles">
    <Application.Resources>
        <ResourceDictionary MergedWith="styles:ButtonStyles">

        </ResourceDictionary>
    </Application.Resources>
</Application>

El resultado:

Estilos desde otra librería!

Realizamos una combinación de estilos a nivel de elemento visual, página, Aplicación e incluso desde otra librería (último botón). Tenéis el código fuente del ejemplo utilizado disponible en GitHub:

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

Más información

Renovado como Microsoft MVP 2017!

Microsoft MVP 2017

Abres el correo y…

Estimado/a Javier Suarez,

Enhorabuena. Nos complace presentarle el Premio MVP de Microsoft…

Van cuatro y tras otro año, volver a recibirlo hace la misma e incluso más ilusión!. Más aún si cabe si, además de pertener a la categoría Windows Development se incluye el área Visual Studio and Development Technologies. Un gran honor formar parte de un grupo de desarrolladores tan talentosos y apasionados además de grandes personas.

Agradecimientos

Llegados a este punto, siempre quieres agradecer a muchas partes que han ayudado en el camino. Comienzo por vosotros, si, si hablo de ti querido lector. Gracias por leer estos artículos técnicos y ayudarme a aprender intercambiando opiniones día a día, gracias a mis compañeros MVPs, en especial a los de desarrollo Windows y Visual Studio con quienes comparto la inmensa mayoría de eventos, proyectos personales y grandes momentos (soís grandes), a los grupos de usuario SVQXDG y CartujaDotNet donde colaboro y me permiten aprender más y más cada día con fantásticos compañeros y a Cristina González, MVP lead, por su increíble labor siempre pendiente de todos nosotros además de a los chicos de Microsoft España. Podría continuar nombrando a muchos amigos y compañeros, pero me temo que me extendería en exceso y al final y al cabo sabéis quienes sois.

Por último, en esta ocasión me gustaría dar todo mi apoyo a amigos que dejan el programa. Estoy seguro que estarán de vuelta pronto además de por supuesto, seguir aportando a toda la comunidad.

Y ahora que?

Ahora, a continuar aprendiendo y disfrutando compartiendo todo lo posible en blogs, comunidades técnicas con más ganas y más ilusión si cabe.

Felicidades

También me gustaría felicitar a todos los MVPs veteranos que han sido renovados asi como aquellos que entran a formar parte desde este momento. Enhorabuena!

[Material] Xamarin Dev Days Málaga 2017

El evento

El pasado sábado 24 de Junio, tenía lugar en Málaga el Xamarin Dev Days. Una jornada con varias sesiones técnicas, taller, regalos y mucho networking.

El resultado fue un fantástico día de desarrollo Xamarin con muchas preguntas, ayuda y tiempo para charlar entre todos rodeados de un café o unas pizzas.

El material

Pude participar en el evento con una de las sesiones. Nos centramos en el desarrollo de aplicaciones móviles multiplataforma utilizando Xamarin y aprovechando la potencia de Azure.

Tras las sesiones, realizamos un muy divertido taller donde paso a paso, desarrollamos una aplicación Xamarin.Forms aplicando MVVM y accediendo a una Azure Mobile App.

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

Ver GitHub

Un día genial de comunidad con grandes momentos que esperamos repetir sin duda!

Más información

[Evento CartujaDotNet & SVQDotNet] The State of .NET

El evento

La industria está en un estado de continuo cambio. No es diferente ni mucho menos para desarrolladores .NET. ¿Qué significa eso para tus proyectos de hoy?, ¿tus habilidades se quedarán obsoletas rapidamente?, ¿en qué deberías centrarse ahora?.

El ponente

Tiberiu Covaci, Microsoft RD y MVP. Está en una posición única para compartir información basada en la experiencia del mundo real con proyectos propios o aquellos proyectos que puede ver en su papel de mentor y consultor, así como el feedback que recive de lectores de la revista CODE.

La fecha

El evento será el próximo Lunes, 03 de Julio de 16:00h a 18:00h (2 horas de duración).

¿Te apuntas?

Más información

[Material] Xamarin Dev Days Madrid 2017

El evento

El pasado sábado 10 de Junio, tenía lugar en Madrid el Xamarin Dev Days. Una jornada con varias sesiones técnicas, taller, regalos y mucho networking.

El resultado fue un fantástico día de desarrollo Xamarin con muchas preguntas, ayuda y tiempo para charlar entre todos rodeados de un café o unas pizzas.

El material

Pude participar en el evento con una de las sesiones. Nos centramos en el desarrollo de aplicaciones móviles multiplataforma utilizando Xamarin.Forms:

Comenzamos por una introducción de conceptos básicos, primera demo  y terminamos repasando todas las últimas novedades como Forms Embedding o las futuras novedades de Xamarin.Forms 3.0.

Tras las sesiones, realizamos un muy divertido taller donde paso a paso, desarrollamos una aplicación Xamarin.Forms aplicando MVVM y accediendo a una Azure Mobile App.

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

Ver GitHub

Un día genial de comunidad con grandes momentos que esperamos repetir sin duda!

Más información

[Evento Online] Introducción a Xamarin.IoT

El evento

¿Tienes pensado instalar o tienes instalado Linux en tu dispositivo IoT, usando la flexibilidad y potencia de C#?.

Xamarin IoT permite a los desarrolladores crear aplicaciones de consola, usando IDE’s de primer nivel como son Visual Studio, Visual Studio for Mac/Linux, además de poder ejecutar y debuguear tu aplicación favorita de un dispositivo remoto.

Una charla intensa, donde si el tiempo nos lo permite, intentaremos abordar todos los puntos:

  • Presentación e introducción Xamarin.IoT.
  • Setup de dispositivo.
  • Arquitectura.
  • Ejemplos de uso.
  • Hermes.Mqtt Client/Server.
  • Azure Sql Database + Entity framework.
  • IoTSharp.Components.

A todos estos puntos y a todas las preguntas posibles intentaremos dar solución en esta sesión online!.

El ponente

Tendré la compañía en esta ocasión de Jose Medrano. Jose es desarrollador de software y actualmente trabaja en Xamarin formando parte del equipo de Xamarin Profiler & Xamarin IoT.

Jose Medrano

La fecha

El evento será el próximo Martes, 27 de Junio.

  • 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] Trucos y consejos rendimiento Xamarin.Forms

Introducción

Recientemente, en SVQXDG, tuvimos un interesante evento Xamarin relacionado con el rendimiento en Xamarin.Forms. Tras recibir feedback por diferentes redes sociales, meetup o vía correo, ante el interés en diferentes partes geográficas hemos decidido…repetir el evento online!

El evento

¿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 online!.

El evento será el próximo Sábado, 17 de Junio a las 12:00h (GMT+1).

¿Te apuntas?

Más información

[Evento Online] Xamarin Hol – Módulo V: Mobile DevOps con Visual Studio Team Services y HockeyApp

Introducción

Hace ya un tiempos os hablé del concurso de desarrollo de aplicaciones Xamarin. Microsoft quiere animarte a lanzarte a crear Apps participando en el Hackathon Online que se organizará los próximos 16, 17 y 18 de Junio. Antes de llegar al Hackathon, se está realizando una toma de contacto con Xamarin además de resolver dudas basándonos en el Hand On Lab de Pierce Boggan, “Spent”. 

Spent

En este taller, exploraremos las características y funcionalidad de Xamarin.Forms desde una aplicación para hacer el seguimiento de los gastos.

El evento

Tras publicar los cinco módulos correspondientes al Hand On Lab y tras varios eventos online donde se han repasado los cuatro primeros módulos con grandes compañeros de la comunidad, llega el turno de quinto módulo centrado en procesos de integración continua y distribución continua utilizando VSTS y HockeyApp.

En el evento veremos como crear Builds para aplicaciones Xamarin desde VSTS y desde Mobile Center, como distribuir betas desde HockeyApp o cómo obtener analíticas de uso, información de errores, etc.

¿Te apuntas?

Más información

[Xamarin.Forms] Accesibilidad

Introducció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.

Cuando hablamos de accesibilidad en el desarrollo, nos referimos al concepto de diseñar interfaces de usuario que funcionen de forma correcta ante las diferentes características de visualización y asistencia de entrada. La gestión de alto contraste, zoom, tamaño de fuente o la lectura de pantalla son opciones que permiten el acceso de muchos usuarios a nuestras aplicaciones.

Las principales plataformas móviles del mercado, es decir, iOS, Android y Windows cuentan con APIs para permitir a los desarrolladores crear aplicaciones accesibles.

Xamarin.Forms nos permite crear aplicaciones multiplataforma nativas compartiendo interfaces de usuario gracias a su capa de abstraccion.

¿Cómo creamos aplicaciones accesibles con Xamarin.Forms?

Soporte a accesibilidad en aplicaciones Xamarin.Forms

En versiones previas de Xamarin.Forms para añadir opciones de accesibilidad, requeríamos de Custom Renders. Acceder a APIs nativas para acceder a opciones de accesibilidad. Con la llegada de los efectos, todo se simplificó pemitiendo crear efectos con acceso a APIs nativas de forma más sencilla.

Con la llegada de Xamarin.Forms 2.3.5 se añade soporte directo a APIs de accesibilidad.

Accesibilidad en Xamarin.Forms

Opciones de accesibilidad

Xamarin.Forms incluye diferentes opciones de accesibilidad disponibles en la clase AutomationProperties y disponibles como propiedades adjuntas. Estas propiedades se encargan de añadir en cada plataforma el uso correcto de las diferentes opciones de accesibilidad.

  • AutomationProperties.HelpText
  • AutomationProperties.IsInAccessibleTree
  • AutomationProperties.LabeledBy
  • AutomationProperties.Name

HelpText

Es un valor de tipo cadena que se utilizará para sintetizar en voz.

AutomationProperties.HelpText

En cada plataforma se utilizará una propiedad corespondiente a las APIs nativas:

  • Android: Hint
  • iOS: AccesibilityHint
  • Windows: AutomationProperties.HelpTextProperty

IsInAccesibleTree

Propiedad de tipo bool que indica si el elemento es accesible.

AutomationProperties.IsInAccessibleTree

En cada plataforma:

  • Android: Focusable
  • iOS: IsAccesibilityElement
  • Windows: AutomationProperties.AccesibilityViewProperty

LabeledBy

Esta propiedad permite que otro elemento visual defina información de accesibilidad. Así, podemos utilizar la información de otro elemento para ayudar a describir.

AutomationProperties.LabeledBy

Internamente, cada plataforma utiliza las siguientes propiedades:

  • Android: SetLabelFor
  • iOS: No se mapea a ninguna propiedad.
  • Windows: AutomationProperties.LabeledByProperty

Name

Es el nombre del elemento.

AutomationProperties.Name

En cada plataforma:

  • Android: ContentDescription
  • iOS: AccesibilityLabel
  • Windows: AutomationProperties.NameProperty

Veamos un ejemplo:

<StackLayout>
     <Label 
          x:Name="UsernameLabel"
          Text="Username"/>
     <Entry      
          AutomationProperties.Name="UsernameEntry"
          AutomationProperties.IsInAccessibleTree="True" 
          AutomationProperties.LabeledBy="{x:Reference UsernameLabel}"
          AutomationProperties.HelpText="Insert Username" 
          Placeholder="Insert Username"/>
</StackLayout>

El ejemplo se encuentra disponible en GitHub:

Ver GitHub

Consejos accesibilidad

En general, a la hora de gestionar la accesibilidad en tu aplicación, deberíamos tener en cuenta los siguientes detalles:

  • Haz pruebas de tu interfaz con los esquemas de color en modo contraste alto.
  • Etiqueta los elementos de la interfaz con textos descriptivos utilizando las APIs de accesibilidad para permitir la lectura de la pantalla en cada plataforma.
  • Recuerda etiquetar también botones e imágenes de la aplicación con una descripción accesible.
  • Excluye elementos de decoración innecesarios!.
  • En muchas ocasiones las aplicaciones móviles gestionan diferentes estados sólo con elementos visuales. Por ejemplo, al realizar la carga de elementos, mostramos un indicador visual para indicar progreso y fin. Recuerda agregar en estos indicadores específicos de accesibilidad. También se pueden añadir refuerzos acústicos.
  • Ante contenido multimedia recuerda añadir descripciones legíbles y permitir acceder de forma sencilla a los botones de gestión del contenido.
  • Si la aplicación está localizada en diferentes idiomas, recuerda localizar también todas las descripciones de accesbilidad añadidas.
  • Cada plataforma cuenta con herramientas diferentes de narración. Android cuenta con opciones como Google TalkBack, iOS cuenta con VoiceOver y Windows con Narrator. Cada plataforma funciona de forma única a pesar de todas ellas contar con opciones similares. Es recomendable hacer pruebas en todas las plataformas donde nuestra aplicación puede funcionar.

Más información

[Material] Rendimiento en Xamarin.Forms

Introducción

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, intentamos dar respuesta en el último evento de SVQXDG celebrado el pasado 24 de Mayo.

El material

La presentación:

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

Ver GitHubGracias a todos los asistentes al evento. En esta ocasión me ha sorprendido la enorme cantidad de feedback y peticiones relacionados con esta sesión. Pronto se anunciará su repetición en esta ocasión online!

Nos vemos en la próxima!

Más información