JavaFx 12 : About stages

Question

I wonder if you can do this:

a main stage of the content and a menu stage within that content stage

i try make but i got this:

my fxml:

<StackPane fx:id="root" prefWidth="311.0" xmlns="http://javafx.com/javafx/8.0.171" xmlns:fx="http://javafx.com/fxml/1" fx:controller="com.semeq.controllers.Test">
    <!-- Header -->
    <BorderPane>
        <top>
            <VBox spacing="20">
                <JFXToolbar>
                    <leftItems>
                        <JFXRippler maskType="CIRCLE" style="-fx-ripple-color:WHITE;">
                            <StackPane fx:id="titleBurgerContainer">
                                <JFXHamburger fx:id="titleBurger">
                                    <HamburgerBackArrowBasicTransition />
                                </JFXHamburger>
                            </StackPane>
                        </JFXRippler>
                        <Label>Material Design</Label>
                    </leftItems>
                </JFXToolbar>
            </VBox>
        </top>

        <!-- Content Area -->
        <center>
            <JFXDrawer fx:id="drawer" defaultDrawerSize="250" direction="LEFT">
                <styleClass>
                    <String fx:value="body" />
                </styleClass>
            </JFXDrawer>
        </center>
    </BorderPane>
</StackPane>

controller:

package com.semeq.controllers;

import java.io.IOException;

import org.springframework.stereotype.Controller;

import com.jfoenix.controls.JFXDrawer;
import com.jfoenix.controls.JFXHamburger;
import com.jfoenix.controls.JFXRippler;
import com.jfoenix.transitions.hamburger.HamburgerBackArrowBasicTransition;

import javafx.fxml.FXML;
import javafx.fxml.FXMLLoader;
import javafx.scene.Node;
import javafx.scene.input.MouseEvent;
import javafx.scene.layout.Pane;
import javafx.scene.layout.StackPane;
import javafx.scene.layout.VBox;

@Controller
public class Test {
    @FXML
    private Pane root;

    @FXML
    private StackPane titleBurgerContainer;

    @FXML
    private JFXHamburger titleBurger;

    @FXML
    private JFXRippler optionsRippler;

    @FXML
    private StackPane optionsBurger;

    @FXML 
    private VBox box;

    @FXML
    private JFXDrawer drawer;

    public void initialize() {
        try {
            box = FXMLLoader.load(getClass().getResource("/Home.fxml"));
            drawer.setSidePane(box);
            for (Node node : box.getChildren()) {
                if(node.getAccessibleText() != null) {
                     System.out.println("xdasdd");
                    node.addEventHandler(MouseEvent.MOUSE_CLICKED, (ex) -> {
                        switch(node.getAccessibleText()) {
                        case "Gerenciar" :
                            try {
                                StackPane gerenciar = FXMLLoader.load(getClass().getResource("/Gerenciar.fxml"));
                                root.getChildren().addAll(gerenciar);
                            } catch (IOException e1) {
                                // TODO Auto-generated catch block
                                e1.printStackTrace();
                            }
                            break;
                        }
                    });
                }
            }
        } catch (IOException e1) {
            // TODO Auto-generated catch block
            e1.printStackTrace();
        }
        HamburgerBackArrowBasicTransition transition = new HamburgerBackArrowBasicTransition(titleBurger);

          drawer.setOnDrawerOpening(e -> {
            transition.setRate(1);
            transition.play();
          });
          drawer.setOnDrawerClosing(e -> {
              transition.setRate(-1);
              transition.play();
          });
          titleBurgerContainer.setOnMouseClicked(e -> {
              if (drawer.isClosed() || drawer.isClosing()) {
                  drawer.open();
              } else {
                  drawer.close();
              }
          });
    } 
}

i don't know if this is possible a stage for all the content and a stage for the menu within that content

In other words, I wanted a Main Stage and another stage being part of this main stage and when you clicked on the main stage it would appear

