Java Tutorial #12 Creating a graphical user interface with event handlers(actually using the buttons)
Previous tutorial https://steemit.com/java/@nicetea/java-tutorial-11-using-pipes-and-synchronized-to-read-and-write-data
In this tutorial, we will build a simple graphical user interface with java and use buttons to change the text from a label. As usual, here is the code first:
Main.java
package Javafx;
import javafx.event.ActionEvent;
import javafx.event.EventHandler;
import javafx.geometry.Pos;
import javafx.geometry.Rectangle2D;
import javafx.application.Application;
import javafx.scene.*;
import javafx.scene.control.Button;
import javafx.scene.control.Label;
import javafx.scene.layout.HBox;
import javafx.scene.layout.StackPane;
import javafx.stage.*;
public class Main extends Application{
public static void main(String[] args){
launch(args);
}
@Override
public void start(Stage st) throws Exception {
HBox hb = new HBox();
hb.setAlignment(Pos.CENTER);
hb.setSpacing(10);
Button b = new Button("Click me!");
Button b2 = new Button("Click me, too!");
final Label l = new Label("");
hb.getChildren().addAll(b,b2,l);
Scene s = new Scene(hb,500,700);
st.setX(100);
st.setY(100);
st.setResizable(false);
st.setScene(s);
st.show();
/* HANDLERS */
b.setOnAction(new EventHandler<ActionEvent>(){
public void handle(ActionEvent arg0) {
l.setText("Clicked: Click me!");
}
});
b2.setOnAction(new EventHandler<ActionEvent>(){
public void handle(ActionEvent arg0) {
l.setText("Clicked: Click me too!");
}
});
}
}
So first, we will declare some attributes and objects:
HBox hb = new HBox();
hb.setAlignment(Pos.CENTER);
hb.setSpacing(10);
Button b = new Button("Click me!");
Button b2 = new Button("Click me, too!");
final Label l = new Label("");
hb.getChildren().addAll(b,b2,l);
Scene s = new Scene(hb,500,700);
st.setX(100);
st.setY(100);
st.setResizable(false);
st.setScene(s);
st.show();
We will create a HBox and position the items on it into the center and set the spacing between the items to "10px". Now we are creating 2 buttons and a label which will be used to interact with the app. with the command hb.getChildren().addAll()
, we will add the elements we want to be displayed to the screen. Lastly, we will add the hbox to the Scene s
and set the dimensions of the interface to 500x700.
With the commands st.setX()
and st.SetY()
, we can move the app 100px from the top left corner to the right and 100px to the bottom. Then, we can set setResizeable(false)
if we don't want the user to resize the app with the mouse. After that, we add the scene to the actual stage and then show it.
So good so far, we managed to create a graphical user interface!
But it's boring right? It doesn't do anything... yet! So let's come to the second part of this tutorial. The handlers.
b.setOnAction(new EventHandler<ActionEvent>(){
public void handle(ActionEvent arg0) {
l.setText("Clicked: Click me!");
}
});
b2.setOnAction(new EventHandler<ActionEvent>(){
public void handle(ActionEvent arg0) {
l.setText("Clicked: Click me too!");
}
});
So with the method
b.setOnAction(new EventHandler<ActionEvent(){
public void handle(ActionEvent arg0) {
we will create a listener, that will wait until the button is clicked and then execute whatever is inside the function.
In our case, we will just change the text of the labels.