토글 버튼

In Steps 5 and 6 of the preceding exercise, you interacted with buttons that have two states: selected and not selected. The buttons in Step 5 are toggle buttons, as are the buttons in Step 6. The buttons in Step 5 operate independently of each other, but only one of the buttons in Step 6 can be in the selected (depressed) state at any given time. The following snippet from Listing 6-4 contains the code behind one of the buttons in Step 5.

ToggleButton boldButton = new ToggleButton();
boldButton.setGraphic(new Circle(8, Color.MAROON));
boldButton.setId("boldButton");
boldButton.setOnAction(e -> {
    ToggleButton tb = ((ToggleButton) e.getTarget());
    System.out.print(e.getEventType() + " occurred on ToggleButton "
            + tb.getId());
    System.out.print(", and selectedProperty is: ");
    System.out.println(tb.selectedProperty().getValue());
});

This use case is the classic Bold button in many document editing applications, where the Bold button is either selected or not selected. The ToggleButton shown in the preceding snippet contains this dual-state functionality, so it is a natural fit for this use case.

The onAction() event handler in this snippet demonstrates how you can ascertain the state of the ToggleButton as a result of being clicked. As shown in the snippet, use the getTarget() method of the ActionEvent to obtain a reference to the ToggleButton; then use its selectedProperty() method to get a reference to its selected property. Finally, use the getValue() method to get the value (either true or false) of the selected property.

토글 그룹

As pointed out in the previous section, only one of the buttons in Step 6 of the preceding exercise can be in the selected (depressed) state at any given time. The following snippet from Listing 6-4 contains the code behind one of the buttons in Step 6.

final ToggleGroup alignToggleGroup = new ToggleGroup();
ToggleButton leftAlignButton = new ToggleButton();
leftAlignButton.setGraphic(new Circle(8, Color.PURPLE));
leftAlignButton.setId("leftAlignButton");
leftAlignButton.setToggleGroup(alignToggleGroup);
...
    alignToggleGroup.selectToggle(alignToggleGroup.getToggles().get(0));
    alignToggleGroup.selectedToggleProperty().addListener((ov, oldValue, newValue) -> {
    ToggleButton tb = ((ToggleButton) alignToggleGroup.getSelectedToggle());
    if (tb != null) {
        System.out.println(tb.getId() + " selected");
    }
});

This use case is the classic Left-Alignment button in many document editing applications, where only one of the Alignment buttons may be selected at any given time. The ToggleGroup instance is passed into the setToggleGroup() method of the ToggleButton shown in the preceding snippet to provide this mutually exclusive behavior.

In addition to providing mutual exclusivity, the ToggleGroup instance is used in this snippet for two purposes:

  1. To initially select the first ToggleButton in the group, by using the selectToggle() method of the ToggleGroup instance.

  2. To detect when the currently selected ToggleButton changes. This is accomplished by adding a ChangeListener to the selectedToggle property of the ToggleGroup, and then using its getSelectedToggle() method to ascertain which ToggleButton is currently selected. Note that this is generally preferred over putting an onAction event handler in each of the toggle buttons that are participating in a toggle group.