JavaFX Tutorial Slides.
Watch the video series here:
https://www.youtube.com/watch?v=kKKtgstZ5qM&list=PLje_ti-y5EoL6PDfH3x5d8FMOpEHgHYVF
K. N. Toosi University of Technology
1. Brought to you by
Graphical User Interface in Java
Using JavaFX
Event Handling
1K. N. Toosi University of Technology
2. What is Event?
• An event represents an occurrence of something of interest to the application,
such as a mouse being moved or a key being pressed
• In JavaFX, an event is an instance of the javafx.event.Event class or any subclass of
Event.
• Every JavaFX event has:
• eventType
• source
• target
• JavaFX provides several events, including DragEvent, KeyEvent, MouseEvent,
ScrollEvent, and others. You can define your own event by extending the Event
class.
• Subclasses can define type specific properties:
• MouseEvent: x,y
• KeyEvent: code, character
2K. N. Toosi University of Technology
3. Event Properties:
3K. N. Toosi University of Technology
Property Description
Event Type Type of event that occurred.
Source Origin of the event, with respect to the location of the
event in the event dispatch chain.
The source changes as the event is passed along the chain.
Target Node on which the action occurred and the end node in
the event dispatch chain. The target does not change,
however if an event filter consumes the event during the
event capturing phase, the target will not receive the event.
4. Event Hierarchy:
4K. N. Toosi University of Technology
EventObject
Event
InputEvent
KeyEvent MouseEvent DragEvent TouchEvent SwipeEvent …
ActionEvent WindowEvent
https://docs.oracle.com/javafx/2/events/processing.htm
5. Event Type Hierarchy:
5K. N. Toosi University of Technology
Event.ANY
InputEvent.ANY
KeyEvent.ANY
KeyEvent.KEY_PRESSED
KeyEvent.KEY_RELEASED
KeyEvent.KEY_TYPED
MouseEvent.ANY MouseEvent.MOUSE_PRESSED
MouseEvent.MOUSE_RELEASED
ActionEvent.ACTION
WindowEvent.ANY
WindowEvent.WINDOW_SHOWING
WindowEvent.WINDOW_SHOWN
https://docs.oracle.com/javafx/2/events/processing.htm
6. Event Delivery Process:
• Event Target Selection
• Depends on the particular event type
• Event Route Construction
• Specified by the event target
• Event Capturing Phase
• Event travels from the stage to the event target
• Event Bubbling Phase
• Events travels back from the target to the stage
6K. N. Toosi University of Technology
7. Demo 1:
7K. N. Toosi University of Technology
Stage
Scene
VBox
Rectangle HBox
Circle Polygon
8. Event Delivery Process:
• Event Target Selection
• Depends on the particular event type
• Event Route Construction
• Specified by the event target
• Event Capturing Phase
• Event travels from the stage to the event target
• Event Bubbling Phase
• Events travels back from the target to the stage
8K. N. Toosi University of Technology
9. Demo 1: Click on Green Circle
9K. N. Toosi University of Technology
Stage
Scene
VBox
Rectangle HBox
Circle Polygon
• Phase 1: Circle Select as the target as the
first phase of Event Delivery Process.
10. Event Delivery Process:
• Event Target Selection
• Depends on the particular event type
• Event Route Construction
• Specified by the event target
• Event Capturing Phase
• Event travels from the stage to the event target
• Event Bubbling Phase
• Events travels back from the target to the stage
10K. N. Toosi University of Technology
11. Demo 1: Click on Green Circle
11K. N. Toosi University of Technology
Stage
Scene
VBox
Rectangle HBox
Circle Polygon
• Phase 2: Route construction happens in the
second phase from the scene graph.
12. Event Delivery Process:
• Event Target Selection
• Depends on the particular event type
• Event Route Construction
• Specified by the event target
• Event Capturing Phase
• Event travels from the stage to the event target
• Event Bubbling Phase
• Events travels back from the target to the stage
12K. N. Toosi University of Technology
13. Demo 1: Click on Green Circle
13K. N. Toosi University of Technology
Stage
Scene
VBox
Rectangle HBox
Circle Polygon
• Phase 3: In the event capturing phase, the
created event traverse from the top of the
scene graph to the target node.
• EventHandlers will not invoke
Event
14. Demo 1: Click on Green Circle
14K. N. Toosi University of Technology
Stage
Scene
VBox
Rectangle HBox
Circle Polygon
• Phase 3: In the event capturing phase, the
created event traverse from the top of the
scene graph to the target node.
• EventHandlers will not invoke
Event
15. Event Delivery Process:
• Event Target Selection
• Depends on the particular event type
• Event Route Construction
• Specified by the event target
• Event Capturing Phase
• Event travels from the stage to the event target
• Event Bubbling Phase
• Events travels back from the target to the stage
15K. N. Toosi University of Technology
16. Demo 1: Click on Green Circle
16K. N. Toosi University of Technology
Stage
Scene
VBox
Rectangle HBox
Circle Polygon
• Phase 4: In the Event Bubbling phase, the
Event traverse from the bottom of the
scene graph to the root.
• EventHandlers will invoke in this phase
Event
17. Demo 1: Click on Green Circle
17K. N. Toosi University of Technology
Stage
Scene
VBox
Rectangle HBox
Circle Polygon
• Phase 4: In the Event Bubbling phase, the
Event traverse from the bottom of the
scene graph to the root.
• EventHandlers will invoke in this phaseEvent
18. Event Delivery Process:
• Event Target Selection
• Depends on the particular event type
• Event Route Construction
• Specified by the event target
• Event Capturing Phase
• Event travels from the stage to the event target
• Event Bubbling Phase
• Events travels back from the target to the stage
18K. N. Toosi University of Technology
19. Event Handling
• Three methods of event handling
• Convenience methods
• setOnKeyPressed(eventHandler);
• setOn …
• Event handler / filter registration methods
• addEventHandler(eventType, eventHandler);
• addEventFilter(eventType,eventFilter);
• Event dispatcher property
• Differ in Complexity and level of control
19K. N. Toosi University of Technology
20. Event Handlers
• An event handler is executed during the event bubbling phase.
• If an event handler for a child node does not consume the event, an
event handler for a parent node can act on the event after a child
node processes it and can provide common event processing for
multiple child nodes.
• Handlers that are registered for the type of event that occurred are
executed as the event returns through the node that registered the
handler.
20K. N. Toosi University of Technology
21. Demo 1: Click on Green Circle
21K. N. Toosi University of Technology
Stage
Scene
VBox
Rectangle HBox
Circle Polygon
• Phase 4: In the Event Bubbling phase, the
Event traverse from the bottom of the
scene graph to the root.
• EventHandlers will invoke in this phase
Event
22. Event Filters
• An event filter is executed during the event capturing phase.
• An event filter for a parent node can provide common event
processing for multiple child nodes and if desired, consume the event
to prevent the child node from receiving the event.
• Filters that are registered for the type of event that occurred are
executed as the event passes through the node that registered the
filter.
22K. N. Toosi University of Technology
23. Demo 1: Click on Green Circle
23K. N. Toosi University of Technology
Stage
Scene
VBox
Rectangle HBox
Circle Polygon
• Phase 3: In the event capturing phase, the
created event traverse from the top of the
scene graph to the target node.
• EventHandlers will not invoke
Event
24. Consuming of an Event
• An event can be consumed by an event filter or an event handler at any
point in the event dispatch chain by calling the consume() method.
• This method signals that processing of the event is complete and traversal
of the event dispatch chain ends.
• Consuming the event in an event filter prevents any child node on the
event dispatch chain from acting on the event.
• Consuming the event in an event handler stops any further processing of
the event by parent handlers on the event dispatch chain.
• If the node that consumes the event has more than one filter or handler
registered for the event, the peer filters or handlers are still executed.
24K. N. Toosi University of Technology
25. Event Handling
Convenience methods
• on<EventType>
• onMousePressed, onKeyTyped, onAction
• Easy way to install, remove or replace an event handler
• Sufficient for most use cases
• Only one handler per event type
• For selected event types only
• No support for event filter registration
25K. N. Toosi University of Technology
27. Event Handling
Handler / Filter registration methods
• Allow to register multiple event handlers / filters for a signle event
type
• addEventHandler, addEventFilter methods
• Can Register one event handler / filter for a whole class of events
• All mouse events, all input events, all events
• Specific handlers / filters executed before the generic ones
• If you wrote two handler for two type of event which they are KeyEvent.KEY_TYPED and
InputEvent.ANY the more specified one which is KeyEvent will be called before the
handler of the generic one which is InputEvent
• Execution order of event handlers at the same level is unspecified and
not guaranteed
• Exception: on<EventType> handlers executed last
27K. N. Toosi University of Technology
29. Handler or Filter?
• Different execution order
• Event handler for leaf nodes
• Event handler installed on a branch node
• Allows to define a default event response for all child nodes
• A child node can still define a more specific event response
• Event filter installed on a branch node
• Can override / force an event response
• Can block events from reaching their destination
29K. N. Toosi University of Technology
36. Demo 1: Click on Green Circle
36K. N. Toosi University of Technology
Stage
Scene
VBox
Rectangle HBox
Circle Polygon
• Event Source : Stage
• Event Target : Circle
• Executed : Stage Filter
Event
37. Demo 1: Click on Green Circle
37K. N. Toosi University of Technology
Stage
Scene
VBox
Rectangle HBox
Circle Polygon
• Event Source : Scene
• Event Target : Circle
• Executed : NothingEvent
38. Demo 1: Click on Green Circle
38K. N. Toosi University of Technology
Stage
Scene
VBox
Rectangle HBox
Circle Polygon
• Event Source : VBox
• Event Target : Circle
• Executed : VBox Filter
Event
39. Demo 1: Click on Green Circle
39K. N. Toosi University of Technology
Stage
Scene
VBox
Rectangle HBox
Circle Polygon
• Event Source : HBox
• Event Target : Circle
• Executed : HBox Filter
Event
40. Demo 1: Click on Green Circle
40K. N. Toosi University of Technology
Stage
Scene
VBox
Rectangle HBox
Circle Polygon
• Event Source : Circle
• Event Target : Circle
• Executed : Circle Filter
Event
41. Demo 1: Click on Green Circle
41K. N. Toosi University of Technology
Stage
Scene
VBox
Rectangle HBox
Circle Polygon
• Event Source : Circle
• Event Target : Circle
• Executed : Circle Handler
Event
42. Demo 1: Click on Green Circle
42K. N. Toosi University of Technology
Stage
Scene
VBox
Rectangle HBox
Circle Polygon
• Event Source : HBox
• Event Target : Circle
• Executed : HBox Handler
Event
43. Demo 1: Click on Green Circle
43K. N. Toosi University of Technology
Stage
Scene
VBox
Rectangle HBox
Circle Polygon
• Event Source : VBox
• Event Target : Circle
• Executed : VBox Handler
if not Consumed
Event
44. Demo 1: Click on Green Circle
44K. N. Toosi University of Technology
Stage
Scene
VBox
Rectangle HBox
Circle Polygon
• Event Source : VBox
• Event Target : Scene
• Executed : Nothing
if not Consumed
Event
45. Demo 1: Click on Green Circle
45K. N. Toosi University of Technology
Stage
Scene
VBox
Rectangle HBox
Circle Polygon
• Event Source : Stage
• Event Target : Circle
• Executed : Stage Handler
if not Consumed
Event
46. Resources & Refrences
• Oracle’s JavaFX: Handling Events Tutorial;
https://docs.oracle.com/javase/8/javafx/events-tutorial/events.htm
• JavaFX Event System Walk-through, Presented by eva krejčířová on
Oracle JavaOne 2012 conf;
https://www.youtube.com/watch?v=PNLNEzXcZE4
• Codes:
https://gist.github.com/mhrimaz/009afb0ffe444f478ceec5063dbbf277
46K. N. Toosi University of Technology
47. Brought to you by
Happy Coding
47K. N. Toosi University of Technology