JavaFX导航栏和contentpane [英] JavaFX navigationbar and contentpane

问题描述

我想在新项目中使用JavaFX，并想要下面的屏幕快照.

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

在左侧站点上，我需要一个导航栏，在右侧，是我的内容.因此，我将在左侧使用VBox，在右侧使用AnchorPane(或者最好使用ScrollPane).

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.

非常感谢

推荐答案

这是此类导航的示例性实现.默认情况下，此处加载view_1.fxml中描述的视图:

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>

这是控制器

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();
        }
    }
}

更新

这是一次转换，其中视图直接在FXML文件中列出

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>

和控制器

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();
        }
    }
}

这篇关于JavaFX导航栏和contentpane的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！