Event Handling in JavaFX

Overview

When the user interacts with a GUI element such as a Button or Slider, a notification is sent a list of listeners (aka Event Handlers) and a method is automatically called to handle the event. For each GUI element you want to respond to events, you must create a listener (or reuse an existing one) and then add your GUI element to the listener's list of Nodes it should respond to.

In JavaFX you can attach listeners (event handlers) to Properties and Nodes.

Overview for Binding an event handler to a Property
Every GUI element in JavaFX has lots of Properties. For example, shown below are three of the Properties that Sliders have. (See the Slider API for a complete list.)

In JavaFX, you can bind an event handler to any property of a Node. If you do, then whenever the property value changes, a method will be run where you can take action and do anything you want in response to the change.

Overview for Binding an event handler to a Node
You also bind event handlers directly to Nodes in JavaFX. For example, if you bound an onMouseClicked handler directly to a Button then whenever the user clicks the button, a callback method would be run where you can do anything you want in response.

Binding an Event Handler to a Property

Every GUI element in JavaFX has a list of Properties. A Property is an object that encapsulates a value and has the ability to be bound to event handlers. You can think of Properties as "self-aware" variables that can run code whenever their value changes.

1. If you want to bind an event handler to a Property of a GUI element, first go to the API for your GUI element and review the list of Properties. Then decide which property you want to monitor. Here are some common properties to monitor:

   • Value Property: For example, the value property of a Slider is commonly attached to an event handler. This property represents the current value of the slider, and is often used to update other parts of the GUI in response to changes in the slider's value.

   • Text Property: The text property of a TextField or TextArea is commonly attached to a listener. This property represents the current text content of the field, and can be used to perform actions such as validation or filtering of user input.

   • Visibility Property: The visibility property of any GUI element is commonly attached to a listener. This property represents whether the element is currently visible or not, and can be used to perform actions such as showing or hiding the element based on user input or other conditions.

2. Once you have identified the property you want to monitor, look for the getter method for that property. In JavaFX, every property has a getter method with the same name as the property plus the word "Property." For example, a Slider has a property named value and therefore has a method named valueProperty() that returns the property.

3. To bind an event handler to a Property, use the .addListener() method on your property.
   For example:

   slider.valueProperty().addListener();
   

4. Next, find out what kind of listener is required and create a private inner class to create that kind of listener. To find out what kind of listener is required in Eclipse, call addListener on your property and press Ctrl+Space. Eclipse will pop up a mini API telling you what kind of listener is needed. For example, if you typed in slider.valueProperty().addListener and pressed Ctrl+Space, you would see this:

   

   This means you need to create a custom ChangeListener whose parameterized data type is either a Number or a super class of Number .

5. Create a private inner class of the type you need and put it in the same location you would if you were writing a new method. For example, you might put this after the start() method:

   private class MyChangeListener implements ChangeListener<Number> {
       // Insert methods required by the ChangeListener interface here
   }
   

6. Finally, attach an instance of your event handler to the Property you want:

   MyChangeListener bob = new MyChangeListener();  
   slider.valueProperty().addListener(bob);
   

7. Whenever the value of your property changes, the method you overrode in your custom listener class will be called automatically.

Binding an Event Handler to a Node

1. To bind an event handler to a Node, such as a Button or TextField go to the API for your GUI element and look at all the setOn______ methods. These are all the events you can bind to your GUI element. For example, setOnMouseClicked().

2. Once you've chosen a setOn_____ method, look in the API for the kind of parameter you must pass in. For example, setOnMouseClicked() has a parameter of EventHandler<? super MouseEvent> value. In this case, the parameter means you need to pass it a custom object of type EventHandler whose parameterized data type is either a MouseEvent or a super class of MouseEvent.

   private class MyMouseEventHandler implements EventHandler<MouseEvent> {
       // Insert methods required by the EventHandler interface here
   }
   

3. Finally, attach an instance of your event handler to the GUI element.

   MyMouseEventHandler bob = new MyMouseEventHandler();  
   button.setOnMouseClicked(bob);