[Xojo 2026r1] Xojo Web: Códigos de Barras, selección de colores, conmutador…

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

Si creas aplicaciones web con Xojo, entonces merece la pena que eches un vistazo detenidamente a las novedades de Xojo 2026r1. Hay una buena mezcla de nuevos controles y mejoras que puedes explorar. ¡Tiempos emocionantes!

Nuevos controles

Se han añadido tres nuevos controles al framework web, dirigidos a cerrar aun más el hueco existente entre los proyectos Web y otros tipos de proyectos.

WebSwitch es un control conmutador con el que ya estarán familiarizados los desarrolladores para plataformas móviles; de hecho hace tiempo que ya estaba disponible para iOS y Android. Ahora también lo está para los proyectos Wb, de modo que si estabas utilizando una casilla de verificación para la funcionalidad habitual de un conmutador ahora puedes dejar de utilizar dicha alternativa.

WebColorPicker incorpora al framework web la capacidad de que las apps permitan a los usuarios seleccionar colores del mismo modo que es posible en Desktop y Mobile. Suéltalo desde la Librería, añade el evento y tendrás un selector de color al estilo Xojo.

Así es como lucirá el WebColorPicker en tu navegador:

El tercer nuevo control añade soporte para los códigos de barras. Ahora tu aplicación web podrá leer códigos de barras directamente mediante la cámara del equipo del usuario; ya sea en navegadores desktop o de móviles. Esto abre una buena cantidad de aplicaciones prácticas: sistemas de inventariado, tickets, búsqueda de productos… y que hasta ahora sólo eran posibles mediante apps nativas de móviles.

Nuevamente, sólo has de soltar el control Barcode en tu proyecto e implementar los eventos:

¡Eso es todo! Tus apps web podrán escanear una amplia variedad de códigos de barras, incluyendo QR, Data Matrix, Aztec, PDF 417… ¡y muchos más!

Iconos y WebButton

El control WebButton cuenta ahora con la propiedad Icon. Puedes asignarle un WebPicture o bien usar cualquiera de los iconos Bootstrap que se incluyen junto con el framework. Es una pequeña novedad, pero marca una diferencia notable cuando se trata de crear interfaces con una gran cantidad de acciones… y en las que una simple etiqueta no resulta suficiente para comunicar el propósito.

Añade un botón a tu proyecto:

Configura su propiedad Icon en el evento Opening:

Me.Icon = WebPicture.BootstrapIcon("key-fill")

Si no indicas un color en BootstrapIcon, este heredará el color de la etiqueta del botón. Es la forma más sencilla de soportar el Modo Oscuro con la nueva propiedad WebButton.Icon, sin necesidad de tener que recurrir a trucos especiales.

Este es el aspecto que tiene durante la ejecución:

Modo Oscuro:

WebLabel: Semántica HTML y tipos de elemento

En esta release también se han incluido un par de cambios relacionados con WebLabel. El primero de ellos se trata de una corrección: previamente el control se renderizaba utilizando el elemento HTML <label>, lo que semánticamente significaba que se trataba de una etiqueta para la entrada de datos, y no para mostrar texto genérico. Eso se ha corregido.

La novedad más interesante es que ahora puedes elegir el tipo de elemento HTML con el que se renderizará. Si deseas que una etiqueta sea un <h1> o un <h2>, entonces sólo has de definirlo directamente en el Inspector. Esto es útil no sólo a la hora de definir el estilo visual, sino para las herramientas de accesibilidad y los motores de búsqueda que se basan en la estructura de la página para comprender la jerarquía del contenido.

La mejora de ambos aspectos (accesibilidad y hacer más felices a los motores de búsqueda) son algunos de nuestros objetivos para 2026. Continuarás viendo mejoras en esta dirección.

WebTextArea cuenta con AddText

Ahora el control WebTextArea cuenta con el método AddText, consistente ahora con Desktop y Mobile. Si estás escribiendo código dirigido a múltiples plataformas, entonces este tipo de paridad te evitará el tener que chequear sobre qué plataforma se está ejecutando el código antes de añadir nuevo texto en el control.

Indicador de escala en WebMapViewer

El control WebMapViewer cuenta ahora con la propiedad HasScaleIndicator. Cuando se activa se añadirá una escala visual sobre el mapa, mostrando así la distancia real. Marca la diferencia es aplicaciones donde los usuarios necesitan de un contexto espacial: trabajo de campo, logística o cualquiera donde el usuario se pueda preguntar “¿cuán lejos queda?”.

Rendimiento y Modernización bajo el capó

En esta release también se han incluido unos cuantos cambios que no son visuales, pero que mejoran las cosas para todos.

Bootstrap se ha actualizado a la versión v5.3.8, lo que corrige algunos problemas introducidos en la versión v5.3.7 y que afectaban a Xojo. El compilador TypeScript también se ha actualizado a la versión v5.9.3 y el target de compilación se ha subido desde ES6 a ES2020. El código no utilizado en el framework Web se ha limpiado para reducir el tamaño del bundle compilado.

Xojo también ha eliminado su uso interno de Modernizr. La Librería aun está presente para algunas aplicaciones existentes que la precisan, de modo que puedan continuar funcionando; pero ya no se utilizará más en el framework y se eliminará por completo en una próxima revisión.

Si has querido auditar el rendimiento de tu aplicación web, este es un buen momento para echar un vistazo a SendEventsInBatches y LazyLoadDependencies en WebSession. Ambos toman por defecto ahora el valor True en los nuevos proyectos, de modo que merece la pena que lo pruebes en aquellas aplicación existentes donde estuviese desactivado.

Consistencia de la API

Se han deprecado algunos métodos en favor de nombres que son consistentes con el resto del framework:

• WebApplication.AutoQuit → AllowAutoQuit
• WebListBox.ReloadData → ReloadFromDataSource
• WebRadioGroup.RemoveAllRows → RemoveAll, and RemoveRowAt → RemoveAt

El código existente continuará compilando, pero merece la pena que actualices dichos métodos cuando tengas ocasión.

Conclusiones

Con los nuevos controles, mejor semántica HTML y un runtime más limpio, Xojo 2026r1 es una release que merece la pena para quienes creen aplicaciones Web con Xojo. Consulta las Notas de Revisión para ver el listado completo de cambios.