make anchorpane resizable with size of screen - javafx

How to bind an AnchorPane to the size of the screen?
When I run my code it shows me that:
but when the main stage fit the screen the AnchorPane still has the same size.
here is my fxml file
<?xml version="1.0" encoding="UTF-8"?>
<?import javafx.scene.text.*?>
<?import javafx.geometry.*?>
<?import java.lang.*?>
<?import java.util.*?>
<?import javafx.scene.*?>
<?import javafx.scene.control.*?>
<?import javafx.scene.layout.*?>
<AnchorPane id="AnchorPane" maxHeight="1.7976931348623157E308" maxWidth="1.7976931348623157E308" prefHeight="768.0" prefWidth="1024.0" xmlns="http://javafx.com/javafx/8" xmlns:fx="http://javafx.com/fxml/1" fx:controller="sanad.Entry_Page">
<children>
<Pane blendMode="RED" layoutX="563.0" layoutY="9.0" maxHeight="1.7976931348623157E308" maxWidth="1.7976931348623157E308" minWidth="-Infinity" prefHeight="746.0" prefWidth="447.0">
<padding>
<Insets top="10.0" />
</padding>
<children>
<SplitPane dividerPositions="0.5720620842572062" layoutX="-56.0" layoutY="-1.0" maxHeight="1.7976931348623157E308" maxWidth="1.7976931348623157E308" prefHeight="741.0" prefWidth="508.0">
<items>
<AnchorPane maxHeight="1.7976931348623157E308" maxWidth="1.7976931348623157E308" minHeight="0.0" minWidth="0.0" prefHeight="751.0" prefWidth="286.0">
<children>
<TextField fx:id="formnumer_field" layoutX="8.0" layoutY="14.0" prefHeight="30.0" prefWidth="235.0" />
<TextField fx:id="sectornumber_field" layoutX="8.0" layoutY="48.0" prefHeight="30.0" prefWidth="235.0" />
<TextField fx:id="fathername_field" layoutX="8.0" layoutY="82.0" prefHeight="30.0" prefWidth="235.0" />
<ComboBox fx:id="fatherborn_year" layoutX="8.0" layoutY="116.0" prefHeight="25.0" prefWidth="70.0" />
<ComboBox fx:id="fatherborn_month" layoutX="85.0" layoutY="116.0" prefHeight="25.0" prefWidth="70.0" />
<ComboBox fx:id="fatherborn_day" layoutX="162.0" layoutY="116.0" prefHeight="25.0" prefWidth="80.0" />
<TextField fx:id="fathercurrentjob" layoutX="8.0" layoutY="145.0" prefHeight="30.0" prefWidth="235.0" />
<TextField fx:id="fatherprevjob" layoutX="8.0" layoutY="179.0" prefHeight="30.0" prefWidth="235.0" />
<TextField fx:id="mothername_field" layoutX="8.0" layoutY="215.0" prefHeight="30.0" prefWidth="235.0" />
<TextField fx:id="mother_curr_job" layoutX="8.0" layoutY="278.0" prefHeight="30.0" prefWidth="235.0" />
<ComboBox fx:id="motherborn_day" layoutX="162.0" layoutY="249.0" prefHeight="25.0" prefWidth="80.0" />
<ComboBox fx:id="motherborn_year" layoutX="8.0" layoutY="249.0" prefHeight="25.0" prefWidth="70.0" />
<TextField fx:id="mother_prev_job" layoutX="8.0" layoutY="312.0" prefHeight="30.0" prefWidth="235.0" />
<ComboBox fx:id="motherborn_month" layoutX="85.0" layoutY="249.0" prefHeight="25.0" prefWidth="70.0" />
<TextField fx:id="homepartner_num" layoutX="8.0" layoutY="346.0" prefHeight="30.0" prefWidth="235.0" />
<ComboBox fx:id="homepartner_year" layoutX="11.0" layoutY="382.0" prefHeight="25.0" prefWidth="70.0" />
<ComboBox fx:id="homepartner_month" layoutX="88.0" layoutY="382.0" prefHeight="25.0" prefWidth="70.0" />
<ComboBox fx:id="homepartner_day" layoutX="163.0" layoutY="382.0" prefHeight="25.0" prefWidth="80.0" />
<ComboBox fx:id="homepartner_name" layoutX="8.0" layoutY="416.0" prefHeight="30.0" prefWidth="235.0" />
<CheckBox fx:id="homepartner_gender1" layoutX="141.0" layoutY="456.0" mnemonicParsing="false" prefHeight="30.0" prefWidth="100.0" text="ذكر">
<font>
<Font size="14.0" />
</font>
</CheckBox>
<CheckBox fx:id="homepartner_gender2" layoutX="8.0" layoutY="456.0" mnemonicParsing="false" prefHeight="30.0" prefWidth="100.0" text="أنثى">
<font>
<Font size="14.0" />
</font>
</CheckBox>
<Label fx:id="current_cityaa" alignment="CENTER" layoutX="141.0" layoutY="490.0" nodeOrientation="RIGHT_TO_LEFT" prefHeight="30.0" prefWidth="100.0" text="المحافظة">
<font>
<Font size="14.0" />
</font>
</Label>
<TextField fx:id="current_city" layoutX="8.0" layoutY="490.0" prefHeight="30.0" prefWidth="120.0" />
<Label fx:id="current_cityaa1" alignment="CENTER" layoutX="141.0" layoutY="530.0" nodeOrientation="RIGHT_TO_LEFT" prefHeight="30.0" prefWidth="100.0" text="الحي">
<font>
<Font size="14.0" />
</font>
</Label>
<TextField fx:id="current_suberb" layoutX="8.0" layoutY="530.0" prefHeight="30.0" prefWidth="120.0" />
<TextField fx:id="prev_suberb" layoutX="11.0" layoutY="615.0" prefHeight="30.0" prefWidth="120.0" />
<Label fx:id="current_cityaa11" alignment="CENTER" layoutX="144.0" layoutY="615.0" nodeOrientation="RIGHT_TO_LEFT" prefHeight="30.0" prefWidth="100.0" text="الحي">
<font>
<Font size="14.0" />
</font>
</Label>
<Label fx:id="current_cityaa2" alignment="CENTER" layoutX="144.0" layoutY="575.0" nodeOrientation="RIGHT_TO_LEFT" prefHeight="30.0" prefWidth="100.0" text="المحافظة">
<font>
<Font size="14.0" />
</font>
</Label>
<TextField fx:id="prev_city" layoutX="11.0" layoutY="575.0" prefHeight="30.0" prefWidth="120.0" />
</children>
</AnchorPane>
<AnchorPane maxHeight="1.7976931348623157E308" maxWidth="1.7976931348623157E308" minHeight="0.0" minWidth="0.0" prefHeight="160.0" prefWidth="100.0">
<children>
<Label fx:id="formnumber" contentDisplay="RIGHT" layoutX="8.0" layoutY="14.0" nodeOrientation="RIGHT_TO_LEFT" prefHeight="30.0" prefWidth="174.0" text="رقم الاستمارة" textAlignment="RIGHT" textOverrun="CENTER_ELLIPSIS">
<padding>
<Insets left="50.0" />
</padding>
<font>
<Font size="14.0" />
</font>
</Label>
<Label fx:id="sectornumber" contentDisplay="RIGHT" layoutX="8.0" layoutY="48.0" nodeOrientation="RIGHT_TO_LEFT" prefHeight="30.0" prefWidth="174.0" text="رقم القطاع" textAlignment="RIGHT" textOverrun="CENTER_ELLIPSIS">
<font>
<Font size="14.0" />
</font>
<padding>
<Insets left="50.0" />
</padding>
</Label>
<Label fx:id="fathername" contentDisplay="RIGHT" layoutX="8.0" layoutY="82.0" nodeOrientation="RIGHT_TO_LEFT" prefHeight="30.0" prefWidth="174.0" text="اسم الأب" textAlignment="RIGHT" textOverrun="CENTER_ELLIPSIS">
<font>
<Font size="14.0" />
</font>
<padding>
<Insets left="50.0" />
</padding>
</Label>
<Label fx:id="fatherborn" contentDisplay="RIGHT" layoutX="20.0" layoutY="112.0" nodeOrientation="RIGHT_TO_LEFT" prefHeight="30.0" prefWidth="127.0" text="المواليد" textAlignment="RIGHT" textOverrun="CENTER_ELLIPSIS">
<font>
<Font size="14.0" />
</font>
<padding>
<Insets left="50.0" />
</padding>
</Label>
<Label fx:id="currentjob" contentDisplay="RIGHT" layoutX="20.0" layoutY="142.0" nodeOrientation="RIGHT_TO_LEFT" prefHeight="30.0" prefWidth="127.0" text="العمل الحالي" textAlignment="RIGHT" textOverrun="CENTER_ELLIPSIS">
<font>
<Font size="14.0" />
</font>
<padding>
<Insets left="50.0" />
</padding>
</Label>
<Label fx:id="previousjob" contentDisplay="RIGHT" layoutX="20.0" layoutY="172.0" nodeOrientation="RIGHT_TO_LEFT" prefHeight="30.0" prefWidth="127.0" text="العمل السابق" textAlignment="RIGHT" textOverrun="CENTER_ELLIPSIS">
<font>
<Font size="14.0" />
</font>
<padding>
<Insets left="50.0" />
</padding>
</Label>
<Label fx:id="fatherborn1" contentDisplay="RIGHT" layoutX="20.0" layoutY="244.0" nodeOrientation="RIGHT_TO_LEFT" prefHeight="30.0" prefWidth="127.0" text="المواليد" textAlignment="RIGHT" textOverrun="CENTER_ELLIPSIS">
<font>
<Font size="14.0" />
</font>
<padding>
<Insets left="50.0" />
</padding>
</Label>
<Label fx:id="currentjob1" contentDisplay="RIGHT" layoutX="20.0" layoutY="278.0" nodeOrientation="RIGHT_TO_LEFT" prefHeight="30.0" prefWidth="127.0" text="العمل الحالي" textAlignment="RIGHT" textOverrun="CENTER_ELLIPSIS">
<font>
<Font size="14.0" />
</font>
<padding>
<Insets left="50.0" />
</padding>
</Label>
<Label fx:id="fathername1" contentDisplay="RIGHT" layoutX="8.0" layoutY="208.0" nodeOrientation="RIGHT_TO_LEFT" prefHeight="30.0" prefWidth="174.0" text="اسم الأم" textAlignment="RIGHT" textOverrun="CENTER_ELLIPSIS">
<font>
<Font size="14.0" />
</font>
<padding>
<Insets left="50.0" />
</padding>
</Label>
<Label fx:id="previousjob1" contentDisplay="RIGHT" layoutX="20.0" layoutY="307.0" nodeOrientation="RIGHT_TO_LEFT" prefHeight="30.0" prefWidth="127.0" text="العمل السابق" textAlignment="RIGHT" textOverrun="CENTER_ELLIPSIS">
<font>
<Font size="14.0" />
</font>
<padding>
<Insets left="50.0" />
</padding>
</Label>
<Label fx:id="homepartner_sex" contentDisplay="RIGHT" layoutX="20.0" layoutY="451.0" nodeOrientation="RIGHT_TO_LEFT" prefHeight="30.0" prefWidth="127.0" text="الجنس" textAlignment="RIGHT" textOverrun="CENTER_ELLIPSIS">
<font>
<Font size="14.0" />
</font>
<padding>
<Insets left="50.0" />
</padding>
</Label>
<Label fx:id="homepartner_name" contentDisplay="RIGHT" layoutX="20.0" layoutY="414.0" nodeOrientation="RIGHT_TO_LEFT" prefHeight="30.0" prefWidth="127.0" text="الاسم" textAlignment="RIGHT" textOverrun="CENTER_ELLIPSIS">
<font>
<Font size="14.0" />
</font>
<padding>
<Insets left="50.0" />
</padding>
</Label>
<Label fx:id="partner_born" contentDisplay="RIGHT" layoutX="20.0" layoutY="378.0" nodeOrientation="RIGHT_TO_LEFT" prefHeight="30.0" prefWidth="127.0" text="الميلاد" textAlignment="RIGHT" textOverrun="CENTER_ELLIPSIS">
<font>
<Font size="14.0" />
</font>
<padding>
<Insets left="50.0" />
</padding>
</Label>
<Label fx:id="home_partner" contentDisplay="RIGHT" layoutX="8.0" layoutY="341.0" nodeOrientation="RIGHT_TO_LEFT" prefHeight="30.0" prefWidth="174.0" text="عدد المستضافين" textAlignment="RIGHT" textOverrun="CENTER_ELLIPSIS">
<font>
<Font size="14.0" />
</font>
<padding>
<Insets left="50.0" />
</padding>
</Label>
<Label alignment="CENTER" layoutX="8.0" layoutY="485.0" nodeOrientation="RIGHT_TO_LEFT" prefHeight="30.0" prefWidth="175.0" text="السكن الحالي">
<font>
<Font size="14.0" />
</font>
</Label>
<Label alignment="CENTER" layoutX="8.0" layoutY="570.0" nodeOrientation="RIGHT_TO_LEFT" prefHeight="30.0" prefWidth="175.0" text="السكن الحالي">
<font>
<Font size="14.0" />
</font>
</Label>
</children>
</AnchorPane>
</items>
</SplitPane>
</children>
</Pane>
<SplitPane dividerPositions="0.4845360824742268" layoutX="8.0" layoutY="8.0" maxHeight="1.7976931348623157E308" maxWidth="1.7976931348623157E308" prefHeight="741.0" prefWidth="487.0">
<items>
<AnchorPane maxHeight="1.7976931348623157E308" maxWidth="1.7976931348623157E308" minHeight="0.0" minWidth="0.0" prefHeight="160.0" prefWidth="100.0" />
<AnchorPane maxHeight="1.7976931348623157E308" maxWidth="1.7976931348623157E308" minHeight="0.0" minWidth="0.0" prefHeight="327.0" prefWidth="100.0" />
</items>
</SplitPane>
</children>
</AnchorPane>


