Targets of Gestures

The target of most gestures is the node at the center point of all touches at the beginning of the gesture. The target of a swipe gesture is the node at the center of the entire path of all of the fingers.

If more than one node is located at the target point, the topmost node is considered the target. All of the events generated from a single, continuous gesture, including inertia from the gesture, are delivered to the node that was selected when the gesture started. For more information on targets of events, see Target Selection.

Other Events Generated

Gestures and touches can generate other types of events in addition to the events for the gesture or touch performed. A swipe gesture generates scroll events in addition to the swipe event. Depending on the length of the swipe, it is possible that the swipe and scroll events have different targets. The target of a scroll event is the node at the point where the gesture started. The target of a swipe event is the node at the center of the entire path of the gesture.

Touches on a touch screen also generate corresponding mouse events. For example, touching a point on the screen generates TOUCH_PRESSED and MOUSE_PRESSED events. Moving a single point on the screen generates scroll events and drag events. Even if your application does not handle touch or gesture events directly, it can run on a touch-enabled device with minimal changes by responding to the mouse events that are generated in response to touches.

If your application handles touches, gestures, and mouse events, make sure that you do not handle a single action multiple times. For example, if a gesture generates scroll events and drag events and you provide the same processing for handlers of both types of events, the movement on the screen could be twice the amount expected. You can use the isSynthesized() method for mouse events to determine if the event was generated by mouse movement or movement on a touch screen and only handle the event once.

Creating the Shapes

The Gesture Events example shows a rectangle and an ellipse. Example 5-1 shows the code used to create each shape and the layout pane that contains the shapes.

// Create the shapes that respond to gestures and use a VBox to 
// organize them
VBox shapes = new VBox();
shapes.setAlignment(Pos.CENTER);
shapes.setPadding(new Insets(15.0));
shapes.setSpacing(30.0);
shapes.setPrefWidth(500);
shapes.getChildren().addAll(createRectangle(), createEllipse());
...
private Rectangle createRectangle() {

    final Rectangle rect = new Rectangle(100, 100, 100, 100);
    rect.setFill(Color.DARKMAGENTA);
...
    return rect;
}

private Ellipse createEllipse() {

    final Ellipse oval = new Ellipse(100, 50);
    oval.setFill(Color.STEELBLUE);
...
    return oval;
}

You can use gestures to move, rotate, and zoom in and out of these objects.

Handling the Events

In general, event handlers for the shape objects in the Gesture Events example perform similar operations for each type of event that is handled. For all types of events, an entry is posted to the log of events.

On platforms that support inertia for gestures, additional events might be generated after the event-type_FINISHED event. For example, SCROLL events might be generated after the SCROLL_FINISHED event if there is any inertia associated with the scroll gesture. Use the isInertia() method to identify the events that are generated based on the inertia of the gesture. If the method returns true, the event was generated after the gesture was completed.

Events are generated by gestures on a touch screen or on a trackpad. SCROLL events are also generated by the mouse wheel. Use the isDirect() method to identify the source of the event. If the method returns true, the event was generated by a gesture on a touch screen. Otherwise, the method returns false. You can use this information to provide different behavior based on the source of the event.

Touches on a touch screen also generate corresponding mouse events. For example, touching an object generates both TOUCH_PRESSED and MOUSE_PRESSED events. Use the isSynthesized() method to determine the source of the mouse event. If the method returns true, the event was generated by a touch instead of by a mouse.

The inc() and dec() methods in the Gesture Events example are used to provide a visual cue that an object is the target of a gesture. The number of gestures in progress is tracked, and the appearance of the target object is changed when the number of active gestures changes from 0 to 1 or drops to 0.

In the Gesture Events example, the handlers for the rectangle and ellipse are similar. Therefore, the code examples in the following sections show the handlers for the rectangle. See GestureEvents.java for the handlers for the ellipse.

rect.setOnScroll(new EventHandler<ScrollEvent>() {
        @Override public void handle(ScrollEvent event) {
            if (!event.isInertia()) {
                rect.setTranslateX(rect.getTranslateX() + event.getDeltaX());
                rect.setTranslateY(rect.getTranslateY() + event.getDeltaY());
            }
            log("Rectangle: Scroll event" +
                ", inertia: " + event.isInertia() + 
                ", direct: " + event.isDirect());
            event.consume();
        }
});

