DEV Community

Cover image for RadioButton
Paul Ngugi
Paul Ngugi

Posted on

RadioButton

Radio buttons, also known as option buttons, enable the user to choose a single item from a group of choices. In appearance radio buttons resemble check boxes, but check boxes display a square that is either checked or blank, whereas radio buttons display a circle that is either filled (if selected) or blank (if not selected).

RadioButton is a subclass of ToggleButton. The difference between a radio button and a toggle button is that a radio button displays a circle, but a toggle button is rendered similar to a button. The UML diagrams for ToggleButton and RadioButton are shown in Figure below.

Image description

Here is an example of a radio button with text US, a graphic image, green text color, and black border, and initially selected.

RadioButton rbUS = new RadioButton("US");
rbUS.setGraphic(new ImageView("image/usIcon.gif"));
rbUS.setTextFill(Color.GREEN);
rbUS.setContentDisplay(ContentDisplay.LEFT);
rbUS.setStyle("-fx-border-color: black");
rbUS.setSelected(true);
rbUS.setPadding(new Insets(5, 5, 5,));

Image description

To group radio buttons, you need to create an instance of ToggleGroup and set a radio button’s toggleGroup property to join the group, as follows:

ToggleGroup group = new ToggleGroup();
rbRed.setToggleGroup(group);
rbGreen.setToggleGroup(group);
rbBlue.setToggleGroup(group);

This code creates a button group for radio buttons rbRed, rbGreen, and rbBlue so that buttons rbRed, rbGreen, and rbBlue are selected mutually exclusively. Without grouping, these buttons would be independent.

When a radio button is changed (selected or deselected), it fires an ActionEvent. To see if a radio button is selected, use the isSelected() method.

We now give a program that adds three radio buttons named Red, Green, and Blue to the preceding example to let the user choose the color of the message, as shown in Figure below.

Image description

Again there are at least two approaches to writing this program. The first is to revise the preceding CheckBoxDemo class to insert the code for adding the radio buttons and processing their events. The second is to define a subclass that extends CheckBoxDemo. Listing 16.4 gives the code to implement the second approach.

package application;
import javafx.application.Application;
import javafx.geometry.Insets;
import javafx.scene.control.RadioButton;
import javafx.scene.control.ToggleGroup;
import javafx.scene.layout.BorderPane;
import javafx.scene.layout.VBox;
import javafx.scene.paint.Color;

public class RadioButtonDemo extends CheckBoxDemo {
    @Override // Override the getPane() method in the super class
    protected BorderPane getPane() {
        BorderPane pane = super.getPane();

        VBox paneForRadioButtons = new VBox(20);
        paneForRadioButtons.setPadding(new Insets(5, 5, 5, 5));
        paneForRadioButtons.setStyle("-fx-border-color: green");
        paneForRadioButtons.setStyle("-fx-border-width: 2px; -fx-border-color: green");
        RadioButton rbRed = new RadioButton("Red");
        RadioButton rbGreen = new RadioButton("Green");
        RadioButton rbBlue = new RadioButton("Blue");
        paneForRadioButtons.getChildren().addAll(rbRed, rbGreen, rbBlue);
        pane.setLeft(paneForRadioButtons);

        ToggleGroup group = new ToggleGroup();
        rbRed.setToggleGroup(group);
        rbGreen.setToggleGroup(group);
        rbBlue.setToggleGroup(group);

        rbRed.setOnAction(e -> {
            if(rbRed.isSelected()) {
                text.setFill(Color.RED);
            }
        });

        rbGreen.setOnAction(e -> {
            if(rbGreen.isSelected()) {
                text.setFill(Color.GREEN);
            }
        });

        rbBlue.setOnAction(e -> {
            if(rbBlue.isSelected()) {
                text.setFill(Color.BLUE);
            }
        });

        return pane;
    }

    public static void main(String[] args) {
        Application.launch(args);
    }
}

Enter fullscreen mode Exit fullscreen mode

RadioButtonDemo extends CheckBoxDemo and overrides the getPane() method (line 12). The new getPane() method invokes the getPane() method from the CheckBoxDemo class to create a border pane that contains the check boxes, buttons, and a text (line 13). This border pane is returned from invoking super.getPane(). The radio buttons are created and added to paneForRadioButtons (lines 19–22). paneForRadioButtons is added to the border pane (lines 23).

The radio buttons are grouped together in lines 25–28. The handlers for processing the action event on radio buttons are created in lines 30–46. It sets the appropriate color based on the status of the radio buttons.

The start method for this JavaFX program is defined in ButtonDemo and inherited in CheckBoxDemo and then in RadioButtonDemo. So when you run RadioButtonDemo, the start method in ButtonDemo is invoked. Since the getPane() method is overridden in RadioButtonDemo, the method in RadioButtonDemo is invoked from line 40 in the post, ButtonDemo.java.

Top comments (0)