Placing a JavaFX custom control in a GridPane - javafx

Question

I followed Oracle's Mastering FXML tutorial, specifically the tutorial for making a custom control, works fine as a standalone. But if I want to place this custom control in a GridPane, how can I place it with the GridPane's column and row attributes? Trying to place the custom control in the FXML file just gives me an error that the class is not a valid type.
My custom control FXML (view_navigation.fxml):
<?xml version="1.0" encoding="UTF-8"?>
<?import javafx.scene.*?>
<?import javafx.scene.control.*?>
<?import javafx.scene.layout.*?>
<?import javafx.scene.image.Image?>
<?import javafx.scene.image.ImageView?>
<fx:root type="javafx.scene.layout.HBox" xmlns:fx="http://javafx.com/fxml">
<Button>
<graphic>
<ImageView>
<Image url="#/toolbarButtonGraphics/navigation/Back24.gif"/>
</ImageView>
</graphic>
</Button>
<Button text="Add Entry" />
<Button text="Change Entry" />
<Button text="View List" />
<Button>
<graphic>
<ImageView>
<Image url="#/toolbarButtonGraphics/navigation/Forward24.gif"/>
</ImageView>
</graphic>
</Button>
</fx:root>
Its associated class (ViewNavigationControl.java):
import java.io.IOException;
import javafx.fxml.FXMLLoader;
import javafx.scene.layout.HBox;
public class ViewNavigationControl extends HBox {
public ViewNavigationControl() {
FXMLLoader fxmlLoader = new FXMLLoader(getClass().getResource("view_navigation.fxml"));
fxmlLoader.setRoot(this);
fxmlLoader.setController(this);
try {
fxmlLoader.load();
} catch (IOException exception) {
throw new RuntimeException(exception);
}
}
}
Placing it at the bottom of the parent view's GridPane, per the very last paragraph in the tutorial:
....
<HBox GridPane.columnIndex="0" GridPane.rowIndex="3" GridPane.columnSpan="2">
<ViewNavigationControl />
</HBox>
</GridPane>
I get javafx.fxml.LoadException: ViewNavigationControl is not a valid type.
THANKS for any help at all!