This can be done using this property of AnchorPane:
AnchorPane.bottomAnchor
AnchorPane.leftAnchor
AnchorPane.rightAnchor
AnchorPane.topAnchor
But you need to decide what part of a scene will change and what is not. The width of the fixed part fix with prefWidth. Сhanging part fix with AnchorPane.leftAnchor or AnchorPane.rightAnchor given the size of the fixed part.
Sample:
<?xml version="1.0" encoding="UTF-8"?>
<?import javafx.scene.chart.*?>
<?import javafx.scene.text.*?>
<?import javafx.geometry.*?>
<?import java.lang.*?>
<?import java.util.*?>
<?import javafx.scene.*?>
<?import javafx.scene.control.*?>
<?import javafx.scene.layout.*?>
<AnchorPane id="AnchorPane" prefHeight="600.0" prefWidth="800.0" xmlns="http://javafx.com/javafx/8" xmlns:fx="http://javafx.com/fxml/1" fx:controller="sanad.Entry_Page">
<children>
<Accordion prefWidth="200.0" AnchorPane.bottomAnchor="0.0" AnchorPane.leftAnchor="0.0" AnchorPane.topAnchor="0.0">
<panes>
<TitledPane animated="false" text="untitled 1">
<content>
<AnchorPane minHeight="0.0" minWidth="0.0" prefHeight="180.0" prefWidth="200.0" />
</content>
</TitledPane>
<TitledPane animated="false" text="untitled 2">
<content>
<AnchorPane minHeight="0.0" minWidth="0.0" prefHeight="180.0" prefWidth="200.0" />
</content>
</TitledPane>
<TitledPane animated="false" text="untitled 3">
<content>
<AnchorPane minHeight="0.0" minWidth="0.0" prefHeight="180.0" prefWidth="200.0" />
</content>
</TitledPane>
</panes>
</Accordion>
<SplitPane dividerPositions="0.5" AnchorPane.bottomAnchor="0.0" AnchorPane.leftAnchor="200.0" AnchorPane.rightAnchor="0.0" AnchorPane.topAnchor="0.0">
<items>
<AnchorPane minHeight="0.0" minWidth="0.0" prefHeight="160.0" prefWidth="100.0">
<children>
<LineChart AnchorPane.bottomAnchor="0.0" AnchorPane.leftAnchor="0.0" AnchorPane.rightAnchor="0.0" AnchorPane.topAnchor="0.0">
<xAxis>
<CategoryAxis side="BOTTOM" />
</xAxis>
<yAxis>
<NumberAxis side="LEFT" />
</yAxis>
</LineChart>
</children>
</AnchorPane>
<AnchorPane minHeight="0.0" minWidth="0.0" prefHeight="160.0" prefWidth="100.0">
<children>
<TableView prefHeight="200.0" prefWidth="200.0" AnchorPane.bottomAnchor="0.0" AnchorPane.leftAnchor="0.0" AnchorPane.rightAnchor="0.0" AnchorPane.topAnchor="0.0">
<columns>
<TableColumn prefWidth="75.0" text="C1" />
<TableColumn prefWidth="75.0" text="C2" />
</columns>
</TableView>
</children>
</AnchorPane>
</items>
</SplitPane>
</children>
</AnchorPane>


