JavaFX - CSS

• Szerző: Sallai András
• Copyright © Sallai András, 2023
• Licenc: CC Attribution-Share Alike 4.0 International
• Web: https://szit.hu

• https://openjfx.io/javadoc/19/javafx.graphics/javafx/scene/doc-files/cssref.html (2023)

Label label1 = new Label("Valami");
label1.setStyle("-fx-text-fill: navy; -fx-font-size: 34;");

Másik példa:

        Label label = new Label("Valami"); 
        String style = 
            "-fx-text-fill: navy;"+
            "-fx-font-size: 34;"+
            "-fx-font-weight: bold";             
        label.setStyle(style);

Külső CSS:

        StackPane root = new StackPane();
        Label label = new Label("Valami"); 
        label.getStyleClass().add("label1");
        root.getChildren().add(label);        
        stage.setTitle("Hello World");
        Scene scene = new Scene(root, 400, 300);        
        scene.getStylesheets().add(getClass().getResource("App.css").toExternalForm());

Tegyük fel, hogy beállítunk 2 szintű belső margót és középre igazítást, majd szeretnénk később félkövér szöveget:

textField.setStyle("-fx-padding: 2; -fx-alignment: center;");
 
textField.setStyle("-fx-font-weight: bold");

Ilyen esetben a padding és az alignment beállítások elvesznek!

Ajánlott helyette egy stílusfájlba tenni a CSS beállításokat, majd osztályjelölőket bármikor adhatunk a komponenshez.

style.css

.text-field.normal {
  -fx-padding: 2; 
  -fx-alignment: center; 
  -fx-font-weight: bold; 
  -fx-font-size: 16px;
}

Java kód:

char2Field.getStyleClass().add("normal");

scene.getStylesheets().add(getClass().getResource("views/MainView.css").toExternalForm());

.valamiOsztaly {
    -fx-background-color: navy;
}

.root {
  /* A root node számára beállítás. */
}
 
 
.label {
    /* Beállítás minden 'label' számára 
      Nem szükséges külön megjelölni őket
      A következő beállítás minden felírat háttérszínét 
      sárgára állítja.
    */
    -fx-background-color: yellow;
}

Jelöljük ki a kívánt komponenst.

• Majd jobb oldalon > Properties
  • Style - adjuk meg stílust
  • Style Class - adjuk meg az osztály nevét

A megadott osztály nevét akár a külső stíluslapban is használhatjuk.