JavaFX - toggle button with separator

Question

The Java FX Scen Builder contains quite a special form of a toggle button. Several Buttons are visually concatenated and separated by a small vertical line:

I wonder how this is done. Does somebody have any idea?

Answer 1

It's an HBox of ToggleButton's all with the same ToggleGroup and custom css.

There is an example with source code of displaying a similar control group in the Ensemble sample application (which Ensemble terms a Pill Button). The Ensemble sample source license is BSD I think, so you should be able to use it in your app. Go to Ensemble, search for Pill in the Ensemble sample app, click on the "Save NetBeans Project..." button on the Pill Button sample and open the resultant project in NetBeans, full code, css and supporting image files will be included in the project.

Answer 2

As an easier alternative to custom CSS, the Controls FX project provides the Segmented Button control, that allow to visually group buttons just like OP asked.

It is BSD licensed so I guess safe to use in most cases. And the library has many other useful and well designed controls.

The segmented button looks like this :

Very straightforward to use :

ToggleButton tb1 = new Button("Red");
ToggleButton tb1 = new Button("Green");
ToggleButton tb1 = new Button("Blue");

SegmentedButton seg = new SegmentedButton();
seg.getButtons().addAll(tb1,tb2,tb3);
hbox.getChildren().add(seg);

It allows to specify if the selection should be mutually exclusive or not. For the second bwhaviour (non mutually exclusive) set the segmented buttons's group to null :

seg.setToggleGroup(null);

Source : http://controlsfx.bitbucket.org/org/controlsfx/control/SegmentedButton.html