I try do something with this fxml, but i think that is bad created. You should rebuild everything. For right site is better to use GridPane not AnchorPane and put all elements in grid.
I created HBox in this hobx I put two AnchorPane, then each AnchorPane i put Your SplitPane. After this you must connect each SplitPane with right and left edge of AnchorPane like this:
<SplitPane AnchorPane.leftAnchor="0.0" AnchorPane.rightAnchor="0.0">
Here is this fxml:
Use SceneBuilder to preview how it works.
<?xml version="1.0" encoding="UTF-8"?>
<?import javafx.scene.text.*?>
<?import javafx.geometry.*?>
<?import java.lang.*?>
<?import java.util.*?>
<?import javafx.scene.*?>
<?import javafx.scene.control.*?>
<?import javafx.scene.layout.*?>
<HBox id="AnchorPane" prefHeight="786.0" prefWidth="1024.0" xmlns="http://javafx.com/javafx/8.0.40" xmlns:fx="http://javafx.com/fxml/1">
<AnchorPane prefHeight="200.0" prefWidth="200.0" HBox.hgrow="ALWAYS">
<children>
<SplitPane dividerPositions="0.4845360824742268" maxHeight="1.7976931348623157E308" maxWidth="1.7976931348623157E308" prefHeight="741.0" prefWidth="487.0" AnchorPane.leftAnchor="0.0" AnchorPane.rightAnchor="0.0">
<items>
<AnchorPane maxHeight="1.7976931348623157E308" maxWidth="1.7976931348623157E308" minHeight="0.0" minWidth="0.0" prefHeight="160.0" prefWidth="100.0" />
<AnchorPane maxHeight="1.7976931348623157E308" maxWidth="1.7976931348623157E308" minHeight="0.0" minWidth="0.0" prefHeight="327.0" prefWidth="100.0" />
</items>
</SplitPane>
</children>
</AnchorPane>
<AnchorPane prefHeight="200.0" prefWidth="200.0" HBox.hgrow="ALWAYS">
<children>
<SplitPane dividerPositions="0.5720620842572062" maxHeight="1.7976931348623157E308" maxWidth="1.7976931348623157E308" prefHeight="741.0" prefWidth="508.0" AnchorPane.leftAnchor="0.0" AnchorPane.rightAnchor="0.0">
<items>
<AnchorPane maxHeight="1.7976931348623157E308" maxWidth="1.7976931348623157E308" nodeOrientation="LEFT_TO_RIGHT">
<children>
<TextField fx:id="formnumer_field" layoutX="8.0" layoutY="14.0" prefHeight="30.0" prefWidth="235.0" AnchorPane.leftAnchor="8.0" AnchorPane.rightAnchor="43.0" />
<TextField fx:id="sectornumber_field" layoutX="8.0" layoutY="48.0" prefHeight="30.0" prefWidth="235.0" AnchorPane.leftAnchor="8.0" AnchorPane.rightAnchor="43.0" />
<TextField fx:id="fathername_field" layoutX="8.0" layoutY="82.0" prefHeight="30.0" prefWidth="235.0" AnchorPane.leftAnchor="8.0" AnchorPane.rightAnchor="43.0" />
<ComboBox fx:id="fatherborn_year" layoutX="8.0" layoutY="116.0" prefHeight="25.0" prefWidth="70.0" AnchorPane.leftAnchor="8.0" AnchorPane.rightAnchor="226.0" />
<ComboBox fx:id="fatherborn_month" layoutX="85.0" layoutY="116.0" prefHeight="25.0" prefWidth="70.0" AnchorPane.leftAnchor="8.0" AnchorPane.rightAnchor="226.0" />
<ComboBox fx:id="fatherborn_day" layoutX="162.0" layoutY="116.0" prefHeight="25.0" prefWidth="80.0" AnchorPane.leftAnchor="8.0" AnchorPane.rightAnchor="226.0" />
<TextField fx:id="fathercurrentjob" layoutX="8.0" layoutY="145.0" prefHeight="30.0" prefWidth="235.0" AnchorPane.leftAnchor="8.0" AnchorPane.rightAnchor="72.0" />
<TextField fx:id="fatherprevjob" layoutX="8.0" layoutY="179.0" prefHeight="30.0" prefWidth="235.0" AnchorPane.leftAnchor="8.0" AnchorPane.rightAnchor="72.0" />
<TextField fx:id="mothername_field" layoutX="8.0" layoutY="215.0" prefHeight="30.0" prefWidth="235.0" AnchorPane.leftAnchor="8.0" AnchorPane.rightAnchor="72.0" />
<TextField fx:id="mother_curr_job" layoutX="8.0" layoutY="278.0" prefHeight="30.0" prefWidth="235.0" AnchorPane.leftAnchor="8.0" AnchorPane.rightAnchor="72.0" />
<ComboBox fx:id="motherborn_day" layoutX="162.0" layoutY="249.0" prefHeight="25.0" prefWidth="80.0" AnchorPane.rightAnchor="73.0" />
<ComboBox fx:id="motherborn_year" layoutX="8.0" layoutY="249.0" prefHeight="25.0" prefWidth="70.0" />
<TextField fx:id="mother_prev_job" layoutX="8.0" layoutY="312.0" prefHeight="30.0" prefWidth="235.0" AnchorPane.leftAnchor="8.0" AnchorPane.rightAnchor="72.0" />
<ComboBox fx:id="motherborn_month" layoutX="85.0" layoutY="249.0" nodeOrientation="LEFT_TO_RIGHT" />
<TextField fx:id="homepartner_num" layoutX="8.0" layoutY="346.0" prefHeight="30.0" prefWidth="235.0" AnchorPane.leftAnchor="8.0" AnchorPane.rightAnchor="72.0" />
<ComboBox fx:id="homepartner_year" layoutX="11.0" layoutY="382.0" />
<ComboBox fx:id="homepartner_month" layoutX="88.0" layoutY="382.0" />
<ComboBox fx:id="homepartner_day" layoutX="163.0" layoutY="382.0" />
<ComboBox fx:id="homepartner_name" layoutX="8.0" layoutY="416.0" AnchorPane.leftAnchor="8.0" AnchorPane.rightAnchor="72.0" />
<CheckBox fx:id="homepartner_gender1" layoutX="141.0" layoutY="456.0" mnemonicParsing="false" prefHeight="30.0" prefWidth="100.0" text="ذكر">
<font>
<Font size="14.0" />
</font>
</CheckBox>
<CheckBox fx:id="homepartner_gender2" layoutX="8.0" layoutY="456.0" mnemonicParsing="false" prefHeight="30.0" prefWidth="100.0" text="أنثى">
<font>
<Font size="14.0" />
</font>
</CheckBox>
<Label fx:id="current_cityaa" alignment="CENTER" layoutX="141.0" layoutY="490.0" nodeOrientation="RIGHT_TO_LEFT" prefHeight="30.0" prefWidth="100.0" text="المحافظة" AnchorPane.rightAnchor="74.0">
<font>
<Font size="14.0" />
</font>
</Label>
<TextField fx:id="current_city" layoutX="8.0" layoutY="490.0" AnchorPane.leftAnchor="8.0" />
<Label fx:id="current_cityaa1" alignment="CENTER" layoutX="141.0" layoutY="530.0" nodeOrientation="RIGHT_TO_LEFT" prefHeight="30.0" prefWidth="100.0" text="الحي" AnchorPane.rightAnchor="74.0">
<font>
<Font size="14.0" />
</font>
</Label>
<TextField fx:id="current_suberb" layoutX="8.0" layoutY="530.0" AnchorPane.leftAnchor="8.0" />
<TextField fx:id="prev_suberb" layoutX="11.0" layoutY="615.0" AnchorPane.leftAnchor="11.0" />
<Label fx:id="current_cityaa11" alignment="CENTER" layoutX="144.0" layoutY="615.0" nodeOrientation="RIGHT_TO_LEFT" prefHeight="30.0" prefWidth="100.0" text="الحي" AnchorPane.rightAnchor="71.0">
<font>
<Font size="14.0" />
</font>
</Label>
<Label fx:id="current_cityaa2" alignment="CENTER" layoutX="144.0" layoutY="575.0" nodeOrientation="RIGHT_TO_LEFT" prefHeight="30.0" prefWidth="100.0" text="المحافظة" AnchorPane.rightAnchor="71.0">
<font>
<Font size="14.0" />
</font>
</Label>
<TextField fx:id="prev_city" layoutX="11.0" layoutY="575.0" AnchorPane.leftAnchor="11.0" />
</children>
</AnchorPane>
<AnchorPane maxHeight="1.7976931348623157E308" maxWidth="1.7976931348623157E308" minHeight="0.0" minWidth="0.0" prefHeight="160.0" prefWidth="100.0">
<children>
<Label fx:id="formnumber" contentDisplay="RIGHT" layoutX="8.0" layoutY="14.0" nodeOrientation="RIGHT_TO_LEFT" prefHeight="30.0" prefWidth="174.0" text="رقم الاستمارة" textAlignment="RIGHT" textOverrun="CENTER_ELLIPSIS">
<padding>
<Insets left="50.0" />
</padding>
<font>
<Font size="14.0" />
</font>
</Label>
<Label fx:id="sectornumber" contentDisplay="RIGHT" layoutX="8.0" layoutY="48.0" nodeOrientation="RIGHT_TO_LEFT" prefHeight="30.0" prefWidth="174.0" text="رقم القطاع" textAlignment="RIGHT" textOverrun="CENTER_ELLIPSIS">
<font>
<Font size="14.0" />
</font>
<padding>
<Insets left="50.0" />
</padding>
</Label>
<Label fx:id="fathername" contentDisplay="RIGHT" layoutX="8.0" layoutY="82.0" nodeOrientation="RIGHT_TO_LEFT" prefHeight="30.0" prefWidth="174.0" text="اسم الأب" textAlignment="RIGHT" textOverrun="CENTER_ELLIPSIS">
<font>
<Font size="14.0" />
</font>
<padding>
<Insets left="50.0" />
</padding>
</Label>
<Label fx:id="fatherborn" contentDisplay="RIGHT" layoutX="20.0" layoutY="112.0" nodeOrientation="RIGHT_TO_LEFT" prefHeight="30.0" prefWidth="127.0" text="المواليد" textAlignment="RIGHT" textOverrun="CENTER_ELLIPSIS">
<font>
<Font size="14.0" />
</font>
<padding>
<Insets left="50.0" />
</padding>
</Label>
<Label fx:id="currentjob" contentDisplay="RIGHT" layoutX="20.0" layoutY="142.0" nodeOrientation="RIGHT_TO_LEFT" prefHeight="30.0" prefWidth="127.0" text="العمل الحالي" textAlignment="RIGHT" textOverrun="CENTER_ELLIPSIS">
<font>
<Font size="14.0" />
</font>
<padding>
<Insets left="50.0" />
</padding>
</Label>
<Label fx:id="previousjob" contentDisplay="RIGHT" layoutX="20.0" layoutY="172.0" nodeOrientation="RIGHT_TO_LEFT" prefHeight="30.0" prefWidth="127.0" text="العمل السابق" textAlignment="RIGHT" textOverrun="CENTER_ELLIPSIS">
<font>
<Font size="14.0" />
</font>
<padding>
<Insets left="50.0" />
</padding>
</Label>
<Label fx:id="fatherborn1" contentDisplay="RIGHT" layoutX="20.0" layoutY="244.0" nodeOrientation="RIGHT_TO_LEFT" prefHeight="30.0" prefWidth="127.0" text="المواليد" textAlignment="RIGHT" textOverrun="CENTER_ELLIPSIS">
<font>
<Font size="14.0" />
</font>
<padding>
<Insets left="50.0" />
</padding>
</Label>
<Label fx:id="currentjob1" contentDisplay="RIGHT" layoutX="20.0" layoutY="278.0" nodeOrientation="RIGHT_TO_LEFT" prefHeight="30.0" prefWidth="127.0" text="العمل الحالي" textAlignment="RIGHT" textOverrun="CENTER_ELLIPSIS">
<font>
<Font size="14.0" />
</font>
<padding>
<Insets left="50.0" />
</padding>
</Label>
<Label fx:id="fathername1" contentDisplay="RIGHT" layoutX="8.0" layoutY="208.0" nodeOrientation="RIGHT_TO_LEFT" prefHeight="30.0" prefWidth="174.0" text="اسم الأم" textAlignment="RIGHT" textOverrun="CENTER_ELLIPSIS">
<font>
<Font size="14.0" />
</font>
<padding>
<Insets left="50.0" />
</padding>
</Label>
<Label fx:id="previousjob1" contentDisplay="RIGHT" layoutX="20.0" layoutY="307.0" nodeOrientation="RIGHT_TO_LEFT" prefHeight="30.0" prefWidth="127.0" text="العمل السابق" textAlignment="RIGHT" textOverrun="CENTER_ELLIPSIS">
<font>
<Font size="14.0" />
</font>
<padding>
<Insets left="50.0" />
</padding>
</Label>
<Label fx:id="homepartner_sex" contentDisplay="RIGHT" layoutX="20.0" layoutY="451.0" nodeOrientation="RIGHT_TO_LEFT" prefHeight="30.0" prefWidth="127.0" text="الجنس" textAlignment="RIGHT" textOverrun="CENTER_ELLIPSIS">
<font>
<Font size="14.0" />
</font>
<padding>
<Insets left="50.0" />
</padding>
</Label>
<Label fx:id="homepartner_name" contentDisplay="RIGHT" layoutX="20.0" layoutY="414.0" nodeOrientation="RIGHT_TO_LEFT" prefHeight="30.0" prefWidth="127.0" text="الاسم" textAlignment="RIGHT" textOverrun="CENTER_ELLIPSIS">
<font>
<Font size="14.0" />
</font>
<padding>
<Insets left="50.0" />
</padding>
</Label>
<Label fx:id="partner_born" contentDisplay="RIGHT" layoutX="20.0" layoutY="378.0" nodeOrientation="RIGHT_TO_LEFT" prefHeight="30.0" prefWidth="127.0" text="الميلاد" textAlignment="RIGHT" textOverrun="CENTER_ELLIPSIS">
<font>
<Font size="14.0" />
</font>
<padding>
<Insets left="50.0" />
</padding>
</Label>
<Label fx:id="home_partner" contentDisplay="RIGHT" layoutX="8.0" layoutY="341.0" nodeOrientation="RIGHT_TO_LEFT" prefHeight="30.0" prefWidth="174.0" text="عدد المستضافين" textAlignment="RIGHT" textOverrun="CENTER_ELLIPSIS">
<font>
<Font size="14.0" />
</font>
<padding>
<Insets left="50.0" />
</padding>
</Label>
<Label alignment="CENTER" layoutX="8.0" layoutY="485.0" nodeOrientation="RIGHT_TO_LEFT" prefHeight="30.0" prefWidth="175.0" text="السكن الحالي">
<font>
<Font size="14.0" />
</font>
</Label>
<Label alignment="CENTER" layoutX="8.0" layoutY="570.0" nodeOrientation="RIGHT_TO_LEFT" prefHeight="30.0" prefWidth="175.0" text="السكن الحالي">
<font>
<Font size="14.0" />
</font>
</Label>
</children>
</AnchorPane>
</items>
</SplitPane>
<Pane blendMode="RED" maxHeight="1.7976931348623157E308" maxWidth="1.7976931348623157E308" minWidth="-Infinity" AnchorPane.leftAnchor="0.0" AnchorPane.rightAnchor="0.0">
<padding>
<Insets top="10.0" />
</padding>
</Pane>
</children>
</AnchorPane>
</HBox>

