Custom FXML component (w/ controller) doesn't appear in SceneBuilder's “Import jar” dialog

Question

I am following this in creating a custom component and importing it. However, when it gets to the Import Dialog after clicking the jar file, it does not appear. When I comment out the code the tutorial used for the constructor, it appears again. However, none of the subcomponents I used to make the custom one appear. Why and how do I fix it?

Also, I am using a VBox instead of an AnchorPane (as seen in the tutorial) for my own thing.

Code of constructor as seen in tutorial:

public CommodityImageLabel() {
    FXMLLoader fxmlLoader = new FXMLLoader(
            getClass().getResource("/fxml/CommodityImageLabel.fxml"));

    fxmlLoader.setRoot(this);
    fxmlLoader.setController(this);

    try {
        fxmlLoader.load();
    } catch (IOException exception) {
        throw new RuntimeException(exception);
    }

}

Code for my own example's constructor:

public While() {
    FXMLLoader fxmlLoader = new FXMLLoader(
            getClass().getResource("BlocksFXML/While.fxml"));


    fxmlLoader.setRoot(this);
    fxmlLoader.setController(this);

    try {
        fxmlLoader.load();
    } catch (IOException exception) {
        throw new RuntimeException(exception);
    }
}

Edit1: I tried commenting out parts of the code, and when I comment out the try-catch part, it makes the component appear in the dialog, but it still doesn't show the subcomponents.

Edit 2: The custom component is basically a VBox containing an Hbox with a Label and a TextField. Here is what it's supposed to look like vs what ends up looking like when it successfully imports without the try-catch part.

Answer 1

I solved this using the information here:

http://www.cuchazinteractive.com/blog/custom-javafx-controls-and-scene-builder

To summarise:

1. Create an FXML file and a Java class that extends the root node (I gave them the same name)
2. Change the FXML file to have fx:root as the base node. (will not work without this)
3. Remove the fx:controller attribute (will not work without this)
4. Compile and add the jar to scene builder

However, I have found that if your custom control depends on controls from other libraries, it will fail even if the other library is loaded in scene builder.

Below is a minimum working example

FXML:

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

<?import javafx.scene.control.Button?>
<?import javafx.scene.layout.AnchorPane?>


<fx:root id="AnchorPane" prefHeight="73.0" prefWidth="112.0" type="AnchorPane" xmlns:fx="http://javafx.com/fxml/1" xmlns="http://javafx.com/javafx/8.0.111">
   <children>
      <Button layoutX="25.0" layoutY="28.0" mnemonicParsing="false" text="Button" />
   </children>
</fx:root>

Java:

package my.amazing.controls;

import java.io.IOException;
import javafx.fxml.FXML;
import javafx.fxml.FXMLLoader;
import javafx.scene.layout.AnchorPane;

public class TestControl extends AnchorPane {


    public TestControl() throws IOException {
        FXMLLoader loader = new FXMLLoader(getClass().getResource("TestControl.fxml"));
        loader.setRoot(this);
        loader.setController(this);
        loader.load();
    }

    @FXML
    public void initialize() {
    }
}