How to fit children to parent?

592 Views Asked by At

I'm working on project where I use JavaFX to create a desktop app. I have a small problem.

I created a home.fxml there is the code:

<?xml version="1.0" encoding="UTF-8"?>

<?import java.net.URL?>
<?import javafx.geometry.Insets?>
<?import javafx.scene.control.Button?>
<?import javafx.scene.control.Label?>
<?import javafx.scene.image.ImageView?>
<?import javafx.scene.layout.AnchorPane?>
<?import javafx.scene.layout.Pane?>
<?import javafx.scene.layout.VBox?>

<AnchorPane id="AnchorPane" maxHeight="-Infinity" maxWidth="-Infinity" minHeight="-Infinity" minWidth="-Infinity" prefHeight="600.0" prefWidth="1000.0" styleClass="mainFxmlClass" xmlns="http://javafx.com/javafx/17" xmlns:fx="http://javafx.com/fxml/1" fx:controller="gui.HomeController">
    <stylesheets>
        <URL value="@essaigui2.css" />
    </stylesheets>
   <children>
      <VBox fx:id="menu" prefHeight="400.0" prefWidth="178.0" styleClass="background-slide" stylesheets="@Home.css" AnchorPane.bottomAnchor="0.0" AnchorPane.topAnchor="0.0">
         <children>
            <Pane prefHeight="81.0" prefWidth="146.0" styleClass="background-slide" stylesheets="@Home.css">
               <children>
                  <ImageView fitHeight="56.0" fitWidth="38.0" layoutX="14.0" layoutY="13.0" pickOnBounds="true" preserveRatio="true" />
                  <Label layoutX="73.0" layoutY="14.0" text="Nom - prenom" textFill="WHITE" />
               </children>
            </Pane>
            <Button accessibleText="Mes Stages" alignment="BASELINE_LEFT" graphicTextGap="15.0" layoutX="10.0" layoutY="10.0" mnemonicParsing="false" prefHeight="48.0" prefWidth="194.0" styleClass="buttonslide" stylesheets="@Home.css" text="Mes Stages" textFill="WHITE">
               <padding>
                  <Insets left="50.0" />
               </padding></Button>
 
            <Button accessibleText="Mes formations" alignment="BASELINE_LEFT" graphicTextGap="15.0" layoutX="10.0" layoutY="10.0" mnemonicParsing="false" prefHeight="48.0" prefWidth="194.0" styleClass="buttonslide" stylesheets="@Home.css" text="Mes formations" textFill="WHITE">
               <padding>
                  <Insets left="50.0" />
               </padding></Button>
            <Button accessibleText="Quiz" alignment="BASELINE_LEFT" graphicTextGap="15.0" layoutX="10.0" layoutY="162.0" mnemonicParsing="false" prefHeight="48.0" prefWidth="190.0" styleClass="buttonslide" stylesheets="@Home.css" text="Quiz" textFill="WHITE">
               <padding>
                  <Insets left="50.0" />
               </padding></Button>
            <Button accessibleText="biblio" alignment="BASELINE_LEFT" graphicTextGap="15.0" layoutX="10.0" layoutY="210.0" mnemonicParsing="false" prefHeight="48.0" prefWidth="190.0" styleClass="buttonslide" stylesheets="@Home.css" text="Bibliothèque" textFill="WHITE">
               <padding>
                  <Insets left="50.0" />
               </padding></Button>
            <Button accessibleText="mon profil" alignment="BASELINE_LEFT" graphicTextGap="15.0" layoutX="10.0" layoutY="258.0" mnemonicParsing="false" prefHeight="48.0" prefWidth="190.0" styleClass="buttonslide" stylesheets="@Home.css" text="Mon profile" textFill="WHITE">
               <padding>
                  <Insets left="50.0" />
               </padding></Button>
            <Pane prefHeight="22.0" prefWidth="178.0" />
            <Button fx:id="decon" accessibleText="deconnexion" alignment="BASELINE_LEFT" graphicTextGap="15.0" layoutX="10.0" layoutY="306.0" mnemonicParsing="false" prefHeight="48.0" prefWidth="190.0" styleClass="buttonslide" stylesheets="@Home.css" text="Se déconnecter" textFill="WHITE">
               <padding>
                  <Insets left="50.0" />
               </padding></Button>
         </children>
      </VBox>
      <Pane fx:id="content" layoutX="241.0" layoutY="73.0" style="-fx-background-color: green;" styleClass="background-content" stylesheets="@home.css" AnchorPane.bottomAnchor="0.0" AnchorPane.leftAnchor="178.0" AnchorPane.rightAnchor="0.0" AnchorPane.topAnchor="73.0" />
      <Pane layoutX="178.0" layoutY="54.0" prefHeight="73.0" prefWidth="822.0" style="-fx-background-color: #7156DD;" AnchorPane.leftAnchor="178.0" AnchorPane.rightAnchor="0.0" AnchorPane.topAnchor="0.0" />
   </children>