Related

How can I do dynamic layouts in Javafx?

First of all, excuse me if my English is bad, I don't speak English.
So, I'm working with javafx, when I say "dynamic layouts", I refer to the fact that I have my .fxml already programmed with a default structure which it is so.
menu.fxml view
and its code is this
<?xml version="1.0" encoding="UTF-8"?>
<?import com.jfoenix.controls.JFXButton?>
<?import java.lang.String?>
<?import java.net.URL?>
<?import javafx.geometry.Insets?>
<?import javafx.scene.control.Label?>
<?import javafx.scene.image.Image?>
<?import javafx.scene.image.ImageView?>
<?import javafx.scene.layout.AnchorPane?>
<?import javafx.scene.layout.HBox?>
<?import javafx.scene.layout.VBox?>
<?import javafx.scene.text.Font?>
<AnchorPane prefWidth="356.0" xmlns="http://javafx.com/javafx/11.0.1" xmlns:fx="http://javafx.com/fxml/1">
<children>
<VBox prefHeight="243.0" prefWidth="356.0" spacing="2.0" stylesheets="#../styles/Containers.css" AnchorPane.leftAnchor="0.0" AnchorPane.rightAnchor="0.0" AnchorPane.topAnchor="0.0">
<children>
<AnchorPane prefHeight="31.0" prefWidth="356.0">
<children>
<HBox prefHeight="35.0" prefWidth="200.0" AnchorPane.leftAnchor="0.0" AnchorPane.rightAnchor="0.0">
<padding>
<Insets bottom="8.0" top="8.0" />
</padding>
<children>
<ImageView fitHeight="25.0" fitWidth="25.0" pickOnBounds="true" preserveRatio="true">
<HBox.margin>
<Insets left="10.0" />
</HBox.margin>
<image>
<Image url="#../icons/icons8_Calendar_100px.png" />
</image>
</ImageView>
<Label fx:id="lblFecha" prefHeight="31.0" prefWidth="306.0" stylesheets="#../styles/Strings.css" text="---- ----, -----">
<HBox.margin>
<Insets left="15.0" />
</HBox.margin>
<styleClass>
<String fx:value="h4" />
<String fx:value="principal" />
</styleClass>
</Label>
</children>
</HBox>
</children>
</AnchorPane>
<AnchorPane>
<children>
<HBox prefHeight="35.0" prefWidth="200.0" AnchorPane.leftAnchor="0.0" AnchorPane.rightAnchor="0.0">
<children>
<ImageView fitHeight="25.0" fitWidth="25.0" pickOnBounds="true" preserveRatio="true">
<image>
<Image url="#../icons/icons8_Clock_100px.png" />
</image>
<HBox.margin>
<Insets left="10.0" />
</HBox.margin>
</ImageView>
<Label fx:id="lblHora" prefHeight="31.0" prefWidth="306.0" stylesheets="#../styles/Strings.css" text="-- : -- : -- --">
<HBox.margin>
<Insets left="15.0" />
</HBox.margin>
<styleClass>
<String fx:value="h4" />
<String fx:value="principal" />
</styleClass>
</Label>
</children>
<padding>
<Insets bottom="8.0" top="8.0" />
</padding>
</HBox>
</children>
</AnchorPane>
<AnchorPane fx:id="opcParlking">
<children>
<JFXButton alignment="BASELINE_LEFT" graphicTextGap="25.0" onAction="#openParking" prefHeight="35.0" prefWidth="366.0" styleClass="h4" text="Parking" AnchorPane.leftAnchor="0.0" AnchorPane.rightAnchor="0.0">
<graphic>
<ImageView fitHeight="25.0" fitWidth="25.0" pickOnBounds="true" preserveRatio="true" translateX="10.0">
<image>
<Image url="#../icons/icons8_Tollbooth_100px.png" />
</image>
</ImageView>
</graphic>
<font>
<Font name="System Bold" size="12.0" />
</font>
<padding>
<Insets bottom="8.0" top="8.0" />
</padding>
<stylesheets>
<URL value="#../styles/Buttons.css" />
<URL value="#../styles/Strings.css" />
</stylesheets>
</JFXButton>
</children>
</AnchorPane>
<AnchorPane>
<children>
<JFXButton alignment="BASELINE_LEFT" graphicTextGap="25.0" prefHeight="35.0" prefWidth="363.0" styleClass="h4" text="Tipo de vehiculos" AnchorPane.leftAnchor="0.0" AnchorPane.rightAnchor="0.0">
<graphic>
<ImageView fitHeight="25.0" fitWidth="25.0" pickOnBounds="true" preserveRatio="true" translateX="10.0">
<image>
<Image url="#../icons/icons8_Traffic_Jam_96px.png" />
</image>
</ImageView>
</graphic>
<font>
<Font name="System Bold" size="12.0" />
</font>
<padding>
<Insets bottom="8.0" top="8.0" />
</padding>
<stylesheets>
<URL value="#../styles/Buttons.css" />
<URL value="#../styles/Strings.css" />
</stylesheets>
</JFXButton>
</children>
</AnchorPane>
<AnchorPane>
<children>
<JFXButton alignment="BASELINE_LEFT" graphicTextGap="25.0" prefHeight="35.0" prefWidth="363.0" styleClass="h4" text="Usuarios" AnchorPane.leftAnchor="0.0" AnchorPane.rightAnchor="0.0">
<graphic>
<ImageView fitHeight="25.0" fitWidth="25.0" pickOnBounds="true" preserveRatio="true" translateX="10.0">
<image>
<Image url="#../icons/icons8_User_Groups_100px.png" />
</image>
</ImageView>
</graphic>
<font>
<Font name="System Bold" size="12.0" />
</font>
<padding>
<Insets bottom="8.0" top="8.0" />
</padding>
<stylesheets>
<URL value="#../styles/Buttons.css" />
<URL value="#../styles/Strings.css" />
</stylesheets>
</JFXButton>
</children>
</AnchorPane>
<AnchorPane>
<children>
<JFXButton alignment="BASELINE_LEFT" graphicTextGap="25.0" prefHeight="35.0" prefWidth="361.0" styleClass="h4" text="Clientes" AnchorPane.leftAnchor="0.0" AnchorPane.rightAnchor="0.0">
<graphic>
<ImageView fitHeight="25.0" fitWidth="25.0" pickOnBounds="true" preserveRatio="true" translateX="10.0">
<image>
<Image url="#../icons/icons8_Helping_Hand_104px.png" />
</image>
</ImageView>
</graphic>
<font>
<Font name="System Bold" size="12.0" />
</font>
<padding>
<Insets bottom="8.0" top="8.0" />
</padding>
<stylesheets>
<URL value="#../styles/Buttons.css" />
<URL value="#../styles/Strings.css" />
</stylesheets>
</JFXButton>
</children>
</AnchorPane>
<AnchorPane>
<children>
<JFXButton alignment="BASELINE_LEFT" graphicTextGap="25.0" prefHeight="35.0" prefWidth="361.0" styleClass="h4" text="Reportes" AnchorPane.leftAnchor="0.0" AnchorPane.rightAnchor="0.0">
<graphic>
<ImageView fitHeight="25.0" fitWidth="25.0" pickOnBounds="true" preserveRatio="true" translateX="10.0">
<image>
<Image url="#../icons/icons8_Combo_Chart_104px.png" />
</image>
</ImageView>
</graphic>
<font>
<Font name="System Bold" size="12.0" />
</font>
<padding>
<Insets bottom="8.0" top="8.0" />
</padding>
<stylesheets>
<URL value="#../styles/Buttons.css" />
<URL value="#../styles/Strings.css" />
</stylesheets>
</JFXButton>
</children>
</AnchorPane>
<AnchorPane>
<children>
<JFXButton alignment="BASELINE_LEFT" graphicTextGap="25.0" prefHeight="29.0" prefWidth="356.0" styleClass="h4" text="Configuraciones" AnchorPane.leftAnchor="0.0" AnchorPane.rightAnchor="0.0">
<graphic>
<ImageView fitHeight="25.0" fitWidth="25.0" pickOnBounds="true" preserveRatio="true" translateX="10.0">
<image>
<Image url="#../icons/icons8_Automation_100px.png" />
</image>
</ImageView>
</graphic>
<font>
<Font name="System Bold" size="12.0" />
</font>
<padding>
<Insets bottom="8.0" top="8.0" />
</padding>
<stylesheets>
<URL value="#../styles/Buttons.css" />
<URL value="#../styles/Strings.css" />
</stylesheets>
</JFXButton>
</children>
</AnchorPane>
</children>
</VBox>
</children>
</AnchorPane>
I want to be able in my execution time to hide any buttons and that the buttons adjust automatically filling the blank space that the hidden button leaves.
I've tried using in the MenuController.java instructions like opcParlking.setVisible(false) but it leave me a blank space. This the picture imagen 2.
How can I fix this?

You will want to assign an fx:id to your VBox as well and then inject it into your controller:
#FXML
private VBox vBox;
Then, in your controller, instead of setting a node visible or not, just remove it from the VBox:
vBox.getChildren().remove(opcParlking);
This will remove the node entirely, instead of just making it invisible. Therefore, you will not have the empty space.

Javafx Scenebuilder preview not matching actual scene

