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!

Can you add the code for MainClass, where you are loading the FXML and calling the `refresh()`? — ItachiUchiha, Jun 19 '15 at 06:56
I'm not using that structure anymore so won't really make sense. I can get the breadcrumbs to show up not but clicking does nothing. Working on it! — Jay Vaidya, Jun 22 '15 at 06:28

score 12 · Accepted Answer · edited Apr 17 '23 at 12:44

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 :

enter image description here

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

enter image description here

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

Thanks that did help! I'd upvote if I had the rep :D Can't figure out how to get AutoNavigation working though. If you manage to get that let me know. — Jay Vaidya, Jun 22 '15 at 06:26
@JayVaidya the `autoNavigationEnabled` is by default enabled. You can see it when you click an item of the BreadCrumbBar : The clicked item will become the most-right item. But you still have to listen for the event of the BreadCrumbBar being changed. To experiment it yourself, play with the `autoNavigationEnabled` with a `System.out.println()` in the `onCrumbAction` listener — Torarn, Jun 23 '15 at 07:20

How to use BreadCrumbBar in ControlsFX (JavaFX 8)

1 Answers1