A stage that is part of a stage? I don't know about any OS/API that would allow you to place a window within a window. Of course it's possible to add nodes to a existing scene. If you use a `StackPane` as parent, the node is positioned by the `StackPane`. Unless any parameters are set, this centers all children in the `StackPane`... — fabian, Aug 12 '19 at 10:49
@fabian thanks fabian could you help me? Where did I go wrong in this code? — , Aug 12 '19 at 12:15
Possible duplicate of [How can I implement the functionality of awt.CardLayout in my javaFX 2.0 application?](https://stackoverflow.com/questions/8309802/how-can-i-implement-the-functionality-of-awt-cardlayout-in-my-javafx-2-0-applica) — trilogy, Aug 12 '19 at 13:38

Mayur Patel · Accepted Answer · 2019-08-12T12:49:20.180

Sorry to say, but you are doing it all wrong. You are making everything very complex. Whenever you work with JFXDrawer. Try to make a seperate fxml file for the drawer itself, and another fxml file for the root container, where you want your drawer to be placed. In this way you will have two fxml files. It will make things much simpler.

Here's my approach for your problem. I hope it helps you!

Main.java (Main launch file) -

package application;

import javafx.application.Application;
import javafx.fxml.FXMLLoader;
import javafx.stage.Stage;
import javafx.scene.Parent;
import javafx.scene.Scene;


public class Main extends Application {
@Override
public void start(Stage primaryStage) {
    try {
        //this is the directory - package_name/fxml_file.fxml
        Parent root = 
        FXMLLoader.load(getClass().getResource("/application/container.fxml")); 
        Scene scene = new Scene(root);
        primaryStage.setScene(scene);
        primaryStage.setTitle("Material Design JFX Navigation Drawer");
        primaryStage.show();
    } catch(Exception e) {
        e.printStackTrace();
    }
}

 public static void main(String[] args) {
    launch(args);
 }
}

NavigationController.java (Controller Class) -

public class NavigationController implements Initializable {
    @FXML private AnchorPane anchorPane;
    @FXML private StackPane stackPane1, stackPane2, stackPane3, stackPane4;
    @FXML private JFXHamburger hamburger;
    @FXML private JFXDrawer drawer;

@Override
public void initialize(URL arg0, ResourceBundle arg1) {
    StackPane[] stackPaneArray = {stackPane1, stackPane2, stackPane3, stackPane4};
    for(int i = 0;i<stackPaneArray.length;i++){
    stackPaneArray[i].setVisible(false);;
    }
    try {
        VBox box = FXMLLoader.load(getClass().getResource("/application/drawer.fxml"));   //this is the directory - package_name/fxml_file.fxml
        drawer.setSidePane(box);

        for(Node node : box.getChildren()){
            if(node.getAccessibleText()!=null){
                node.addEventHandler(MouseEvent.MOUSE_CLICKED, (e) ->{
                    switch(node.getAccessibleText()){
                    case "Gerenciar_1":
                    stackPane1.setVisible(true);
                    stackPane2.setVisible(false);
                    stackPane3.setVisible(false);
                    stackPane4.setVisible(false);   
                    break;
                case "Gerenciar_2":
                    stackPane1.setVisible(false);
                    stackPane2.setVisible(true);
                    stackPane3.setVisible(false);
                    stackPane4.setVisible(false);
                    break;
                case "Gerenciar_3":
                    stackPane1.setVisible(false);
                    stackPane2.setVisible(false);
                    stackPane3.setVisible(true);
                    stackPane4.setVisible(false);   
                    break;
                case "Gerenciar_4":
                    stackPane1.setVisible(false);
                    stackPane2.setVisible(false);
                    stackPane3.setVisible(false);
                    stackPane4.setVisible(true);    
                    break;

                    }
                });
            }
        }
        HamburgerBackArrowBasicTransition transition = new HamburgerBackArrowBasicTransition(hamburger);
        transition.setRate(-1);
        hamburger.addEventHandler(MouseEvent.MOUSE_PRESSED,(e) -> {
            transition.setRate(transition.getRate()*-1);
            transition.play();

            if(drawer.isShown()){
                drawer.close();
            }else{
                drawer.open();
            }
        });
    } catch (IOException e1) {
        e1.printStackTrace();
    }                       
   }       
  }

container.fxml (fxml file for the container) -

<?xml version="1.0" encoding="UTF-8"?>

<?import com.jfoenix.controls.JFXDrawer?>
<?import com.jfoenix.controls.JFXHamburger?>
<?import javafx.scene.control.Menu?>
<?import javafx.scene.control.MenuBar?>
<?import javafx.scene.layout.AnchorPane?>

<AnchorPane fx:id="anchorPane" maxHeight="-Infinity" maxWidth="-Infinity" 
minHeight="-Infinity" minWidth="-Infinity" prefHeight="390.0" 
prefWidth="460.0" xmlns="http://javafx.com/javafx/8.0.102" 
xmlns:fx="http://javafx.com/fxml/1" 
fx:controller="application.NavigationController">
<children>
  <JFXDrawer fx:id="drawer" defaultDrawerSize="173.0" layoutY="24.0" 
 prefHeight="367.0" prefWidth="100.0" />
  <MenuBar prefHeight="25.0" prefWidth="460.0">
    <menus>
      <Menu mnemonicParsing="false">
           <graphic>
              <JFXHamburger fx:id="hamburger" />
           </graphic>
      </Menu>
    </menus>
  </MenuBar>
  <StackPane fx:id="stackPane1" layoutX="140.0" layoutY="25.0" prefHeight="367.0" prefWidth="320.0">
 <children>
    <Label text="StackPane 1">
       <font>
          <Font name="System Bold" size="17.0" />
       </font>
    </Label>
 </children></StackPane>
  <StackPane fx:id="stackPane2" layoutX="140.0" layoutY="25.0" prefHeight="367.0" prefWidth="320.0">
 <children>
    <Label text="StackPane 2">
       <font>
          <Font name="System Bold" size="17.0" />
       </font>
    </Label>
 </children></StackPane>
  <StackPane fx:id="stackPane3" layoutX="140.0" layoutY="25.0" prefHeight="367.0" prefWidth="320.0">
 <children>
    <Label text="StackPane 3">
       <font>
          <Font name="System Bold" size="17.0" />
       </font>
    </Label>
 </children></StackPane>
  <StackPane fx:id="stackPane4" layoutX="140.0" layoutY="25.0" prefHeight="367.0" prefWidth="320.0">
 <children>
    <Label text="StackPane 4">
       <font>
          <Font name="System Bold" size="17.0" />
       </font>
    </Label>
 </children></StackPane>
 </children>
</AnchorPane>

drawer.fxml (fxml file for the drawer) -

<?xml version="1.0" encoding="UTF-8"?>

<?import com.jfoenix.controls.JFXButton?>
<?import de.jensd.fx.glyphs.fontawesome.FontAwesomeIconView?>
<?import javafx.scene.layout.VBox?>
<?import javafx.scene.text.Font?>

<VBox alignment="TOP_RIGHT" maxHeight="-Infinity" maxWidth="-Infinity" 
minHeight="-Infinity" minWidth="-Infinity" prefHeight="390.0" 
prefWidth="173.0" xmlns="http://javafx.com/javafx/8.0.102" 
xmlns:fx="http://javafx.com/fxml/1">
<children>
<JFXButton accessibleText="Gerenciar_1" buttonType="RAISED" 
focusTraversable="false" prefHeight="57.0" prefWidth="176.0" 
text="Gerenciar">
 <font>
    <Font size="15.0" />
 </font>
 <graphic>
    <FontAwesomeIconView glyphName="USER" size="30" wrappingWidth="43.0" />
 </graphic>
 </JFXButton>
 <JFXButton accessibleText="Gerenciar_2" buttonType="RAISED" 
 focusTraversable="false" prefHeight="57.0" prefWidth="178.0" 
 text="Gerenciar">
 <font>
    <Font size="15.0" />
 </font>
 <graphic>
    <FontAwesomeIconView glyphName="USER" size="30" wrappingWidth="43.0" />
 </graphic>
 </JFXButton>
 <JFXButton accessibleText="Gerenciar_3" buttonType="RAISED" 
 focusTraversable="false" prefHeight="57.0" prefWidth="178.0" 
 text="Gerenciar">
 <font>
    <Font size="15.0" />
 </font>
 <graphic>
    <FontAwesomeIconView glyphName="USER" size="30" wrappingWidth="43.0" />
 </graphic>
 </JFXButton>
 <JFXButton accessibleText="Gerenciar_4" buttonType="RAISED" 
 focusTraversable="false" prefHeight="57.0" prefWidth="178.0" 
 text="Gerenciar">
 <font>
    <Font size="15.0" />
 </font>
 <graphic>
    <FontAwesomeIconView glyphName="USER" size="30" wrappingWidth="43.0" />
 </graphic>
 </JFXButton>
 </children>
 </VBox>

Here's the screenshot of what I did -

Take a look. I hope it solves your problem.

Yes that's it thank you so much but there's one thing when the menu is open it has a shadow on bg outside the menu — , Aug 12 '19 at 11:51
It is an in-built ripple effect, I guess. Also, please kindly upvote my answer if it helped you :) — Mayur Patel, Aug 12 '19 at 11:55
Thank you so much @Felipe. Take a look at [Material Design Navigation Drawer](https://www.youtube.com/watch?v=tgV8dDP9DtM). And learn more and more about JavaFX Navigations Drawers. You will surely find a way. All the very best :) — Mayur Patel, Aug 12 '19 at 12:02
I had done something like this, but I found nothing of how to use this shadow — , Aug 12 '19 at 12:06
This way I had done I had succeeded but I had trouble with the screens — , Aug 12 '19 at 12:06
What you were doing is that you were loading a new `StackPane` on the `Button` click. Do you want it like that? — Mayur Patel, Aug 12 '19 at 12:11
yes i have this menu and on each menu click i would load another fxml — , Aug 12 '19 at 12:15
Another approach would be to create four instances of `StackPane` and play with the **visibility** of it. I have edited my previous answer. Take a look at the `NavigationController.java` and `container.fxml` from my answer. I hope this helps :) — Mayur Patel, Aug 12 '19 at 12:51

JavaFx 12 : About stages

1 Answers1