When I preview my form inside the Scene builder preview window (Window in preview mode) option everything is laid out perfectly like I want it and it is a good size. When I actually run the program (what actually is shown) and click on my button to open this new form, only about 1/4 of my labels and buttons are actually shown unless I make it full screen and everything is far more spaced out than it should be. Anyway advice to fix this?
`
<?import javafx.geometry.*?>
<?import javafx.scene.text.*?>
<?import java.lang.*?>
<?import java.util.*?>
<?import javafx.scene.*?>
<?import javafx.scene.control.*?>
<?import javafx.scene.layout.*?>
<AnchorPane maxHeight="-Infinity" maxWidth="-Infinity" minHeight="-Infinity"
minWidth="-Infinity" prefHeight="1080.0" prefWidth="1920.0"
xmlns="http://javafx.com/javafx/8" xmlns:fx="http://javafx.com/fxml/1"
fx:controller="sample.Controller">
<children>
<VBox layoutY="-5.0" prefHeight="811.0" prefWidth="1058.0" spacing="15.0">
<children>
<VBox prefHeight="301.0" prefWidth="488.0" spacing="20.0">
<children>
<Label alignment="TOP_CENTER" contentDisplay="CENTER" text="These are the available options for a 7 day cruise">
<font>
<Font name="System Bold" size="30.0" />
</font>
</Label>
<RadioButton mnemonicParsing="false" text="Interior room ticket $765" />
<RadioButton mnemonicParsing="false" text="Ocean view ticket $810" />
<RadioButton mnemonicParsing="false" text="Balcony ticket $1090" />
<RadioButton mnemonicParsing="false" text="Suite ticket $1560">
<padding>
<Insets top="5.0" />
</padding>
</RadioButton>
<Label text="*Prices shown are prices per person">
<font>
<Font name="System Bold Italic" size="24.0" />
</font>
</Label>
</children>
<padding>
<Insets top="20.0" />
</padding>
</VBox>
<HBox prefHeight="41.0" prefWidth="1895.0" spacing="30.0">
<children>
<CheckBox mnemonicParsing="false" text="VIP discount" />
<CheckBox mnemonicParsing="false" text="Prepaid gratitude" />
</children>
</HBox>
<Label text="Prepaid activites that can be attended by both guests">
<font>
<Font name="System Bold" size="30.0" />
</font>
<padding>
<Insets top="75.0" />
</padding>
</Label>
<HBox prefHeight="314.0" prefWidth="1895.0">
<children>
<VBox prefHeight="419.0" prefWidth="922.0" spacing="20.0">
<children>
<CheckBox mnemonicParsing="false" text="Free Internet" />
<CheckBox mnemonicParsing="false" text="Couples massage" />
<CheckBox mnemonicParsing="false" text="Horse back riding excursion" />
<CheckBox mnemonicParsing="false" text="Fitness Classes" />
<CheckBox mnemonicParsing="false" />
</children>
</VBox>
<VBox prefHeight="477.0" prefWidth="942.0" spacing="20.0">
<children>
<CheckBox mnemonicParsing="false" />
<CheckBox mnemonicParsing="false" />
<CheckBox mnemonicParsing="false" text="Casino Games" />
<CheckBox mnemonicParsing="false" text="Watch a show at the theatre" />
<CheckBox mnemonicParsing="false" text="Game Show" />
</children>
<padding>
<Insets bottom="25.0" />
</padding>
</VBox>
</children>
</HBox>
<Button mnemonicParsing="false" text="Calculate total price" />
</children>
<padding>
<Insets bottom="10.0" left="20.0" />
</padding>
</VBox>
</children>
</AnchorPane>
`
Main Class

I went in and got rid of most of the manual sizes. I would also set the PrimaryStage width to 800 and height to 700 and not allow resizing. Test this out.
<?xml version="1.0" encoding="UTF-8"?>
<?import javafx.geometry.Insets?>
<?import javafx.scene.control.Button?>
<?import javafx.scene.control.CheckBox?>
<?import javafx.scene.control.Label?>
<?import javafx.scene.control.RadioButton?>
<?import javafx.scene.layout.AnchorPane?>
<?import javafx.scene.layout.HBox?>
<?import javafx.scene.layout.VBox?>
<?import javafx.scene.text.Font?>
<AnchorPane maxHeight="700.0" maxWidth="800.0" minHeight="700.0" minWidth="800.0" prefHeight="700.0" prefWidth="800.0" xmlns="http://javafx.com/javafx/8.0.111" xmlns:fx="http://javafx.com/fxml/1" fx:controller="sample.Controller">
<children>
<VBox layoutY="-5.0" spacing="15.0" AnchorPane.bottomAnchor="0.0" AnchorPane.leftAnchor="0.0" AnchorPane.rightAnchor="0.0" AnchorPane.topAnchor="0.0">
<children>
<VBox maxHeight="-Infinity" spacing="20.0" VBox.vgrow="ALWAYS">
<children>
<Label alignment="TOP_CENTER" contentDisplay="CENTER" text="These are the available options for a 7 day cruise">
<font>
<Font name="System Bold" size="22.0" />
</font>
</Label>
<RadioButton mnemonicParsing="false" text="Interior room ticket $765">
<font>
<Font size="18.0" />
</font>
<padding>
<Insets left="10.0" />
</padding>
</RadioButton>
<RadioButton mnemonicParsing="false" text="Ocean view ticket $810">
<font>
<Font size="18.0" />
</font>
<padding>
<Insets left="10.0" />
</padding>
</RadioButton>
<RadioButton mnemonicParsing="false" text="Balcony ticket $1090">
<font>
<Font size="18.0" />
</font>
<padding>
<Insets left="10.0" />
</padding>
</RadioButton>
<RadioButton mnemonicParsing="false" text="Suite ticket $1560">
<padding>
<Insets left="10.0" />
</padding>
<font>
<Font size="18.0" />
</font>
</RadioButton>
</children>
</VBox>
<VBox>
<children>
<Label text="*Prices shown are prices per person">
<font>
<Font name="System Bold Italic" size="16.0" />
</font>
</Label>
<HBox spacing="30.0">
<children>
<CheckBox mnemonicParsing="false" text="VIP discount">
<font>
<Font size="15.0" />
</font>
</CheckBox>
<CheckBox mnemonicParsing="false" text="Prepaid gratitude">
<font>
<Font size="15.0" />
</font>
</CheckBox>
</children>
<padding>
<Insets left="10.0" />
</padding>
</HBox>
</children>
</VBox>
<VBox prefHeight="200.0" prefWidth="100.0" spacing="20.0" VBox.vgrow="ALWAYS">
<children>
<Label text="Prepaid activites that can be attended by both guests" VBox.vgrow="ALWAYS">
<font>
<Font name="System Bold" size="22.0" />
</font>
</Label>
<HBox VBox.vgrow="ALWAYS">
<children>
<VBox spacing="20.0" HBox.hgrow="ALWAYS">
<children>
<CheckBox mnemonicParsing="false" text="Free Internet">
<font>
<Font size="15.0" />
</font>
</CheckBox>
<CheckBox mnemonicParsing="false" text="Couples massage">
<font>
<Font size="15.0" />
</font>
</CheckBox>
<CheckBox mnemonicParsing="false" text="Horse back riding excursion">
<font>
<Font size="15.0" />
</font>
</CheckBox>
<CheckBox mnemonicParsing="false" text="Fitness Classes">
<font>
<Font size="15.0" />
</font>
</CheckBox>
<CheckBox mnemonicParsing="false">
<font>
<Font size="15.0" />
</font>
</CheckBox>
</children>
<padding>
<Insets left="10.0" />
</padding>
</VBox>
<VBox spacing="20.0" HBox.hgrow="ALWAYS">
<children>
<CheckBox mnemonicParsing="false">
<font>
<Font size="15.0" />
</font>
</CheckBox>
<CheckBox mnemonicParsing="false">
<font>
<Font size="15.0" />
</font>
</CheckBox>
<CheckBox mnemonicParsing="false" text="Casino Games">
<font>
<Font size="15.0" />
</font>
</CheckBox>
<CheckBox mnemonicParsing="false" text="Watch a show at the theatre">
<font>
<Font size="15.0" />
</font>
</CheckBox>
<CheckBox mnemonicParsing="false" text="Game Show">
<font>
<Font size="15.0" />
</font>
</CheckBox>
</children>
<padding>
<Insets bottom="25.0" />
</padding>
</VBox>
</children>
</HBox>
</children>
<VBox.margin>
<Insets top="30.0" />
</VBox.margin>
</VBox>
<Button mnemonicParsing="false" prefHeight="40.0" text="Calculate total price" />
</children>
<padding>
<Insets bottom="15.0" left="20.0" />
</padding>
</VBox>
</children>
<padding>
<Insets top="15.0" />
</padding>
</AnchorPane>

How can I create a responsive box design

