Skip to content

Instantly share code, notes, and snippets.

@jewelsea
Created February 22, 2012 21:47
Show Gist options
  • Save jewelsea/1887631 to your computer and use it in GitHub Desktop.
Save jewelsea/1887631 to your computer and use it in GitHub Desktop.
JavaFX Modal Confirm Dialog Box Example
/**
* modal-dialog.css
* place in same directory as WebViewConfirm.java
* ensure your build system copies the file to your build output directory
*/
.root {
-fx-glass-color: rgba(95, 158, 160, 0.9);
}
.modal-dialog {
-fx-padding: 20;
-fx-spacing: 10;
-fx-alignment: center;
-fx-font-size: 20;
-fx-background-color: linear-gradient(to bottom, derive(-fx-glass-color, 20%), -fx-glass-color);
-fx-border-color: derive(-fx-glass-color, -20%);
-fx-border-width: 5;
-fx-background-insets: 12;
-fx-border-insets: 10;
-fx-border-radius: 6;
-fx-background-radius: 6;
}
.modal-dialog:pressed {
-fx-cursor: move;
}
.modal-dialog .button:pressed {
-fx-cursor: default;
}
import javafx.application.Application;
import javafx.beans.value.*;
import javafx.concurrent.Worker;
import javafx.event.*;
import javafx.scene.*;
import javafx.scene.control.*;
import javafx.scene.effect.BoxBlur;
import javafx.scene.input.MouseEvent;
import javafx.scene.layout.*;
import javafx.scene.paint.Color;
import javafx.scene.web.WebView;
import javafx.stage.*;
/**
* Demonstrates a modal confirm box in JavaFX.
* Dialog is rendered upon a blurred background.
* Dialog is translucent.
*/
public class ModalConfirmExample extends Application {
public static void main(String[] args) { launch(args); }
@Override public void start(final Stage primaryStage) {
// initialize the stage
primaryStage.setTitle("Modal Confirm Example");
final WebView webView = new WebView(); webView.getEngine().load("http://docs.oracle.com/javafx/");
primaryStage.setScene(new Scene(webView));
primaryStage.show();
// initialize the confirmation dialog
final Stage dialog = new Stage(StageStyle.TRANSPARENT);
dialog.initModality(Modality.WINDOW_MODAL);
dialog.initOwner(primaryStage);
dialog.setScene(
new Scene(
HBoxBuilder.create().styleClass("modal-dialog").children(
LabelBuilder.create().text("Will you like this page?").build(),
ButtonBuilder.create().text("Yes").defaultButton(true).onAction(new EventHandler<ActionEvent>() {
@Override public void handle(ActionEvent actionEvent) {
// take action and close the dialog.
System.out.println("Liked: " + webView.getEngine().getTitle());
primaryStage.getScene().getRoot().setEffect(null);
dialog.close();
}
}).build(),
ButtonBuilder.create().text("No").cancelButton(true).onAction(new EventHandler<ActionEvent>() {
@Override public void handle(ActionEvent actionEvent) {
// abort action and close the dialog.
System.out.println("Disliked: " + webView.getEngine().getTitle());
primaryStage.getScene().getRoot().setEffect(null);
dialog.close();
}
}).build()
).build()
, Color.TRANSPARENT
)
);
dialog.getScene().getStylesheets().add(getClass().getResource("modal-dialog.css").toExternalForm());
// allow the dialog to be dragged around.
final Node root = dialog.getScene().getRoot();
final Delta dragDelta = new Delta();
root.setOnMousePressed(new EventHandler<MouseEvent>() {
@Override public void handle(MouseEvent mouseEvent) {
// record a delta distance for the drag and drop operation.
dragDelta.x = dialog.getX() - mouseEvent.getScreenX();
dragDelta.y = dialog.getY() - mouseEvent.getScreenY();
}
});
root.setOnMouseDragged(new EventHandler<MouseEvent>() {
@Override public void handle(MouseEvent mouseEvent) {
dialog.setX(mouseEvent.getScreenX() + dragDelta.x);
dialog.setY(mouseEvent.getScreenY() + dragDelta.y);
}
});
// show the confirmation dialog each time a new page is loaded.
webView.getEngine().getLoadWorker().stateProperty().addListener(new ChangeListener<Worker.State>() {
@Override public void changed(ObservableValue<? extends Worker.State> observableValue, Worker.State state, Worker.State newState) {
if (newState.equals(Worker.State.SUCCEEDED)) {
primaryStage.getScene().getRoot().setEffect(new BoxBlur());
dialog.show();
}
}
});
}
// records relative x and y co-ordinates.
class Delta { double x, y; }
}
@jewelsea
Copy link
Author

gave the modal dialog a rounded border.

@jewelsea
Copy link
Author

@jewelsea
Copy link
Author

Extracted css styling to a separate file.

@GrantZhu
Copy link

Hi, your app is great. But I have one question, how to use the modal dialog within webEngine.confirmHandler and return the user's choice, say, get the choice before handler returns? I don't know how to implement because It's asynchronous.

Thanks,
Grant

@jewelsea
Copy link
Author

Hi GrantZhu, I created a new gist to demonstrate creating dialogs compatible with webEngine.confirmHandler: https://gist.github.com/2992072

@jewelsea
Copy link
Author

Cleaned up code and css a little bit to just render the the translucent background effect in the dialog background rather than a stacked pane.
Also made the content opaque rather than translucent, so now only the background remains translucent.

@jewelsea
Copy link
Author

Made the modal dialog window modal with the primaryStage as the owner - providing an owner stops two icons showing up in the taskbar for the app on Windows 7.

@jewelsea
Copy link
Author

Add functionality to allow the dialog to be dragged around.

@jewelsea
Copy link
Author

JavaFX WebView Modal Confirm Dialog Box Example was created to address GrantZhu's comment and makes use of the stage.showAndWait routine to make the operation of the dialog seem synchronous to the calling code.

@edubkendo
Copy link

Your numerous contributions are greatly appreciated. Just wanted to say a word of thanks! I'm constantly finding my questions answered by somewhere that you've posted an example, an answer, a gist, etc. Thanks mate!

@azergha
Copy link

azergha commented Aug 25, 2013

Thanks a lot jewelsea. the best on oracle,

@jewelsea
Copy link
Author

This code is now quite old and uses deprecated API features. Before using this code, I recommend reading the answer to the StackOverflow question Block program execution until user clicks button and considering adopting one of the solutions recommended in that answer.

@jewelsea
Copy link
Author

Standard Dialog classes added will be added to JavaFX as part of Java 8u40. See the fxexperience post on bringing dialogs to JavaFX.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment