Cómo aplicar estilos CSS a tu aplicación JavaFX

Hola, un saludo a todos y espero estén muy bien. Hoy les escribiré un poco acerca del uso de JavaFX y CSS para aplicar estilos a nuestras interfaces. JavaFX nos permite personalizar nuestras interfaces gráficas utilizando CSS, y gracias a esto nos da una gran libertad para diseñarlas y estilizarlas como lo deseemos.

Veamos que necesitaremos para aplicarle el estilo que deseemos a nuestros controles.

La API de JavaFX nos da las siguientes funciones.

Scene - getStylesheets().add(“dirección de archivo css”)

Node - getStyleClass().add(“nombre de clase css”)

Node - setStyle(“-fx-estilo-css”)

La función getStylesheets() nos permite agregar una hoja de estilo CSS a nuestro programa, este archivo contendrá todas las clases con las propiedades que se le aplicaran al objeto que tenga ese nombre de clase asignada.

Por ejemplo podemos hacer lo siguiente:

Scene escena = new Scene();

escena.getStylesheets().add(“/resources/miArchivo.css”);

De esta manera le estamos pasando como parámetro al objeto “escena” la dirección del archivo CSS que contiene la información de los estilos. Con la función getStyleClass() le asignaremos al objeto nodo la clase CSS que contiene las propiedades que le hayamos configurado.

Por ejemplo:

Button boton = new Button(“Click me”);

boton.getStyleClass().add(“nombre-de-clase-css”);

Para que este método funcione, se debe agregar primero una hoja de estilo a la escena y dentro de la hoja de estilo CSS agregar la clase con las propiedades que se aplicaran al objeto. Y la función setStyle() nos facilita agregar una propiedad de CSS al nodo sin necesidad de asignarle una clase o agregar una hoja de estilo a la escena.

Por ejemplo:

Button boton = new Button(“Click me”);

boton.setStyle(“-fx-background-color: red;”);

En este case el color de fondo del botón será rojo.

Veamos un ejemplo más completo donde se pueda observar el uso de estos elementos.

Primero creamos un archivo CSS bastante simple para entender claramente el ejemplo, así que dentro de tu proyecto, puede ser dentro de una carpeta llamada recursos, agregaremos un archivo de texto con la extensión CSS, elige el nombre que quieras, para este ejemplo se llamará simple.css.

Y ahora editamos su contenido agregando una clase y algunas propiedades. boton-stilo-1 será el nombre de la clase la cual debe ser agregada a algún objeto de tipo nodo de JavaFX.

simple.css

//clase principal, cambia el fondo del botón a color transparente.

.boton-stilo-1 {
     -fx-background-color:transparent;
}

//la clase Button de JavaFX posee 4 posibles estados, focused, hover, pressed, disable. Cambiamos el color de fondo en cada estado.

.boton-stilo-1:focused{
     -fx-background-color:#6200EE1F;
}

.boton-stilo-1:hover{
     -fx-background-color:#6200EE2F;
}

.boton-stilo-1:pressed{
     -fx-background-color:#6200EE3F;
}

//aquí cambiamos el color del texto a gris

.boton-stilo-1:disabled{
     -fx-text-fill:gray;
}

Como habrás observado las propiedades CSS de JavaFX empiezan todas por “-fx-nombre-de-propiedad”. Los colores pueden escribirse utilizando los nombres ya definidos en CSS como gray, white, black, o de forma hexadecimal #C0C1FF. Los últimos dos dígitos utilizados en el ejemplo son la transparencia del color, es decir, #6200EE el color, 1F valor de transparencia.

Bien, ya tenemos un archivo CSS con que trabajar, ahora vamos a crear un programa simple para ver los efectos de nuestro CSS.

PruebaCSS.java

public class PruebaCSS extends Application{

     public static void main(String[] args) {

         launch(args);

}

 public void start(Stage stage) throws Exception {

     BorderPane root = new BorderPane();

     Button boton = new Button("Click me");

     //Aquí agregamos la clase CSS a el boton

     boton.getStyleClass().add("boton-stilo-1");

     root.setCenter(boton);

     Scene scene = new Scene(root);

     //Aquí agregamos la hoja de estilo a la escena

     scene.getStylesheets().add("/resources/simple.css");

     stage.setScene(scene);

     stage.setTitle("Simple CSS");

     stage.show();

     }

}

Antes de ver el resultado de nuestro CSS, veamos primero el estilo por defecto que nos muestra JavaFX.

Y ahora, con el estilo simple.css que creamos, tenemos los siguientes.

Espero haya sido lo bastante claro para poder iniciarte en el uso de CSS con JavaFX y empieces a crear tus propios estilos. Es recomendable que visites la referencia de estilos CSS de Java para que conozcas las propiedades que puedes aplicar a cada elemento de tu interfaz. Y bien un saludo y hasta la próxima.

Botones e imágenes circulares con JavaFX