Skip to content

@jewelsea /ModalConfirmExample.java
Created

Embed URL

HTTPS clone URL

Subversion checkout URL

You can clone with
or
.
Download ZIP
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
Owner

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

@jewelsea
Owner

added drop shadow effect to dialog

@jewelsea
Owner

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

@jewelsea
Owner

gave the modal dialog a rounded border.

@jewelsea
Owner

Extracted css styling to a separate file.

@GrantZhu

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
Owner

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

@jewelsea
Owner

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
Owner

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
Owner

Add functionality to allow the dialog to be dragged around.

@jewelsea
Owner

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

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!

@monami7001

Thanks a lot jewelsea. the best on oracle,

@jewelsea
Owner

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
Owner

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
Something went wrong with that request. Please try again.