JavaFX FXML:How to create new instances of a self made fxml to VBox

Question

I created a card like pane so that I can add data to it and create a page with many cards according to data (much like a card layout in mobile applications) however, I don't know how to add new instances of this to VBox. I tired with and without a loop and still didn't work. It Keeps Giving the Following Error:

javafx.fxml.LoadException: 
/C:///////bin/application/HotelReservation.fxml

at javafx.fxml.FXMLLoader.constructLoadException(FXMLLoader.java:2601)
at javafx.fxml.FXMLLoader.loadImpl(FXMLLoader.java:2579)
at javafx.fxml.FXMLLoader.loadImpl(FXMLLoader.java:2441)
at javafx.fxml.FXMLLoader.loadImpl(FXMLLoader.java:3214)
at javafx.fxml.FXMLLoader.loadImpl(FXMLLoader.java:3175)
at javafx.fxml.FXMLLoader.loadImpl(FXMLLoader.java:3148)
at javafx.fxml.FXMLLoader.loadImpl(FXMLLoader.java:3124)
at javafx.fxml.FXMLLoader.loadImpl(FXMLLoader.java:3104)
at javafx.fxml.FXMLLoader.load(FXMLLoader.java:3097)
at application.Main.start(Main.java:18)
at com.sun.javafx.application.LauncherImpl.lambda$launchApplication1$161(LauncherImpl.java:863)
at com.sun.javafx.application.PlatformImpl.lambda$runAndWait$174(PlatformImpl.java:326)
at com.sun.javafx.application.PlatformImpl.lambda$null$172(PlatformImpl.java:295)
at java.security.AccessController.doPrivileged(Native Method)
at com.sun.javafx.application.PlatformImpl.lambda$runLater$173(PlatformImpl.java:294)
at com.sun.glass.ui.InvokeLaterDispatcher$Future.run(InvokeLaterDispatcher.java:95)
at com.sun.glass.ui.win.WinApplication._runLoop(Native Method)
at com.sun.glass.ui.win.WinApplication.lambda$null$147(WinApplication.java:177)
at java.lang.Thread.run(Unknown Source)
Caused by: java.lang.NullPointerException: Children: child node is null: parent = VBox[id=vboxData]
at javafx.scene.Parent$2.onProposedChange(Parent.java:435)
at com.sun.javafx.collections.VetoableListDecorator.add(VetoableListDecorator.java:206)
at application.HotelReservationController.initialize(HotelReservationController.java:45)
at javafx.fxml.FXMLLoader.loadImpl(FXMLLoader.java:2548)
... 17 more

Here is the FXML File For the Card like Pane:

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

<?import javafx.scene.control.Button?>
<?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?>
<?import javafx.scene.text.Text?>

<AnchorPane fx:id="cardAnchor" xmlns="http://javafx.com/javafx/11.0.1" xmlns:fx="http://javafx.com/fxml/1">
   <children>
      <HBox fx:id="cardHBox" prefHeight="152.0" prefWidth="584.0">
         <children>
            <ImageView fx:id="cardPhoto" fitHeight="150.0" fitWidth="200.0" pickOnBounds="true" preserveRatio="true" />
            <VBox prefHeight="200.0" prefWidth="100.0">
               <children>
                  <Text fx:id="cardTitle" strokeType="OUTSIDE" strokeWidth="0.0" text="Ttile:" wrappingWidth="385.9830722808838">
                     <font>
                        <Font name="System Bold" size="31.0" />
                     </font>
                  </Text>
                  <HBox prefHeight="18.0" prefWidth="386.0">
                     <children>
                        <Text fx:id="cardLocation" strokeType="OUTSIDE" strokeWidth="0.0" text="Location:" wrappingWidth="211.9830722808838">
                           <font>
                              <Font name="System Bold" size="15.0" />
                           </font>
                        </Text>
                        <Text fx:id="cardRating" strokeType="OUTSIDE" strokeWidth="0.0" text="Rating:" wrappingWidth="172.9830722808838">
                           <font>
                              <Font name="System Bold" size="15.0" />
                           </font>
                        </Text>
                     </children>
                  </HBox>
                  <HBox prefHeight="100.0" prefWidth="200.0">
                     <children>
                        <Text fx:id="cardDescription" strokeType="OUTSIDE" strokeWidth="0.0" wrappingWidth="308.9830722808838" />
                        <Button fx:id="cardDetails" mnemonicParsing="false" prefHeight="89.0" prefWidth="79.0" text="Details" textAlignment="JUSTIFY" />
                     </children>
                  </HBox>
               </children>
            </VBox>
         </children>
      </HBox>
   </children>
</AnchorPane>

and here is the FXML for where the VBox is located:

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

<?import javafx.scene.control.Button?>
<?import javafx.scene.control.ScrollPane?>
<?import javafx.scene.control.SplitPane?>
<?import javafx.scene.layout.AnchorPane?>
<?import javafx.scene.layout.HBox?>
<?import javafx.scene.layout.VBox?>

