[FIXED] Create a Circle on Clicking Button JavaFX

Issue

I try to create a new shape (Circle for this example) by clicking a button. I'm not completely in JavaFX yet so there are small problems in executing. I'm familiar with changing sizes, colors and so on of existing shapes, but I don't know how to create something on a click. My Controller and my Main so far:

package javafxapplication1;

import javafx.application.Application;
import javafx.event.ActionEvent;
import javafx.fxml.FXML;
import javafx.fxml.FXMLLoader;
import javafx.scene.Parent;
import javafx.scene.Scene;
import javafx.scene.paint.Color;
import javafx.scene.shape.Circle;
import javafx.stage.Stage;

/**
 *
 * @author Tom
 */
public class JavaFXApplication1 extends Application {

    @Override
    public void start(Stage stage) throws Exception {
        Parent root = FXMLLoader.load(getClass().getResource("FXMLDocument.fxml"));

        Scene scene = new Scene(root);

        stage.setScene(scene);
        stage.show();

    }

    /**
     * @param args the command line arguments
     */
    public static void main(String[] args) {
        launch(args);
    }

}

--------------------here starts the controller---------------

package javafxapplication1;

import java.awt.Paint;
import java.net.URL;
import java.util.ResourceBundle;
import javafx.event.ActionEvent;
import javafx.fxml.FXML;
import javafx.fxml.Initializable;
import javafx.scene.control.Button;
import javafx.scene.control.Label;
import javafx.scene.paint.Color;
import javafx.scene.shape.Circle;

/**
 *
 * @author Tom
 */
public class FXMLDocumentController implements Initializable {

    @FXML
    private Button btn;


    @FXML
    public void pressButton(ActionEvent event){
       Circle kreis1;
        kreis1 = new Circle(200, 200, 10, Color.BLACK);

    }

    @Override
    public void initialize(URL url, ResourceBundle rb) {
        // TODO
    }    
}

Could you please help me? I need these basics but can't find any explanation online! Thx in advance!

Solution

You actually almost did it, only missing two things.

First of all you did not include FXMLDocument.fxml but I assume pressButton method is bound to the onAction event of the button.

You created a Circle on your button action, now you need to add that circle to a pane. Without adding to a pane that circle would not be seen.

For example if we had this fxml;

<AnchorPane fx:id="root" prefHeight="400.0" prefWidth="600.0" xmlns="http://javafx.com/javafx/8.0.111" xmlns:fx="http://javafx.com/fxml/1" fx:controller="sample.Controller">
   <children>
      <Button fx:id="btn" layoutX="271.0" layoutY="331.0"  onAction="#pressButton" text="Button" />
   </children>
</AnchorPane>

We have an AnchorPane with fx:id="root" and we want to add circles to that on button action.

Now in our controller class, we need to bind the AnchorPane

@FXML private AnchorPane root;

Now just add your circle to this root in your pressButton method.

@FXML
public void pressButton(ActionEvent event){
   Circle kreis1;
   kreis1 = new Circle(200, 200, 10, Color.BLACK);
   root.getChildren().add(kreis1);
}

That would create a circle in x,y coordinates 200,200.

For example this pressButton method would create circles with random coordinates and random colors in the Pane.

@FXML
public void pressButton(ActionEvent event) {

    Random rand = new Random();
    int  x = rand.nextInt(500) + 1;
    int  y = rand.nextInt(400) + 1;
    int r = rand.nextInt(40) + 10;
    double red = rand.nextDouble();
    double green = rand.nextDouble();
    double blue = rand.nextDouble();

    Circle kreis1;
    kreis1 = new Circle(x, y, r, new Color(red, green, blue,1));

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

Answered By - Eralp Sahin
Answer Checked By - Katrina (JavaFixing Volunteer)