How to shake login dialog in javaFX / 8

Question

How to make my javaFX / 8 dialog more elegant when the user enters the wrong login / password pair ?.

Since the dialog in java8u40 does not have it, I decided to do it myself. However, he does not look good enough.

What about him? Can anyone help? Is there a better way to do this?

---

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("eg 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(); } } ); 

My problem so far is that as soon as I click the "Login" button, the dialog will be closed by default.

So I have to use dialog.show () so that it displays again.

[edit] This, however, still cannot prevent a momentary break (viewing the dialog box disappears and reappears).

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

Please 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 noticed that the controlsfx dialog has a shake () method.

Does anyone know if this 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 so much for any comments!

Answer 1

There you can add a transition as soon as the user clicks the login button using the Dialog API before closing the window.

Using dialog.show() instead of dialog.showAndWait () `, the trick simply captures the action of clicking the button, consumes the event, and then performs 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 changed the ShakeTransition from Jasper Potts to move the dialog, as @jewelsea already indicated:

 /** * 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 the 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("eg 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(); }