rect.setOnScrollStarted(new EventHandler<ScrollEvent>() {
        @Override public void handle(ScrollEvent event) {
            inc(rect);
            log("Rectangle: Scroll started event");
            event.consume();
        }
});
 
rect.setOnScrollFinished(new EventHandler<ScrollEvent>() {
        @Override public void handle(ScrollEvent event) {
            dec(rect);
            log("Rectangle: Scroll finished event");
            event.consume();
        }
});

rect.setOnZoom(new EventHandler<ZoomEvent>() {
        @Override public void handle(ZoomEvent event) {
            rect.setScaleX(rect.getScaleX() * event.getZoomFactor());
            rect.setScaleY(rect.getScaleY() * event.getZoomFactor());
            log("Rectangle: Zoom event" +
                ", inertia: " + event.isInertia() + 
                ", direct: " + event.isDirect());
 
            event.consume();
        }
});

rect.setOnZoomStarted(new EventHandler<ZoomEvent>() {
        @Override public void handle(ZoomEvent event) {
            inc(rect);
            log("Rectangle: Zoom event started");
            event.consume();
        }
});

rect.setOnZoomFinished(new EventHandler<ZoomEvent>() {
        @Override public void handle(ZoomEvent event) {
            dec(rect);
            log("Rectangle: Zoom event finished");
            event.consume();
        }
});
 

rect.setOnRotate(new EventHandler<RotateEvent>() {
        @Override public void handle(RotateEvent event) {
            rect.setRotate(rect.getRotate() + event.getAngle());
            log("Rectangle: Rotate event" +
                ", inertia: " + event.isInertia() + 
                ", direct: " + event.isDirect());
            event.consume();
        }
});

rect.setOnRotationStarted(new EventHandler<RotateEvent>() {
        @Override public void handle(RotateEvent event) {
            inc(rect);
            log("Rectangle: Rotate event started");
            event.consume();
        }
});

rect.setOnRotationFinished(new EventHandler<RotateEvent>() {
        @Override public void handle(RotateEvent event) {
            dec(rect);
            log("Rectangle: Rotate event finished");
            event.consume();
        }
});

rect.setOnSwipeRight(new EventHandler<SwipeEvent>() {
        @Override public void handle(SwipeEvent event) {
            log("Rectangle: Swipe right event");
            event.consume();
        }
});     
 
rect.setOnSwipeLeft(new EventHandler<SwipeEvent>() {
        @Override public void handle(SwipeEvent event) {
            log("Rectangle: Swipe left event");
            event.consume();
        }
});

rect.setOnTouchPressed(new EventHandler<TouchEvent>() {
        @Override public void handle(TouchEvent event) {
            log("Rectangle: Touch pressed event");
            event.consume();
        }
});

rect.setOnTouchReleased(new EventHandler<TouchEvent>() {
        @Override public void handle(TouchEvent event) {
            log("Rectangle: Touch released event");
            event.consume();
        }
});
 

oval.setOnMousePressed(new EventHandler<MouseEvent>() {
        @Override public void handle(MouseEvent event) {
            if (event.isSynthesized()) {
                log("Ellipse: Mouse pressed event from touch" +
                    ", synthesized: " + event.isSynthesized());
            }
            event.consume();
        }
});     
 
oval.setOnMouseReleased(new EventHandler<MouseEvent>() {
        @Override public void handle(MouseEvent event) {
            if (event.isSynthesized()) {
                log("Ellipse: Mouse released event from touch" +
                    ", synthesized: " + event.isSynthesized());
            }
            event.consume();
        }
});

Managing the Log

The Gesture Events example shows a log of the events that were handled by the shapes on the screen. An ObservableList object is used to record the events for each shape, and a ListView object is used to display the list of events. The log is limited to 50 entries. The newest entry is added to the top of the list and the oldest entry is removed from the bottom. See GestureEvents.java for the code that manages the log.

Work with the shapes in the application and notice what events are generated for each gesture that you perform.