Create a Circle on Clicking Button JavaFX - javafx

Question

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!

Answer 1

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);
}