So I have 2 hboxes on top of each other to create the description and content of each box. They seem to look fine at the current size (look at img 1). However, it is not responsive. Once I use a bigger screen, the boxes don't adjust to the size and just stay in place (look at img 2). Sometimes they don't even stay on top of each other but move to the right or the left (look at img 3). Could you please help me suggest a better design to make my boxes responsive? Thank you in advance.
Image 1:
Image 2:
Image 3:
Here is my fxml code:
<?xml version="1.0" encoding="UTF-8"?>
<?import com.jfoenix.controls.JFXButton?>
<?import com.jfoenix.controls.JFXTabPane?>
<?import javafx.geometry.Insets?>
<?import javafx.scene.control.Label?>
<?import javafx.scene.control.Tab?>
<?import javafx.scene.layout.AnchorPane?>
<?import javafx.scene.layout.ColumnConstraints?>
<?import javafx.scene.layout.GridPane?>
<?import javafx.scene.layout.HBox?>
<?import javafx.scene.layout.RowConstraints?>
<?import javafx.scene.layout.VBox?>
<?import javafx.scene.text.Font?>
<AnchorPane id="AnchorPane" prefHeight="752.0" prefWidth="1280.0" styleClass="main-anchor-pane" stylesheets="#../../resources/css/Consolidated.css" xmlns="http://javafx.com/javafx/8.0.111" xmlns:fx="http://javafx.com/fxml/1" fx:controller="gui.controllers.SalesDataController">
<children>
<JFXTabPane fx:id="tabPane" layoutX="181.0" layoutY="91.0" prefHeight="752.0" prefWidth="1280.0" AnchorPane.bottomAnchor="0.0" AnchorPane.leftAnchor="0.0" AnchorPane.rightAnchor="0.0" AnchorPane.topAnchor="0.0">
<tabs>
<Tab fx:id="addNewTab" text="Add New">
<content>
<AnchorPane maxWidth="1.7976931348623157E308" prefWidth="1280.0">
<children>
<HBox layoutY="79.0" prefHeight="383.0" prefWidth="1228.0" AnchorPane.leftAnchor="0.0" AnchorPane.rightAnchor="0.0">
<children>
<VBox prefHeight="331.0" prefWidth="331.0" styleClass="vbox-properties">
<children>
<GridPane prefHeight="153.0" prefWidth="331.0">
<columnConstraints>
<ColumnConstraints hgrow="SOMETIMES" minWidth="10.0" prefWidth="100.0" />
</columnConstraints>
<rowConstraints>
<RowConstraints minHeight="10.0" prefHeight="40.0" vgrow="SOMETIMES" />
<RowConstraints minHeight="10.0" prefHeight="40.0" vgrow="SOMETIMES" />
<RowConstraints minHeight="10.0" prefHeight="40.0" vgrow="SOMETIMES" />
</rowConstraints>
<opaqueInsets>
<Insets />
</opaqueInsets>
<padding>
<Insets left="10.0" right="10.0" />
</padding>
</GridPane>
</children>
<HBox.margin>
<Insets left="15.0" />
</HBox.margin>
</VBox>
<VBox prefHeight="312.0" prefWidth="331.0" styleClass="vbox-properties">
<children>
<GridPane prefHeight="179.0" prefWidth="183.0">
<columnConstraints>
<ColumnConstraints hgrow="SOMETIMES" minWidth="10.0" prefWidth="100.0" />
</columnConstraints>
<rowConstraints>
<RowConstraints minHeight="12.0" prefHeight="30.0" vgrow="SOMETIMES" />
<RowConstraints minHeight="12.0" prefHeight="30.0" vgrow="SOMETIMES" />
<RowConstraints minHeight="12.0" prefHeight="30.0" vgrow="SOMETIMES" />
<RowConstraints minHeight="12.0" prefHeight="30.0" vgrow="SOMETIMES" />
</rowConstraints>
<opaqueInsets>
<Insets />
</opaqueInsets>
<padding>
<Insets left="10.0" right="10.0" />
</padding>
</GridPane>
<GridPane prefHeight="101.0" prefWidth="351.0">
<columnConstraints>
<ColumnConstraints />
</columnConstraints>
<rowConstraints>
<RowConstraints />
</rowConstraints>
<opaqueInsets>
<Insets />
</opaqueInsets>
<VBox.margin>
<Insets top="30.0" />
</VBox.margin>
</GridPane>
</children>
<HBox.margin>
<Insets left="71.75" right="71.75" />
</HBox.margin>
</VBox>
<VBox prefHeight="166.0" prefWidth="331.0" styleClass="vbox-properties">
<children>
<GridPane prefHeight="101.0" prefWidth="331.0">
<columnConstraints>
<ColumnConstraints hgrow="SOMETIMES" minWidth="10.0" prefWidth="100.0" />
</columnConstraints>
<rowConstraints>
<RowConstraints minHeight="10.0" prefHeight="40.0" vgrow="SOMETIMES" />
<RowConstraints minHeight="10.0" prefHeight="40.0" vgrow="SOMETIMES" />
</rowConstraints>
<opaqueInsets>
<Insets />
</opaqueInsets>
<padding>
<Insets left="10.0" right="10.0" />
</padding>
</GridPane>
</children>
</VBox>
</children>
<padding>
<Insets left="71.75" right="71.75" />
</padding>
</HBox>
<HBox alignment="CENTER" layoutY="462.0" prefHeight="51.0" prefWidth="277.0" AnchorPane.leftAnchor="0.0" AnchorPane.rightAnchor="0.0" AnchorPane.topAnchor="462.0">
<children>
<JFXButton fx:id="addButton" mnemonicParsing="false" onAction="#addAction" prefWidth="70.0" text="ADD">
<HBox.margin>
<Insets bottom="5.0" left="5.0" right="5.0" top="5.0" />
</HBox.margin>
<padding>
<Insets bottom="6.0" left="6.0" right="6.0" top="6.0" />
</padding>
</JFXButton>
<JFXButton fx:id="updateButton" mnemonicParsing="false" onAction="#updateSalesDataAction" prefWidth="70.0" text="UPDATE">
<HBox.margin>
<Insets bottom="5.0" left="5.0" right="5.0" top="5.0" />
</HBox.margin>
<padding>
<Insets bottom="6.0" left="6.0" right="6.0" top="6.0" />
</padding>
</JFXButton>
<JFXButton fx:id="clearButton" mnemonicParsing="false" onAction="#clearAction" prefWidth="70.0" text="CLEAR">
<padding>
<Insets bottom="6.0" left="6.0" right="6.0" top="6.0" />
</padding>
<HBox.margin>
<Insets bottom="5.0" left="5.0" right="5.0" top="5.0" />
</HBox.margin>
</JFXButton>
</children>
</HBox>
<HBox alignment="CENTER" layoutX="502.0" layoutY="521.0" prefHeight="33.0" prefWidth="277.0" AnchorPane.leftAnchor="0.0" AnchorPane.rightAnchor="0.0" AnchorPane.topAnchor="521.0" />
<HBox layoutY="29.0" AnchorPane.leftAnchor="0.0" AnchorPane.rightAnchor="0.0">
<children>
<Label alignment="CENTER" prefHeight="55.0" prefWidth="279.0" styleClass="label-color" text="Info A" textAlignment="CENTER">
<font>
<Font name="System Bold" size="18.0" />
</font>
<HBox.margin>
<Insets left="41.0" />
</HBox.margin>
</Label>
<Label alignment="CENTER" prefHeight="55.0" prefWidth="279.0" styleClass="label-color" text="Info B" textAlignment="CENTER">
<font>
<Font name="System Bold" size="18.0" />
</font>
<HBox.margin>
<Insets left="123.75" right="97.75" />
</HBox.margin>
</Label>
<Label alignment="CENTER" prefHeight="55.0" prefWidth="279.0" styleClass="label-color" text="Info C" textAlignment="CENTER">
<font>
<Font name="System Bold" size="18.0" />
</font>
<HBox.margin>
<Insets left="26.0" />
</HBox.margin>
</Label>
</children>
<padding>
<Insets left="71.75" right="71.75" />
</padding>
</HBox>
</children>
</AnchorPane>
</content>
</Tab>
</tabs>
</JFXTabPane>
</children>
</AnchorPane>

toggleButtonGroup class does not exist javafx

i never got a erreur like this toggleButtonGroup class does not exist javafx
i searched but didnt found erreur like this
so this is not duplicate questions
thanks
here iy fxml code
<?xml version="1.0" encoding="UTF-8"?>
<?import com.gluonhq.charm.glisten.control.ToggleButtonGroup?>
<?import com.jfoenix.controls.JFXButton?>
<?import com.jfoenix.controls.JFXTextArea?>
<?import com.jfoenix.controls.JFXTextField?>
<?import com.jfoenix.controls.JFXToggleButton?>
<?import java.net.URL?>
<?import javafx.geometry.Insets?>
<?import javafx.scene.control.Label?>
<?import javafx.scene.control.RadioButton?>
<?import javafx.scene.control.Separator?>
<?import javafx.scene.layout.AnchorPane?>
<?import javafx.scene.layout.HBox?>
<?import javafx.scene.layout.Pane?>
<?import javafx.scene.layout.VBox?>
<AnchorPane id="AnchorPane" maxHeight="568.0" maxWidth="699.0" prefHeight="589.0" prefWidth="699.0" styleClass="mainFxmlClass" xmlns="http://javafx.com/javafx/8.0.111" xmlns:fx="http://javafx.com/fxml/1" fx:controller="Controller.AjouterEmployerController">
<stylesheets>
<URL value="#/css/ajouteremployer.css" />
</stylesheets>
<children>
<Pane layoutX="330.0" prefHeight="568.0" prefWidth="15.0" style="-fx-background-color: black;" />
<Separator layoutX="324.0" orientation="VERTICAL" prefHeight="568.0" prefWidth="9.0" />
<Separator layoutX="346.0" orientation="VERTICAL" prefHeight="568.0" prefWidth="1.0" />
<Pane layoutX="-1.0" layoutY="-2.0" prefHeight="568.0" prefWidth="328.0">
<children>
<Separator layoutX="14.0" orientation="VERTICAL" prefHeight="568.0" prefWidth="6.0" />
<Separator layoutX="128.0" orientation="VERTICAL" prefHeight="435.0" prefWidth="6.0" />
<Separator layoutX="285.0" orientation="VERTICAL" prefHeight="568.0" prefWidth="6.0" />
<Label layoutX="30.0" layoutY="15.0" prefHeight="17.0" prefWidth="94.0" text="CNE :" />
<Label layoutX="30.0" layoutY="54.0" prefHeight="17.0" prefWidth="94.0" text="first name" />
<Label layoutX="30.0" layoutY="94.0" prefHeight="17.0" prefWidth="94.0" text="lastname" />
<Label layoutX="30.0" layoutY="168.0" prefHeight="17.0" prefWidth="76.0" text="phone" />
<Label layoutX="30.0" layoutY="209.0" prefHeight="17.0" prefWidth="66.0" text="section" />
<Label layoutX="30.0" layoutY="255.0" text="transporte" />
<Label layoutX="30.0" layoutY="291.0" text="note" />
<JFXTextField fx:id="AddCNE" layoutX="131.0" layoutY="11.0" prefHeight="25.0" prefWidth="152.0" />
<JFXTextField fx:id="AddFirstName" layoutX="131.0" layoutY="50.0" prefHeight="25.0" prefWidth="152.0" />
<JFXTextField fx:id="AddLastName" layoutX="131.0" layoutY="90.0" prefHeight="25.0" prefWidth="152.0" />
<JFXTextField fx:id="AddAge" layoutX="131.0" layoutY="128.0" prefHeight="25.0" prefWidth="152.0" />
<JFXTextField fx:id="AddPhone" layoutX="131.0" layoutY="164.0" prefHeight="25.0" prefWidth="152.0" />
<JFXToggleButton fx:id="AddTransport" layoutX="155.0" layoutY="235.0" prefHeight="56.0" prefWidth="105.0" text="YES" />
<Label layoutX="152.0" layoutY="255.0" prefHeight="17.0" prefWidth="24.0" text="NO" />
<JFXTextArea fx:id="AddNote" layoutX="131.0" layoutY="286.0" prefHeight="131.0" prefWidth="152.0" />
<JFXButton fx:id="AddEmployer" buttonType="RAISED" layoutX="207.0" layoutY="442.0" onAction="#AddEmployerAndSelectEmpolyer" prefHeight="36.0" prefWidth="76.0" ripplerFill="#7ffc7a" style="-fx-background-color: #188616;" text="ADD" textFill="#e5e8eb" />
<Separator layoutX="14.0" layoutY="434.0" prefHeight="3.0" prefWidth="271.0" />
<JFXButton fx:id="resetAll" layoutX="20.0" layoutY="442.0" onAction="#reset" prefHeight="36.0" prefWidth="66.0" ripplerFill="#7ef878" style="-fx-background-color: #188616;" text="reset" textFill="#f0f1f2" />
<Label fx:id="messageAdd" layoutX="25.0" layoutY="497.0" prefHeight="56.0" prefWidth="254.0" textFill="#eb0909e9" wrapText="true" />
<Label layoutX="30.0" layoutY="132.0" prefHeight="17.0" prefWidth="48.0" text="age" />
<ToggleButtonGroup fx:id="SectionValue" layoutX="150.0" layoutY="205.0" selectionType="SINGLE">
<toggles>
<RadioButton fx:id="SectionA" mnemonicParsing="false" prefHeight="17.0" prefWidth="41.0" text="A" />
<RadioButton fx:id="SectionB" layoutX="10.0" layoutY="10.0" mnemonicParsing="false" prefHeight="17.0" prefWidth="45.0" text="B" />
<RadioButton fx:id="sectionC" layoutX="97.0" layoutY="10.0" mnemonicParsing="false" prefHeight="17.0" prefWidth="44.0" text="C" />
</toggles>
</ToggleButtonGroup>
</children>
</Pane>
<VBox layoutX="384.0" layoutY="33.0" prefHeight="459.0" prefWidth="295.0">
<children>
<HBox>
<children>
<Label fx:id="cneEmployer" prefHeight="17.0" prefWidth="88.0">
<padding>
<Insets bottom="10.0" top="10.0" />
</padding>
</Label>
<Label fx:id="cneEmployerValue" prefHeight="17.0" prefWidth="172.0">
<padding>
<Insets bottom="10.0" top="10.0" />
</padding>
</Label>
</children>
</HBox>
<HBox>
<children>
<Label fx:id="firstName" prefHeight="17.0" prefWidth="92.0">
<padding>
<Insets bottom="10.0" top="10.0" />
</padding>
<HBox.margin>
<Insets />
</HBox.margin>
</Label>
<Label fx:id="firstNameValue" prefHeight="17.0" prefWidth="208.0">
<padding>
<Insets bottom="10.0" top="10.0" />
</padding>
</Label>
</children>
<padding>
<Insets bottom="10.0" top="10.0" />
</padding>
</HBox>
<HBox>
<children>
<Label fx:id="latName" prefHeight="17.0" prefWidth="90.0">
<padding>
<Insets bottom="10.0" top="10.0" />
</padding>
</Label>
<Label fx:id="LastNameValue" prefHeight="17.0" prefWidth="196.0">
<padding>
<Insets bottom="10.0" top="10.0" />
</padding>
</Label>
</children>
</HBox>
<HBox>
<children>
<Label fx:id="LabelAge" prefHeight="17.0" prefWidth="135.0">
<padding>
<Insets bottom="10.0" top="10.0" />
</padding>
</Label>
<Label fx:id="LabelAgeValue" prefHeight="17.0" prefWidth="249.0">
<padding>
<Insets bottom="10.0" top="10.0" />
</padding>
</Label>
</children>
</HBox>
<HBox>
<children>
<Label fx:id="num" prefHeight="17.0" prefWidth="110.0">
<padding>
<Insets bottom="10.0" top="10.0" />
</padding>
</Label>
<Label fx:id="phoneValue" prefHeight="17.0" prefWidth="223.0">
<padding>
<Insets bottom="10.0" top="10.0" />
</padding>
</Label>
</children>
</HBox>
<HBox>
<children>
<Label fx:id="sectionn" prefHeight="17.0" prefWidth="113.0">
<padding>
<Insets bottom="10.0" top="10.0" />
</padding>
</Label>
<Label fx:id="Sectionvalue" prefHeight="17.0" prefWidth="221.0">
<padding>
<Insets bottom="10.0" top="10.0" />
</padding>
</Label>
</children>
</HBox>
<HBox>
<children>
<Label fx:id="transportt" prefHeight="17.0" prefWidth="122.0">
<padding>
<Insets bottom="10.0" top="10.0" />
</padding>
</Label>
<Label fx:id="tranportValue" prefHeight="17.0" prefWidth="231.0">
<padding>
<Insets bottom="10.0" top="10.0" />
</padding>
</Label>
</children>
</HBox>
<HBox prefHeight="148.0" prefWidth="254.0">
<children>
<Label fx:id="note" prefHeight="148.0" prefWidth="137.0" />
<Label fx:id="noteValue" prefHeight="147.0" prefWidth="256.0" wrapText="true" />
</children>
</HBox>
</children>
</VBox>
</children>
</AnchorPane>
this is the errure
this the second erreur

