how to shake a login dialog in javaFX/8

Question

How do I make my javaFX/8 dialog box shake more elegantly whenever a user input a wrong login name/password pair?.

Since the dialog in java8u40 does NOT have one, I set out to make one it myself. However, it doesn't look good enough.

What's wrong with it? Can someone help? Is there a better way in doing it?

---

public void loginDialog() {
    // Create the custom dialog.
    Dialog<Pair<String, String>> dialog = new Dialog<>();
    dialog.setTitle("Mars Simulation Project");
    dialog.setHeaderText("Log in");
    dialog.setContentText("Enter your username and password : ");
    dialog.initModality(Modality.NONE);
    // Set the button types.
    ButtonType loginButtonType = new ButtonType("Login", ButtonData.OK_DONE);
    dialog.getDialogPane().getButtonTypes().addAll(loginButtonType, ButtonType.CANCEL);

    // Create the username and password labels and fields.
    GridPane grid = new GridPane();
    grid.setHgap(10);
    grid.setVgap(10);
    grid.setPadding(new Insets(20, 150, 10, 10));

    TextField tfPlayer = new TextField();
    tfPlayer.setPromptText("e.g. m03j");
    PasswordField tfPassword = new PasswordField();
    tfPassword.setPromptText("xxxx");

    Button defaultPWB = new Button("Use Default");
    Button guestB = new Button("As Guest");

    defaultPWB.setOnAction(event -> {
        tfPassword.setText("msp0");
    } );

    guestB.setOnAction(event -> {
        tfPlayer.setText("Guest_");
        tfPassword.setText("msp0");
    } );

    grid.add(new Label("Player Name :"), 0, 0);
    grid.add(tfPlayer, 1, 0);
    grid.add(guestB, 2, 0);
    grid.add(new Label("Password :"), 0, 1);
    grid.add(tfPassword, 1, 1);
    grid.add(defaultPWB, 2, 1);

    // Enable/Disable login button depending on whether a username was entered.
    Node loginButton = dialog.getDialogPane().lookupButton(loginButtonType);
    loginButton.setDisable(true);

    // Do some validation (using the Java 8 lambda syntax).
    tfPlayer.textProperty().addListener((observable, oldValue, newValue) -> {
        loginButton.setDisable(newValue.trim().isEmpty());
    } );

    dialog.getDialogPane().setContent(grid);

    // Request focus on the player name field by default.
    Platform.runLater(() -> tfPlayer.requestFocus());

    // Convert the result to a player name /host address pair when the login
    // button is clicked.
    dialog.setResultConverter(dialogButton -> {
        if (dialogButton == loginButtonType) {
            return new Pair<>(tfPlayer.getText(), tfPassword.getText());
        }
        return null;
    } );

    Optional<Pair<String, String>> result = dialog.showAndWait();

    result.ifPresent(input -> {
        playerName = tfPlayer.getText();
        logger.info("Player " + input.getKey() + " connecting to server at " + serverAddressStr);

        try {
            dialog.show();
            makeContact(serverAddressStr);
            // obtain a client id
            boolean isSuccessful = sendRegister();

            if (isSuccessful) {
                dialog.close();
                // establish chat...

            } else {
                // shake the dialog or send an alert to inform the user the
                // player name is NOT valid
                DialogEarthquakeCenter dec = new DialogEarthquakeCenter(dialog);
                dec.startTimer();

                try {
                    System.out.println("start sleeping ");
                    Thread.sleep(2000);
                    System.out.println("done sleeping ");
                }
                catch (InterruptedException e) {}

                loginDialog();
            }

        } catch (Exception e) {
            e.printStackTrace();
        }
    } );

So far, my problem is that as soon as I hit the button "login", the dialog will close by default.

Therefore I have to use dialog.show() to make it show up again.

[edit] This, however, still cannot prevent the momentary gap from happening (seeing the dialog disappear and reappear).

After that, I create an instance of DialogEarthquakeCenter in order to shake the dialog.

Note that my DialogEarthquakeCenter below is a direct modification of this original :

https://github.com/gigiigig/Java-Chat/blob/master/tag/FacebookChatCore_Original/src/facebookchat/ui/common/DialogEarthquakeCenter.java

import java.awt.event.ActionEvent;
import java.awt.event.ActionListener;
import javax.swing.Timer;
import javafx.animation.KeyFrame;
import javafx.animation.Timeline;
import javafx.application.Platform;
import javafx.scene.control.Dialog;
import javafx.util.Duration;
import javafx.util.Pair;

public class DialogEarthquakeCenter {

public static final int SHAKE_DISTANCE = 10;
public static final double SHAKE_CYCLE = 50;
public static final int SHAKE_DURATION = 500;
public static final int SHAKE_UPDATE = 5;

private Dialog<Pair<String, String>> dialog;
private int x, y;
private long startTime;
private Timer shakeTimer;
private final double TWO_PI = Math.PI * 2.0;
private Timeline timeline;

public DialogEarthquakeCenter(Dialog<Pair<String, String>> parent) {
    dialog = parent;
}

/**
 * Creates and starts the timer
 *
 * @return Scene
 */
public void startTimer() {
    x = (int) dialog.getX();
    y = (int) dialog.getY();
    startTime = System.currentTimeMillis();
    // Set up earth time text update
    timeline = new Timeline(new KeyFrame(Duration.millis(SHAKE_DURATION), ae -> startNudging()));
    //timeline.setCycleCount(javafx.animation.Animation.INDEFINITE);
    timeline.play();
}

public void startNudging() {
    x = (int) dialog.getX();
    y = (int) dialog.getY();
    startTime = System.currentTimeMillis();
    shakeTimer = new Timer(SHAKE_UPDATE, new ActionListener() {
        public void actionPerformed(ActionEvent e) {
            shake();
        }
    });

    shakeTimer.start();
}

public void shake() {
    // calculate elapsed time
    long elapsed = System.currentTimeMillis() - startTime;
    //System.out.println("elapsed is " + elapsed);
    // use sin to calculate an x-offset
    double waveOffset = (elapsed % SHAKE_CYCLE) / SHAKE_CYCLE;
    double angle = waveOffset * TWO_PI;
    // offset the x-location by an amount
    // proportional to the sine, up to shake_distance
    int shakenX = (int) ((Math.sin(angle) * SHAKE_DISTANCE) + x);

    Platform.runLater(() -> {
        //dialog.hide();
        dialog.setX(shakenX);
        //System.out.println("set shakenX to " + shakenX);
        dialog.setY(y);
        dialog.show();
    });

    //try {Thread.sleep(20);}
    //catch (InterruptedException ex) {}

    // should we stop timer
    if (elapsed >= SHAKE_DURATION) {
        stopShake();

    }
}

public void stopShake() {
    shakeTimer.stop();
    Platform.runLater(() -> {
        timeline.stop();
        dialog.close();
    });
}
}

I did notice that controlsfx dialog has a shake() method.

Does anyone know if it works well ?

see https://code.google.com/p/mqtt-spy/source/browse/mqtt-spy/src/main/java/org/controlsfx/dialog/CustomDialogs.java?r=6ec0240e4e64d1b8cc2b59bc77cd5902a68e0c81

Thanks much for any comments!

Answer 1

There's a way you can add a transition once the user has click on the login button using the Dialog API, before the window is closed.

Using dialog.show() instead of dialog.showAndWait()`, the trick is just trapping the click action on the button, consume the event, and then perform the required logic.

dialog.initModality(Modality.APPLICATION_MODAL);
dialog.show();            

loginButton.addEventFilter(EventType.ROOT, 
    e->{
        if(e.getEventType().equals(ActionEvent.ACTION)){                
            e.consume();
            // (hardcoded) Login Validation
            boolean isSuccessful = false;
            if (isSuccessful) {
                dialog.close();
            }
            else {
                // perform animation and close the dialog (or any other action)
                ShakeTransition anim = new ShakeTransition(dialog.getDialogPane(), t->dialog.close());
                anim.playFromStart();
            }
        }
    });

For the shake animation, I've modified ShakeTransition from Jasper Potts, in order to move the dialog window, as @jewelsea already pointed out:

/**
 * Animate a shake effect on the given node
 * 
* Based on CachedTimelineTransition, a Transition that uses a Timeline internally 
* and turns SPEED caching on for the animated node during the animation.
* 
* https://github.com/fxexperience/code/blob/master/FXExperienceControls/src/com/fxexperience/javafx/animation/CachedTimelineTransition.java
* 
* and ShakeTransition
* 
* https://github.com/fxexperience/code/blob/master/FXExperienceControls/src/com/fxexperience/javafx/animation/ShakeTransition.java
* 
* @author Jasper Potts
*/
class ShakeTransition extends Transition {

    private final Interpolator WEB_EASE = Interpolator.SPLINE(0.25, 0.1, 0.25, 1);
    private final Timeline timeline;
    private final Node node;
    private boolean oldCache = false;
    private CacheHint oldCacheHint = CacheHint.DEFAULT;
    private final boolean useCache=true;
    private final double xIni;

    private final DoubleProperty x = new SimpleDoubleProperty();

    /**
    * Create new ShakeTransition
    * 
    * @param node The node to affect
    */
    public ShakeTransition(final Node node, EventHandler<ActionEvent> event) {
        this.node=node;
        statusProperty().addListener((ov, t, newStatus) -> {
           switch(newStatus) {
               case RUNNING:
                   starting();
                   break;
               default:
                   stopping();
                   break;
           }
        });

        this.timeline= new Timeline(
                new KeyFrame(Duration.millis(0), new KeyValue(x, 0, WEB_EASE)),
                new KeyFrame(Duration.millis(100), new KeyValue(x, -10, WEB_EASE)),
                new KeyFrame(Duration.millis(200), new KeyValue(x, 10, WEB_EASE)),
                new KeyFrame(Duration.millis(300), new KeyValue(x, -10, WEB_EASE)),
                new KeyFrame(Duration.millis(400), new KeyValue(x, 10, WEB_EASE)),
                new KeyFrame(Duration.millis(500), new KeyValue(x, -10, WEB_EASE)),
                new KeyFrame(Duration.millis(600), new KeyValue(x, 10, WEB_EASE)),
                new KeyFrame(Duration.millis(700), new KeyValue(x, -10, WEB_EASE)),
                new KeyFrame(Duration.millis(800), new KeyValue(x, 10, WEB_EASE)),
                new KeyFrame(Duration.millis(900), new KeyValue(x, -10, WEB_EASE)),
                new KeyFrame(Duration.millis(1000), new KeyValue(x, 0, WEB_EASE))
            );
        xIni=node.getScene().getWindow().getX();
        x.addListener((ob,n,n1)->(node.getScene().getWindow()).setX(xIni+n1.doubleValue()));

        setCycleDuration(Duration.seconds(1));
        setDelay(Duration.seconds(0.2));
        setOnFinished(event);
    } 

    /**
    * Called when the animation is starting
    */
    protected final void starting() {
        if (useCache) {
            oldCache = node.isCache();
            oldCacheHint = node.getCacheHint();
            node.setCache(true);
            node.setCacheHint(CacheHint.SPEED);
        }
    }

    /**
    * Called when the animation is stopping
    */
    protected final void stopping() {
        if (useCache) {
            node.setCache(oldCache);
            node.setCacheHint(oldCacheHint);
        }
    }

    @Override 
    protected void interpolate(double d) {
        timeline.playFrom(Duration.seconds(d));
        timeline.stop();
    }
}

And this will be a JavaFX application using your login dialog:

@Override
public void start(Stage primaryStage) {
    Button btn = new Button();
    btn.setText("Show Login Dialog");
    btn.setOnAction(mevent -> {

        // Create the custom dialog.
        Dialog<Pair<String, String>> dialog = new Dialog<>();
        dialog.setTitle("Mars Simulation Project");
        dialog.setHeaderText("Log in");
        dialog.setContentText("Enter your username and password : ");
        dialog.initModality(Modality.NONE);
        // Set the button types.
        ButtonType loginButtonType = new ButtonType("Login", ButtonData.OK_DONE);
        dialog.getDialogPane().getButtonTypes().addAll(loginButtonType, ButtonType.CANCEL);

        // Create the username and password labels and fields.
        GridPane grid = new GridPane();
        grid.setHgap(10);
        grid.setVgap(10);
        grid.setPadding(new Insets(20, 150, 10, 10));

        TextField tfPlayer = new TextField();
        tfPlayer.setPromptText("e.g. m03j");
        PasswordField tfPassword = new PasswordField();
        tfPassword.setPromptText("xxxx");

        Button defaultPWB = new Button("Use Default");
        Button guestB = new Button("As Guest");
        defaultPWB.setOnAction(event -> {
            tfPassword.setText("msp0");
        } );

        guestB.setOnAction(event -> {
            tfPlayer.setText("Guest_");
            tfPassword.setText("msp0");
        } );

        grid.add(new Label("Player Name :"), 0, 0);
        grid.add(tfPlayer, 1, 0);
        grid.add(guestB, 2, 0);
        grid.add(new Label("Password :"), 0, 1);
        grid.add(tfPassword, 1, 1);
        grid.add(defaultPWB, 2, 1);

        // Enable/Disable login button depending on whether a username was entered.
        Node loginButton = dialog.getDialogPane().lookupButton(loginButtonType);
        loginButton.setDisable(true);

        // Do some validation (using the Java 8 lambda syntax).
        tfPlayer.textProperty().addListener((observable, oldValue, newValue) -> {
            loginButton.setDisable(newValue.trim().isEmpty());
        } );

        dialog.getDialogPane().setContent(grid);

        // Request focus on the player name field by default.
        Platform.runLater(() -> tfPlayer.requestFocus());

        dialog.initModality(Modality.APPLICATION_MODAL);
        dialog.show();            

        loginButton.addEventFilter(EventType.ROOT, 
            e->{
                if(e.getEventType().equals(ActionEvent.ACTION)){
                    e.consume();
                    // (hardcoded) Login Validation
                    boolean isSuccessful = false;
                    if (isSuccessful) {
                        dialog.close();
                    }
                    else {
                        ShakeTransition anim = new ShakeTransition(dialog.getDialogPane(), t->dialog.close());
                        anim.playFromStart();
                    }
                }
            });
    });

    StackPane root = new StackPane();
    root.getChildren().add(btn);

    Scene scene = new Scene(root, 300, 250);

    primaryStage.setTitle("Shaky Login Dialog");
    primaryStage.setScene(scene);
    primaryStage.show();
}