I would like to create Modal window like this:
So far I only managed to create undecorated stage
public void initEditStage(){
Stage stage = new Stage(StageStyle.UNDECORATED);
stage.initModality(Modality.WINDOW_MODAL);
stage.setScene(new Scene(new Group(new Button("my second window")), Color.AQUA));
stage.show();
}
How I can create the back window barely readable like the picture?
Just grab the root of the scene of the main stage and add a blur effect to it. Reset the effect when you dismiss the dialog. There's a bunch of ways you could approach this but here's a (complete) example that more or less does the minimum.
import javafx.animation.KeyFrame;
import javafx.animation.KeyValue;
import javafx.animation.Timeline;
import javafx.application.Application;
import javafx.beans.property.ObjectProperty;
import javafx.beans.property.SimpleObjectProperty;
import javafx.collections.FXCollections;
import javafx.geometry.Insets;
import javafx.geometry.Point2D;
import javafx.geometry.Pos;
import javafx.scene.Parent;
import javafx.scene.Scene;
import javafx.scene.control.Button;
import javafx.scene.control.ComboBox;
import javafx.scene.control.Label;
import javafx.scene.control.TextArea;
import javafx.scene.effect.BoxBlur;
import javafx.scene.effect.Effect;
import javafx.scene.layout.BorderPane;
import javafx.scene.layout.HBox;
import javafx.scene.layout.VBox;
import javafx.scene.paint.Color;
import javafx.stage.Modality;
import javafx.stage.Stage;
import javafx.stage.StageStyle;
import javafx.stage.Window;
import javafx.util.Duration;
public class BlurWindowWithDialog extends Application {
@Override
public void start(Stage primaryStage) {
BorderPane root = createUI();
Button showDialogButton = new Button("Show Dialog");
showDialogButton.setOnAction(event -> {
Parent rootPane = showDialogButton.getScene().getRoot();
Effect previousEffect = rootPane.getEffect();
final BoxBlur blur = new BoxBlur(0, 0, 5);
blur.setInput(previousEffect);
rootPane.setEffect(blur);
Stage stage = createDialog(showDialogButton.getScene().getWindow());
stage.setOnHidden(t -> rootPane.setEffect(previousEffect));
// Optional extra: fade the blur and dialog in:
stage.getScene().getRoot().setOpacity(0);
Timeline timeline = new Timeline(new KeyFrame(Duration.millis(500),
new KeyValue(blur.widthProperty(), 10),
new KeyValue(blur.heightProperty(), 10),
new KeyValue(stage.getScene().getRoot().opacityProperty(), 0.75)
));
timeline.play();
stage.show();
});
HBox bottomControls = new HBox(5, showDialogButton);
bottomControls.setPadding(new Insets(10));
bottomControls.setAlignment(Pos.CENTER);
root.setBottom(bottomControls);
Scene scene = new Scene(root, 600, 250);
primaryStage.setScene(scene);
primaryStage.show();
}
private Stage createDialog(Window owner) {
Stage stage = new Stage();
stage.initOwner(owner);
stage.initModality(Modality.WINDOW_MODAL);
stage.initStyle(StageStyle.TRANSPARENT);
Button okButton = new Button("OK");
okButton.setOnAction(evt -> stage.hide() );
VBox dialogRoot = new VBox(5, new Label("You pressed the button"), okButton);
dialogRoot.setAlignment(Pos.CENTER);
dialogRoot.setStyle("-fx-background-color: derive(lightsteelblue, 25%) ; -fx-border-color: blue;"
+ "-fx-background-radius: 8px; -fx-border-radius: 8px; -fx-border-width: 3px;");
final Scene scene = new Scene(dialogRoot, 250, 150,
Color.TRANSPARENT);
enableDragging(scene);
stage.setScene(scene);
return stage;
}
private BorderPane createUI() {
HBox topControls = new HBox(5,
new Label("Label"),
new Button("Button"),
new ComboBox<String>(FXCollections.observableArrayList("One", "Two", "Three")),
new Button("Another Button"),
new Label("Another Label"));
topControls.setPadding(new Insets(10));
topControls.setAlignment(Pos.CENTER);
String loremIpsum = "Lorem ipsum dolor sit amet, consectetur adipisicing elit, "
+ "sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. "
+ "Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris "
+ "nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in "
+ "reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. "
+ "Excepteur sint occaecat cupidatat non proident, "
+ "sunt in culpa qui officia deserunt mollit anim id est laborum.";
TextArea bigLabel = new TextArea(loremIpsum);
bigLabel.setWrapText(true);
bigLabel.setPadding(new Insets(20));
BorderPane root = new BorderPane(bigLabel, topControls, null, null, null);
root.setStyle("-fx-base: #b2cdf7; -fx-border-color: blue; -fx-border-width: 3px ;");
return root;
}
private void enableDragging(Scene scene) {
final ObjectProperty<Point2D> mouseLocation = new SimpleObjectProperty<>();
scene.setOnMousePressed(event -> mouseLocation.set(new Point2D(event.getScreenX(), event.getScreenY())));
scene.setOnMouseDragged(event -> {
double mouseX = event.getScreenX();
double mouseY = event.getScreenY();
double deltaX = mouseX - mouseLocation.get().getX();
double deltaY = mouseY - mouseLocation.get().getY();
Window window = scene.getWindow();
window.setX(window.getX() + deltaX);
window.setY(window.getY() + deltaY);
mouseLocation.set(new Point2D(mouseX, mouseY));
});
}
public static void main(String[] args) {
launch(args);
}
}
I'd suggest just using GaussianBlur on your root pane.
That should work in JavaFx 2 as well.
GaussianBlur blurEffect = new GaussianBlur(5);
root.setEffect(blurEffect);
That's it! For further information read the Javadoc http://docs.oracle.com/javafx/2/api/javafx/scene/effect/GaussianBlur.html
Hope it helps,
Laurenz
If you don't need waste your time to make custom Modal ,you can use JFXDialog from JFoenix ,it is easy to implement ,this example can help you :
private void alert(String title, String messageContent) {
JFXDialog uploadingErrorDialog = new JFXDialog();
//Dialog components
Text titleText = new Text(title);
Text contentText = new Text(messageContent);
JFXDialogLayout dialogLayout = new JFXDialogLayout();
dialogLayout.setHeading(titleText);
dialogLayout.setBody(contentText);
//Create close button
JFXButton closeButton = new JFXButton(SignUpFormStrings.getDialogCloseButton());
closeButton.setOnAction(actionEvent -> {
uploadingErrorDialog.close();
});
dialogLayout.setActions(closeButton);
uploadingErrorDialog.getStylesheets().add(Indigo.class.getClass().getResource("/mvc/view/css/signupform.css").toExternalForm());
uploadingErrorDialog.setDialogContainer((StackPane) createAccountButton.getParent().getScene().getRoot());
uploadingErrorDialog.setContent(dialogLayout);
uploadingErrorDialog.show();
}
And the result is pretty :
