JavaFX - delimited toggle button

Question

Java FX Scen Builder contains a rather special kind of toggle button. Several buttons are visually combined and separated by a small vertical line:

I wonder how this is done. Somebody knows?

Answer 1

This is HBox ToggleButton all with the same ToggleGroup and custom css.

There is an example with the source code for displaying a similar control group in (in which the ensemble denotes the Pill button). I think the original license for the ensemble sample is BSD, so you can use it in your application. Go to Ensemble, find Pill in the example Ensemble application, click the "Save NetBeans Project ..." button on the sample Pill button and open the resulting project in NetBeans, the full code, css and supporting image files will be included in the project.

Answer 2

As a simplified alternative to custom CSS, the Controls FX project provides a Segmented Button control that allows you to visually group buttons just like the OP asked.

This is a BSD license, so I assume that it is safe to use in most cases. And the library has many other useful and well-designed controls.

The segmented button is as follows:

Very simple:

 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); 

Allows you to specify whether the choice should be mutually exclusive or not. For the second bwhaviour (without mutual exclusion) set the group of segmented buttons to null:

 seg.setToggleGroup(null); 

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