Curso de JavaFX | 5. Aplicar estilos en línea

Por 9.99€ al mes tendrás acceso completo a todos los cursos. Sin matrícula ni permanencia.

En esta lección aprenderás a personalizar el aspecto visual de los componentes de tu aplicación JavaFX aplicando estilos en línea. Esto te permitirá modificar propiedades como colores, bordes, tamaños, entre otros, directamente desde el código.

Aplicar estilos con setStyle

El método setStyle te permite aplicar propiedades CSS directamente a un nodo de tu aplicación. Las propiedades deben ser declaradas como cadenas de texto que sigan la sintaxis de CSS.

Ejemplo: Cambiar el color de fondo

root.setStyle("-fx-background-color:#333;");

¿Qué hace este código?

1. -fx-background-color: Es una propiedad específica de JavaFX que define el color de fondo de un nodo.
2. #333: Es el color en formato hexadecimal (un tono de gris oscuro).
3. setStyle: Aplica este estilo en línea al nodo root.

Resultado:
El fondo del contenedor se vuelve gris oscuro.

Lista de propiedades CSS comunes en JavaFX

Aquí tienes algunas propiedades útiles que puedes usar con setStyle:

• Color de fondo:cssCopyEdit-fx-background-color: #ff0000; /* Rojo */
• Tamaño del borde:cssCopyEdit-fx-border-width: 2px;
• Color del borde:cssCopyEdit-fx-border-color: #000; /* Negro */
• Radio de las esquinas (bordes redondeados):cssCopyEdit-fx-border-radius: 5px; -fx-background-radius: 5px;
• Tamaño de la fuente:cssCopyEdit-fx-font-size: 16px;

---

Ventajas de usar estilos en línea

1. Rapidez: Se aplican directamente desde el código, sin necesidad de archivos externos.
2. Flexibilidad: Perfecto para personalizaciones rápidas y pruebas.

---

Limitaciones

Aunque los estilos en línea son útiles, no son ideales para proyectos grandes. En esos casos, es mejor usar un archivo CSS externo para mantener el código limpio y modular. Veremos cómo hacerlo en una próxima lección.

---

Práctica

Aplica un borde azul de 2 píxeles a un botón llamado btn:

javaCopyEditbtn.setStyle("-fx-border-color: blue; -fx-border-width: 2px;");

Tarea: Intenta combinar varias propiedades para crear un diseño personalizado.

---

Resumen

• Puedes usar setStyle para aplicar estilos CSS directamente desde el código.
• Aprende a usar las propiedades más comunes como colores, bordes y tamaños.
• Para proyectos más grandes, considera usar archivos CSS externos.

¡Continúa con la siguiente lección para aprender más sobre componentes y cómo estilizar tu interfaz! 🎨