CODEWITHSUNDEEP
javafx
sesmajster
sesmajster

Reputation: 762

JavaFX create radiobutton behavior in gridpane of VBox-es

I have code generated gridpane. I generates columns and rows based on data it gets from the server. I append a VBox that contains Label (on top) and ImageView (on bottom) to every cell. Each VBox is different. I look at each VBox as container. I would like to make each VBox selectable in radiobutton behavior - only one in the gridpane can be selected. This is my code for generating gridpane and generating VBoxes and appending them to cells in gridpane:

private void vBoxPickPane(List<Data> data){
    int columns = 3;
    int vBoxSpacing = 2;
    int cellWidth = 260;
    int cellHeight = 220;
    List<Label> labels = new ArrayList<Label>();
    List<ImageView> imageViews = new ArrayList<>();
    List<VBox> vBoxes = new ArrayList<>();

    for(int l=0; l != data.size(); l++){
        labels.add(new Label(data.get(l).getName()));
        imageViews.add(new ImageView(new Image(new File(data.get(l).getImgFileUrl()).toURI().toString())));
    }

    int labelIndex = 0;
    for(int u=0;u!=columns;u++){
        gridPane.getColumnConstraints().add(new ColumnConstraints(cellWidth));
    }

    for(int i=0; i <= data.size()/columns; i++){
        gridPane.getRowConstraints().add(new RowConstraints(cellHeight));
    }

    for(int i=0; i<data.size();i++){
        vBoxes.add(new VBox(vBoxSpacing));
        GridPane.setConstraints(vBoxes.get(i), i%columns, i/columns);
    }

    for(int o=0; o != imageViews.size(); o++){
        imageViews.get(o).setFitHeight(200);
        imageViews.get(o).setFitWidth(255);
    }

    for(int k = 0; k != labels.size(); k++){
        labels.get(k).setStyle("-fx-background-color:white;");
    }

    for(int u = 0; u != vBoxes.size(); u++){
        vBoxes.get(u).getChildren().addAll(labels.get(u), imageViews.get(u));
    }
    gridPane.getChildren().addAll(vBoxes);

}

The code requires a clean up which I'll do after I figure out how to make each cell clickable in radiobutton behavior.

I was thinking that maybe I should create VBox variable for selected one and then check if it already has value and if it does have value and another VBox is clicked then it would change to the one that is clicked. But I also have to let the user know that he selected one vbox and change it's background color or something similar. Also I don't know how I would create each cell as clickable.

Upvotes: 2

Views: 41

Answers (1)

sesmajster
sesmajster

Reputation: 762

I did it exactly like I thought I would.

    for(int u = 0; u != vBoxes.size(); u++){
        final VBox curr = vBoxes.get(u);
        curr.getChildren().addAll(labels.get(u), imageViews.get(u));
        curr.setOnMouseClicked(new EventHandler<MouseEvent>() {
            @Override
            public void handle(MouseEvent event) {
                if(selectedVbox != null){
                    //odselektaj
                    selectedVbox.setStyle("-fx-background-color: #272D2D;");
                }

                selectedVbox = curr;
                selectedVbox.setStyle("-fx-background-color: #e74c3c;");
            }
        });
    }

I did an override on handle method with setting click listener on each vboxes and then checking if one is already clicked and if not changed it's background and if it already was then I overwritten the variable.

Upvotes: 2

Related Questions