javafx之两种局部界面的呈现方式

时间:2022-02-18 16:46:59

要求:

javafx之两种局部界面的呈现方式

点击左边不同的按钮,右边红色方框内出现不同的内容

===========================

第一种实现方法----插入fxml方法:

javafx之两种局部界面的呈现方式

javafx之两种局部界面的呈现方式

javafx之两种局部界面的呈现方式

实现代码==================

工程目录:

javafx之两种局部界面的呈现方式

源代码路径:http://pan.baidu.com/share/link?shareid=423722688&uk=1259703658

实现原理:在同一个地方嵌入三个fxml布局,然后设置可见性

第二种方法----tabpane方法:

javafx之两种局部界面的呈现方式

javafx之两种局部界面的呈现方式

实现代码=======

工程目录:

javafx之两种局部界面的呈现方式

源代码路径:http://pan.baidu.com/share/link?shareid=458733868&uk=1259703658

实现原理:使用tabpane控件在一个root的根目录上实现不同层的内容

问题:

这种方法有是个要解决的问题?

第一个question:

如下图

javafx之两种局部界面的呈现方式

多次点击“第一个功能页面”的按钮(本图点击两次),它会新建多个页面而不是一个

解决办法:

    @FXML
    private void pagetwo_open(ActionEvent event) {
        boolean boo = true;
        int selectnum = 0;
        for(int i=0;i<tabnew.getTabs().size();i++){
        if(tabnew.getTabs().get(i).getText().equals(btn_pagetwo.getText())){
            boo = false;
            selectnum = i;
        }
        }
        if(boo){
        Tab ntab = new Tab();
        ntab.setText(btn_pagetwo.getText());
        Label label = new Label("这个是第二个功能页面");
        label.setFont(new Font("Cambria", 32));
        label.setTextFill(Color.web("#0076a3"));
        ntab.setContent(label);
        ntab.setClosable(true);
        tabnew.getTabs().add(ntab);
        }
    }

通过对比要新建tab的名称是否已经在tabpane里面,是就不新建,否就新建

第二个question:

点击了“第二个功能页面“的按钮(多次点击也只会新建一个),但是点击完成后右边显示的是“主页“界面,而不是想要的”第二个功能页面“

如下图:

javafx之两种局部界面的呈现方式

解决办法:

    @FXML
    private void pagethree_open(ActionEvent event) {
        boolean boo = true;
        int selectnum = 0;
        for(int i=0;i<tabnew.getTabs().size();i++){
        if(tabnew.getTabs().get(i).getText().equals(btn_pagethree.getText())){
            boo = false;
            selectnum = i;
        }
        }
        if(boo){
        Tab ntab = new Tab();
        ntab.setText(btn_pagethree.getText());
        Label label = new Label("这个是第三个功能页面");
        label.setFont(new Font("Cambria", 32));
        label.setTextFill(Color.web("#0076a3"));
        ntab.setContent(label);
        ntab.setClosable(true);
        tabnew.getTabs().add(ntab);
        tabnew.getSelectionModel().select(ntab);
        }else{
           tabnew.getSelectionModel().select(selectnum);
        }
    }
传入新建的tab或则是已存在tab的序号,注意是tabnew.getSelectionModel().........而不是tabnew.getTabs()..........

参考地址:http://*.com/questions/17047000/javafx-closing-a-tab-in-tabpane-dynamically

第三个question:

子tab关闭与不关闭的问题

如下图:

javafx之两种局部界面的呈现方式

可以设置ntab.setClosable(true);来控制tab是否可以关闭(true表示可以关闭,false表示不可以关闭,不设置默认为true),但是你有可能设置为true或则是默认后都不能关闭tab,就像主页那个tab一样,那么就需要检查你的fxml文件。

javafx之两种局部界面的呈现方式

它又三个状态:UNAVAILABLE、SELECTED_TAB 、ALL_TABS,如果为UNAVAILABLE那么表示无论你设置不设置都不能关闭,SELECTED_TAB 表示你当前选中的tab可以关闭,ALL_TABS表示所有的tab可以关闭

最后总结:

方法1:

javafx之两种局部界面的呈现方式

每一个功能页面一个fxml文件,每一个fxml文件对应一个controller,便于归类整理和修改,但是它一次将所有的fxml都载入,也许会影响性能

方法2:

javafx之两种局部界面的呈现方式

一个tabpane就将该功能实现,是很简单的方法,但是会造成fxml文件和controller文件过于复杂,不便于修改和编写