[[oktatas:programozás:java:java_fx|< Java FX]]

====== JavaFX - CSS ======

  * **Szerző:** Sallai András
  * Copyright (c) Sallai András, 2023
  * Licenc: [[https://creativecommons.org/licenses/by-sa/4.0/|CC Attribution-Share Alike 4.0 International]]
  * Web: https://szit.hu

===== Dokumentáció =====

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



===== Objektum CSS beállítása =====


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

Másik példa:

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

Külső CSS:

<code java>
        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());
</code>


==== Hívás kétszer ====

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:

<code java>
textField.setStyle("-fx-padding: 2; -fx-alignment: center;");

textField.setStyle("-fx-font-weight: bold");
</code>

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.

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

</code>

Java kód:
<code java>
char2Field.getStyleClass().add("normal");
</code>


===== Külső CSS =====


<code java>
scene.getStylesheets().add(getClass().getResource("views/MainView.css").toExternalForm());
</code>

<code css>
.valamiOsztaly {
    -fx-background-color: navy;
}
</code>


<code css>
.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;
}
</code>

===== Scene Builder =====

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.