Instantly share code, notes, and snippets.

Embed
What would you like to do?
JavaFX WebView 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;
}
.confirmation-results {
-fx-background-color: cornsilk;
-fx-padding: 5;
}
import javafx.application.Application;
import javafx.beans.property.BooleanProperty;
import javafx.beans.property.SimpleBooleanProperty;
import javafx.event.*;
import javafx.scene.Node;
import javafx.scene.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.*;
import javafx.util.Callback;
/**
* Demonstrates a modal WebView confirm box in JavaFX.
* Dialog is rendered upon a blurred background.
* Dialog is translucent.
* Requires JavaFX 2.2
* To test, run the program, then click the "Try it" button in the Result textarea.
*/
public class WebViewConfirm 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://www.w3schools.com/js/tryit.asp?filename=tryjs_confirm");
// layout the stage - a vbox to show confirmation results and a webview to generate confirmations.
final VBox confirmationResults = new VBox();
confirmationResults.getStyleClass().add("confirmation-results");
confirmationResults.setMinWidth(100);
HBox layout = new HBox();
layout.getChildren().addAll(confirmationResults, webView);
primaryStage.setScene(new Scene(layout));
primaryStage.show();
primaryStage.getScene().getStylesheets().add(getClass().getResource("modal-dialog.css").toExternalForm());
// show the confirmation dialog each time a new page is loaded and
// record the confirmation result.
webView.getEngine().setConfirmHandler(new Callback<String, Boolean>() {
@Override public Boolean call(String msg) {
Boolean confirmed = confirm(primaryStage, msg);
confirmationResults.getChildren().add(new Label("Confirmed? " + confirmed));
return confirmed;
}
});
}
private Boolean confirm(final Stage parent, String msg) {
final BooleanProperty confirmationResult = new SimpleBooleanProperty();
// initialize the confirmation dialog
final Stage dialog = new Stage(StageStyle.TRANSPARENT);
dialog.initOwner(parent);
dialog.initModality(Modality.WINDOW_MODAL);
dialog.setScene(
new Scene(
HBoxBuilder.create().styleClass("modal-dialog").children(
LabelBuilder.create().text(msg).build(),
ButtonBuilder.create().text("OK").defaultButton(true).onAction(new EventHandler<ActionEvent>() {
@Override public void handle(ActionEvent actionEvent) {
// take action and close the dialog.
confirmationResult.set(true);
parent.getScene().getRoot().setEffect(null);
dialog.close();
}
}).build(),
ButtonBuilder.create().text("Cancel").cancelButton(true).onAction(new EventHandler<ActionEvent>() {
@Override public void handle(ActionEvent actionEvent) {
// abort action and close the dialog.
confirmationResult.set(false);
parent.getScene().getRoot().setEffect(null);
dialog.close();
}
}).build()
).build()
, Color.TRANSPARENT
)
);
// 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);
}
});
// style and show the dialog.
dialog.getScene().getStylesheets().add(getClass().getResource("modal-dialog.css").toExternalForm());
parent.getScene().getRoot().setEffect(new BoxBlur());
dialog.showAndWait();
return confirmationResult.get();
}
// records relative x and y co-ordinates.
class Delta { double x, y; }
}
@jewelsea

This comment has been minimized.

Show comment
Hide comment
@jewelsea

jewelsea Jun 25, 2012

See also: https://gist.github.com/1887631 for an example of creating a modal dialog which does not need to interface with the WebView callback methods.

Owner

jewelsea commented Jun 25, 2012

See also: https://gist.github.com/1887631 for an example of creating a modal dialog which does not need to interface with the WebView callback methods.

@GrantZhu

This comment has been minimized.

Show comment
Hide comment
@GrantZhu

GrantZhu Jun 26, 2012

Much appreciated! I searched a lot yesterday and thought it wasn't able to do so until javafx2.2 is released and showAndWait is available(I saw your comments on OTN forum that talk about this). But I just found we could get the preview version, though it may not be stable, right?

GrantZhu commented Jun 26, 2012

Much appreciated! I searched a lot yesterday and thought it wasn't able to do so until javafx2.2 is released and showAndWait is available(I saw your comments on OTN forum that talk about this). But I just found we could get the preview version, though it may not be stable, right?

@jewelsea

This comment has been minimized.

Show comment
Hide comment
@jewelsea

jewelsea Jun 26, 2012

Yeah, it's a developer preview, so not as stable as a GA release - OTOH lots of bugs fixed since 2.1 and most of the instability is new functionality and platform support, so it's a bit of a wash.

Owner

jewelsea commented Jun 26, 2012

Yeah, it's a developer preview, so not as stable as a GA release - OTOH lots of bugs fixed since 2.1 and most of the instability is new functionality and platform support, so it's a bit of a wash.

@jewelsea

This comment has been minimized.

Show comment
Hide comment
@jewelsea

jewelsea Jun 26, 2012

Updated to add drag function.

Owner

jewelsea commented Jun 26, 2012

Updated to add drag function.

@rohitvvv

This comment has been minimized.

Show comment
Hide comment
@rohitvvv

rohitvvv May 13, 2015

How does one test(automate) modal Dialog boxes? The main JavaFX application thread blocks until one clicks on Ok. This prevents automated tests from executing.

rohitvvv commented May 13, 2015

How does one test(automate) modal Dialog boxes? The main JavaFX application thread blocks until one clicks on Ok. This prevents automated tests from executing.

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