Creating a Pop-Up Window in JavaFX


If you read my post on how to switch scenes in JavaFX, you would have noticed that the whole time the program was running, there was always just 1 window.  But what if you want a pop-up Window?Well, the approach is very similar but there are a few ‘tweaks’ you need to apply to this example to get it to switch to a new scene that pops up over the original one.  The key is to make another stage.
popup

 Pop-up Window Java-FX Style

1 – Declare Controls Needed

Just like the other example, we need 2 each of Buttons, Labels, FlowPanes and Scenes.  New for this example is 2 stages.

public class PopUpThing extends Application {
   Button btnscene1, btnscene2;
   Label lblscene1, lblscene2;
   FlowPane pane1, pane2;
   Scene scene1, scene2;
   Stage thestage, newStage;

2 – Build Controls

This is identical to the other example on switching screens in Javafx.

  
   @Override
    public void start(Stage primaryStage) {
     
         thestage=primaryStage;
        //can now use the stage in other methods
        //make things to put on panes
        btnscene1=new Button("Click to go to Other Scene");
        btnscene2=new Button("Click to go back to First Scene");
        btnscene1.setOnAction(e-> ButtonClicked(e));
        btnscene2.setOnAction(e-> ButtonClicked(e));
        lblscene1=new Label("Scene 1");
        lblscene2=new Label("Scene 2");

3 – Build the Panels

This is also identical to the other example on switching screens in Javafx.

     //make 2 Panes
     pane1=new FlowPane();
     pane2=new FlowPane();
     pane1.setHgap(20);
     pane2.setVgap(10);
     //set background color of each Pane
   pane1.setStyle("-fx-background-color:tan;-fx-padding:10px;");
   pane2.setStyle("-fx-background-color:red;-fx-padding:10px;");
     //add everything to panes
     pane1.getChildren().addAll(lblscene1, btnscene1);
     pane2.getChildren().addAll(lblscene2, btnscene2);

4 – Make the Scenes and Stages

This is where things get different.  We are now going to load each scene into a SEPARATE stage.  The “newStage” is the pop-up window and it has a new command issued to it – the Modality setting tells it to behave as a pop-up window,

       
      //make 2 scenes from 2 panes
      scene1 = new Scene(pane1, 200, 100);
      scene2 = new Scene(pane2, 200, 100);
     //make another stage for scene2
     newStage = new Stage();
     newStage.setScene(scene2);
     //tell stage it is meannt to pop-up (Modal)
     newStage.initModality(Modality.APPLICATION_MODAL);
     newStage.setTitle("Pop up window");
     //rest of code -
     primaryStage.setTitle("Hello World!");
     primaryStage.setScene(scene1);
     primaryStage.setMinWidth(300);
     primaryStage.show();
}

5 – Button-Click Method

This is actually much simpler than in the other version.  We just tell the new stage to show-and-wait, which forces it to take command over the parent window until it is closed.  When btnscene2 is clicked it closes the pop-up stage.

    
public void ButtonClicked(ActionEvent e)
 {
     if (e.getSource()==btnscene1)
         newStage.showAndWait();
     else
         newStage.close();
 }


Pop-up Window Java-FX Style

1 – Create 2 Scenes in SceneBuilder

The same steps are followed in my Switching Screens tutorial so if you are not sure how its done you can check there.  You want to make 2 FXML documents that point to the same controller

 Screen Shot 2015-01-16 at 5.57.31 AM

2 – Declare @FXML Variables

Even though they are on different FXML documents, they share the same controller.

public class FXMLDocumentController implements Initializable {
 
 @FXML
 private Button btn1;
 @FXML
 private Button btn2;

3 – Write the handle-button method

We need another stage if we want to pop up a 2nd window over a parent window.  This stage has a few different commands issued to it to make it a pop-up:

  • The Modality setting tells it to pop up over another window
  • The initOwner method tells it to pop up over the stage that btn1 is on
  • Show and Wait forces the program to pay attention ONLY to this popup window until its closed
 @FXML
 private void handleButtonAction(ActionEvent event) 
                          throws IOException {
 
 Stage stage; 
 Parent root;
 
 if(event.getSource()==btn1)
 {
   stage = new Stage();
   root = FXMLLoader.load(getClass().getResource("FXML2.fxml"));
   stage.setScene(new Scene(root));
   stage.setTitle("My modal window");
   stage.initModality(Modality.APPLICATION_MODAL);
   stage.initOwner(btn1.getScene().getWindow());
   stage.showAndWait();
 }
 else
 {
   stage=(Stage)btn2.getScene().getWindow();
   stage.close();
  }
 
}

 4 – Go Back To SceneBuilder

Connect the Buttons to their FXID’s and the handleButton Method.  You need to do this in both FXML documents.

 Screen Shot 2015-01-16 at 5.58.06 AM

YouTube Video

The content of this page is covered in the video posted on my page about switching scenes. The video edition covers both techniques in the same video.

Leave a comment

Your email address will not be published. Required fields are marked *

You may use these HTML tags and attributes: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>