Avalonia – Avalonia 11 y primeros pasos

Avalonia es un framework que permite a los desarrolladores crear aplicaciones multiplataforma utilizando .NET. Utiliza su propio motor de renderizado para dibujar controles de interfaz de usuario, lo que garantiza una apariencia y un comportamiento consistentes en varias plataformas, incluidas Windows, macOS, Linux, Android, iOS y WebAssembly. Esto significa que los desarrolladores pueden compartir su código de interfaz de usuario y mantener una apariencia uniforme independientemente de la plataforma.

Las aplicaciones creadas con Avalonia están escritas en C# o F#, lo que facilita la creación rápida de prototipos de aplicaciones que pueden convertirse con el tiempo en sistemas complejos. A diferencia de otros kits de herramientas que pueden estar restringidos por API limitadas o un rendimiento deficiente, las aplicaciones de Avalonia tienen la ventaja de tener acceso total a las capacidades de la plataforma y ofrecen un rendimiento increíble, gracias al renderizador compositivo.

Como las aplicaciones de Avalonia son aplicaciones multiplataforma, tienen una arquitectura similar a otras aplicaciones multiplataforma tradicionales. El enfoque más común es crear un proyecto central que albergue el código compartido y luego desarrollar proyectos específicos de plataforma que consumirá este código compartido.

Avalonia ofrece dos técnicas para crear interfaces de usuario. La primera es utilizar código para crear vistas de interfaz de usuario aprovechando la amplia API proporcionada por Avalonia. Alternativamente, los desarrolladores pueden utilizar el lenguaje de marcado de aplicaciones extensible (XAML), un lenguaje de marcado declarativo que permite a los desarrolladores definir interfaces de usuario. En este enfoque, la estructura de la interfaz de usuario se describe en un archivo XAML, mientras que el comportamiento del tiempo de ejecución se define en un archivo de código subyacente independiente.

La extensión de archivo para los archivos XAML que se utilizan en otros framework es .xaml, pero debido a problemas técnicos al integrarse con Visual Studio, Avalonia UI usa su propia extensión .axaml: ‘Avalonia XAML’.

Un archivo XAML suele contener las siguientes líneas:

<Window xmlns=»https://github.com/avaloniaui«

xmlns:x=»http://schemas.microsoft.com/winfx/2006/xaml«

x:Class=»AvaloniaApplication1.MainWindow»>

</Window>

Al igual que todos los archivos XML, hay un elemento raíz. La etiqueta del elemento raíz <Window></Window> define el tipo de raíz. Esto corresponderá a un tipo de control de interfaz de usuario de Avalonia, en el ejemplo anterior una ventana.

El ejemplo anterior utiliza tres atributos interesantes:

• xmlns=»https://github.com/avaloniaui« – esta es la declaración del namespace XAML para la propia interfaz de usuario de Avalonia. Esto es obligatorio; sin él, el archivo no será reconocido como un documento XAML de Avalonia.
• xmlns:x=»http://schemas.microsoft.com/winfx/2006/xaml« – esta es la declaración para el namespace del lenguaje XAML.
• x:Class=»AvaloniaApplication1.MainWindow» – esta es una extensión de la declaración anterior (para ‘x’) que le indica al compilador XAML dónde encontrar la clase asociada para este archivo. La clase se define en un archivo de código subyacente, generalmente escrito en C#.

Avalonia 11

La versión 11.0.0 de Avalonia fue lanzada en julio de 2023 y representa un gran paso adelante para brindar a los desarrolladores una experiencia eficiente, rica en funcionalidades y fluida para crear interfaces de usuario excepcionales en todas las plataformas principales. 

Una de las actualizaciones más importantes de la versión 11 es el soporte de nuevas plataformas. Con esta versión, se ha incluido compatibilidad con iOS, Android y WebAssembly, llevando las capacidades multiplataforma a nuevos horizontes.

El renderizador de composición es un avance significativo en cuanto a capacidad y rendimiento visual. En esencia, el renderizador de composición aporta nuevas posibilidades de animación. Con soporte para animaciones implícitas, animaciones conectadas y animaciones rendere-thread, el dinamismo visual de la aplicación puede alcanzar nuevos niveles. Estas funciones permiten animaciones fluidas y de alto rendimiento que pueden enriquecer las interfaces de usuario y brindar experiencias de usuario atractivas. 

Más allá de las mejoras en la animación, el renderizador de composición proporciona mejoras sustanciales en el rendimiento. Está diseñado para ser altamente eficiente, reducir el uso de memoria y permitir altas velocidades de fotogramas incluso en dispositivos integrados de baja potencia. Un testimonio de la eficiencia de Avalonia es su uso generalizado en sistemas integrados. La arquitectura permite ofrecer una experiencia de usuario perfecta, incluso cuando se opera con CPU integradas de hace 20 años. Este nivel de optimización del rendimiento es poco común y demuestra la capacidad de Avalonia para adaptarse a diversas configuraciones de hardware mientras mantiene aplicaciones fluidas y responsivas.