</AnchorPane>

I made an anchor pane, next I made the menu bar on left using VBox. A small pane on top to show user info, etc. Finally, my biggest problem, the main pain where I want to show other fxml files for the user, so I wrote this piece of code:

package gui;

import java.io.IOException;
import java.net.URL;
import java.util.ResourceBundle;
import javafx.application.Platform;
import javafx.fxml.FXML;
import javafx.fxml.FXMLLoader;
import javafx.fxml.Initializable;
import javafx.scene.Node;
import javafx.scene.Parent;
import javafx.scene.Scene;
import javafx.scene.control.Button;
import javafx.scene.input.MouseEvent;
import javafx.scene.layout.Pane;
import javafx.scene.layout.VBox;
import javafx.stage.Stage;
import javax.swing.JOptionPane;

/**
 * FXML Controller class
 *
 * @author khali
 */
public class HomeController implements Initializable {

    @FXML
    private Pane content;
    @FXML
    private VBox menu;
    private static Pane SOS;
    @FXML
    private Button decon;

    @Override
    public void initialize(URL url, ResourceBundle rb) {
        for (Node n : menu.getChildren()) {
            if (n.getAccessibleText() != null) {
                n.addEventHandler(MouseEvent.MOUSE_CLICKED, e -> {
                    try {
                        switch (n.getAccessibleText()) {
                            case "Mes Stages":
                                Node stage = FXMLLoader.load(getClass().getResource("Stage.fxml"));
                                stage.setLayoutX(content.getLayoutX());
                                stage.setLayoutY(content.getLayoutY());
                                content.getChildren().setAll(stage);
                                break;

                            case "Mes formations":
                                Node formation = FXMLLoader.load(getClass().getResource("Formation.fxml"));
                                content.getChildren().setAll(formation);
                                break;

                            case "Quiz":
                                Node quiz = FXMLLoader.load(getClass().getResource("HomeQuiz.fxml"));
                                quiz.setLayoutX(content.getLayoutX());
                                quiz.setLayoutY(content.getLayoutY());
                                quiz.computeAreaInScreen();
                                content.getChildren().setAll(quiz);
                                break;

                            case "biblio":
                                Node biblio = FXMLLoader.load(getClass().getResource("BibliothequeFXML.fxml"));
                                content.getChildren().setAll(biblio);
                                break;

                            case "mon profil":
                                Node profil = FXMLLoader.load(getClass().getResource("ProfilEtudiant.fxml"));
                                content.getChildren().setAll(profil);
                                break;

                            case "deconnexion":
                                Stage stage1 = (Stage) decon.getScene().getWindow();
                                stage1.close();
                                try {

                                    Parent parent1 = FXMLLoader.load(getClass().getResource("Authentification.fxml"));
                                    Scene scene = new Scene(parent1);
                                    stage1.setScene(scene);
                                    stage1.setTitle("Mon Stage");
                                    stage1.show();
                                } catch (IOException ex) {
                                    System.out.println(ex.getMessage());
                                }

                                break;

                        }
                    } catch (Exception ee) {
                    }
                    SOS = content;
                });
            }
        }
    }

    public void showQuiz() throws IOException {
        content = SOS;
        Node add = FXMLLoader.load(HomeController.class.getResource("afficherQuestions.fxml"));
        content.getChildren().setAll(add);

    }

    public void showPasserTest() throws IOException {
        System.out.println(content);
        content = SOS;
        Node add = FXMLLoader.load(HomeController.class.getResource("choisirDomaine.fxml"));
        content.getChildren().setAll(add);
        SOS = content;
    }

    public void sendToQuizMain() throws IOException {
        content = SOS;
        Node add = FXMLLoader.load(HomeController.class.getResource("HomeQuiz.fxml"));
        content.getChildren().setAll(add);
    }

}

My problem is that the loaded fxml never fit into my main pane, like it's shown in the following pictures:
full screen form
small screen form

Don't mind the green background, it's just for testing.

I'm thinking to set that Resizable option to false and set the views manually.

1

There are 1 best solutions below

0
r-uu On

"fit to parent" is a feature of scenebuilder that allows to adjust the size of an anchor pane child to the size of the anchor pane. If this is what you want you could replace the pane called "content" by an anchor pane, size the anchor pane to whatever you like and then use the "fit to parent" on an anchor pane's child node.

Another solution is to set the anchor constraints of an anchor pane's child to 0:

  <AnchorPane layoutX="481.0" layoutY="236.0" prefHeight="200.0" prefWidth="200.0">
     <children>
        <Button mnemonicParsing="false" text="Button" AnchorPane.bottomAnchor="0.0" AnchorPane.leftAnchor="0.0" AnchorPane.rightAnchor="0.0" AnchorPane.topAnchor="0.0" />
     </children>
  </AnchorPane>

This can easily be applied to any dynamically loaded (parent) nodes if you are working with FXMLLoader.