javajavafxnavigationbarcontentpane

JavaFX navigationbar and contentpane


I want to use JavaFX in my new project and want something like in the screenshot below.

On the left site I need a navigation bar and on the right my content. So, I would use a VBox on the left side and maybe an AnchorPane on the right side (or better a ScrollPane).

And when I click on the Button "Security" it should load my "Security" Scene on the right side. But how can I manage that. Did not find any solution for this.

enter image description here

Thanks a lot


Solution

  • This is an exemplary implementation of such navigation. Here the view described in view_1.fxml is loaded by default:

    <BorderPane fx:id="mainBorderPane" fx:controller="sample.Controller" xmlns:fx="http://javafx.com/fxml">
        <left>
            <VBox spacing="5">
                <Button text="btn 1" onAction="#handleShowView1"/>
                <Button text="btn 2" onAction="#handleShowView2"/>
                <Button text="btn 3" onAction="#handleShowView3"/>
            </VBox>
        </left>
        <center>
            <fx:include source="view_1.fxml"/>
        </center>
    </BorderPane>
    

    And this is the controller

    public class Controller {
    
        @FXML
        private BorderPane mainBorderPane;
    
        @FXML
        private void handleShowView1(ActionEvent e) {
            loadFXML(getClass().getResource("/sample/view_1.fxml"));
        }
    
        @FXML
        private void handleShowView2(ActionEvent e) {
            loadFXML(getClass().getResource("/sample/view_2.fxml"));
        }
    
        @FXML
        private void handleShowView3(ActionEvent e) {
            loadFXML(getClass().getResource("/sample/view_3.fxml"));
        }
    
        private void loadFXML(URL url) {
            try {
                FXMLLoader loader = new FXMLLoader(url);
                mainBorderPane.setCenter(loader.load());
            }
            catch (IOException e) {
                e.printStackTrace();
            }
        }
    }
    

    update

    This is a conversion in which the views are listed directly in the FXML file

    <BorderPane fx:id="mainBorderPane" fx:controller="sample.Controller" xmlns:fx="http://javafx.com/fxml">
        <left>
            <VBox spacing="5">
                <Button text="btn 1" userData="/sample/view_1.fxml" onAction="#handleShowView"/>
                <Button text="btn 2" userData="/sample/view_2.fxml" onAction="#handleShowView"/>
                <Button text="btn 3" userData="/sample/view_3.fxml" onAction="#handleShowView"/>
            </VBox>
        </left>
        <center>
            <fx:include source="view_1.fxml"/>
        </center>
    </BorderPane>
    

    and controller

    public class Controller {
    
        @FXML
        private BorderPane mainBorderPane;
    
        @FXML
        private void handleShowView(ActionEvent e) {
            String view = (String) ((Node)e.getSource()).getUserData();
            loadFXML(getClass().getResource(view));
        }
    
        private void loadFXML(URL url) {
            try {
                FXMLLoader loader = new FXMLLoader(url);
                mainBorderPane.setCenter(loader.load());
            }
            catch (IOException e) {
                e.printStackTrace();
            }
        }
    }