JavaFX CSS

0

JavaFX CSS :

  • We can use cascading style sheets (CSS) to create a custom look for JavaFX GUI application.
  • We can apply CSS to scene,nodes and UI controls etc.
  • Using CSS in JavaFX applications is similar to using CSS in HTML.
  • So that we can change look and feel of our JavaFX GUI application using CSS.

JavaFX CSS Theme:

  • JavaFX application support themes.
  • So we can change,create or apply predefined CSS theme to our applications.
  • So using CSS themes we can change the entire look of our application.
  • The following code shows how to switch between the Caspian and Modena look and feel style sheets.
//Default CSS theme is modena
// Switch  to  CASPIAN  theme
Application.setUserAgentStylesheet(STYLESHEET_CASPIAN);
  • setUserAgentStylesheet() method is used to apply CSS.
  • 
    // to set default css theme to null
    Application.setUserAgentStylesheet(null);
    

    JavaFX CSS :

    Default JavaFX CSS :

    • caspian.css is the default css for JavaFX applications.
    • We can open and extract it using the following command.

    jar xf jfxrt.jar com/sun/javafx/scene/control/skin/caspian/caspian.css

    How to apply CSS in JavaFX ?

    Using Class Selector :

    We can apply class to nodes or UI controls.As

    Button button = new Button("my button");
    button.getStyleClass().add("btn");
    • Here getStyleClass() method is used to add css class to the button.

    And defining style sheet :

    .btn{
        -fx-text-fill: white;
        -fx-padding: 10;
        -fx-background-color: #DFD901;
        -fx-border-radius: 5;
         
    }
    

    Using ID Selector :

    Apply or Assign Id as

    Button button = new Button("my button");
    button.setId("btn1");

    Here setId() method is used to set id of node or UI control.

    And defining style sheet :

    #btn1{
        -fx-text-fill: white;
        -fx-padding: 10;
        -fx-background-color: #DFD901;
        -fx-border-radius: 5;
         
    }
    

    Using Inline Style :

    We can apply directly css to any node as

    Button button = new Button("my button");
    button.setStyle("-fx-background-color: #DFD901; -fx-text-fill: white;");

    Here setStyle() method is used to set the inline style sheet.

    Adding css :
    Scene scene = new Scene(new Group(), 300, 200);
    scene.getStylesheets().add("somepath/stylesheet.css");
    

    JavaFX CSS Example :

    package javafxtuts;
    import javafx.application.Application;
    import javafx.geometry.Insets;
    import javafx.scene.Scene;
    import javafx.scene.control.Button;
    import javafx.scene.layout.HBox;
    import javafx.stage.Stage;
    
    /**
     *
     * @author JavaFXtuts.com
     */
    public class Javafxtuts extends Application {
        
        @Override
        public void start(Stage primaryStage) {
             HBox root = new HBox();
             //Set space or padding using setPadding() method
             root.setPadding(new Insets(20));
             
             //assiging a class to the button
             Button button=new Button("my button");
             //Adding a class to the button
             button.getStyleClass().add("btn");
             
             //assiging a class to the button1
             Button button1 =new Button("Button1");
             //set id to the button. 
             button1.setId("btn1");
             
            
        root.getChildren().addAll(button,button1);
        Scene scene = new Scene(root, 300, 150);
        //To add a external css file we do as
        String  style= getClass().getResource("New.css").toExternalForm();
        //now add the external css file to the scene
        scene.getStylesheets().add(style);
        
            primaryStage.setTitle("javafxtuts.com");
            primaryStage.setScene(scene);
            primaryStage.show();
        }
    
        /**
         * @param args the command line arguments
         */
        
        public static void main(String[] args) {
            launch(args);
        }
        
    }
    

    JavaFX css:

    
    .btn{
    -fx-color:black;
    -fx-fill:blue;
    -fx-padding:4px;
    -fx-background-color:#34c669;
    -fx-font-size: 30px;
    -fx-background-radius: 20px;
    
    }
    #btn1{
    -fx-color:black;
    -fx-fill:blue;
    -fx-padding:4px;
    -fx-background-color:#2fc6b3;
    -fx-font-size: 30px;
    -fx-hgap:2px;
    } 
    

     

    Share.

    Leave A Reply