<AnchorPane maxHeight="-Infinity" maxWidth="-Infinity" minHeight="-Infinity" minWidth="-Infinity" prefHeight="700.0" prefWidth="700.0" xmlns="http://javafx.com/javafx/11.0.1" xmlns:fx="http://javafx.com/fxml/1" fx:controller="application.HotelReservationController">
   <children>
      <SplitPane dividerPositions="0.14630681818181818" layoutX="-2.0" layoutY="-2.0" orientation="VERTICAL" prefHeight="706.0" prefWidth="708.0">
        <items>
          <AnchorPane minHeight="0.0" minWidth="0.0" prefHeight="85.0" prefWidth="162.0" style="-fx-background-color: brown;">
               <children>
                  <HBox layoutX="2.0" prefHeight="100.0" prefWidth="248.0" spacing="2.0" AnchorPane.bottomAnchor="0.0" AnchorPane.leftAnchor="0.0" AnchorPane.rightAnchor="0.0" AnchorPane.topAnchor="75.0">
                     <children>
                        <Button mnemonicParsing="false" style="-fx-background-color: #EE854E;" text="Home" />
                        <Button mnemonicParsing="false" style="-fx-background-color: #EE854E;" text="Hotels" />
                        <Button mnemonicParsing="false" style="-fx-background-color: #EE854E;" text="Cars" />
                        <Button mnemonicParsing="false" style="-fx-background-color: #EE854E;" text="Trips" />
                     </children>
                  </HBox>
               </children>
            </AnchorPane>
          <AnchorPane minHeight="0.0" minWidth="0.0" prefHeight="508.0" prefWidth="673.0" style="-fx-background-color: orange;">
               <children>
                  <ScrollPane fx:id="scrollPaneContent" layoutX="-1.0" layoutY="-2.0" prefHeight="605.0" prefWidth="708.0" style="-fx-background-color: orange;" AnchorPane.bottomAnchor="0.0" AnchorPane.leftAnchor="0.0" AnchorPane.rightAnchor="0.0" AnchorPane.topAnchor="0.0">
                     <content>
                        <VBox fx:id="vboxData" prefHeight="176.0" prefWidth="705.0" style="-fx-background-color: orange;" />
                     </content></ScrollPane>
               </children></AnchorPane>
        </items>
      </SplitPane>
   </children>
</AnchorPane>

and here is how I implemented it in java:

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


public class Main extends Application {

    public static void main(String[] args) {
        launch(args);
    }
    @Override
    public void start(Stage primaryStage) {
        try {
            AnchorPane root =(AnchorPane) FXMLLoader.load(Main.class.getResource("/application/HotelReservation.fxml"));
            
            Scene scene = new Scene(root);
            primaryStage.setScene(scene);
            primaryStage.setTitle("Hotel Reservation");
            primaryStage.show();
        } catch(Exception e) {
            e.printStackTrace();
        }
        
    }
}

......

import javafx.fxml.FXML;
import javafx.fxml.Initializable;
import javafx.scene.control.ScrollPane;
import javafx.scene.layout.AnchorPane;
import javafx.scene.layout.HBox;
import javafx.scene.layout.VBox;
import javafx.scene.text.Text;

public class HotelReservationController implements Initializable{
@FXML
    private ScrollPane scrollPaneContent;
    @FXML
    private VBox vboxData;
    @FXML
    private AnchorPane cardAnchor;
    @FXML
    private HBox cardHBox;

    @Override
        public void initialize(URL arg0, ResourceBundle arg1) {
            // TODO Auto-generated method stub
            vboxData.setSpacing(5);
            
            vboxData.getChildren().add(cardAnchor);
    //      for (int j = 0; j < 100; j++) {
    //          vboxData.getChildren().add(cardAnchor);
    //      }
            
        }

[mcve] please .. including app, controller, fxml, complete stacktrace — kleopatra, Dec 17 '20 at 12:28
maybe .. (doesn't look like the complete stacktrace, though - was formatting only :) .. and missing the app that's loading the fxml — kleopatra, Dec 17 '20 at 13:03
what app would be loading the fxml? do you mean something other than scene builder or something like that? i guess i added it, maybe you wanted to see the main — TestUser1, Dec 17 '20 at 13:07
There's no element in your `HotelReservation.fxml` file with `fx:id` set to `cardAnchor`, so `cardAnchor` is null in the controller. If I understand what you're trying to do, you need to load the other FXML in the controller. — James_D, Dec 17 '20 at 13:43
ahh .. again the formatting ... didn't expect two classes in one code block, better use two separate blocks :) But then @James_D already spotted the problem. — kleopatra, Dec 17 '20 at 13:49
@James_D how do i do that? also, did i implement things right? — TestUser1, Dec 17 '20 at 13:53
Well, if you're getting an exception and the application isn't doing what you want, then by definition you didn't implement things right. — James_D, Dec 17 '20 at 13:55

James_D · Accepted Answer · 2020-12-17T14:24:46.350

There is no element in HotelReservation.fxml with fx:id="cardAnchor", so cardAnchor is null in the controller, and you get the null pointer exception shown in your stack trace.

To "create instances of a FXML", you need to load the FXML. So I think what you are trying to do here is:

public class HotelReservationController implements Initializable{
    @FXML
    private ScrollPane scrollPaneContent;
    @FXML
    private VBox vboxData;
    @FXML
    private HBox cardHBox;

    @Override
    public void initialize(URL arg0, ResourceBundle arg1) {
        // unclear why you wouldn't do this in the FXML
        vboxData.setSpacing(5);

        // guessing at the path, will need to be set appropriately:
        URL cardURL = getClass().getResource("/application/Card.fxml");

        try {
            for (int j = 0; j < 100; j++) {
                Parent cardAnchor = FXMLLoader.load(cardURL);
                vboxData.getChildren().add(cardAnchor);
            }
        } catch (IOException exc) {
            exc.printStackTrace();
            System.exit(1);
        }
        
    }
}

it worked. thank you so much. also you should surround it with Try and Catch to work, and i added the vboxData.setSpacing(5) so i can test it dynamically and more easily — TestUser1, Dec 17 '20 at 14:06

JavaFX FXML:How to create new instances of a self made fxml to VBox

1 Answers1

Linked