Create a gist now

Instantly share code, notes, and snippets.

What would you like to do?
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; }
}
Owner

jewelsea commented Apr 23, 2012

https://forums.oracle.com/forums/thread.jspa?threadID=2378939 "Modal Dialog Help - Application should get lightly blurred and transparent"

Owner

jewelsea commented Apr 23, 2012

Owner

jewelsea commented Apr 25, 2012

added drop shadow effect to dialog

Owner

jewelsea commented Apr 25, 2012

added drop shadow effect stopped translucency working, updated code to allow the translucency to work.

Owner

jewelsea commented Apr 25, 2012

gave the modal dialog a rounded border.

Owner

jewelsea commented May 10, 2012

Extracted css styling to a separate file.

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

Owner

jewelsea commented Jun 25, 2012

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

Owner

jewelsea commented Jun 26, 2012

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.

Owner

jewelsea commented Jun 26, 2012

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.

Owner

jewelsea commented Jun 26, 2012

Add functionality to allow the dialog to be dragged around.

Owner

jewelsea commented Sep 26, 2012

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.

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!

Thanks a lot jewelsea. the best on oracle,

Owner

jewelsea commented Apr 17, 2014

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.

Owner

jewelsea commented Aug 26, 2014

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