TabPane과 Tabs 정의

One of the principles of UI design is called progressive disclosure, which states that a UI should reveal its functionality progressively rather than inundating the user with all of its functionality at once. The TabPane is a good example of this principle in use, as each tab discloses its functionality while hiding the functionality contained in the other tabs.

To create the TabPane instance, our StarterApp program defines a method that we’ve arbitrarily named createTabs(), shown in Listing 6-5. This method leverages the TabPane and Tab classes, and returns a TabPane instance that contains the desired Tab objects.

Listing 6-5. The createTabs() Method Located in StarterAppMain.java

TabPane createTabs() {
    final WebView webView = new WebView();
    Tab tableTab = new Tab("TableView");
    tableTab.setContent(createTableDemoNode());
    tableTab.setClosable(false);
    Tab accordionTab = new Tab("Accordion/TitledPane");
    accordionTab.setContent(createAccordionTitledDemoNode());
    accordionTab.setClosable(false);
    Tab splitTab = new Tab("SplitPane/TreeView/ListView");
    splitTab.setContent(createSplitTreeListDemoNode());
    splitTab.setClosable(false);
    Tab scrollTab = new Tab("ScrollPane/Miscellaneous");
    scrollTab.setContent(createScrollMiscDemoNode());
    scrollTab.setClosable(false);
    Tab htmlTab = new Tab("HTMLEditor");
    htmlTab.setContent(createHtmlEditorDemoNode());
    htmlTab.setClosable(false);
    Tab webViewTab = new Tab("WebView");
    webViewTab.setContent(webView);
    webViewTab.setClosable(false);
    webViewTab.setOnSelectionChanged(e -> {
        String randomWebSite = model.getRandomWebSite();
        if (webViewTab.isSelected()) {
            webView.getEngine().load(randomWebSite);
            System.out.println("WebView tab is selected, loading: "
                    + randomWebSite);
        }
    });
    TabPane tabPane = new TabPane();
    tabPane.getTabs().addAll(
            tableTab,
            accordionTab,
            splitTab,
            scrollTab,
            htmlTab,
            webViewTab
    );

    return tabPane;
}

To define a tab in its simplest form, you need only supply its text (which appears on the tab), and content (which appears when that tab is selected). The following snippet from Listing 6-5 demonstrates some other features of the TabPane used in the StarterApp program:

Tab webViewTab = new Tab("WebView");
webViewTab.setContent(webView);
webViewTab.setClosable(false);
webViewTab.setOnSelectionChanged(e -> {
    String randomWebSite = model.getRandomWebSite();
    if (webViewTab.isSelected()) {
        webView.getEngine().load(randomWebSite);
        System.out.println("WebView tab is selected, loading: "
                + randomWebSite);
    }
});

In addition to supplying text and content, we’re also specifying that the tab shouldn’t be closable, and that some processing should occur when the user chooses the tab. The latter is implemented using the onSelectionChanged() method shown previously, which enables you to implement life cycle functionality when a tab is exposed or hidden (i.e., selected or not selected). In the preceding snippet, we’re causing the WebView (which is covered later) to load a randomly selected site when the tab is selected.

Now that you understand how the menus, toolbar, and tabs were created in the StarterApp program, let’s examine the UI controls on each tab. We start with the leftmost tab, labeled TableView, and work our way to the right.