如何使用按钮更改矩形

Question

I'm working on this example which is not working properly:

public class test extends Application
{

    private void init(Stage primaryStage)
    {

        Group root = new Group();
        primaryStage.setScene(new Scene(root));

        String pillButtonCss = DX57DC.class.getResource("PillButton.css").toExternalForm();

        // create 3 toggle buttons and a toogle group for them
        ToggleButton tb1 = new ToggleButton("Left Button");
        tb1.setId("pill-left");
        ToggleButton tb2 = new ToggleButton("Center Button");
        tb2.setId("pill-center");
        ToggleButton tb3 = new ToggleButton("Right Button");
        tb3.setId("pill-right");

        final ToggleGroup group = new ToggleGroup();
        tb1.setToggleGroup(group);
        tb2.setToggleGroup(group);
        tb3.setToggleGroup(group);
        // select the first button to start with
        group.selectToggle(tb1);

        //////////////////////////////////////////

        final VBox vbox = new VBox();

        final Rectangle rect1 = new Rectangle(300, 300);
        rect1.setFill(Color.ALICEBLUE);
        final Rectangle rect2 = new Rectangle(300, 300);
        rect2.setFill(Color.AQUA);
        final Rectangle rect3 = new Rectangle(300, 300);
        rect3.setFill(Color.AZURE);

        tb1.setUserData(rect1);
        tb2.setUserData(rect2);
        tb3.setUserData(rect3);

        group.selectedToggleProperty().addListener(new ChangeListener<Toggle>()
        {
            @Override
            public void changed(ObservableValue<? extends Toggle> ov, Toggle toggle, Toggle new_toggle)
            {
                if (new_toggle == null)
                {
                    //rect.setFill(Color.WHITE);
                }
                else
                {
                    vbox.getChildren().addAll((Node[]) group.getSelectedToggle().getUserData());
                    //rect.setFill((Color) group.getSelectedToggle().getUserData());
                }
            }
        });


        ///////////////////////////////////////////


        HBox hBox = new HBox();
        hBox.getChildren().addAll(tb1, tb2, tb3);
        hBox.setPadding(new Insets(20, 20, 260, 20));
        hBox.getStylesheets().add(pillButtonCss);



        vbox.getChildren().add(hBox);
        //vbox.getChildren().add(rect);

        root.getChildren().add(vbox);
    }

    @Override
    public void start(Stage primaryStage) throws Exception
    {
        init(primaryStage);
        primaryStage.show();
    }

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

I want to create several Rectangles(or object in which or object) in which I want to store data. I want to switch the Rectangles(objects) which are displayed in front of the user using the buttons. The example which I implemented is not working properly. Can you tell me what is the proper way to implement this?

Answer 1

You could create a Stackpane with the Rectangle and a Label with Text on top of it (if thats the data you want to store). Alternatively you can also set the Background of any Pane to have a colored Rectangle.

Than add this Pane as Userdata to the corresponding button and add the buttons userdata to your VBox on toggle.

final StackPane rect1pane = new StackPane();
final Rectangle rect1 = new Rectangle(300, 300);
rect1pane.getChildren().add(rect1);
rect1pane.getChildren().add(new Label("Some text"));
tb1.setUserData(rect1pane);

togglePropertyListener:

...
else{
//Delete rectangles added before ( or check if this one isnt already dispayed)
if(group.getSelectedToggle().getUserData() instanceof Node)
     vbox.getChildren().add((Node)group.getSelectedToggle().getUserData());
}

If you just want your example code to work change:

vbox.getChildren().addAll((Node[]) group.getSelectedToggle().getUserData());

to

vbox.getChildren().addAll((Node) group.getSelectedToggle().getUserData());

Because your just adding the Rectangle of the Selected ToggleButton it is only one and not an array.

Make your window bigger after a click to see the rectanlge (the 260px bottom padding doesn't help because even if the space is empty below hbox, it still is part of the hbox and cant get used by your added rectangle) or just move

 group.selectToggle(tb1);

to the last line of your init method ;)