How to use BreadCrumbBar in ControlsFX (JavaFX 8)

Question

I'm a Java beginner trying to use BreadCrumbBar from ControlsFX to make a navigation bar in a desktop application I'm making using JavaFX 8. I can't seem to be able to get the bar to work the way I want to, and searching for a tutorial online yielded no results. I've found the API but it doesn't help much.

My code is attached below:

@FXML
private BreadCrumbBar bread;

private TreeItem<String> tree, tree1, tree2;

@FXML
private void initialize(){
    tree = new TreeItem<String>("Log In");
    tree1 = new TreeItem<String>("Language Selection");
    tree2 = new TreeItem<String>("Patient List");
    tree.getChildren().addAll(tree1, tree2);
    bread.setSelectedCrumb(tree);
}

public void refresh(){
    bread.setSelectedCrumb(tree.nextSibling(bread.getSelectedCrumb()));
}

The bar appears as it should for the log in screen showing only "Log In" as the selected crumb.I'm calling refresh from the main class every time I want to shift to the next breadcrumb button but the bar just disappears when I move on from the first screen. Should't it set the selected crumb to the next sibling of tree i.e. tree1 ?

If anyone knows how to configure the autonavigation function that would be really helpful too. (possibly more helpful than sorting out my own code if it's easy to implement)

Thanks!

Answer 1

The BreadCrumbBar use a tree to display the navigation, so you should create the TreeItem in consequence.

Here is an example of a tree with 3 levels :

TreeItem<String> root = new TreeItem<String>("Root");
        
TreeItem<String> item1 = new TreeItem<String>("Item 1");
TreeItem<String> item11 = new TreeItem<String>("Item 1.1");
TreeItem<String> item12 = new TreeItem<String>("Item 1.2");
        
item1.getChildren().addAll(item11, item12);
        
TreeItem<String> item2 = new TreeItem<String>("Item 2");
        
root.getChildren().addAll(item1, item2);

Then you have a tree graphicaly represented like this :

                   <item11>
                 /
         <item1>
       /         \
<root>             <item12>
       \
         <item2>

When you use the BreadCrumbBar.setSelectedCrumb(TreeItem<?>) you select

the bottom-most path node (the node on the most-right side in terms of the bread crumb bar)

So if you use breadcrumb.selectedCrumbProperty().set(root); you will get :

And if you use breadcrumb.selectedCrumbProperty().set(item11); you will get :

Hope it helps, I actually am trying to figure out how it works too ^^