Try to add the ToggleGroups like this
<VBox>
<RadioButton text="A" fx:id="radioButton1">
<toggleGroup>
<ToggleGroup fx:id="toggleGroup1"/>
</toggleGroup>
</RadioButton>
<RadioButton text="B" toggleGroup="$toggleGroup1" fx:id="radioButton2"/>
</VBox>

Scene Builder cannot load my fxml file though it gives no error

I get no error loading up fxml from Java code.
I went through previous posts and tried solutions mentioned but didn't found a fix yet.
My fxml was working fine so far.
But I tweaked something and Scene Builder doesn't give any error but it won't render my fxml file when I preview it in Scene Builder and all I see is a blank white screen.
Here is code of fxml file below:
<?xml version="1.0" encoding="UTF-8"?>
<?import javafx.geometry.Insets?>
<?import javafx.scene.Cursor?>
<?import javafx.scene.control.Button?>
<?import javafx.scene.control.Label?>
<?import javafx.scene.control.PasswordField?>
<?import javafx.scene.control.TextArea?>
<?import javafx.scene.control.TextField?>
<?import javafx.scene.control.Tooltip?>
<?import javafx.scene.effect.Blend?>
<?import javafx.scene.effect.Bloom?>
<?import javafx.scene.effect.ColorAdjust?>
<?import javafx.scene.effect.DropShadow?>
<?import javafx.scene.effect.Glow?>
<?import javafx.scene.layout.AnchorPane?>
<?import javafx.scene.layout.BorderPane?>
<?import javafx.scene.layout.Pane?>
<?import javafx.scene.text.Font?>
<AnchorPane id="customerAnchorPane" fx:id="customerAnchorPane" blendMode="OVERLAY" maxHeight="-Infinity" maxWidth="-Infinity" minHeight="-Infinity" minWidth="-Infinity" prefHeight="400.0" prefWidth="600.0" style="-fx-background-color: gray; -fx-border-color: gray;" xmlns="http://javafx.com/javafx/8.0.65" xmlns:fx="http://javafx.com/fxml/1">
<children>
<BorderPane id="login" fx:id="login" layoutX="2.0" layoutY="2.0" maxHeight="-Infinity" maxWidth="-Infinity" minHeight="-Infinity" minWidth="-Infinity" prefHeight="398.0" prefWidth="600.0" style="-fx-background-color: gray;" AnchorPane.bottomAnchor="1.0" AnchorPane.leftAnchor="1.0" AnchorPane.rightAnchor="-1.0" AnchorPane.topAnchor="1.0">
<left>
<Pane id="customerLabels_pane" fx:id="customerLabels_pane" prefHeight="299.0" prefWidth="200.0" BorderPane.alignment="CENTER">
<children>
<Label id="customerfName_label" fx:id="customerfName_label" alignment="CENTER" contentDisplay="CENTER" layoutX="46.0" layoutY="101.0" prefHeight="35.0" prefWidth="109.0" style="-fx-background-color: wheat; -fx-border-color: brown;" text="First Name" textFill="#081057">
<font>
<Font name="Wawati SC Regular" size="16.0" />
</font>
<padding>
<Insets bottom="5.0" left="15.0" right="8.0" top="5.0" />
</padding>
</Label>
<Label id="customerlName_label" fx:id="customerlName_label" alignment="CENTER" contentDisplay="CENTER" layoutX="46.0" layoutY="147.0" prefHeight="35.0" prefWidth="109.0" style="-fx-background-color: wheat; -fx-border-color: brown;" text="Last Name" textAlignment="CENTER" textFill="#081057">
<font>
<Font name="Wawati SC Regular" size="16.0" />
</font>
<padding>
<Insets bottom="5.0" left="5.0" right="5.0" top="5.0" />
</padding>
</Label>
<Label id="customerEmail_label1" fx:id="customerEmail_label1" alignment="CENTER" contentDisplay="CENTER" layoutX="46.0" layoutY="189.0" prefHeight="35.0" prefWidth="109.0" style="-fx-background-color: wheat; -fx-border-color: brown;" text="Email" textAlignment="CENTER" textFill="#081057">
<font>
<Font name="Wawati SC Regular" size="16.0" />
</font>
<padding>
<Insets bottom="5.0" left="15.0" right="8.0" top="5.0" />
</padding>
</Label>
<Label id="customerAddress_label" fx:id="customerAddress_label" alignment="CENTER" contentDisplay="CENTER" layoutX="46.0" layoutY="238.0" prefHeight="35.0" prefWidth="109.0" style="-fx-background-color: wheat; -fx-border-color: brown;" text="Address" textAlignment="CENTER" textFill="#081057">
<font>
<Font name="Wawati SC Regular" size="16.0" />
</font>
<padding>
<Insets bottom="5.0" left="15.0" right="8.0" top="5.0" />
</padding>
</Label>
<Label id="customerUsername_label" fx:id="customerUsername_label" alignment="CENTER" contentDisplay="CENTER" layoutX="46.0" layoutY="14.0" prefHeight="35.0" prefWidth="109.0" style="-fx-background-color: wheat; -fx-border-color: brown;" text="Username" textFill="#081057">
<font>
<Font name="Wawati SC Regular" size="16.0" />
</font>
<padding>
<Insets bottom="5.0" left="15.0" right="8.0" top="5.0" />
</padding>
</Label>
<Label id="customerPassword_label" fx:id="customerPassword_label" alignment="CENTER" contentDisplay="CENTER" layoutX="46.0" layoutY="56.0" prefHeight="35.0" prefWidth="109.0" style="-fx-background-color: wheat; -fx-border-color: brown;" text="Password" textFill="#081057">
<font>
<Font name="Wawati SC Regular" size="16.0" />
</font>
<padding>
<Insets bottom="5.0" left="15.0" right="8.0" top="5.0" />
</padding>
</Label>
</children>
</Pane>
</left>
<center>
<Pane id="signUptFields_pane" fx:id="signUptFields_pane" prefHeight="308.0" prefWidth="397.0" BorderPane.alignment="CENTER">
<children>
<TextField id="customerUsername_tField" fx:id="customerUsername_tField" alignment="CENTER" layoutX="14.0" layoutY="14.0" prefHeight="35.0" prefWidth="230.0" promptText="Enter username here" style="-fx-background-color: gray;">
<padding>
<Insets bottom="5.0" left="5.0" right="5.0" top="5.0" />
</padding>
<font>
<Font name="Courier Oblique" size="14.0" />
</font>
<effect>
<Glow />
</effect>
<tooltip>
<Tooltip id="usernameToolTip" fx:id="usernameToolTip" autoHide="true" contentDisplay="CENTER" text="Do not enter special characters or spaces" textAlignment="CENTER">
<font>
<Font name="Wawati SC Regular" size="13.0" />
</font>
</Tooltip>
</tooltip>
</TextField>
<PasswordField id="customerPassword_tField" fx:id="customerPassword_tField" alignment="CENTER" layoutX="14.0" layoutY="59.0" prefHeight="35.0" prefWidth="230.0" promptText="Enter password here" style="-fx-background-color: gray;">
<padding>
<Insets bottom="5.0" left="5.0" right="5.0" top="5.0" />
</padding>
<font>
<Font name="Courier Oblique" size="14.0" />
</font>
<effect>
<Glow />
</effect>
</PasswordField>
<TextField id="customerfName_tField" fx:id="customerfName_tField" alignment="CENTER" layoutX="14.0" layoutY="102.0" prefHeight="35.0" prefWidth="230.0" promptText="Enter first name here" style="-fx-background-color: gray;">
<padding>
<Insets bottom="5.0" left="5.0" right="5.0" top="5.0" />
</padding>
<font>
<Font name="Courier Oblique" size="14.0" />
</font>
<effect>
<Glow />
</effect>
<tooltip>
<Tooltip id="fNameToolTip" fx:id="fNameToolTip" contentDisplay="CENTER" text="Enter only characters, no spaces allowed" textAlignment="CENTER">
<font>
<Font name="Wawati SC Regular" size="13.0" />
</font>
</Tooltip>
</tooltip>
</TextField>
<TextField id="customerlName_tField" fx:id="customerlName_tField" accessibleRole="TEXT_FIELD" alignment="CENTER" layoutX="14.0" layoutY="146.0" prefHeight="35.0" prefWidth="230.0" promptText="Enter last name here" style="-fx-background-color: gray;">
<padding>
<Insets bottom="5.0" left="5.0" right="5.0" top="5.0" />
</padding>
<font>
<Font name="Courier Oblique" size="14.0" />
</font>
<effect>
<Glow />
</effect>
<tooltip>
<Tooltip id="lNameToolTip" fx:id="lNameToolTip" contentDisplay="CENTER" text="Enter only characters, no spaces allowed" textAlignment="CENTER">
<font>
<Font name="Wawati SC Regular" size="13.0" />
</font>
</Tooltip>
</tooltip>
</TextField>
<TextField id="customerEmail_tField" fx:id="customerEmail_tField" accessibleRole="TEXT_FIELD" alignment="CENTER" layoutX="14.0" layoutY="188.0" prefHeight="35.0" prefWidth="230.0" promptText="Enter email address here" style="-fx-background-color: gray;">
<padding>
<Insets bottom="5.0" left="5.0" right="5.0" top="5.0" />
</padding>
<font>
<Font name="Courier Oblique" size="14.0" />
</font>
<effect>
<Glow />
</effect>
<tooltip>
<Tooltip id="emailToolTip" fx:id="emailToolTip" contentDisplay="CENTER" text="Format: abc#xyz.com" textAlignment="CENTER">
<font>
<Font name="Wawati SC Regular" size="13.0" />
</font>
</Tooltip>
</tooltip>
</TextField>
<TextArea id="customerAddress_tArea" fx:id="customerAddress_tArea" layoutX="14.0" layoutY="236.0" prefHeight="42.0" prefWidth="230.0" promptText="Enter address here" style="-fx-background-color: gray; -fx-border-color: gray;" wrapText="true">
<opaqueInsets>
<Insets bottom="5.0" left="5.0" right="5.0" top="5.0" />
</opaqueInsets>
<effect>
<ColorAdjust brightness="0.33" contrast="0.02" hue="0.12" saturation="-0.07">
<input>
<DropShadow />
</input>
</ColorAdjust>
</effect>
<font>
<Font name="Courier Oblique" size="14.0" />
</font>
<padding>
<Insets bottom="0.5" left="0.5" right="0.5" top="0.5" />
</padding>
<tooltip>
<Tooltip id="addressToolTip" fx:id="addressToolTip" contentDisplay="CENTER" text="Do not enter any special characters" textAlignment="CENTER">
<font>
<Font name="Wawati SC Regular" size="13.0" />
</font>
</Tooltip>
</tooltip>
</TextArea>
<Button id="customerSubmit_Button" fx:id="customerSubmit_Button" alignment="CENTER" contentDisplay="RIGHT" layoutX="149.0" layoutY="294.0" mnemonicParsing="false" prefHeight="35.0" prefWidth="95.0" style="-fx-background-color: wheat; -fx-border-color: brown;" text="Submit" textAlignment="CENTER" textFill="#081057">
<font>
<Font name="Wawati SC Regular" size="16.0" />
</font>
<opaqueInsets>
<Insets bottom="5.0" left="5.0" right="5.0" top="5.0" />
</opaqueInsets>
<padding>
<Insets bottom="5.0" left="5.0" right="5.0" top="5.0" />
</padding>
</Button>
<Label id="lblInvalidfName" fx:id="lblInvalidfName" alignment="CENTER" contentDisplay="CENTER" layoutX="251.0" layoutY="102.0" prefHeight="17.0" prefWidth="120.0" style="-fx-background-color: black; -fx-border-color: black;" text="Invalid First Name" textAlignment="CENTER" textFill="#d72323" textOverrun="CENTER_ELLIPSIS" visible="false">
<font>
<Font name="Wawati SC Regular" size="13.0" />
</font>
<opaqueInsets>
<Insets bottom="5.0" left="5.0" right="5.0" top="5.0" />
</opaqueInsets>
<effect>
<Bloom threshold="0.22" />
</effect>
<cursor>
<Cursor fx:constant="DISAPPEAR" />
</cursor>
</Label>
<Label id="lblInvalidlName" fx:id="lblInvalidlName" alignment="CENTER" contentDisplay="CENTER" layoutX="251.0" layoutY="146.0" prefHeight="17.0" prefWidth="120.0" style="-fx-background-color: black; -fx-border-color: black;" text="Invalid Last Name" textAlignment="CENTER" textFill="#d72323" textOverrun="CENTER_ELLIPSIS" visible="false">
<font>
<Font name="Wawati SC Regular" size="13.0" />
</font>
<opaqueInsets>
<Insets bottom="5.0" left="5.0" right="5.0" top="5.0" />
</opaqueInsets>
<effect>
<Bloom threshold="0.22" />
</effect>
<cursor>
<Cursor fx:constant="DISAPPEAR" />
</cursor>
</Label>
<Label id="lblInvalidEmail" fx:id="lblInvalidEmail" alignment="CENTER" contentDisplay="CENTER" layoutX="251.0" layoutY="188.0" prefHeight="17.0" prefWidth="120.0" style="-fx-background-color: black; -fx-border-color: black;" text="Invalid Email" textAlignment="CENTER" textFill="#d72323" textOverrun="CENTER_ELLIPSIS" visible="false">
<font>
<Font name="Wawati SC Regular" size="13.0" />
</font>
<opaqueInsets>
<Insets bottom="5.0" left="5.0" right="5.0" top="5.0" />
</opaqueInsets>
<effect>
<Bloom threshold="0.22" />
</effect>
<cursor>
<Cursor fx:constant="DISAPPEAR" />
</cursor>
</Label>
<Label id="lblInvalidAddress" fx:id="lblInvalidAddress" alignment="CENTER" contentDisplay="CENTER" layoutX="251.0" layoutY="236.0" prefHeight="17.0" prefWidth="120.0" style="-fx-background-color: black; -fx-border-color: black;" text="Invalid Address" textAlignment="CENTER" textFill="#d72323" textOverrun="CENTER_ELLIPSIS" visible="false">
<font>
<Font name="Wawati SC Regular" size="13.0" />
</font>
<opaqueInsets>
<Insets bottom="5.0" left="5.0" right="5.0" top="5.0" />
</opaqueInsets>
<effect>
<Bloom threshold="0.22" />
</effect>
<cursor>
<Cursor fx:constant="DISAPPEAR" />
</cursor>
</Label>
<Label id="lblInvalidUsername" fx:id="lblInvalidUsername" alignment="CENTER" contentDisplay="CENTER" layoutX="251.0" layoutY="14.0" prefHeight="17.0" prefWidth="120.0" style="-fx-background-color: black; -fx-border-color: black;" text="Invalid Username" textAlignment="CENTER" textFill="#d72323" textOverrun="CENTER_ELLIPSIS" visible="false">
<font>
<Font name="Wawati SC Regular" size="13.0" />
</font>
<opaqueInsets>
<Insets bottom="5.0" left="5.0" right="5.0" top="5.0" />
</opaqueInsets>
<effect>
<Bloom threshold="0.22" />
</effect>
<cursor>
<Cursor fx:constant="DISAPPEAR" />
</cursor>
</Label>
</children>
</Pane>
</center>
<top>
<Pane id="customerSignUpLabel_pane" fx:id="customerSignUpLabel_pane" prefHeight="57.0" prefWidth="600.0" BorderPane.alignment="CENTER">
<children>
<Label id="customerSignUp_label" fx:id="customerSignUp_label" alignment="CENTER" contentDisplay="CENTER" layoutX="114.0" layoutY="14.0" prefHeight="46.0" prefWidth="341.0" style="-fx-background-color: gray;" text="Customer Sign Up ..." textAlignment="CENTER" textFill="#081057">
<padding>
<Insets bottom="5.0" left="5.0" right="5.0" top="5.0" />
</padding>
<font>
<Font name="Copperplate Bold" size="28.0" />
</font>
<opaqueInsets>
<Insets bottom="5.0" left="5.0" right="5.0" top="5.0" />
</opaqueInsets>
</Label>
</children>
</Pane>
</top>
<effect>
<Bloom threshold="1.0">
<input>
<ColorAdjust />
</input>
</Bloom>
</effect>
</BorderPane>
</children>
<opaqueInsets>
<Insets />
</opaqueInsets>
<effect>
<Blend opacity="0.55" />
</effect>
</AnchorPane>
Looking forward to suggestions.

I solved the issue.
It was because one of my parent pane was referencing some other fxml file node which had same fx:id.
Hope that helps other people facing similar issues.

Resources