[2024r3] Presentamos Named Color y Clases CSS en Xojo Web

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

Esta release supone un gran avance en términos de opciones de diseño para los usuarios de Xojo Web. Xojo 2024r3 incluye nuevas herramientas para crear bonitas aplicaciones Web… ¡con menos esfuerzo!

Breve recordatorio sobre qué es Bootstrap

Dado que lo estaré mencionando a lo largo del artículo, permíteme que te recuerde lo que es y para qué lo estamos usando en Xojo.

Bootstrap es la librería que usamos para la parte visual en las aplicaciones Web creadas con Xojo. Puedes pensar en ello como en Gtk para Linux o UIKit en iOS.

Si bien existe una buena cantidad de librerías alternativas, probablemente se trate del framework más popular en la última década. Puedes consultar el sitio web de Bootstrap para obtener información adicional.

ColorGroup… con colores por su nombre

Hasta esta release, cuando se configuraba un ColorGroup no estaba la opción Named en los proyectos Web. Xojo 2024r3 incorpora la capacidad de elegir cualquiera de los colores web básicos, así como los colores extendidos y, lo cual encuentro más interesante, también los colores Bootstrap —en los cuales se incluye de serie el soporte para el Modo Oscuro.

Tal y como puedes esperar, si sueltas un tema Bootstrap 5.3 personalizado con otro conjunto de colores, entonces el IDE se actualizará automáticamente para mostrarlos.

Usando los colores por nombre desde el código

Cuando existe la necesidad de utilizar los colores de forma dinámica, entonces también es posible utilizar los nombres de los colores de Bootstrap desde código. Este es un ejemplo:

Var colorName As String
 
If paymentCardIsValid Then
  colorName = "success"
Else
  colorName = "danger"
End If
 
Rectangle1.BackgroundColor = ColorGroup.NamedColor(colorName)

O bien en el evento WebCanvas.Paint:

Var colorName As String = If(paymentCardIsValid, "success", "danger")
g.DrawingColor = ColorGroup.NamedColor(colorName)
g.FillRectangle(0, 0, g.Width, g.Height)

Puedes consultar el listado con los colores disponibles en la sección Color de la documentación oficial de Bootstrap. Los colores Web básicos y extendidos también funcionarán.

Uso de clases CSS Bootstrap

Bootstrap incluye una serie de clases CSS de utilidad aplicables a una amplia variedad de aspectos visuales. Probablemente no necesites emplearlas todas, dado que el IDE de Xojo lo hará por ti en la mayoría de los casos, y trabajamos duro para mejorar el IDE más fácil, release tras release.

Dicho lo anterior, si eres un usuario avanzado y tienes experiencia previa en el uso de Bootstrap, entonces probablemente encuentres de utilidad la capacidad de añadir clases CSS directamente desde el Inspector.

Dirígete a la pestaña Avanzado, añade algunas clases CSS de Bootstrap (separadas por espacios)… ¡y listo!.

Aquí puedes ver una demostración:

Hemos incluido un nuevo ejemplo, llamado “Applying Bootstrap CSS classes to controls”, que puedes encontrar en Platforms > Web. Por favor, no dudes en echarle un vistazo.

Las clases CSS no se limitan sólo a Bootstrap. Si has añadido algunos estilos en la sección HTML Header, entonces también podrás utilizarlas.

También puedes añadir y eliminarlas usando la nueva propiedad CSSClasses, disponible en cada subclase de WebUIControl.

Más cariño para WebRectangle

Ya no tendrás que configurar el color de borde, grosor de borde o bien el radio de las esquinas en el evento Opening de un WebRectangle.

Xojo 2024r2.1 a la izquierda, Xojo 2024r3 en la derecha.

Cuando diseñas aplicaciones web, me he encontrado utilizando una buena cantidad de controles WebRectangle y, por omisión, siempre tenían un borde redondeado.

El efecto colateral es sutil, pero ahora que puedes controlar el radio del borde directamente desde el Inspector, el previo mostrado en el IDE será más aproximado a lo que verás en el navegador. Te evitarás el tener que escribir unas cuantas líneas de código.

Además, algunos temas de Bootstrap definen diferentes tamaños de esquina. Al configurar esta propiedad con “-1” se aplicará el radio de esquina por defecto del tema de Bootstrap.

Conclusión

Como siempre, esta release contiene mucho más de lo que puedo contar en un simple artículo. Con más de 30 correcciones de errores y 9 solicitudes de características implementadas sólo en la plataforma Web, asegúrate de echar un vistazo a las Notas de Revisión correspondientes a Xojo 2024r3 y ver el cuadro completo.

¡Feliz programación!