#CómoSeHace – Aplicar estilo CSS a un Proyecto JavaFX

¡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.

6 comentarios » Puedes dejar tu comentario también

  1. 00

    Daniel

    dijo:

    Chromium 55.0.2883.87 Ubuntu x64

    Muy buen articulo, mi duda es como poner a funcionar javafx en linux, por ejemplo yo uso linuxmint 18 y constantemente me da error cuando trato de correr los samples de java fx q vienen por defecto con Netbeans. Tengo instalado el openjdk y el openjfx pero siguen sin funcionar ni siquiera los samples. Alguna ayuda con esto??

  2. 00

    Rafa

    dijo:

    Google Chrome 53.0.2785.143 Windows 10 x64 Edition

    Se hace válido aclarar que desde el mismo Scene Bulder ,específicamente desde la sección Stylesheets se puede adicionar un CSS,y en la sección StyleClass se pone la clase correspondiente al CSS. Ademas se puede poner una etiqueta CSS con su valor directamente con Style.Todo esto se puede hacer en el FXML, pero bueno si tenemos un Scene Builder ,que nos permite hacer un trabajo efectivo y un poco mas rápido mejor.

  3. 00

    Yunier

    dijo:

    Firefox 50.0 Windows 8.1 x64 Edition

    alguien tiene los repos de ubuntu que soy nuevo en el mundo de linux y los necesito porque los de la universidad no estan funcionando, mi usuario es ybejerano gracias de antemano

  4. 00

    Yadiel Pérez Villazón

    dijo:

    Firefox 50.0 Ubuntu x64

    Otra forma es cargar un CSS desde el propio archivo fxml un ejemplo aca:

    .
    .
    .

    También en esta porción de código hay como cargar una imagen desde un archivo fxml, yo recomiendo que totas estas tareas de manejar estilos lo hagan los archivos fxml y dejar el código java para manejar los componentes de estos archivos (FXMLController.java) y por su puesto el negocio de la aplicación, también tratar de no colocar código css dentro de los componentes
    [ Ejem:

    ]
    (usar clases) y escribir todas las propiedades en los archivos de estilo.css.

  5. 00

    Camilo Jose del Real

    dijo:

    Google Chrome 54.0.2840.99 Windows 10 x64 Edition

    Para los que gusten de JavaFX pueden echarle un vistazo a http://www.jfoenix.com/ una biblioteca para llevar Google Material Design a JavaFX, compatible con SceneBuilder. Ademas, los demos que trae muestran otros ejemplo mas fáciles (hay varias formas, pero esta es mucho mas sencilla, pero mucho mas) de cargar los fxml. El sitio tiene un enlace a GitHub

  6. 00

    Dcruz

    dijo:

    Google Chrome 48.0.2564.116 GNU/Linux

    Se ve de palo.. pero bueno 😀

Deja un comentario

Tu dirección de correo electrónico nunca será compartida.