[英]JavaFX navigationbar and contentpane
I want to use JavaFX in my new project and want something like in the screenshot below. 我想在新项目中使用JavaFX,并想要下面的屏幕快照。
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).
因此,我将在左侧使用VBox,在右侧使用AnchorPane(或者最好使用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.
找不到任何解决方案。
Thanks a lot 非常感谢
This is an exemplary implementation of such navigation. 这是这种导航的示例性实施方式。 Here the view described in
view_1.fxml
is loaded by default: 此处默认情况下会加载
view_1.fxml
描述的视图:
<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 这是一种转换,其中视图直接在FXML文件中列出
<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();
}
}
}
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.