Introducción a CSS en JavaFX

Las hojas de estilo en cascada (CSS) por sus siglas en inglés, son un lenguaje utilizado para dar estilo y formato a documentos HTML, JavaFX soporta el uso de estilos CSS para cambiar la apariencia de una aplicación, de momento no todas las características CSS estandarizadas por la W3C están soportadas y algunas cosas funcionan de manera diferente, pero si ya conocen CSS integrarlo en JavaFX será muy sencillo.

Agregar Archivo CSS a JavaFX

Todas las propiedades JavaFX CSS usan en prefijo -fx-, veamos un ejemplo de un estilo CSS, la primera regla define un color de texto para todos los controles Label, usamos en selector .label, el segundo un color de texto que será aplicado solo al control con el ID texto, usaremos el selector #texto.

.label {
    -fx-text-fill: green;
}

#texto {
    -fx-text-fill: blue;
}

En código Java tenemos que indicar el ID texto al Label correspondiente, además de agregar el archivo *.css a la escena deseada, cargamos este archivo usando class.getResource(“estilos.css”).

Label lbl1 = new Label("Este es un label CSS = .label");
Label lbl2 = new Label("Este es un label CSS = .label");    
Label lbl3 = new Label("Este es un label ID = texto, CSS = #texto");
lbl3.setId("texto");

/.../

scene.getStylesheets().add(getClass().getResource("estilos.css").toExternalForm());

Escribir CSS en código Java

Podemos cambiar el estilo de las propiedades CSS en código Java, usamos en método setStyle(“css”), para el ejemplo cambiaremos el color de fondo del panel VBox y alinearemos su contenido al centro.

VBox root = new VBox();
root.setStyle("-fx-alignment: CENTER; -fx-background-color: gray;");
root.getChildren().addAll(lbl1, lbl2, lbl3);

Clases CSS en JavaFX

Muchos controles tienen sus clases por las cuales podemos hacer referencia a ellas para cambiar el estilo de un control, .label para estilizar un control Label, .check-box corresponde a un CheckBox, como vemos podemos identificarlos fácilmente por sus nombres, sin embargo no todos tienen clases algunos están vacíos por defecto, para ver cuáles son estos controles puedes ver la documentación en: http://download.java.net/jdk8/jfxdocs/javafx/scene/doc-files/cssref.html

La imagen es una captura de la documentación, nos dice el nombre de la clase, si lo tiene, la propiedad CSS que posee, el CheckBox extiende ButtonBase por lo que hereada todas sus propiedades, además se muestran las pseudo-clases de este control.

Cuando encontremos un control que no posee clase CSS, como VBox, si revisamos la documentación veremos Style class: empty by default, podemos crear una clase propia por ejemplo: .vertical-box { -fx-background-color: red; } e indicarle al control que utilice esta clase.

VBox root = new VBox();
root.getStyleClass().add("vertical-box");

Aplicar Temas CSS a JavaFX

Un tema es un archivo .css que contiene todos los estilos requeridos para cambiar la apariencia visual de una aplicación, JavaFX 8 utiliza por defecto el tema llamado: Modena, JavaFX 2.x utiliza Caspian, podemos cambiar el tema de la siguiente manera:

// Switch to JavaFX 2.x's CASPIAN Look and Feel.
Application.setUserAgentStylesheet(STYLESHEET_CASPIAN);
        
// Switch to JavaFX 8's Modena Look and Feel.
Application.setUserAgentStylesheet(STYLESHEET_MODENA);

Podemos descargar temas de la web o modificar uno ya existente.


GitHub: Introducción CSS JavaFX