Scrolling on VBox with lots of Textfields

Question

I am having lots of Textfields in VBox in a Scrollpane. When scrolling and touching a textfields it just grabs the focus. So smooth scrolling is not possible. How can I get it nice scrolling without the unwanted focus on any textfield. Do I need to consume the events on the textfield while scrolling?

Answer 1

This is a possible solution for the case where you want to scroll over a long list of textfields, without letting them take the focus, until you stop scrolling at all, and clearly want to select one of the textfields.

It is based in a custom "press and hold" event, inspired by this question.

The idea is to bundle the TextField control in an HBox, and disable the access to the control using the mouse transparent property of the container.

Then, whenever you tap on the container, if you press long enough the container will give access to the control and the keyboard will show up. Otherwise, you will continue scrolling, but without showing the keyboard.

I'll use the KeyboardService referred in this question on iOS only.

public class BasicView extends View {

    public BasicView(String name) {
        super(name);

        setTop(new Button("Button"));

        VBox controls = new VBox(15.0);

        controls.setAlignment(Pos.CENTER);

        ScrollPane pane = new ScrollPane(controls);
        controls.prefWidthProperty().bind(pane.widthProperty().subtract(20));

        for (int i = 0; i < 100; i++) {
            final Label label = new Label("TextField " + (i + 1));
            final TextField textField1 = new TextField();
            HBox.setHgrow(textField1, Priority.ALWAYS);
            HBox box = new HBox(10, label, textField1);
            box.setMouseTransparent(true);

            box.setAlignment(Pos.CENTER_LEFT);
            box.setPadding(new Insets(5));
            controls.getChildren().add(box);
        }

        addPressAndHoldHandler(controls, Duration.millis(300), eStart -> {
                for (Node box : controls.getChildren()) {
                    box.setMouseTransparent(true);
                }
            }, eEnd -> {
                for (Node box : controls.getChildren()) {
                    if (box.localToScene(box.getBoundsInLocal()).contains(eEnd.getSceneX(), eEnd.getSceneY())) {
                        box.setMouseTransparent(false);
                        ((HBox) box).getChildren().get(1).requestFocus();
                        break;
                    }
                }
            });
        setCenter(pane);

        // iOS only
        Services.get(KeyboardService.class).ifPresent(keyboard -> {
            keyboard.visibleHeightProperty().addListener((obs, ov, nv) -> {
                if (nv.doubleValue() > 0) {
                    for (Node box : controls.getChildren()) {
                        Node n1 = ((HBox) box).getChildren().get(1);
                        if (n1.isFocused()) {
                            double h = getScene().getHeight() - n1.localToScene(n1.getBoundsInLocal()).getMaxY();
                            setTranslateY(-nv.doubleValue() + h);
                            break;
                        }
                    }
                } else {
                    setTranslateY(0);
                }
            });
        });
    }

    @Override
    protected void updateAppBar(AppBar appBar) {
        appBar.setNavIcon(MaterialDesignIcon.MENU.button(e -> System.out.println("Menu")));
        appBar.setTitleText("Scrolling over TextFields");
    }

    private void addPressAndHoldHandler(Node node, Duration holdTime, 
            EventHandler<MouseEvent> handlerStart, EventHandler<MouseEvent> handlerEnd) {
        class Wrapper<T> { 
            T content; 
        }

        Wrapper<MouseEvent> eventWrapper = new Wrapper<>();

        PauseTransition holdTimer = new PauseTransition(holdTime);
        holdTimer.setOnFinished(event -> handlerEnd.handle(eventWrapper.content));

        node.addEventHandler(MouseEvent.MOUSE_PRESSED, event -> {
            handlerStart.handle(event);
            eventWrapper.content = event;
            holdTimer.playFromStart();
        });
        node.addEventHandler(MouseEvent.MOUSE_RELEASED, event -> holdTimer.stop());
        node.addEventHandler(MouseEvent.DRAG_DETECTED, event -> holdTimer.stop());
    }
}

Note that I've added a button on top to get the focus on the first place when you show the view.

Whenever you click/tap on the controls VBox, it sets all the boxes mouse transparent: box.setMouseTransparent(true);, and start a PauseTransition.

If there is a mouse release or a mouse drag before 300 ms (this could be changed at your convenience), the transition will stop. Otherwise, after 300 ms, it will set the box to box.setMouseTransparent(false);, and set the focus on the TextField, and at that moment the keyboard will show up.

Answer 2

Here is a class which I use for the purpose you describe:

public class MouseClickedFilter{

    private final Node                       observableNode;

    private BooleanProperty                  scrolling          = new ReadOnlyBooleanWrapper(false);

    private EventHandler<? super MouseEvent> dragDetectedFilter = e -> scrolling.set(true);
    private EventHandler<? super MouseEvent> mouseExitedHandler = e -> scrolling.set(false);

    private EventHandler<? super MouseEvent> mouseClickedFilter = evt ->
                                                                    {
                                                                        if (scrolling.get()) {
                                                                            evt.consume();
                                                                            scrolling.set(false);
                                                                        }
                                                                    };

    private boolean                          listenersEnabled;

    public MouseClickedFilter(Node observableNode) {
        this.observableNode = observableNode;
    }

    public void activate() {
        if (!listenersEnabled) {
            observableNode.addEventFilter(MouseEvent.DRAG_DETECTED, dragDetectedFilter);
            observableNode.addEventHandler(MouseEvent.MOUSE_EXITED, mouseExitedHandler);
            observableNode.addEventFilter(MouseEvent.MOUSE_CLICKED, mouseClickedFilter);
        }
    }

    public void deactivate() {
        if (listenersEnabled) {
            observableNode.removeEventFilter(MouseEvent.DRAG_DETECTED, dragDetectedFilter);
            observableNode.removeEventHandler(MouseEvent.MOUSE_EXITED, mouseExitedHandler);
            observableNode.removeEventFilter(MouseEvent.MOUSE_CLICKED, mouseClickedFilter);
        }
    }

    public final ReadOnlyBooleanProperty scrollingProperty() {
        return scrolling;
    }

    public final boolean isScrolling() {
        return scrolling.get();
    }

}

ObservableNode is your ScrollPane containing the textFields