Skip to content
Advertisement

How to create Radio buttons with 2-Way Exclusivity in JavaFx [closed]

I want to build something like this. From a k value and Map<String,List> I want to build a scoring system, the k value is the number of the maximum vote, the map has as keys the names of some groups of people and as values the list of people’s names.

Here we have a ugly and not working preview with k=3

<table>
<tr>
    <th></th>
    <th>1</th>
    <th>2</th>
    <th>3</th>
</tr>
Group1
<tr>
    <td>Name11</td>
    <td><input type="radio" name="row-1"></td>
    <td><input type="radio" name="row-1"></td>
    <td><input type="radio" name="row-1"></td>
</tr>
<tr>
    <td>Name12</td>
    <td><input type="radio" name="row-2"></td>
    <td><input type="radio" name="row-2"></td>
    <td><input type="radio" name="row-2"></td>
</tr>
<tr>
    <td>Name13</td>
    <td><input type="radio" name="row-3"></td>
    <td><input type="radio" name="row-3"></td>
    <td><input type="radio" name="row-3"></td>
</tr>
</table>

<table>
<tr>
    <th></th>
    <th>1</th>
    <th>2</th>
    <th>3</th>
</tr>
<br>
Group2
<tr>
    <td>Name21</td>
    <td><input type="radio" name="row-4"></td>
    <td><input type="radio" name="row-4"></td>
    <td><input type="radio" name="row-4"></td>
</tr>
<tr>
    <td>Name22</td>
    <td><input type="radio" name="row-5" name="col-1"></td>
    <td><input type="radio" name="row-5"></td>
    <td><input type="radio" name="row-5"></td>
</tr>

</table>

Advertisement

Answer

I agree with what @jewelsea mentioned in the comments. Having said that, after going through the demo in the link, I thought to give a try and see how this can be achieved.

So far the trick I am using is:

  • Set toggle groups on either by rows or columns.
  • Create a two dimensional array by the opposite of what you choosed for toogle groups. I mean,
    • if you choose toggle groups by rows, then create a 2D array by columns as first dimension.
    • if you choose toggle groups by columns, then create a 2D array by rows first dimension.

Now when a radio button is selected, the toggle group will take care of one dimension toggling..and all you need is to check the other dimension radioButtons and select the correct one.

Below is the code of the logic:

enter image description here

import javafx.application.Application;
import javafx.geometry.Insets;
import javafx.scene.Scene;
import javafx.scene.control.RadioButton;
import javafx.scene.control.ToggleGroup;
import javafx.scene.layout.GridPane;
import javafx.stage.Stage;

public class TwoWayRadioButtonDemo extends Application {
    @Override
    public void start(Stage stage) throws Exception {
        int k = 4;
        GridPane root = new GridPane();
        root.setPadding(new Insets(50));
        root.setHgap(60);
        root.setVgap(60);

        RadioButton[][] buttons = new RadioButton[k][k];
        for (int i = 0; i < k; i++) {
            ToggleGroup tg = new ToggleGroup();
            double r = i;
            for (int j = 0; j < k; j++) {
                RadioButton radio = new RadioButton();
                radio.setToggleGroup(tg);
                buttons[j][i] = radio;
                int c = j;
                radio.selectedProperty().addListener((obs, old, val) -> {
                    if (val) {
                        for (int t = 0; t < buttons[c].length; t++) {
                            buttons[c][t].setSelected(t == r);
                        }
                    }
                });
                root.add(radio, j, i);
            }
        }
        Scene scene = new Scene(root);
        stage.setScene(scene);
        stage.setTitle("2 Way Radio Button");
        stage.show();
    }
}
User contributions licensed under: CC BY-SA
10 People found this is helpful
Advertisement