CODEWITHSUNDEEP
javajavafxfxmlscenebuilder
taco22
taco22

Reputation: 1

Children of HBox are restricted to top left of HBox

I'm trying to create a grid/tile like page using HBoxes and display text inside of the HBoxes, but the children(Label and Button) are restricted to the top leftof the HBox. I've been using scenebuilder, but even when I set the Layout X and Y the children stay in the same positions. All of the HBoxes have this problem.

FXML Example

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

<?import javafx.scene.control.Button?>
<?import javafx.scene.control.Label?>
<?import javafx.scene.control.Tab?>
<?import javafx.scene.control.TabPane?>
<?import javafx.scene.layout.AnchorPane?>
<?import javafx.scene.layout.HBox?>
<?import javafx.scene.layout.VBox?>

<VBox prefHeight="800.0" prefWidth="1200.0" xmlns="http://javafx.com/javafx/18" xmlns:fx="http://javafx.com/fxml/1" fx:controller="com.example.improved.HelloController">
   <children>
      <HBox fx:id="hBox" prefHeight="100.0">
         <children>
            <TabPane prefHeight="100.0" prefWidth="${hBox.width}" tabClosingPolicy="UNAVAILABLE">
              <tabs>
                <Tab text="Home">
                  <content>
                    <AnchorPane minHeight="0.0" minWidth="0.0">
                           <children>
                              <HBox fx:id="lastRaceHBox" prefHeight="386.0" prefWidth="400.0">
                                 <children>
                                    <VBox>
                                       <children>
                                          <Button mnemonicParsing="false" onAction="#onHelloButtonClick" text="Hello!" />
                                          <Label fx:id="welcomeText" prefHeight="17.0" prefWidth="68.0" />
                                       </children>
                                    </VBox>
                                 </children></HBox>
                              <HBox fx:id="nextRaceHBox" layoutX="400.0" prefHeight="386.0" prefWidth="400.0" />
                              <HBox fx:id="upcomingDatesHBox" layoutX="800.0" prefHeight="386.0" prefWidth="400.0" />
                              <HBox fx:id="rankingsHBox" layoutY="386.0" prefHeight="386.0" prefWidth="400.0" />
                              <HBox fx:id="goalsHBox" layoutX="400.0" layoutY="386.0" prefHeight="386.0" prefWidth="400.0" />
                              <HBox fx:id="playerInfoHBox" layoutX="800.0" layoutY="386.0" prefHeight="386.0" prefWidth="400.0" />
                           </children>
                        </AnchorPane>
                  </content>
                </Tab>
                <Tab text="Dates">
                  <content>
                    <AnchorPane minHeight="0.0" minWidth="0.0" prefHeight="180.0" prefWidth="200.0" />
                  </content>
                </Tab>
                  <Tab text="Race">
                    <content>
                      <AnchorPane minHeight="0.0" minWidth="0.0" prefHeight="180.0" prefWidth="200.0" />
                    </content>
                  </Tab>
                  <Tab text="Player Info">
                    <content>
                      <AnchorPane minHeight="0.0" minWidth="0.0" prefHeight="180.0" prefWidth="200.0" />
                    </content>
                  </Tab>
                  <Tab text="Player Search">
                    <content>
                      <AnchorPane minHeight="0.0" minWidth="0.0" prefHeight="180.0" prefWidth="200.0" />
                    </content>
                  </Tab>
              </tabs>
            </TabPane>
         </children>
      </HBox>
   </children>
</VBox>

Controller Class

package com.example.improved;

import javafx.fxml.FXML;
import javafx.scene.control.Label;

public class HelloController {
    @FXML
    private Label welcomeText;

    @FXML
    protected void onHelloButtonClick() {
        welcomeText.setText("Welcome to JavaFX Application!");
    }
}

Main Application Class

package com.example.improved;

import javafx.application.Application;
import javafx.fxml.FXMLLoader;
import javafx.scene.Scene;
import javafx.stage.Stage;

import java.io.IOException;

public class HelloApplication extends Application {
    @Override
    public void start(Stage stage) throws IOException {
        FXMLLoader fxmlLoader = new FXMLLoader(HelloApplication.class.getResource("MainMenu.fxml"));
        Scene scene = new Scene(fxmlLoader.load(), 1280, 960);
        stage.setTitle("Hello!");
        stage.setScene(scene);
        stage.show();
    }

    public static void main(String[] args) {
        launch();
    }
}

Upvotes: 0

Views: 271

Answers (1)

trashgod
trashgod

Reputation: 205805

Is there any way to freely move the children?

The HBox API outlines the available constraints. In particular, "The alignment of the content is controlled by the alignment property, which defaults to Pos.TOP_LEFT." You can specify the desired Pos value. You may also want to experiment with the settings that control Resizable Range and Optional Layout Constraints.

As a concrete example, LayoutSample.java, illustrated here, specifies a grow constraint that allows helpIcon to stay on the right as the stage is resized:

HBox.setHgrow(stack, Priority.ALWAYS);

More examples are seen here.

Upvotes: 1

Related Questions