1 - Les conténeurs Layout JavaFX
Après avoir construit tous les nœuds requis dans une scène, nous souhaitons généralement les organiser au sein de la scène. Cette disposition des composants à l'intérieur du conteneur est appelée la disposition du conteneur (layout conteiner).
JavaFX à cet effet, fournit plusieurs mises en page prédéfinies telles que HBox, VBox, Border Pane, Stack Pane, Text Flow, Anchor Pane, Title Pane, Grid Pane, Flow Panel, etc....
Chacune des dispositions mentionnées ci-dessus est représentée par une classe et toutes ces classes appartiennent au package javafx.layout. La classe nommée Pane est la classe de base de toutes les mises en page dans JavaFX.
2 - Liste des Layout JavaFX
- HBox: disposition HBox organise tous les nœuds de notre application sur une seule ligne horizontale. La classe nommée HBox du package javafx.scene.layout représente la disposition de la boîte horizontale de texte.
- GridPane: la disposition Grid Pane organise les nœuds de notre application sous la forme d'une grille de lignes et de colonnes. Cette mise en page est pratique lors de la création de formulaires à l'aide de JavaFX. La classe nommée GridPane du package javafx.scene.layout représente la disposition GridPane.
- VBox: la disposition VBox organise tous les nœuds de notre application dans une seule colonne verticale. La classe nommée VBox du package javafx.scene.layout représente la disposition de la zone verticale de texte.
- BorderPane: la disposition Border Pane organise les nœuds de notre application dans les positions supérieure, gauche, droite, inférieure et centrale. La classe nommée BorderPane du package javafx.scene.layout représente la disposition du volet de bordure.
- StackPane: la disposition du volet de pile organise les nœuds de notre application les uns sur les autres, comme dans une pile. Le nœud ajouté en premier est placé au bas de la pile et le nœud suivant est placé dessus. La classe nommée StackPane du package javafx.scene.layout représente la disposition du volet de pile.
- TextFlow: la disposition Flux de texte organise plusieurs nœuds de texte dans un flux unique. La classe nommée TextFlow du package javafx.scene.layout représente la disposition du flux de texte.
- AnchorPane: la disposition du volet Ancrage ancre les nœuds de notre application à une distance particulière du volet. La classe nommée AnchorPane du package javafx.scene.layout représente la disposition du volet d'ancrage.
- TilePane: la disposition Tile Pane ajoute tous les nœuds de notre application sous la forme de tuiles de taille uniforme. La classe nommée TilePane du package javafx.scene.layout représente la disposition TilePane.
- FlowPane: la disposition du volet de flux englobe tous les nœuds dans un flux. Un volet de flux horizontal enveloppe les éléments du volet à sa hauteur, tandis qu'un volet de flux vertical enveloppe les éléments à sa largeur.
3 - Exemple de layout: GridPane
Nous allons dans ce paragraphe créer un exemple de fenêtre JavaFX dont les noeuds sont gérés par le layout GridPane.
Nous commençon par définir et créer le layout par:
|
1 |
GridPane pan = new GridPane(); |
Nous pouvons aussi définir la marge interne du layout pan par:
|
1 |
pan.setPadding(new Insets(20, 20, 20, 20)); |
Pour ajouter un composant: champ de texte, label, bouton de commande, on utilise le code:
|
1 2 3 4 5 6 7 8 |
// Ajout de label Label nom_du_label = new Label("Texte du label ici... "); // Création des champs de texte TextField nom_de_champ_de_texte = new TextField(); //Ajout de bouton de commande Button nom_du_bouton = new Button("Texte du bouton"); |
et finalement pour ajouter un composant au layout pan on utilise le code:
|
1 |
pan.add(nom_du_composant , numéro_de_colonne , numéro_de_ligne) |
Exemple
|
1 2 3 |
Label lblUserName = new Label("User Name : "); // Ajout du label en troisième colonne et 2ème ligne pan.add(lblUserName ,2,1); |
Exemple complet:
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 |
import javafx.application.Application; import javafx.scene.Scene; import javafx.scene.control.*; import javafx.scene.layout.GridPane; import javafx.stage.Stage; import javafx.geometry.Insets; public class Main extends Application { @Override public void start(Stage primaryStage) { GridPane pan = new GridPane(); // marge interne de la scène pan.setPadding(new Insets(20, 20, 20, 20)); // Création des labels username & password Label lblUserName = new Label("User Name : "); Label lblPass = new Label("Password"); // Création des champs de texte TextField user = new TextField(); PasswordField pass = new PasswordField(); // Ajout des nodes à la scène pan.add(lblUserName ,0,0); pan.add(lblPass, 0, 1); pan.add(user, 1, 0); pan.add(pass, 1, 1); pan.setVgap(10); Button button = new Button("Se Connecter"); button.setMaxWidth(200); pan.add(button, 1,2); Scene scene = new Scene(pan,300,150 ); primaryStage.setScene(scene); primaryStage.show(); } public static void main(String[] args) { launch(args); } } |
Ce qui affiche à la sortie:
On peut aussi paramétrer l'espace vertical et horizontal entre les composants par:
|
1 2 3 4 5 |
// espace horizontal pan.setHgap(45) // espace vertical pan.setVgap(25); |
Younes Derfoufi
CRMEF OUJDA
