javafx
Mises en page

StackPane

StackPane dispose ses enfants dans une pile dos à face.

L'ordre des enfants est défini par l'ordre de la liste des enfants (accessible en appelant getChildren ): le 0ème enfant est le dernier et le dernier enfant au sommet de la pile.

Le stackpane tente de redimensionner chaque enfant pour remplir sa propre zone de contenu. Dans le cas où un enfant ne peut pas être redimensionné pour remplir la zone du StackPane (soit parce qu'il ne peut pas être redimensionné ou que sa taille maximale est empêchée), il sera alors aligné dans la zone avec la propriété alignmentProperty du tableau, par défaut Pos.CENTER.

Exemple

// Create a StackPane
StackPane pane = new StackPane();

// Create three squares
Rectangle rectBottom = new Rectangle(250, 250);
rectBottom.setFill(Color.AQUA);
Rectangle rectMiddle = new Rectangle(200, 200);
rectMiddle.setFill(Color.CADETBLUE);
Rectangle rectUpper = new Rectangle(150, 150);
rectUpper.setFill(Color.CORAL);

// Place them on top of each other
pane.getChildren().addAll(rectBottom, rectMiddle, rectUpper);

HBox et VBox

Les dispositions HBox et VBox sont très similaires, les deux VBox leurs enfants sur une seule ligne.

Caractéristiques communes

Si une HBox ou une VBox ont une bordure et / ou un ensemble de remplissage, le contenu sera mis en forme dans ces encarts.

Ils répartissent chaque enfant géré indépendamment de la valeur de propriété visible de l'enfant; les enfants non gérés sont ignorés.

L'alignement du contenu est contrôlé par la propriété alignment, qui par défaut est Pos.TOP_LEFT .

HBox

HBox dispose ses enfants sur une seule rangée horizontale de gauche à droite.

HBox redimensionnera les enfants (si redimensionnables) à leur largeur s préférée et utilisera sa propriété fillHeight pour déterminer s'il convient de redimensionner leurs hauteurs afin de remplir leur propre hauteur ou de garder leurs hauteurs à leur préférence (fillHeight est défini par défaut sur true).

Créer un HBox

// HBox example
HBox row = new HBox();
Label first = new Label("First");
Label second = new Label("Second");
row.getChildren().addAll(first, second);

VBox

VBox dispose ses enfants dans une seule colonne verticale de haut en bas.

VBox redimensionnera les enfants (si redimensionnables) à leur hauteur préférée et utilisera sa propriété fillWidth pour déterminer s'il convient de redimensionner leurs largeurs afin de remplir sa propre largeur ou de conserver leurs largeurs à leur préférence (fillWidth par défaut à true).

Créer un VBox

// VBox example
VBox column = new VBox();
Label upper = new Label("Upper");
Label lower = new Label("Lower");
column.getChildren().addAll(upper, lower);

BorderPane

Le BorderPane est BorderPane en cinq zones différentes.

Les zones de bordure ( Top , Right , Bottom , Left ) ont leur taille préférée en fonction de leur contenu. Par défaut, ils ne prendront que ce dont ils ont besoin, tandis que la zone Center prendra tout espace restant. Lorsque les zones frontalières sont vides, elles ne prennent pas de place.

Chaque zone ne peut contenir qu'un seul élément. Il peut être ajouté à l'aide des méthodes setTop(Node) , setRight(Node) , setBottom(Node) , setLeft(Node) , setCenter(Node) . Vous pouvez utiliser d'autres mises en page pour placer plus d'un élément dans une seule zone.

//BorderPane example
BorderPane pane = new BorderPane();

Label top = new Label("Top");

Label right = new Label("Right");

HBox bottom = new HBox();
bottom.getChildren().addAll(new Label("First"), new Label("Second"));

VBox left = new VBox();
left.getChildren().addAll(new Label("Upper"), new Label("Lower"));

StackPane center = new StackPane();
center.getChildren().addAll(new Label("Lorem"), new Label("ipsum"));

pane.setTop(top);        //The text "Top"
pane.setRight(right);    //The text "Right"
pane.setBottom(bottom);  //Row of two texts
pane.setLeft(left);      //Column of two texts
pane.setCenter(center);  //Two texts on each other

FlowPane

FlowPane dispose des nœuds en lignes ou en colonnes en fonction de l'espace horizontal ou vertical disponible. Il encapsule les nœuds sur la ligne suivante lorsque l'espace horizontal est inférieur au total de toutes les largeurs des nœuds; il encapsule les nœuds dans la colonne suivante lorsque l'espace vertical est inférieur au total de toutes les hauteurs des nœuds. Cet exemple illustre la disposition horizontale par défaut:

import javafx.application.Application;
import javafx.fxml.FXMLLoader;
import javafx.scene.Parent;
import javafx.scene.Scene;
import javafx.scene.control.Button;
import javafx.scene.layout.FlowPane;
import javafx.stage.Stage;

public class Main extends Application {
    @Override
    public void start(Stage primaryStage) throws Exception{
        FlowPane root = new FlowPane();
        for (int i=1; i<=15; i++) {
            Button b1=new Button("Button "+String.valueOf(i));
            root.getChildren().add(b1); //for adding button to root
        }
        Scene scene = new Scene(root, 300, 250);
        primaryStage.setTitle("FlowPane Layout");
        primaryStage.setScene(scene);
        primaryStage.show();
    }
    public static void main(String[] args) {
        launch(args);
    }
}

Constructeur FlowPane par défaut:

FlowPane root = new FlowPane();

Constructeurs FlowPane supplémentaires:

FlowPane() //Creates a horizontal FlowPane layout with hgap/vgap = 0 by default.
FlowPane(double hgap, double gap) //Creates a horizontal FlowPane layout with the specified hgap/vgap.
FlowPane(double hgap, double vgap, Node... children) //Creates a horizontal FlowPane layout with the specified hgap/vgap.
FlowPane(Node... children) //Creates a horizontal FlowPane layout with hgap/vgap = 0.
FlowPane(Orientation orientation) //Creates a FlowPane layout with the specified orientation and hgap/vgap = 0.
FlowPane(Orientation orientation, double hgap, double gap) //Creates a FlowPane layout with the specified orientation and hgap/vgap.
FlowPane(Orientation orientation, double hgap, double vgap, Node... children) //Creates a FlowPane layout with the specified orientation and hgap/vgap.
FlowPane(Orientation orientation, Node... children) //Creates a FlowPane layout with the specified orientation and hgap/vgap = 0.

L'ajout de nœuds à la disposition utilise les méthodes add() ou addAll() du Pane parent:

Button btn = new Button("Demo Button");    
root.getChildren().add(btn); 
root.getChildren().addAll(…); 

Par défaut, un FlowPane dispose de nœuds enfants de gauche à droite. Pour modifier l'alignement du flux, appelez la méthode setAlignment() en transmettant une valeur énumérée de type Pos .

Quelques alignements de flux couramment utilisés:

root.setAlignment(Pos.TOP_RIGHT);     //for top right
root.setAlignment(Pos.TOP_CENTER);    //for top Center
root.setAlignment(Pos.CENTER);        //for Center
root.setAlignment(Pos.BOTTOM_RIGHT);  //for bottom right

GridPane

GridPane dispose ses enfants dans une grille flexible de lignes et de colonnes.

Enfants de la grillePane

Un enfant peut être placé n'importe où dans le GridPane et peut s'étendre sur plusieurs lignes / colonnes (la portée par défaut est 1) et son placement dans la grille est défini par ses contraintes de disposition:

Le nombre total de lignes / colonnes n’a pas besoin d’être spécifié à l’avance, car la grille étendra / contractera automatiquement la grille afin de prendre en charge le contenu.

Ajouter des enfants au GridPane

Afin d'ajouter de nouveaux Node à un GridPane les contraintes de mise en page sur les enfants doivent être définies à l'aide de la méthode statique de la classe GridPane , puis ces enfants peuvent être ajoutés à une instance GridPane .

GridPane gridPane = new GridPane();

// Set the constraints: first row and first column
Label label = new Label("Example");
GridPane.setRowIndex(label, 0);
GridPane.setColumnIndex(label, 0);
// Add the child to the grid
gridpane.getChildren().add(label);

GridPane fournit des méthodes pratiques pour combiner ces étapes:

gridPane.add(new Button("Press me!"), 1, 0); // column=1 row=0

La classe GridPane fournit également des méthodes de réglage statiques pour définir le rang et le colonne des éléments enfants:

Label labelLong = new Label("Its a long text that should span several rows");
GridPane.setColumnSpan(labelLong, 2);
gridPane.add(labelLong, 0, 1);  // column=0 row=1

Taille des colonnes et des rangées

Par défaut, les lignes et les colonnes seront dimensionnées pour correspondre à leur contenu. En cas de besoin de contrôle explicite des tailles de lignes et de colonnes , les instances RowConstraints et ColumnConstraints peuvent être ajoutées au GridPane . L'ajout de ces deux contraintes redimensionnera l'exemple ci-dessus pour avoir la première colonne de 100 pixels, la deuxième colonne de 200 pixels.

gridPane.getColumnConstraints().add(new ColumnConstraints(100));
gridPane.getColumnConstraints().add(new ColumnConstraints(200));

Par défaut, GridPane redimensionne les lignes / colonnes à leur taille préférée, même si la taille du tableau est supérieure à sa taille préférée. Pour prendre en charge les tailles de colonne / ligne dynamiques , les deux classes de contstaints fournissent trois propriétés: taille minimale, taille maximale et taille préférée.

De plus, ColumnConstraints fournit setHGrow et RowConstraints fournit des méthodes setVGrow pour affecter la priorité de la croissance et de la réduction . Les trois priorités prédéfinies sont:

• Priorité . TOUJOURS: Essayez toujours de croître (ou de réduire), en partageant l’augmentation (ou la diminution) de l’espace avec d’autres zones de mise en page qui ont toujours une croissance (ou une diminution).
• Priority.SOMETIMES : S'il n'y a pas d'autres zones de disposition avec l'agrandissement (ou la réduction) définies sur TOUJOURS ou si ces zones n'ont pas absorbé tout l'espace augmenté (ou diminué), alors partagera l'augmentation (ou la diminution) avec autre zone de mise en page de certains.
• Priorité . JAMAIS: la zone de mise en page ne grossira jamais (ou diminuera) quand il y aura une augmentation (ou une diminution) de l'espace disponible dans la région.

ColumnConstraints column1 = new ColumnConstraints(100, 100, 300);
column1.setHgrow(Priority.ALWAYS);

La colonne définie ci-dessus a une taille minimale de 100 pixels et elle essaiera toujours de croître jusqu'à atteindre sa largeur maximale de 300 pixels.

Il est également possible de définir un dimensionnement en pourcentage pour les lignes et les colonnes. L'exemple suivant définit un GridPane où la première colonne remplit 40% de la largeur de la grille, la seconde remplit les 60%.

GridPane gridpane = new GridPane();
ColumnConstraints column1 = new ColumnConstraints();
column1.setPercentWidth(40);
ColumnConstraints column2 = new ColumnConstraints();
column2.setPercentWidth(60);
gridpane.getColumnConstraints().addAll(column1, column2);

Alignement des éléments à l'intérieur des cellules de la grille

L'alignement des Node peut être défini à l'aide de la setHalignment (horizontal) de la classe ColumnConstraints et de la setValignment (vertical) de la classe RowConstraints .

ColumnConstraints column1 = new ColumnConstraints();
column1.setHalignment(HPos.RIGHT);

RowConstraints row1 = new RowConstraints();
row1.setValignment(VPos.CENTER);

TilePane

La disposition du volet de mosaïque est similaire à celle de FlowPane. TilePane place tous les nœuds dans une grille dans laquelle chaque cellule ou mosaïque a la même taille. Il organise les nœuds en lignes et colonnes ordonnées, horizontalement ou verticalement.

    import javafx.application.Application;
    import javafx.scene.Scene;
    import javafx.scene.control.Button;
    import javafx.scene.layout.TilePane;
    import javafx.stage.Stage;
    
    public class Main extends Application {
    
        @Override
        public void start(Stage primaryStage) {
            primaryStage.setTitle("TilePane Demo");
            double width = 400;
            double height = 300;
            TilePane root = new TilePane();
            root.setStyle("-fx-background-color:blue");
            // to set horizontal and vertical gap
            root.setHgap(20);
            root.setVgap(50);
            Button bl = new Button("Buttons");
            root.getChildren().add(bl);
            Button btn = new Button("Button");
            root.getChildren().add(btn);
            Button btn1 = new Button("Button 1");
            root.getChildren().add(btn1);
            Button btn2 = new Button("Button 2");
            root.getChildren().add(btn2);
            Button btn3 = new Button("Button 3");
            root.getChildren().add(btn3);
            Button btn4 = new Button("Button 4");
            root.getChildren().add(btn4);
    
            Scene scene = new Scene(root, width, height);
            primaryStage.setScene(scene);
            primaryStage.show();
        }
    
    
        public static void main(String[] args) {
            launch(args);
        }
    }

sortie

Pour créer Tilepane

TilePane root = new TilePane();

La méthode setHgap () et setVgap () est utilisée pour créer un espace entre la colonne et la colonne. nous pouvons également définir les colonnes pour la mise en page en utilisant

int columnCount = 2;
root.setPrefColumns(columnCount);

AnchorPane

AnchorPane a est une mise en page qui permet de placer le contenu à une distance spécifique de ses côtés.

Il existe 4 méthodes de réglage et 4 méthodes pour obtenir les distances dans AnchorPane . Le premier paramètre de ces méthodes est le Node enfant. Le second paramètre des paramètres est la valeur Double à utiliser. Cette valeur peut être null ce qui ne signifie aucune contrainte pour le côté donné.

Dans l'exemple suivant, placez des nœuds à des distances spécifiées des côtés.

La région center est également redimensionnée pour conserver les distances spécifiées par rapport aux côtés. Observez le comportement lorsque la fenêtre est redimensionnée.

public static void setBackgroundColor(Region region, Color color) {
    // change to 50% opacity
    color = color.deriveColor(0, 1, 1, 0.5);
    region.setBackground(new Background(new BackgroundFill(color, CornerRadii.EMPTY, Insets.EMPTY)));
}

@Override
public void start(Stage primaryStage) {
    Region right = new Region();
    Region top = new Region();
    Region left = new Region();
    Region bottom = new Region();
    Region center = new Region();
    
    right.setPrefSize(50, 150);
    top.setPrefSize(150, 50);
    left.setPrefSize(50, 150);
    bottom.setPrefSize(150, 50);
    
    // fill with different half-transparent colors
    setBackgroundColor(right, Color.RED);
    setBackgroundColor(left, Color.LIME);
    setBackgroundColor(top, Color.BLUE);
    setBackgroundColor(bottom, Color.YELLOW);
    setBackgroundColor(center, Color.BLACK);
    
    // set distances to sides
    AnchorPane.setBottomAnchor(bottom, 50d);
    AnchorPane.setTopAnchor(top, 50d);
    AnchorPane.setLeftAnchor(left, 50d);
    AnchorPane.setRightAnchor(right, 50d);
    
    AnchorPane.setBottomAnchor(center, 50d);
    AnchorPane.setTopAnchor(center, 50d);
    AnchorPane.setLeftAnchor(center, 50d);
    AnchorPane.setRightAnchor(center, 50d);
    
    // create AnchorPane with specified children
    AnchorPane anchorPane = new AnchorPane(left, top, right, bottom, center);

    Scene scene = new Scene(anchorPane, 200, 200);
    
    primaryStage.setScene(scene);
    primaryStage.show();
}