Chapter 15 Event-Driven Programming and Animations

1. Chapter 15 Event-Driven Programming and Animations

2. Recall: Basic Structure of JavaFX We have already examined the creating the GUI frontend and placing (or mapping) the nodes or buttons on the pane or scene Stage object is automatically created by JVM - window. Scene object is the container for the content – frame in the window. Node object (or button) is a visual component used to invoke some type of action Lets now explore making the nodes or buttons active – Event Driven Programming Panes can be used to help layout the nodes within a scene.

3. Handling GUI Events Source object (e.g., button, polygon, image, etc.) Listener object contains a method for processing the event Event object (e.g., mouse click, mouse pointer over object, type characters into a textfield, etc ) Not all objects can be handlers for some action event. To be a handler of an event, there are two requirements: • The object must be an instance of the interface called EventHandler. NOTE: the EventHandler interface defines the common behavior for all handlers • The handler, which is the object generated from the EventHandler interface, MUST be “registered” with the event source object using the method source.setOnAction(handler) • The full format for interface EventHandler is: EventHandler<T extends Event> where T is a generic type that extends the subtype Event. • The EventHandler interface contains the handle(ActionEvent) method for processing action events. • NOTE: Your handler class must override the handle(ActionEvent) method to respond to the event.

4. Example: Event-Driven Programming Given the two buttons in the frame, when the OK button is clicked, the message, “OK button clicked” should be displayed to the console. When the Cancel button is clicked, the message “Cancel button clicked” should be displayed to the console.

5. Example: Event-Driven Programming First, let’s create the handler classes for the OK and Cancel buttons Creating the OK handler class by implementing the EventHandler interface Overriding the EventHandler’s handle method Handling the event is simply printing the statement “OK button clicked” to the console Creating the Cancel handler class by implementing the EventHandler interface Overriding the EventHandler’s handle method Handling the event is simply printing the statement “Cancel button clicked” to the console Now that we have created the handler classes for each button, let’s now use those classes in the Main

6. Example: Event-Driven Programming Import the following for the events and handlers Creating and setting up pane Creating the OK button Creating the Cancel button Creating the OK button’s handler from the class created (recall the listener must be an instance of a listener interface) Registering the newly created handler with the OK button (recall a listener must be registered with a source object) Creating the Cancel button’s handler from the class created Registering the newly created handler with the Cancel button Mapping the OK and Cancel buttons to the pane Setting the stage Now the OK and Cancel buttons can “listen” for mouse click events as the program runs – and react accordingly.

7. Event Classes Source object (e.g., button, polygon, image, etc.) Event object (e.g., mouse click, mouse pointer over object, type characters into a textfield, etc ) Listener object contains a method for processing the event Java’s root class for an event object is java.util.EventObject JavaFX’s root class for an event is javafx.event.Event There are three types of events

8. Some Examples: Selected User Actions and Handlers

9. Animation Class JavaFX provides the Animation class with the core functionality for all animations. Below are some of the core functionalities for JavaFX animations. A Boolean that answers will the animation reverse its direction on the next cycle Also, there are many concrete subclasses of the Animation class – your book covers the PathTransition, FadeTransition and Timeline classes.

10. PathTransition Class The PathTransition class animates the moves of a node along a path from one end to the other over a given time • The Duration class defines a duration time. Yon can use new Duration(double millis) to create an instance of Duration • The add, subtract, multiple and divide methods are used to perform arithmetic operations • You can use toHours(), toMinutes(), toSeconds() and toMillis() to return timein different measures • You can use compareTo to compare two durations

11. Example: PathTransition Write a program that animates a rectangle moving along a circle. Import the following for animation Creating a rectangle Creating a circle Adding the circle and rectangle to the pane Creating a PathTransition Setting the transition duration Setting the path of the transition Setting the node of the transition Setting the orientation of the node during the transition Setting the cycle count to indefinite Setting AutoReverse to be true Starting the animation Pausing the animation Resuming the animation Setting the stage

12. FadeTransition Class The FadeTransition class animates the change of the opacity (transparency) in a node over a given time.

13. Example: FadeTransition Write a program that applies a fade transition to a filled color in a ellipse. Import the following for animation Creating a ellipse Setting ellipse’s fill color Setting ellipse’s outline Binding the ellipse to the pane Add ellipse to pane Create FadeTransition Setting starting transparency level Setting ending transparency level Setting cycle count Setting AutoReverse to be true Starting the animation Pausing the animation Resuming the animation Setting the stage

14. Timeline Class • PathTransition and FadeTransition classes define specialized animations. • The Timeline class can be used to program any animation using one or more KeyFrames. • Each KeyFrame is executed sequentially at a specified time interval. • Timeline inherits from Animation.

15. Example: Timeline Class Write a program that flashes text on and off Import the following for animation and text Create a stack pane Create the text Add the text to the pane Create handler for changing text (this causes the on and off) Set text empty Set text Create a timeline Create a KeyFrame for handler Set cycle count indefinite Starting the animation Pausing the animation Resuming the animation Setting the stage

16. Cover Project 2