Accordion and TitledPane

Creating an Accordion and Defining a TitledPane

As you experienced in Step 9 of the exercise, the Accordion shown in Figure 6-4 contains some TitledPane instances, each of which contains nodes and may be expanded and collapsed. The code that defines and populates the Accordion in the StarterApp program is shown in Listing 6-8.

Listing 6-8. The createAccordionTitledDemoNode() Method Located in StarterAppMain.java

Node createAccordionTitledDemoNode() {
     TitledPane paneA = new TitledPane("TitledPane A", new TextArea("TitledPane A content"));
        TitledPane paneB = new TitledPane("TitledPane B", new TextArea("TitledPane B content"));
        TitledPane paneC = new TitledPane("TitledPane C", new TextArea("TitledPane C content"));
        Accordion accordion = new Accordion();
        accordion.getPanes().addAll(paneA, paneB, paneC);
        accordion.setExpandedPane(paneA);
        return accordion;
}

As shown in the following snippet from Listing 6-8, a TitledPane is typically given the text for its title, and a Node subclass (in this case a TextArea) for its content:

TitledPane paneA = new TitledPane("TitledPane A", new TextArea("TitledPane A content"));
...
accordion.setExpandedPane(paneA);

In addition, we want the first TitledPane in our example initially to be expanded, so the setExpandedPane() method of the Accordion is used to accomplish this.

Now that you know how to create Accordion and TitledPane controls, we move on to the next tab, SplitPane/TreeView/ListView.