Implement Path Navigation bar (Breadcrumb bar) control [closed]

Question

I want to generate an UI where someone can navigate through the path of a tree structure. Here is an example of what I want, taken from JavaFX Scene Builder.

Depending on the actual position in an TreeView, this UI is updated. By clicking on individual items the tree is updated.

My question: What Nodes/Controls are best used for this approach? (no full code required. Just mention the name of the controls).

My first idea is to generate a row of buttons closely to each other, but maybe there are better ideas.

Thanks.

Jot

This question is probably too broad, simply because there are so many different ways you could do this. I assume you mean TreeView, not TableView here? I would probably try with ToggleButtons in a single ToggleGroup. You can register a listener with the ToggleGroup's selectedToggleProperty to update the selection in the tree, and register a listener with the tree's selection model to select a particular ToggleButton. – Bohner

Thank you. You are right, i meant TreeView. I'll have a look at ToggleButton. – Jot

Have a look at JavaFX ESSEMBLES online . – Papaveraceous

Answer 1

You can use ControlsFx's BreadCrumbBar

Pane root = ...
Label selectedCrumbLbl = new Label();

BreadCrumbBar<String> sampleBreadCrumbBar = new BreadCrumbBar<>();
root.getChildren().addAll(sampleBreadCrumbBar, selectedCrumbLbl);

TreeItem<String> model = BreadCrumbBar.buildTreeModel("Hello", "World", "This", "is", "cool");
sampleBreadCrumbBar.setSelectedCrumb(model);

sampleBreadCrumbBar.setOnCrumbAction(new EventHandler<BreadCrumbBar.BreadCrumbActionEvent<String>>() {
        @Override public void handle(BreadCrumbActionEvent<String> bae) {
            selectedCrumbLbl.setText("You just clicked on '" + bae.getSelectedCrumb() + "'!");
        }
});

https://github.com/controlsfx/controlsfx/blob/master/controlsfx-samples/src/main/java/org/controlsfx/samples/button/HelloBreadCrumbBar.java

Lucchesi

Answer 2

The chosen solution did not work for me. I had to listen to the selectedCrumbProperty.

TreeItem<String> helloView = new TreeItem("Hello");
TreeItem<String> worldView = new TreeItem("World");
hellowView.getChildren().add(worldView);
TreeItem<String> thisView = new TreeItem("This");
worldView.getChildren().add(thisView);
TreeItem<String> isView = new TreeItem("is");
thisView.getChildren().add(isView);
BreadCrumbBar<String> sampleBreadCrumbBar = new BreadCrumbBar<>(helloView);
sampleBreadCrumbBar.setSelectedCrumb(helloView);

sampleBreadCrumbBar.selectedCrumbProperty().addListener((observable, oldValue, newValue) -> { 
    System.out.println(newValue);
    if (newValue == worldView) {
        //load this view
    }
});

I typed this directly into the answer. There may be errors. Leave a note.

Cote