JavaFX - CSS
Cascading Style Sheets, également appelé CSS, est un langage de conception simple destiné à simplifier le processus de présentation des pages Web.
CSS gère l'aspect et la convivialité d'une page Web. En utilisant CSS, vous pouvez contrôler la couleur du texte, le style des polices, l'espacement entre les paragraphes, la taille des colonnes et la mise en page. En dehors de ceux-ci, vous pouvez également contrôler les images d'arrière-plan ou les couleurs utilisées, les conceptions de mise en page, les variations d'affichage pour différents appareils et tailles d'écran, ainsi que divers autres effets.
CSS dans JavaFX
JavaFX vous offre la possibilité d'utiliser CSS pour améliorer l'aspect et la convivialité de l'application. Le paquetjavafx.css contient les classes utilisées pour appliquer CSS pour les applications JavaFX.
Un CSS comprend des règles de style qui sont interprétées par le navigateur puis appliquées aux éléments correspondants dans votre document.
Une règle de style est composée de trois parties, qui sont -
Selector- Un sélecteur est une balise HTML à laquelle un style sera appliqué. Cela peut être n'importe quelle balise comme<h1> ou <table>, etc.
Property- Une propriété est un type d'attribut de la balise HTML. En termes plus simples, tous les attributs HTML sont convertis en propriétés CSS. Ils pourraient être de couleur,border, etc.
Value- Les valeurs sont attribuées aux propriétés. Par exemple, une propriété de couleur peut avoir une valeur soitred ou #F1F1F1, etc.
Vous pouvez mettre la syntaxe des règles de style CSS comme suit -
selector { property: value }
La feuille de style par défaut utilisée par JavaFX est modena.css. Il se trouve dans le fichier jar d'exécution JavaFX.
Ajouter votre propre feuille de style
Vous pouvez ajouter votre propre feuille de style à une scène dans JavaFX comme suit -
Scene scene = new Scene(new Group(), 500, 400);
scene.getStylesheets().add("path/stylesheet.css");
Ajout de feuilles de style en ligne
Vous pouvez également ajouter des styles en ligne à l'aide du setStyle()méthode. Ces styles se composent uniquement de paires clé-valeur et sont applicables aux nœuds sur lesquels ils sont définis. Voici un exemple de code de définition d'une feuille de style en ligne sur un bouton.
.button {
-fx-background-color: red;
-fx-text-fill: white;
}
Exemple
Supposons que nous ayons développé une application JavaFX qui affiche un formulaire avec un champ de texte, un champ de mot de passe, deux boutons. Par défaut, ce formulaire ressemble à celui illustré dans la capture d'écran suivante -
Le programme suivant est un exemple qui montre comment ajouter des styles à l'application ci-dessus dans JavaFX.
Enregistrez ce code dans un fichier avec le nom 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);
}
}
Compilez et exécutez le fichier java enregistré à partir de l'invite de commande à l'aide des commandes suivantes.
javac CssExample.java
java CssExample
Lors de l'exécution, le programme ci-dessus génère une fenêtre JavaFX comme indiqué ci-dessous.