JavaFX Tutorial - JavaFX Button








The JavaFX Button class can trigger event when a user clicks a button.

The Button class extends the Labeled class, which can display text, an image, or both.

The following code shows how to add Click action listener to Button. 

import javafx.application.Application;
import javafx.event.ActionEvent;
import javafx.event.EventHandler;
import javafx.scene.Scene;
import javafx.scene.control.Button;
import javafx.scene.layout.StackPane;
import javafx.stage.Stage;
 //from   w w  w.j  av  a  2s  . c  o  m
public class Main extends Application {
    public static void main(String[] args) {
        launch(args);
    }
    @Override
    public void start(Stage primaryStage) {
        primaryStage.setTitle("Hello World!");
        Button btn = new Button();
        btn.setText("Say 'Hello World'");
        btn.setOnAction(new EventHandler<ActionEvent>() {
            @Override
            public void handle(ActionEvent event) {
                System.out.println("Hello World!");
            }
        });
        
        StackPane root = new StackPane();
        root.getChildren().add(btn);
        primaryStage.setScene(new Scene(root, 300, 250));
        primaryStage.show();
    }
}

The code above generates the following result.

null




Creating a Button

We use the following constructors to create a Button in JavaFX.

To create a button with an empty text caption.

Button button = new Button();

To create a button with the specified text.

Button button = new Button("OK");

To create a button with the text and icon. 

Image imageOk = new Image(getClass().getResourceAsStream("OK.png"));
Button button = new Button("OK", new ImageView(imageOk));

Button Content

After creating a JavaFX Button object we can use the following methods to set text and install an icon.

  • setText(String text) - set the text caption for the button
  • setGraphic(Node graphic) - set the icon

Other than ImageView object we can use shapes from the javafx.scene.shape package as the graphic element in a Button.

setGraphicTextGap method to set the gap between text and graphical content.

The following code installs an image to a button.

Image okImage = new Image(getClass().getResourceAsStream("OK.png"));
button.setGraphic(new ImageView(okImage));




Button Action

We can use the setOnAction method from the Button class to add click event handler for user-click event. 

button.setOnAction((ActionEvent e) -> {
    System.out.println("clicked");
});

Button Effects

We can apply the effects in the javafx.scene.effect package to a button.

The following code applies the DropShadow effect to a button. 

DropShadow shadow = new DropShadow();
button.setEffect(shadow);
button.setEffect(null);//remove the effect

The following code shows how to Set Shadow effect for Button. 

import javafx.application.Application;
import javafx.event.EventHandler;
import javafx.scene.Group;
import javafx.scene.Scene;
import javafx.scene.control.Button;
import javafx.scene.effect.DropShadow;
import javafx.scene.input.MouseEvent;
import javafx.scene.layout.VBox;
import javafx.stage.Stage;
//  ww w .jav a  2 s .  c om
public class Main extends Application {
  DropShadow shadow = new DropShadow();
  public static void main(String[] args) {
    launch(args);
  }

  @Override
  public void start(Stage stage) {
    Scene scene = new Scene(new Group());
    stage.setTitle("Button Sample");
    stage.setWidth(300);
    stage.setHeight(190);

    VBox vbox = new VBox();
    vbox.setLayoutX(20);
    vbox.setLayoutY(20);

    final Button button1 = new Button("Accept");

    button1.addEventHandler(MouseEvent.MOUSE_ENTERED,
        new EventHandler<MouseEvent>() {
          @Override
          public void handle(MouseEvent e) {
            button1.setEffect(shadow);
          }
        });

    button1.addEventHandler(MouseEvent.MOUSE_EXITED,
        new EventHandler<MouseEvent>() {
          @Override
          public void handle(MouseEvent e) {
            button1.setEffect(null);
          }
        });

    vbox.getChildren().add(button1);
    vbox.setSpacing(10);
    ((Group) scene.getRoot()).getChildren().add(vbox);

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

The code above generates the following result.

null

Button Style

We can use CSS styles to change the button look and feel.

We define styles in a separate CSS file and apply the CSS file by using the getStyleClass method.

The following code is a CSS file which changes the button font and color. 

.button1{
    -fx-font: 30 arial; 
    -fx-base: #ee2211;    
}

Then we use the following code to install the CSS.

button.getStyleClass().add("button1");

The -fx-font property sets the font name and size for button1. The -fx-base property overrides the default color.

The following code shows how to use CSS to change the look of a Button. 

import javafx.application.Application;
import javafx.event.ActionEvent;
import javafx.event.EventHandler;
import javafx.scene.Group;
import javafx.scene.Scene;
import javafx.scene.control.Button;
import javafx.scene.layout.VBox;
import javafx.stage.Stage;
/*  w ww .  j  a v a2 s . c om*/
public class Main extends Application {

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

    @Override
    public void start(Stage stage) {
        Scene scene = new Scene(new Group());
        stage.setWidth(300);
        stage.setHeight(190);

        VBox vbox = new VBox();
        vbox.setLayoutX(20);
        vbox.setLayoutY(20);

        Button button1 = new Button("Accept");
        button1.setStyle("-fx-font: 30 arial; -fx-base: #ee2211;");


        vbox.getChildren().add(button1);
        vbox.setSpacing(10);
        ((Group)scene.getRoot()).getChildren().add(vbox);

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

The code above generates the following result.

null

Button Mouse Event

The following code shows how to handle Mouse in and out event for Button. 

import javafx.application.Application;
import javafx.event.EventHandler;
import javafx.scene.Group;
import javafx.scene.Scene;
import javafx.scene.control.Button;
import javafx.scene.input.MouseEvent;
import javafx.scene.layout.VBox;
import javafx.stage.Stage;
// w  w  w . j  a v  a  2 s .  c o  m
public class Main extends Application {
  public static void main(String[] args) {
    launch(args);
  }

  @Override
  public void start(Stage stage) {
    Scene scene = new Scene(new Group());
    stage.setWidth(300);
    stage.setHeight(190);

    VBox vbox = new VBox();
    vbox.setLayoutX(20);
    vbox.setLayoutY(20);

    final Button button1 = new Button("OK");

    button1.addEventHandler(MouseEvent.MOUSE_ENTERED,
        new EventHandler<MouseEvent>() {
          @Override
          public void handle(MouseEvent e) {
            System.out.println("mouse entered");
          }
        });

    button1.addEventHandler(MouseEvent.MOUSE_EXITED,
        new EventHandler<MouseEvent>() {
          @Override
          public void handle(MouseEvent e) {
            System.out.println("mouse out");
          }
        });

    vbox.getChildren().add(button1);
    ((Group) scene.getRoot()).getChildren().add(vbox);

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

The code above generates the following result.

null