¡Que hay HumanOS!. Hoy les traigo como aplicar estilo CSS a un proyecto JavaFX.¡Esto es estupendo!. Nunca había sido tan fácil personalizar la apariencia de una aplicación Java.

Bueno sin más explicación hu-manOS al la obra.

  1. Crear un proyecto JavaFX con Scene Builder para esto ver este artículo.
  2. En el Scene Builder hacemos el diseño que deseemos.

3. Vamos a la vista del proyecto en este caso FXMLDocument.fxml y le ponemos atributos id o styleClass a los elementos que queramos aplicarle estilo CSS.


    
        
      

4. Creamos una carpeta dentro del proyecto New > Folder y dentro de la carpeta un fichero NOMBRE_FICHERO.css  New > Empty File donde escribiremos los estilos CSS que queremos aplicar al diseño. Las reglas CSS tienen que empezar con el prefijo -fx- .

.principal{
    
    -fx-background-color:burlywood; 
}

.boton1,.boton2,.boton3{
    
    -fx-border-color:black; 
    -fx-border-width:3;
       
    
}
.label1{
    -fx-font-family:monospace;
}
.label2{
    -fx-font-size: x-large;
}
.boton1{
    -fx-background-color:green; 
    -fx-text-fill: white;
}

.boton2{
    -fx-background-color:blue;
    -fx-text-fill: white;
}

.boton3{
    -fx-background-color:red;
    -fx-text-fill: white;
}

5. Y por último decirle a la escena que utilice este CSS. Para esto vamos al modelo del proyecto en este caso JavaFXApplication3.java y nos debe de quedar de esta forma.

   Parent root = FXMLLoader.load(getClass().getResource("FXMLDocument.fxml"));
        
        Scene scene = new Scene(root);  
      
       //Esta linea carga el fichero css que se le aplicara a esta escena.
        scene.getStylesheets().add(getClass().getResource("DIRECCIÓN DEL FICHERO CSS").toExternalForm());
      
        stage.setScene(scene);
        stage.show();

Como resultado un ejemplo sencillo de lo potente que es JavaFX para personalizar la apariencia de una aplicación Java.

Y esto es todo HumanOS espero que les sirva de algo este artículo.