Advance Text Rendering and Layout

Avalonia v11 marca el comienzo de una nueva era de capacidades de representación de texto, mejorando significativamente el control y la flexibilidad sobre los elementos visuales de su interfaz de usuario. Se ha introducido la representación de texto enriquecido que admite elementos en línea. Esta característica permite variaciones en un solo TextBlock, desde cambiar estilos de fuente hasta agregar hipervínculos o incluso incrustar controles, algo que antes no era posible.

Estas mejoras y capacidades sientan las bases para la edición completa de texto enriquecido, una característica que se explorará en las próximas versiones de Avalonia.

Soporte para IME (Input Method Editor)

Esta característica vital ayuda a los usuarios a ingresar caracteres y símbolos que no se encuentran en sus dispositivos de entrada. La compatibilidad con IME también permite una integración perfecta con teclados en pantalla en plataformas móviles y web. Esto significa que las aplicaciones de Avalonia ahora funcionan bien con funciones como autocompletado y otras funciones de texto proporcionadas por el sistema operativo. Como resultado, las aplicaciones de Avalonia se vuelven aún más fáciles de usar y adaptables a una variedad de métodos de entrada.

Soporte de accesibilidad

La tecnología debe ser inclusiva y accesible para todos. Por lo tanto, Avalonia presenta un nuevo soporte de accesibilidad, que garantiza que todos puedan usar y disfrutar las aplicaciones de Avalonia, incluidas las personas con discapacidades.

Se han sentado las bases para un soporte de accesibilidad total, implementando funciones críticas que hacen que las aplicaciones sean más accesibles para los usuarios con discapacidades visuales, motoras o cognitivas. Estas mejoras cumplen con los estándares y directrices de la industria, lo que convierte a Avalonia en una opción más atractiva para los desarrolladores interesados en crear software accesible.

Se ha avanzado mucho en la navegación por teclado, la compatibilidad con lectores de pantalla y los temas de alto contraste. 

Pruebas automatizadas

Se han revisado las capacidades de prueba automatizadas para garantizar que se pueda desarrollar aplicaciones sólidas y confiables con facilidad. Esta versión presenta soporte para pruebas automatizadas que se extiende más allá del entorno de prueba de Avalonia para incluir frameworks de prueba tradicionales como Appium. Con v11, puedes aprovechar las herramientas de prueba con las que ya estás familiarizado para garantizar que tu aplicación se ejecute sin problemas en todas las plataformas.

Pero las mejoras van aún más allá. Con la introducción del modo «Headless», puedes ejecutar toda tu aplicación y ejecutar pruebas a una velocidad increíblemente alta. Este modo “Headless” agiliza el proceso de prueba, permitiéndote validar la funcionalidad y detectar errores de manera más eficiente que nunca ya que permite el uso de sistemas de integración continua cómo Azure DevOps or Bitbucket pipelines para ejecutar pruebas “end-to-end”.

Control Themes

Los temas de control en v11 se han reestructurado para una personalización más sencilla, lo cual es beneficioso si tienes una identidad visual precisa y consistente que te gustaría mantener en todas tus aplicaciones. Esta facilidad de personalización también aumenta la eficiencia, permitiéndote lograr la estética deseada con menos tiempo y esfuerzo.

Además, se ha mejorado la compatibilidad con el cambio de tema, lo que permite a tus usuarios cambiar entre los modos claro y oscuro u otros temas personalizados de manera fluida y dinámica.

Template Studio

Se ha lanzado la primera versión de Template Studio para Avalonia. Una solución optimizada diseñada para acelerar la creación de nuevas aplicaciones de Avalonia mediante una interfaz de usuario intuitiva.

Empezar a utilizar Template Studio para Avalonia es muy sencillo. Simplemente instale la extensión y seleccione la plantilla de proyecto de Template Studio al crear un nuevo proyecto en Visual Studio.

Primeros pasos

Instalación de Avalonia UI templates

El mejor lugar para empezar a utilizar Avalonia es creando una aplicación utilizando una plantilla.

Para instalar las plantillas de Avalonia, ejecute el siguiente comando:

dotnet new install Avalonia.Templates

Para listar las plantillas instaladas, ejecutar:

dotnet new list

Veremos una lista como la siguiente:

Creating a New Application

Una vez instaladas las plantillas, puedes crear una nueva aplicación ejecutando el siguiente comando:

dotnet nueva avalonia.app -o MyApp

Esto creará una nueva carpeta llamada MyApp con los archivos de su aplicación.

Para crear una aplicación ya con una estructura para mvvm podemos usar:

dotnet nueva avalonia.mvvm -o MyApp.