1 2 Previous Next 21 Replies Latest reply: Apr 25, 2012 2:08 AM by jsmith RSS

    Model Dialog Help - Application should get lightly blurred and transparent

    Pugazhendhi
      Hi in my application i like to show success dialog and exception dialog

      when the exception dialog shown i want to lightly blur the application in backside and i want to show the dialog as little transparent as glass like screen can anyone help me pls .
      i asure that u can understand my question , if not pls let me know i will post the expected sample pics in website

      Edited by: Pugazhendhi on Apr 21, 2012 10:39 PM
        • 1. Re: Model Dialog Help - Application should get lightly blurred and transparent
          JohnHendrikx
          Well, I can help with the transparent part.

          Basically, make sure your main container is a StackPane. Then any time you want to display a "dialog" on top of it, you can just add it to the StackPane and it will appear on top of your current content. If you make sure the dialog has the focus, it will make the rest of the system appear "modal". Make the dialog a little transparent, and whatever is beneath will show through.

          See for example here for a "dialog" that is transparent: https://github.com/hjohn/MediaSystem/blob/master/screenshot-1.jpg

          To make it slightly blurred is a bit more difficult but definitely possible. You can add an effect to the first child of the main StackPane (your content) and no effect to the 2nd child (your dialog).

          Here is some sample code:
          private final StackPane sceneRoot = new StackPane();
          dialogScreen = new DialogScreen(title, options);
          
          sceneRoot.getChildren().get(0).setEffect(new GaussianBlur());
          sceneRoot.getChildren().add(dialogScreen);
          
          dialogScreen.requestFocus();
          And when it is done:
          sceneRoot.getChildren().get(0).setEffect(null);
          sceneRoot.getChildren().remove(dialogScreen);
          • 2. Re: Model Dialog Help - Application should get lightly blurred and transparent
            jsmith
            Try this sample Pugazhendhi: https://gist.github.com/1887631
            Sample renders a translucent modal dialog box over a blurred stage.
            • 3. Re: Model Dialog Help - Application should get lightly blurred and transparent
              Pugazhendhi
              Hi smith

              Link is not working .. :(
              • 4. Re: Model Dialog Help - Application should get lightly blurred and transparent
                Pugazhendhi
                if u dont mind , can u send me the updated link of sample . It will be helpful for me ...
                • 5. Re: Model Dialog Help - Application should get lightly blurred and transparent
                  jsmith
                  Odd, link works for me.
                  Here is the code copied from the link.
                  import javafx.application.Application;
                  import javafx.beans.value.*;
                  import javafx.concurrent.Worker;
                  import javafx.event.*;
                  import javafx.geometry.Pos;
                  import javafx.scene.Scene;
                  import javafx.scene.control.*;
                  import javafx.scene.effect.BoxBlur;
                  import javafx.scene.layout.HBoxBuilder;
                  import javafx.scene.paint.Color;
                  import javafx.scene.web.WebView;
                  import javafx.stage.Modality;
                  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 util = new Stage(StageStyle.TRANSPARENT);
                      util.initModality(Modality.APPLICATION_MODAL);
                      util.setScene(
                        new Scene(
                          HBoxBuilder.create().spacing(10).alignment(Pos.CENTER).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);
                                util.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);
                                util.close();
                              }
                            }).build()
                          ).style("-fx-padding: 20; -fx-font-size: 20; -fx-background-color: linear-gradient(to bottom, derive(cadetblue, 20%), cadetblue); -fx-border-color: derive(cadetblue, -20%); -fx-border-width: 5;")
                           .build()
                        )
                      );
                      util.getScene().setFill(Color.TRANSPARENT);
                      util.getScene().getRoot().setOpacity(0.9);
                  
                      // 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());
                            util.show();
                            util.toFront();
                          }
                        }
                      });
                    }
                  }
                  • 7. Re: Model Dialog Help - Application should get lightly blurred and transparent
                    Sai Pradeep Dandem
                    Hi Pugazhendhi,
                    I have worked on similar functionaity,. where i need to implement Alert and Confirm pop ups for my application.
                    Below is a quick example ( a bit long code :) ) where you can check the implementation.

                    The following is the css code

                    .popUpStage{
                         -fx-background-radius: 8, 8, 8, 8;
                         -fx-border-radius: 8, 8, 8, 8;
                         -fx-background-color: #D0D0D0;
                         -fx-border-color: #6e737d;
                            -fx-border-insets: 0;
                         -fx-border-width:2px;
                         -fx-effect: dropshadow( three-pass-box , gray , 8, 0.0 , 4 , 4 );
                    }
                    
                    .popUpHeader{
                         -fx-background-color: #808080;
                         -fx-background-radius:8 8 0 0;
                         -fx-background-insets:1;
                         -fx-border-width:0 0 1 0;
                         -fx-border-color:#6e737d , rgba(255,255,255,0.3);
                         -fx-border-insets:0,1;
                         -fx-cursor:move;
                    }
                    
                    .popUpHeaderLbl{
                         -fx-font-size: 14 ;
                         -fx-font-weight: bold ;
                         -fx-font-family: arial ;
                         -fx-text-fill:#F8F8F8;
                    }
                    
                    .popUpBody{
                         -fx-background-color: #F8F8F8;
                    }
                    
                    .popUpActionBox{
                         -fx-background-color: #F8F8F8;
                         -fx-background-radius:0 0 8 8;
                    }
                    And the code to check the functionality is..
                    import javafx.application.Application;
                    import javafx.beans.property.SimpleDoubleProperty;
                    import javafx.event.ActionEvent;
                    import javafx.event.EventHandler;
                    import javafx.geometry.Insets;
                    import javafx.geometry.Pos;
                    import javafx.scene.Cursor;
                    import javafx.scene.Group;
                    import javafx.scene.Node;
                    import javafx.scene.Parent;
                    import javafx.scene.Scene;
                    import javafx.scene.control.Button;
                    import javafx.scene.control.Label;
                    import javafx.scene.control.TextField;
                    import javafx.scene.control.Tooltip;
                    import javafx.scene.input.MouseEvent;
                    import javafx.scene.layout.HBox;
                    import javafx.scene.layout.Priority;
                    import javafx.scene.layout.StackPane;
                    import javafx.scene.layout.StackPaneBuilder;
                    import javafx.scene.layout.VBox;
                    import javafx.scene.paint.Color;
                    import javafx.scene.text.Text;
                    import javafx.stage.Modality;
                    import javafx.stage.Stage;
                    import javafx.stage.StageStyle;
                    
                    public class AlertAndConfirmPopUpDemo extends Application {
                    
                         Stage stage;
                         Scene scene;
                         StackPane root;
                         public static void main(String[] args) {
                              Application.launch(args);
                         }
                    
                         @Override
                         public void start(Stage stage) throws Exception {
                              this.stage = stage;
                              root = new StackPane();
                              root.autosize();
                              this.scene = new Scene(root, Color.LINEN);
                              stage.setTitle("Pop Ups");
                              stage.setWidth(800);
                              stage.setHeight(600);
                              stage.setScene(this.scene);
                              stage.show();
                    
                              configurePopUps();
                         }
                    
                         private void configurePopUps() {
                              VBox vb = new VBox();
                              vb.setPadding(new Insets(15));
                    
                              /** ALERT */
                              Label alertLbl = new Label("Alert Demo");
                              alertLbl.setTooltip(new Tooltip("Haeildid"));
                              alertLbl.setStyle("-fx-font-weight:bold;-fx-font-size:14px;");
                    
                              final TextField text = new TextField("This is some default text for alert.");
                              text.setPrefWidth(200);
                    
                              Button alertBtn = new Button("Show as Alert");
                              alertBtn.setOnAction(new EventHandler<ActionEvent>() {
                                   @Override
                                   public void handle(ActionEvent arg0) {
                                        new Alert(stage, "Alert", text.getText());
                                   }
                              });
                    
                              HBox hb1 = new HBox();
                              hb1.setSpacing(10);
                              hb1.getChildren().addAll(new Label("Enter Some Text : "),text,alertBtn);
                              vb.getChildren().addAll(alertLbl,hb1);
                    
                              /** CONFIRM */
                              Label confirmLbl = new Label("Confirm Demo");
                              confirmLbl.setStyle("-fx-font-weight:bold;-fx-font-size:14px;");
                    
                              final TextField textc = new TextField("This is some default text for confirm. Are you sure ?");
                              textc.setPrefWidth(200);
                    
                              final EventHandler<ActionEvent> event = new EventHandler<ActionEvent>() {
                                   @Override public void handle(ActionEvent actionEvent) {
                                        System.out.println("Yes i am done.... !!!");
                                   }
                              };
                              Button confirmBtn = new Button("Show as Confirm");
                              confirmBtn.setOnAction(new EventHandler<ActionEvent>() {
                                   @Override
                                   public void handle(ActionEvent arg0) {
                                        new Confirm(stage, "Confirm", textc.getText(), event);
                                   }
                              });
                              HBox hb2 = new HBox();
                              hb2.setSpacing(10);
                              hb2.getChildren().addAll(new Label("Enter Some Text : "),textc,confirmBtn);
                              vb.getChildren().addAll(confirmLbl,hb2);
                    
                              root.getChildren().addAll(vb);
                         }
                    
                         /**
                          * Alert Class
                          */
                         class Alert extends MessagePopUp{
                              public Alert(Stage parentStage, String title, String message){
                                   super(parentStage, title, message);
                              }
                    
                              public Alert(Stage parentStage, String title, String message, double width){
                                   super(parentStage, title, message, width);
                              }
                         }
                    
                         /**
                          * Confirm Class
                          */
                         class Confirm extends MessagePopUp{
                    
                              public Confirm(Stage parentStage, String title, String message, EventHandler<ActionEvent> event) {
                                   super(parentStage, title, message);
                                   setActionBox(event);
                              }
                    
                              public Confirm(Stage parentStage, String title, String message, double width, EventHandler<ActionEvent> event){
                                   super(parentStage, title, message, width);
                                   setActionBox(event);
                              }
                    
                              private void setActionBox(final EventHandler<ActionEvent> event) {
                                   final HBox actionBox = super.getActionBox();
                                   actionBox.getChildren().clear();
                                   actionBox.setSpacing(15);
                    
                                   Button okBtn = new Button("Ok");
                                   okBtn.setPrefWidth(75);
                                   okBtn.setOnAction(new EventHandler<ActionEvent>() {
                                        @Override public void handle(ActionEvent actionEvent) {
                                             event.handle(actionEvent);
                                             closePopUp();
                                        }
                                   });
                    
                                   Button cancelBtn = new Button("Cancel");
                                   cancelBtn.setPrefWidth(75);
                                   cancelBtn.setOnAction(new EventHandler<ActionEvent>() {
                                        @Override public void handle(ActionEvent actionEvent) {
                                             closePopUp();
                                        }
                                   });
                                   actionBox.getChildren().addAll(okBtn,cancelBtn);
                              }
                         }
                    
                         /**
                          * Super class for Alert and Confirm
                          */
                         class MessagePopUp{
                              private Stage stage;
                              private Scene scene;
                              private StackPane root;
                    
                              private double startDragX;
                              private double startDragY;
                              private static final double DEFAULT_WIDTH = 350d;
                              private static final double DEFAULT_HEIGHT = 150d;
                              private SimpleDoubleProperty wrapWidth = new SimpleDoubleProperty(DEFAULT_WIDTH-20d);
                              private HBox actionBox;
                              StackPane mask = StackPaneBuilder.create().style("-fx-background-color:black;-fx-opacity:.2;").build();
                    
                              public MessagePopUp(Stage parentStage, String title, String message,double width) {
                                   this(parentStage, title, message);
                                   setWrapWidth(width);
                              }
                    
                              public MessagePopUp(Stage parentStage, String title, String message){
                                   this.root = new StackPane();
                                   this.root.getStyleClass().add("mainStage");
                                   this.root.autosize();
                    
                                   this.scene = new Scene(root, DEFAULT_WIDTH, DEFAULT_HEIGHT, Color.web("#FFFFFF"));
                                   this.scene.getStylesheets().add("styles/alertNconfirm.css"); // Make sure the above css is in this css file.
                                   this.scene.setFill(Color.TRANSPARENT);
                    
                                   this.stage = new Stage();
                                   this.stage.setScene(scene);
                                   this.stage.initOwner( parentStage);
                                   this.stage.initModality(Modality.APPLICATION_MODAL);
                                   this.stage.setTitle(title);
                                   this.stage.initStyle(StageStyle.TRANSPARENT);
                                   show();
                    
                                   Group mainRoot = new Group();
                                   StackPane root = new StackPane(){
                                        @Override
                                        protected void layoutChildren() {
                                             super.layoutChildren();
                                             stage.setWidth(getWidth()+20);
                                             stage.setHeight(getHeight()+20);
                                        }
                                   };
                    
                                   root.autosize();
                                   root.getStyleClass().add("popUpStage");
                                   mainRoot.getChildren().add(root);
                    
                                   this.root.setPadding(new Insets(0,10,10,0));
                                   this.root.getChildren().add(mainRoot);
                    
                                   VBox vb = new VBox();
                                   /* HEADER */
                                   HBox header = new HBox();
                                   header.setAlignment(Pos.CENTER_LEFT);
                                   header.setPadding(new Insets(0, 2, 0, 5));
                                   header.getStyleClass().add("popUpHeader");
                                   header.setPrefHeight(28);
                                   Button closeBtn = new Button("X");
                                   closeBtn.setPrefSize(18, 18);
                                   closeBtn.setCursor(Cursor.HAND);
                                   closeBtn.setOnAction(new EventHandler<ActionEvent>() {
                                        @Override public void handle(ActionEvent actionEvent) {
                                             closePopUp();
                                        }
                                   });
                    
                                   StackPane sp = new StackPane();
                                   sp.getChildren().add(closeBtn);
                                   sp.setAlignment(Pos.CENTER_RIGHT);
                                   Label titleLbl = new Label(title);
                                   titleLbl.getStyleClass().add("popUpHeaderLbl");
                    
                                   header.getChildren().addAll(titleLbl,sp);
                                   HBox.setHgrow(sp, Priority.ALWAYS);
                                   addDragListeners(header);
                    
                                   /* CONTENT */
                                   StackPane content = new StackPane();
                                   content.setAlignment(Pos.TOP_LEFT);
                                   content.setPadding(new Insets(8,5,5,5));
                                   content.getStyleClass().add("popUpBody");
                                   content.setMinHeight(50);
                                   Text contentTxt = new Text(message);
                                   contentTxt.wrappingWidthProperty().bind(this.wrapWidth);
                                   content.getChildren().add(contentTxt);
                                   VBox.setVgrow(content, Priority.ALWAYS);
                    
                                   /* ACTION BOX */
                                   actionBox = new HBox();
                                   actionBox.setAlignment(Pos.CENTER);
                                   actionBox.getStyleClass().add("popUpActionBox");
                                   actionBox.setPadding(new Insets(5,0,8,0     ));
                                   Button okBtn = new Button("Ok");
                                   okBtn.setPrefWidth(75);
                                   okBtn.setOnAction(new EventHandler<ActionEvent>() {
                                        @Override public void handle(ActionEvent actionEvent) {
                                             closePopUp();
                                        }
                                   });
                                   actionBox.getChildren().add(okBtn);
                    
                                   vb.getChildren().addAll(header,content,actionBox);
                                   root.getChildren().add(vb);
                    
                              }
                    
                              protected Stage getStage() {
                                   return this.stage;
                              }
                    
                              public double getWrapWidth() {
                                   return wrapWidth.get();
                              }
                    
                              public void setWrapWidth(double wrapWidth) {
                                   this.wrapWidth.set(wrapWidth);
                              }
                    
                              public SimpleDoubleProperty wrapWidthProperty() {
                                   return wrapWidth;
                              }
                    
                              public HBox getActionBox() {
                                   return actionBox;
                              }
                    
                              public void addDragListeners(final Node n){
                                   n.setOnMousePressed(new EventHandler<MouseEvent>() {
                                        public void handle(MouseEvent me) {
                                             startDragX = me.getSceneX();
                                             startDragY = me.getSceneY();
                                             root.setStyle("-fx-opacity:.7;");
                                        }
                                   });
                                   n.setOnMouseReleased(new EventHandler<MouseEvent>() {
                                        public void handle(MouseEvent me) {
                                             root.setStyle("-fx-opacity:1;");
                                        }
                                   });
                                   n.setOnMouseDragged(new EventHandler<MouseEvent>() {
                                        public void handle(MouseEvent me) {
                                             stage.setX( me.getScreenX() - startDragX );
                                             stage.setY( me.getScreenY() - startDragY);
                                        }
                                   });
                              }
                    
                              /**
                               * Method to close the pop up and remove the background mask.
                               */
                              public void closePopUp() {
                                   Parent parentRoot = ((Stage) stage.getOwner()).getScene().getRoot();
                                   if (parentRoot instanceof StackPane) {
                                        ((StackPane) parentRoot).getChildren().remove(mask);
                                   }
                                   stage.close();
                              }
                    
                              /**
                               * Method to open the pop up with the background mask.
                               */
                              public void show() {
                                   StackPane parentRoot = (StackPane) ((Stage) stage.getOwner()).getScene().getRoot();
                                   parentRoot.getChildren().add(mask);
                                   stage.show();
                              }
                    
                         }     
                    }
                    In the above code, i am using a StackPane (mask) to mask the parent application window when the pop up is opened.
                    And when the popup is closed, the mask is removed.
                    So the thing to remember is the pop up should be opened and closed through "show()" and "closePopUp()" methods of MessagePopUp class, to have the mask effect.

                    I hope the above code can help you. Very shortly i will write a small blog regarding implementation. :)

                    Happy Coding !! :)

                    Regards,
                    Sai Pradeep Dandem.
                    • 8. Re: Model Dialog Help - Application should get lightly blurred and transparent
                      jsmith
                      Seems like the approach of sticking an alert dialog into an overlaid node in a StackPane is a pretty common approach.
                      It will be great to see Sai document it properly in a blog . . . he does such good work with these kind of things.

                      I also did it this way for an earlier project I worked on (popup handling for the WebView node for a tabbed browser, so that only input on the current browser tab is blocked):
                      http://code.google.com/p/willow-browser/source/browse/src/main/java/org/jewelsea/willow/BrowserWindow.java
                      • 9. Re: Model Dialog Help - Application should get lightly blurred and transparent
                        Pugazhendhi
                        Hi I have doupt in applying drop shadow to dialog .

                        parent.setEffect(new DropShadow(BlurType.THREE_PASS_BOX, Color.GRAY,1, 0.0 , 1 , 1));

                        if i use the above code all my components inside the stackpane or BorderPane is getting shadow effects which looks ugly , \

                        but for u its correctly working its showing shadown in the border edges of dialog only .. why is it so this difference is happening ..

                        how to apply shadow eefect only for the borders of the stage not for the components inside ..

                        link to see my dialog after i apply drop shadow . :

                        [http://jfxuser.files.wordpress.com/2012/04/untitled.png]
                        • 10. Re: Model Dialog Help - Application should get lightly blurred and transparent
                          Sai Pradeep Dandem
                          Can you provide your code, so that if possible i can try to figure out.

                          Regards,
                          Sai Pradeep Dandem.
                          • 12. Re: Model Dialog Help - Application should get lightly blurred and transparent
                            Sai Pradeep Dandem
                            Hi Pugazhendhi ,
                            I think you missed to post the content ;)

                            Regards,
                            Sai Pradeep Dandem.
                            • 13. Re: Model Dialog Help - Application should get lightly blurred and transparent
                              jsmith
                              Hi I have doupt in applying drop shadow to dialog.
                              For the sample code I supplied, update the style line to the following if you want to add a drop shadow =>
                              style("-fx-effect: dropshadow(three-pass-box, derive(cadetblue, -20%), 10, 0, 3, 3); -fx-padding: 20; -fx-font-size: 20; -fx-background-color: linear-gradient(to bottom, derive(cadetblue, 20%), cadetblue); -fx-border-color: derive(cadetblue, -20%); -fx-border-width: 5; -fx-background-insets: 10; -fx-border-insets: 10;")
                              1 2 Previous Next