JavaFX - CSS

Cascading Style Sheets, noto anche come CSS, è un semplice linguaggio di progettazione inteso a semplificare il processo di presentazione delle pagine web.

CSS gestisce l'aspetto grafico di una pagina web. Utilizzando CSS, puoi controllare il colore del testo, lo stile dei caratteri, la spaziatura tra i paragrafi, la dimensione delle colonne e il layout. Oltre a questi, puoi anche controllare le immagini di sfondo oi colori utilizzati, i design del layout, le variazioni di visualizzazione per diversi dispositivi e dimensioni dello schermo, nonché una varietà di altri effetti.

CSS in JavaFX

JavaFX offre la possibilità di utilizzare i CSS per migliorare l'aspetto dell'applicazione. Il pacchettojavafx.css contiene le classi utilizzate per applicare CSS per le applicazioni JavaFX.

Un CSS comprende regole di stile che vengono interpretate dal browser e quindi applicate agli elementi corrispondenti nel documento.

Una regola di stile è composta da tre parti, che sono:

• Selector- Un selettore è un tag HTML a cui verrà applicato uno stile. Questo potrebbe essere qualsiasi tag come<h1> o <table>, eccetera.

• Property- Una proprietà è un tipo di attributo del tag HTML. In termini più semplici, tutti gli attributi HTML vengono convertiti in proprietà CSS. Potrebbero essere colore,border, eccetera.

• Value- I valori vengono assegnati alle proprietà. Ad esempio, una proprietà color può avere un valorered o #F1F1F1, eccetera.

Puoi inserire la sintassi della regola dello stile CSS come segue:

selector { property: value }

Il foglio di stile predefinito utilizzato da JavaFX è modena.css. Si trova nel jar runtime JavaFX.

Aggiunta del proprio foglio di stile

Puoi aggiungere il tuo foglio di stile a una scena in JavaFX come segue:

Scene scene = new Scene(new Group(), 500, 400); 
scene.getStylesheets().add("path/stylesheet.css");

Aggiunta di fogli di stile in linea

Puoi anche aggiungere stili in linea utilizzando il setStyle()metodo. Questi stili sono costituiti solo da coppie chiave-valore e sono applicabili ai nodi su cui sono impostati. Di seguito è riportato un codice di esempio per l'impostazione di un foglio di stile inline su un pulsante.

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

Esempio

Supponiamo di aver sviluppato un'applicazione JavaFX che visualizza un modulo con un campo di testo, un campo password, due pulsanti. Per impostazione predefinita, questo modulo ha l'aspetto mostrato nello screenshot seguente:

Il seguente programma è un esempio che dimostra come aggiungere stili all'applicazione sopra in JavaFX.

Salva questo codice in un file con il nome CssExample.java

import javafx.application.Application; 
import static javafx.application.Application.launch; 
import javafx.geometry.Insets; 
import javafx.geometry.Pos; 
import javafx.scene.Scene; 
import javafx.scene.control.Button; 
import javafx.scene.control.PasswordField; 
import javafx.scene.layout.GridPane; 
import javafx.scene.text.Text; 
import javafx.scene.control.TextField; 
import javafx.stage.Stage;  

public class CssExample extends Application { 
   @Override 
   public void start(Stage stage) {      
      //creating label email 
      Text text1 = new Text("Email");       
      
      //creating label password 
      Text text2 = new Text("Password"); 
       
      //Creating Text Filed for email        
      TextField textField1 = new TextField();       
      
      //Creating Text Filed for password        
      PasswordField textField2 = new PasswordField();  
       
      //Creating Buttons 
      Button button1 = new Button("Submit"); 
      Button button2 = new Button("Clear");  
      
      //Creating a Grid Pane 
      GridPane gridPane = new GridPane();    
      
      //Setting size for the pane 
      gridPane.setMinSize(400, 200);
      
      //Setting the padding  
      gridPane.setPadding(new Insets(10, 10, 10, 10)); 
      
      //Setting the vertical and horizontal gaps between the columns 
      gridPane.setVgap(5); 
      gridPane.setHgap(5);       
      
      //Setting the Grid alignment 
      gridPane.setAlignment(Pos.CENTER); 
       
      //Arranging all the nodes in the grid 
      gridPane.add(text1, 0, 0); 
      gridPane.add(textField1, 1, 0); 
      gridPane.add(text2, 0, 1);       
      gridPane.add(textField2, 1, 1); 
      gridPane.add(button1, 0, 2); 
      gridPane.add(button2, 1, 2); 
       
      //Styling nodes  
      button1.setStyle("-fx-background-color: darkslateblue; -fx-text-fill: white;"); 
      button2.setStyle("-fx-background-color: darkslateblue; -fx-text-fill: white;"); 
       
      text1.setStyle("-fx-font: normal bold 20px 'serif' "); 
      text2.setStyle("-fx-font: normal bold 20px 'serif' ");  
      gridPane.setStyle("-fx-background-color: BEIGE;"); 
       
      // Creating a scene object 
      Scene scene = new Scene(gridPane); 
       
      // Setting title to the Stage   
      stage.setTitle("CSS Example"); 
         
      // Adding scene to the stage 
      stage.setScene(scene);
      
      //Displaying the contents of the stage 
      stage.show(); 
   } 
   public static void main(String args[]){ 
      launch(args); 
   } 
}

Compilare ed eseguire il file java salvato dal prompt dei comandi utilizzando i seguenti comandi.

javac CssExample.java 
java CssExample

All'esecuzione, il programma di cui sopra genera una finestra JavaFX come mostrato di seguito.