Chika Okereke Chika has written much of the JavaFX converter and also helps with the HTML5 converter. When not experimenting with the new features of JavaFX, he is a keen basketball player (he is the tall guy you might see at Devoxx).

PDF to FXML conversion – Creating a FXML application with NetBeans: Adding Buttons

1 min read

Just as promised in my previous blog, this blog post will add more functionality to that of the previous application. I am going to show how to add a button to the application using the fx:id in the fxml file and the @FXML annotation in the java file.

Firstly, open up your Sample.fxml and add the following code.

<Button text="Test" layoutX="34" layoutY="20" prefWidth="120"
prefHeight="120" />

This generates a button called “Test” in the coordinates (34,20) on the canvas set to 120×120 dimensions. This should look something like this.

Now to breathe some life into the button (give the button some actions). First of all add an fx:id to the Button tag, this allows you to change the buttons attributes in the fxml file through the java file. This is what i have chosen to call my button fx:id=”button“.

<Button fx:id="button" text="Test" layoutX="34" layoutY="20"
prefWidth="120" prefHeight="120" />

Now we are going to jump into the JavaFXMLTutorial.java file and create a Button object with a matching variable name to the fx:id. In this case Button button, in order for these two objects to be linked you need to include the @FXML annotation. Copy and paste the code below into your file.

@FXML Button button;

And then right click and click on “fix imports” and make sure you import javafx.scene graph elements were possible. Then click ok.

Now that both objects are linked, lets add some actions to the button. I have chosen to call the method textColor (reason would be obvious in time). Just like when linking the variables we’d need to use the @FXML annotation again.

@FXML
private void textColor(ActionEvent event) {

    String red, blue, green;
    red = "-fx-text-fill: rgb(255,32,32);";
    green = "-fx-text-fill: rgb(0,232,0);";
    blue = "-fx-text-fill: rgb(0,0,255);";

    if (button.getStyle().isEmpty()) {
       button.setStyle(red + "-fx-font: 20pt \'Tahoma Bold\';");
    } else if (button.getStyle().contains(red)) {
       button.setStyle(green + "-fx-font: 34pt \"Tahoma Bold\";");
    } else if (button.getStyle().contains(green)) {
       button.setStyle(blue + "-fx-font: 48pt \"Tahoma Bold\";");
    } else {
       button.setStyle("");
    }
}

This method can be copied and pasted directly into your java class however, you’d need to import the ActionEvent libraries. Same drill, right click and “Fix Imports” (don’t forget to choose the JavaFx libraries where applicable). Now to make sure that the button in the Sample.fxml is aware of the method textColor we are going to add the attribute “onAction” to the button node and prefix it with a hash tag to symbolise that the proceeding text isn’t just string value but a method name. i.e.  onAction=”#textColor“.

<Button fx:id= "button" onAction="#textColor" text="Test"
layoutX="34" layoutY="20" prefWidth="120" prefHeight="120" />

The text “Test” in the button should change colour and size with every click. Like this.

Let me know what else you would like to see added to these tutorials. Now we have a functional button why don’t you try these out and see what cool things you can make your buttons do. In the next blog I will talk about adding images to the scene graph as well as to a button.

This post is part of our “NetBeans article Index” series. In these articles, we aim to explore NetBeans in different ways, from useful hint and tips, to our how-to’s, experiences and usage of the NetBeans IDE.

 

Chika Okereke Chika has written much of the JavaFX converter and also helps with the HTML5 converter. When not experimenting with the new features of JavaFX, he is a keen basketball player (he is the tall guy you might see at Devoxx).

Leave a Reply

Your email address will not be published. Required fields are marked *