JavaFX 2.2: Hooking Slider Drag n Drop Events

问题:

I am trying to catch the events on the JavaFX Slider especially the one which indicates that the drag stopped and was released. At first I used the valueProperty with mock-up code like this

slider.valueProperty().addListener(new ChangeListener<Number>() {
    @Override
    public void changed(ObservableValue<? extends Number> ov, Number oldValue, Number newValue) {
        log.fine(newValue.toString());
    }
});

but with this it update too often. So I searched within SceneBuilder and the API and found some interessting like

slider.setOnMouseDragReleased(new EventHandler<MouseDragEvent>() {
    @Override
    public void handle(MouseDragEvent event) {
        System.out.println("setOnMouseDragReleased");
    }
});

but they never get fired. There only some like setOnMouseReleased I get some output, but this for example count for the whole Node like the labels etc.

So my question is, which is the correct hook to know the value is not changing anymore (if possible after release of the mouse like drag'n'drop gesture) and maybe with a small example to see its interfaces working.

回答1:

Add a change listener to the slider's valueChangingProperty to know when the slider's value is changing, and take whatever action you want on the value change.

The sample below will log the slider's value when it starts to change and again when it finishes changing.

import javafx.application.Application;
import javafx.beans.value.*;
import javafx.geometry.*;
import javafx.scene.Scene;
import javafx.scene.control.*;
import javafx.scene.layout.*;
import javafx.stage.Stage;

public class SliderChangeLog extends Application {
    private final ListView<String> startLog = new ListView<>();
    private final ListView<String> endLog   = new ListView<>();

    @Override public void start(Stage stage) throws Exception {
        Pane logsPane = createLogsPane();
        Slider slider = createMonitoredSlider();

        VBox layout = new VBox(10);
        layout.setAlignment(Pos.CENTER);
        layout.setPadding(new Insets(10));
        layout.getChildren().setAll(
                slider,
                logsPane
        );
        VBox.setVgrow(logsPane, Priority.ALWAYS);

        stage.setTitle("Slider Value Change Logger");
        stage.setScene(new Scene(layout));
        stage.show();
    }

    private Slider createMonitoredSlider() {
        final Slider slider = new Slider(0, 1, 0.5);
        slider.setMajorTickUnit(0.5);
        slider.setMinorTickCount(0);
        slider.setShowTickMarks(true);
        slider.setShowTickLabels(true);
        slider.setMinHeight(Slider.USE_PREF_SIZE);

        slider.valueChangingProperty().addListener(new ChangeListener<Boolean>() {
            @Override
            public void changed(
                    ObservableValue<? extends Boolean> observableValue,
                    Boolean wasChanging,
                    Boolean changing) {
                String valueString = String.format("%1$.3f", slider.getValue());

                if (changing) {
                    startLog.getItems().add(
                            valueString
                    );
                } else {
                    endLog.getItems().add(
                            valueString
                    );
                }
            }
        });
        return slider;
    }

    private HBox createLogsPane() {
        HBox logs = new HBox(10);
        logs.getChildren().addAll(
                createLabeledLog("Start", startLog),
                createLabeledLog("End",   endLog)
        );
        return logs;
    }

    public Pane createLabeledLog(String logName, ListView<String> log) {
        Label label = new Label(logName);
        label.setLabelFor(log);

        VBox logPane = new VBox(5);
        logPane.getChildren().setAll(
                label,
                log
        );

        logPane.setAlignment(Pos.TOP_LEFT);

        return logPane;
    }

    public static void main(String[] args) { launch(args); }
}

回答2:

jewelsea's answer was very helpful for setting me on the right track, however if "snapToTicks" is on, undesired behavior results. The "end" value as captured by jewelsea's listener is before the snap takes place, and the post-snap value is never captured.

My solution sets a listener on value but uses valueChanging as a sentinel. Something like:

slider.valueProperty().addListener(new ChangeListener<Number>() {
        @Override
        public void changed(
                ObservableValue<? extends Number> observableValue,
                Number previous,
                Number now) {
            if (!slider.isValueChanging()
                  || now.doubleValue() == slider.getMax()
                  || now.doubleValue() == slider.getMin()) {
                // This only fires when we're done
                // or when the slider is dragged to its max/min.
            }
        }
    });

I found that checking for the max and min value was necessary to catch the corner case where the user drags the slider all the way past its left or right bounds before letting go of the mouse. For some reason, that doesn't fire an event like I'd expect, so this seems like an okay work-around.

Note: Unlike jewelsea, I'm ignoring the starting value for the sake of simplicity.

Note 2: I'm actually using ScalaFX 2, so I'm not sure if this Java translation compiles as-written.

回答3:

There could be times when you want to know when the user is moving the slider versus the slider value changing due to a binding to a property. One example is a slider that is used on a media player view to show the media timeline. The slider not only displays the time but also allows the user to fast forward or rewind. The slider is bound to the media player's current time which fires the change value on the slider. If the user moves the slider, you may want to detect the drag so as to stop the media player, have the media player seek to the new time and resume playing. Unfortunately the only drag event that seems to fire on the slider is the setOnDragDetected event. So I used the following two methods to check for a slider drag.

    slider.setOnDragDetected(new EventHandler<Event>() {
        @Override
        public void handle(Event event) {
            currentPlayer.pause();
            isDragged=true;     
        }
    });

slider.setOnMouseReleased(new EventHandler<Event>() {
        @Override
        public void handle(Event event) {
            if(isDragged){
                currentPlayer.seek(Duration.seconds((double) slider.getValue()));
                currentPlayer.play();
                isDragged=false;
            }       
        }
    });