Java JavaFX Change Listener

/ JavaFX

R Q

Change Listener

p344 Some JavaFX controls can generate events (like Slider's value).

 
Scene Builder Controls:

    - 4 Labels (Amount, 15%, Tip, Total)
    - 4 TextFields
    - 1 Slider
    - 1 Button

Inspector: fx:id

    - amountTextField
    - tipPercentageLabel
    - tipPercentageSlider
    - tipTextField
    - totalTextField

ControllerClass ... com.minte9.javafx.change_listener.CalculateApp

Add Listener

p535 App class with button action method and slider listener.

 
/**
 * CalculateApp class ...
 * 
 * Set button action and slider listener.
 * FXMLLoader calls initialize() to intialize the Controller.
 */

package com.minte9.javafx.change_listener;

import java.math.BigDecimal;
import java.math.RoundingMode;
import java.text.NumberFormat;

import javafx.fxml.FXML;
import javafx.scene.control.Label;
import javafx.scene.control.Slider;
import javafx.scene.control.TextField;

public class CalculateApp {

    private NumberFormat CURRENCY = NumberFormat.getCurrencyInstance();
    private NumberFormat PERCENT = NumberFormat.getPercentInstance();
    private BigDecimal tipPercentage = new BigDecimal(0.15);
    
    @FXML private TextField amountTextField;
    @FXML private Label tipPercentageLabel;
    @FXML private Slider tipPercentageSlider;
    @FXML private TextField tipTextField;
    @FXML private TextField totalTextField;

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

    @FXML void calculateButtonPressed() {
        try {
            BigDecimal amount = new BigDecimal(amountTextField.getText());
            BigDecimal tip = amount.multiply(tipPercentage);
            BigDecimal total = amount.add(tip);
            tipTextField.setText(CURRENCY.format(tip));
            totalTextField.setText(CURRENCY.format(total));
        } catch (NumberFormatException ex) {
            amountTextField.setText("Enter amount");
            amountTextField.selectAll();
            amountTextField.requestFocus();
        }
    }

    @FXML void initialize() {
        CURRENCY.setRoundingMode(RoundingMode.HALF_UP);
        tipPercentageSlider.valueProperty().addListener( // Look Here
            (o, v, newValue) -> {
                tipPercentage = BigDecimal.valueOf(
                    newValue.intValue() / 100.0
                );
                tipPercentageLabel.setText(PERCENT.format(tipPercentage));
            }
        );
    }
}

Load fxml

Gui class loads tipcalculator.fxml file.

 
/**
 * CalculateGui launcher which loads the fxml file
 */

package com.minte9.javafx.change_listener;

import javafx.application.Application;
import javafx.fxml.FXMLLoader;
import javafx.scene.Parent;
import javafx.scene.Scene;
import javafx.stage.Stage;

public class CalculateGui extends Application {

    public static void main(String[] args) {
        launch(args);
    }
    
    @Override public void start(Stage stage) throws Exception {
        Parent root = 
            FXMLLoader.load(getClass().getResource("tipcalculator.fxml"));

        stage.setTitle("Button Event FXML");
        stage.setScene(new Scene(root));
        stage.show();
    }
}

Fxml file

Fxml file generated by Scene Builder.

 
<?xml version="1.0" encoding="UTF-8"?>

<?import javafx.geometry.Insets?>
<?import javafx.scene.control.Button?>
<?import javafx.scene.control.Label?>
<?import javafx.scene.control.Slider?>
<?import javafx.scene.control.TextField?>
<?import javafx.scene.layout.ColumnConstraints?>
<?import javafx.scene.layout.GridPane?>
<?import javafx.scene.layout.RowConstraints?>
<?import javafx.scene.text.Font?>

<GridPane maxHeight="-Infinity" maxWidth="-Infinity" minHeight="-Infinity" minWidth="-Infinity" prefHeight="200.0" prefWidth="300.0" xmlns="http://javafx.com/javafx/17" xmlns:fx="http://javafx.com/fxml/1" fx:controller="com.minte9.javafx.change_listener.CalculateApp">
  <columnConstraints>
    <ColumnConstraints hgrow="SOMETIMES" maxWidth="294.0" minWidth="10.0" prefWidth="78.0" />
    <ColumnConstraints hgrow="SOMETIMES" maxWidth="421.0" minWidth="10.0" prefWidth="202.0" />
  </columnConstraints>
  <rowConstraints>
      <RowConstraints minHeight="10.0" prefHeight="30.0" vgrow="SOMETIMES" />
    <RowConstraints minHeight="10.0" prefHeight="30.0" vgrow="SOMETIMES" />
    <RowConstraints minHeight="10.0" prefHeight="30.0" vgrow="SOMETIMES" />
    <RowConstraints minHeight="10.0" prefHeight="30.0" vgrow="SOMETIMES" />
      <RowConstraints minHeight="10.0" prefHeight="30.0" vgrow="SOMETIMES" />
  </rowConstraints>
   <children>
      <Label text="Amout" GridPane.halignment="RIGHT" GridPane.valignment="CENTER">
         <font>
            <Font size="15.0" />
         </font>
         <GridPane.margin>
            <Insets right="10.0" />
         </GridPane.margin>
      </Label>
      <TextField fx:id="amountTextField" minWidth="-Infinity" GridPane.columnIndex="1">
         <GridPane.margin>
            <Insets right="20.0" />
         </GridPane.margin>
      </TextField>
      <TextField fx:id="tipTextField" editable="false" focusTraversable="false" GridPane.columnIndex="1" GridPane.rowIndex="2">
         <GridPane.margin>
            <Insets right="20.0" />
         </GridPane.margin>
      </TextField>
      <TextField fx:id="totalTextField" editable="false" focusTraversable="false" GridPane.columnIndex="1" GridPane.rowIndex="3">
         <GridPane.margin>
            <Insets right="20.0" />
         </GridPane.margin>
      </TextField>
      <Slider fx:id="tipPercentageSlider" blockIncrement="5.0" max="30.0" min="15.0" GridPane.columnIndex="1" GridPane.rowIndex="1">
         <GridPane.margin>
            <Insets right="20.0" />
         </GridPane.margin>
      </Slider>
      <Button mnemonicParsing="false" onAction="#calculateButtonPressed" prefHeight="29.0" prefWidth="184.0" text="Calculate" GridPane.columnIndex="1" GridPane.rowIndex="4">
         <font>
            <Font size="15.0" />
         </font>
      </Button>
      <Label fx:id="tipPercentageLabel" text="15%" GridPane.halignment="RIGHT" GridPane.rowIndex="1">
         <GridPane.margin>
            <Insets right="10.0" />
         </GridPane.margin>
      </Label>
      <Label text="Tip" GridPane.halignment="RIGHT" GridPane.rowIndex="2">
         <GridPane.margin>
            <Insets right="10.0" />
         </GridPane.margin>
      </Label>
      <Label text="Total" GridPane.halignment="RIGHT" GridPane.rowIndex="3">
         <GridPane.margin>
            <Insets right="10.0" />
         </GridPane.margin>
      </Label>
   </children>
   <padding>
      <Insets bottom="10.0" left="10.0" right="10.0" top="10.0" />
   </padding>
</GridPane>

➥ Questions

/**
 * CalculateApp class ...
 * 
 * Set button action and slider listener.
 * FXMLLoader calls initialize() to intialize the Controller.
 */

package com.minte9.javafx.change_listener;

import java.math.BigDecimal;
import java.math.RoundingMode;
import java.text.NumberFormat;

import javafx.fxml.FXML;
import javafx.scene.control.Label;
import javafx.scene.control.Slider;
import javafx.scene.control.TextField;

public class CalculateApp {

private NumberFormat CURRENCY = NumberFormat.getCurrencyInstance();
    private NumberFormat PERCENT = NumberFormat.getPercentInstance();
    private BigDecimal tipPercentage = new BigDecimal(0.15);
    
    @FXML private TextField amountTextField;
    @FXML private Label tipPercentageLabel;
    @FXML private Slider tipPercentageSlider;
    @FXML private TextField tipTextField;
    @FXML private TextField totalTextField;

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

@FXML void calculateButtonPressed() {
        try {
            BigDecimal amount = new BigDecimal(amountTextField.getText());
            BigDecimal tip = amount.multiply(tipPercentage);
            BigDecimal total = amount.add(tip);
            tipTextField.setText(CURRENCY.format(tip));
            totalTextField.setText(CURRENCY.format(total));
        } catch (NumberFormatException ex) {
            amountTextField.setText("Enter amount");
            amountTextField.selectAll();
            amountTextField.requestFocus();
        }
    }

@FXML void initialize() {
        CURRENCY.setRoundingMode(RoundingMode.HALF_UP);
        tipPercentageSlider.valueProperty().addListener( // Look Here
            (o, v, newValue) -> {
                tipPercentage = BigDecimal.valueOf(
                    newValue.intValue() / 100.0
                );
                tipPercentageLabel.setText(PERCENT.format(tipPercentage));
            }
        );
    }
}

<?xml version="1.0" encoding="UTF-8"?>

<?import javafx.geometry.Insets?>
<?import javafx.scene.control.Button?>
<?import javafx.scene.control.Label?>
<?import javafx.scene.control.Slider?>
<?import javafx.scene.control.TextField?>
<?import javafx.scene.layout.ColumnConstraints?>
<?import javafx.scene.layout.GridPane?>
<?import javafx.scene.layout.RowConstraints?>
<?import javafx.scene.text.Font?>

Github Pages

Last update: 385 days ago

➟

Demo

minte9 MEMORYApp

Change Listener

Add Listener

Load fxml

Fxml file

minte9
MEMORYApp