javafx - multiple scenes in same stage

Question

At normal

At full screen

I want to fit the second scene (with pink color) to fit to the exact size of the anchorPane ( the green colored region)

The code is below

FormOne.fxml

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

<?import java.net.URL?>
<?import javafx.scene.control.Button?>
<?import javafx.scene.layout.AnchorPane?>

<AnchorPane id="AnchorPane" prefHeight="500.0" prefWidth="600.0" styleClass="mainFxmlClass" xmlns="http://javafx.com/javafx/8.0.111" xmlns:fx="http://javafx.com/fxml/1" fx:controller="javafx.test.controller.FormeOneController">
    <stylesheets>
        <URL value="@/javafx/test/style/formeone.css" />
    </stylesheets>
   <children>
      <AnchorPane prefHeight="500.0" prefWidth="130.0" style="-fx-background-color: #660066;" AnchorPane.bottomAnchor="0.0" AnchorPane.leftAnchor="0.0" AnchorPane.topAnchor="0.0">
         <children>
            <Button fx:id="btnPanel1" layoutX="31.0" layoutY="31.0" mnemonicParsing="false" onAction="#btnPanel1Action" text="Panel 1" />
            <Button fx:id="btnPanel2" layoutX="31.0" layoutY="92.0" mnemonicParsing="false" onAction="#btnPanel2Action" text="Panle 2" />
            <Button fx:id="btnPanel3" layoutX="31.0" layoutY="155.0" mnemonicParsing="false" onAction="#btnPanel3Action" text="Panle 3" />
         </children>
      </AnchorPane>
      <AnchorPane fx:id="showPane" layoutX="128.0" prefHeight="500.0" prefWidth="472.0" style="-fx-background-color: #00ff00;" AnchorPane.bottomAnchor="0.0" AnchorPane.leftAnchor="128.0" AnchorPane.rightAnchor="0.0" AnchorPane.topAnchor="0.0" />
   </children>
</AnchorPane>

PanelOne.fxml

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

<?import javafx.scene.layout.AnchorPane?>


<AnchorPane maxHeight="-Infinity" maxWidth="-Infinity" minHeight="-Infinity" minWidth="-Infinity" prefHeight="400.0" prefWidth="600.0" style="-fx-background-color: #ff00ff;" xmlns="http://javafx.com/javafx/8.0.111" xmlns:fx="http://javafx.com/fxml/1" />

FormOneController.java

 /*
 * To change this license header, choose License Headers in Project Properties.
 * To change this template file, choose Tools | Templates
 * and open the template in the editor.
 */
package javafx.test.controller;

import java.io.IOException;
import java.net.URL;
import java.util.ResourceBundle;
import javafx.event.ActionEvent;
import javafx.fxml.FXML;
import javafx.fxml.FXMLLoader;
import javafx.fxml.Initializable;
import javafx.scene.control.Button;
import javafx.scene.layout.AnchorPane;
import javafx.scene.layout.StackPane;

/**
 * FXML Controller class
 *
 * @author Kasun Nirmala
 */
public class FormeOneController implements Initializable {

    @FXML
    private Button btnPanel1;
    @FXML
    private Button btnPanel2;
    @FXML
    private Button btnPanel3;
    @FXML
    private AnchorPane showPane;

    /**
     * Initializes the controller class.
     */
    @Override
    public void initialize(URL url, ResourceBundle rb) {
        // TODO
    }    

    @FXML
    private void btnPanel1Action(ActionEvent event) throws IOException {
        AnchorPane pnlOne = FXMLLoader.load(this.getClass().getResource("/javafx/test/ui/PanelOne.fxml"));
        showPane.getChildren().setAll(pnlOne);
    }

}

Answer 1

You can simply do this by using the anchors of the AnchorPane.

@FXML
private void btnPanel1Action(ActionEvent event) throws IOException {
    AnchorPane pnlOne = FXMLLoader.load(this.getClass().getResource("/javafx/test/ui/PanelOne.fxml"));
    AnchorPane.setLeftAnchor(pnlOne, 0.0);
    AnchorPane.setTopAnchor(pnlOne, 0.0);
    AnchorPane.setRightAnchor(pnlOne, 0.0);
    AnchorPane.setBottomAnchor(pnlOne, 0.0);
    showPane.getChildren().setAll(pnlOne);
}

What happens here? Every node has some internal properties. With the lines above you set the property how pnlOne should be layouted when it is a child of an AnchorPane.