[英]how to shake a login dialog in javaFX/8
當用戶輸入錯誤的登錄名/密碼對時,如何使我的javaFX / 8對話框更優雅地搖動?
由於java8u40中的對話框沒有,我打算自己創建一個。 但是,它看起來不夠好。
它出什么問題了? 有人可以幫忙嗎? 這樣做有更好的方法嗎?
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();
}
} );
到目前為止,我的問題是,只要我點擊“登錄”按鈕,對話框將默認關閉。
因此,我必須使用dialog.show()使其再次顯示。
[編輯]然而,這仍然無法阻止瞬間的差距發生(看到對話框消失並重新出現)。
之后,我創建了一個DialogEarthquakeCenter實例,以便動搖對話框。
請注意,下面的DialogEarthquakeCenter是對此原始版本的直接修改:
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();
});
}
}
我注意到controlsfx對話框有一個shake()方法。
有誰知道它是否運作良好?
非常感謝任何評論!
在窗口關閉之前,一旦用戶使用Dialog
API單擊登錄按鈕,就可以添加轉換。
使用dialog.show()
而不是dialog.showAndWait()`,技巧只是捕獲按鈕上的單擊操作,使用事件,然后執行所需的邏輯。
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();
}
}
});
對於搖動動畫,我已經修改了Jasper Potts的 ShakeTransition
,以便移動對話窗口,正如@jewelsea已經指出的那樣:
/**
* 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();
}
}
這將是一個使用您的登錄對話框的JavaFX應用程序:
@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();
}
聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.