[2023r2] Mejoras en proyectos Web con Xojo

A continuación encontrarás traducida al castellano el artículo escrito por Ricardo Cruz y que está publicado originalmente en el blog oficial de Xojo.

Xojo 2023r2 contiene una gran cantidad de mejoras en los proyectos Web. Si bien el soporte del Modo Oscuro es la principal novedad de esta versión, también hemos puesto un gran esfuerzo en hacer que todo sea mejor.

Soporte de Modo Oscuro y Bootstrap 5

Los proyectos Web eran los únicos que no tenían soporte de Modo Oscuro. Ahora, desde Xojo 2023r2 puedes crear aplicaciones Web con Xojo en los que se respeten dicha preferencia del usuario.

También hay una nueva propiedad WebSession.ColorMode que puedes usar. Por omisión se define a Auto, lo que significa que aplicará la preferencia de aspecto definida por el sistema operativo, pero también se puede forzar a modo Light (Claro) o Dark (Oscuro). Puede cambiarse en tiempo de ejecución y por usuario.

Si bien no a todo el mundo le gusta el Modo Oscuro, probablemente algunos de los usuarios de tus aplicaciones lo apreciarán. Por ejemplo, un buen motivo puede ser debido a circunstancias médicas, de modo que puedes considerar añadir el soporte incluso si personalmente no te gustan las interfaces con modo oscuro.

Si deseas activar el Modo Oscuro en tus anteriores proyectos, tendrás que activar el ajuste manualmente en la sección Shared Build Settings (recuerda que está activado por omisión para los nuevos proyectos):

Los grupos de color (Color Group) también pueden utilizarse ahora prácticamente en todas partes, y de hecho quedan reflejados en las vistas previas del IDE cuando se cambia entre los modos claro y oscuro:

Para proporcionar el soporte de Modo Oscuro en los proyectos Web, hemos tenido que actualizar nuestra dependencia interna de Bootstrap desde la versión v4.6.1 a la versión v5.3.0, lo que implica un gran cambio en sí mismo. Bootstrap 5 incluye una paleta de color modificada, así como nuevos componentes, controles ya existentes que se han visto modernizados, y también correcciones de errores.

Si tu aplicación web no estuviese utilizando un Tema Bootstrap personalizado (bootstrap.min.css), todo debería de verse más o menos igual, excepto por el sutil cambio en la paleta de color y los botones redondeados. Los temas de Bootstrap 4 no están soportados en Bootstrap 5, de modo que tendrás que reemplazarlos con un tema de Bootstrap 5 en el caso de que lo necesites. No todos los temas soportan Modo Oscuro, pero sí lo hace el incluido por omisión con Xojo.

Si te gusta crear temas, por favor comprueba la documentación sobre los Modos de Color de Bootstrap. También puedes encontrar temas de Bootstrap 5 gratuitos en Bootswatch.

También queremos agradecer efusivamente a todas nuestras terceras partes por sus esfuerzos a la hora de adaptar sus plug-ins y controles comerciales o de código abierto a Bootstrap 5.

Accesibilidad

La navegación y el uso de aplicaciones web mediante el manejo del teclado simplifica mucho la vida. En Xojo 2023r2 hemos actualizado los controles WebPagination y WebBreadcrum, los cuales están compuestos por más de un item con capacidad de recibir el foco. Los usuarios de tus aplicaciones podrán utilizar la tecla Tabulador para moverse entre ellos.

Tenemos previsto continuar trabajando en las mejoras de accesibilidad. Por favor, abre un nuevo informe si encuentras alguna cosa que podría ayudarte tanto a ti como a los usuarios de tus aplicaciones.

WebListBox

DataTables, la dependencia interna que utilizamos para dar vida a las tablas, se ha actualizado desde la versión v1.10.20 a la versión v1.13.4. Esta versión reciente incluye soporte para Bootstrap 5 así como unas cuantas correcciones de errores con los que podrías estar lidiando en tus proyectos web.

Ahora puedes desactivar el WebListBox si lo necesitas ajustando la propiedad Enabled a False, de modo que los usuarios de tus aplicaciones no podrán interactuar con dicho control. De igual modo, y si estabas echando de menos esta característica del DesktopListBox, ahora puedes añadir etiquetas (tags) de tipo Variant a las columnas del WebListbox, usando para ello el nuevo método WebListBox.ColumnTagAt.

Adicionalmente, este control también soporta ahora un Editor en Línea, tal y como es posible con el ListBox de Escritorio.

WebChart

La librería subyacente Chart.js utilizada para el control WebChart se ha actualizado desde la versión v2.9.3 a la versión v4.2.1. Nuevamente, hemos hecho todo lo posible en nuestro lado para que tu no tengas que realizar ningún cambio.

La única excepción se encuentra en el evento WebChart.OverridenOptions. Si lo estabas utilizando en tus anteriores proyectos Web, entonces tendrás que comprobar la documentación de la librería, dado que las opciones JSON internas han cambiado.

Puedes esperar que las nuevas características incorporadas en DesktopChart y MobileChart también lo hagan en WebChart, como por ejemplo la configuración de las terminaciones y estilos de línea, las imágenes de fondo o el uso de prefijos y sufijos.

SDK Web

Si estás utilizando controles de terceros, entonces advertirás que algunos de ellos tienen ahora un icono personalizado en la librería del IDE. Pero aun más importante: usarán menos memoria en tiempo de ejecución.

¿Estás desarrollando controles de código abierto o comerciales con el SDK Web? Recuerda que existe una sección dedicada en el foro donde puedes realizar tus consultas.

Rendimiento del IDE y soporte CSS mejorado

Bootstrap 5 hace uso de las últimas características de CSS. Hemos aprovechado para repensar nuestro parser CSS y mejorar su rendimiento al mismo tiempo. Como resultado, la previsualización en el IDE será más próxima ahora a lo que verás en el navegador, además de que todo se renderiza ahora más rápido.

En resumen

En esta release se incluyen en conjunto más de 50 correcciones de errores y características sólo en el área Web. Puedes consultar el listado completo en las Notas de Revisión.

¡Estamos deseando conocer tus opiniones y ver lo que estás creando con Xojo! Nos leemos en el foro.