What's the difference (in FXML) between layout.Pane and control.Control?

Question

I am trying to learn how to create a UI. What I am currently experimenting with is a main screen on the left to house the current information for the user to see; and an Accordion on the right, for the user to select items which determine what is shown in the main screen. I am using Scene Builder to help me as I learn. When I drag a TitledPane (not empty) into my Accordion, it places an AnchorPane in there. This, unless I misunderstand something, does not allow for a list of selectable items in that TitledPane larger than the current height of the TitledPane. So I added another TitledPane (empty) into my Accordion, and then added a ScrollPane (not empty) to it. This again added an AnchorPane inside of the ScrollPane.

This is what my fxml document currently looks like (after the versioning, encoding and imports):

<VBox fx:id="testPane" xmlns="http://javafx.com/javafx/8" xmlns:fx="http://javafx.com/fxml/1" fx:controller="testfxml.FXMLDocumentController">
    <children>
        <MenuBar>
            <menus>
            <Menu text="File">
                <items>
                    <MenuItem fx:id="1" text="1" />
                    <MenuItem fx:id="2" text="2" />
                    <MenuItem fx:id="3" text="3" />
                </items>
            </Menu>
        </menus>
    </MenuBar>
    <SplitPane dividerPositions="0.75" prefHeight="600" prefWidth="800">
        <items>
            <StackPane fx:id="mainscreen" />
            <Accordion fx:id="test">
                <panes>
                    <TitledPane text="Test1">
                        <content>
                            <AnchorPane fx:id="test1" />
                        </content>
                    </TitledPane>
                    <TitledPane text="Test2">
                       <content>
                          <ScrollPane>
                             <content>
                               <AnchorPane/>
                             </content>
                          </ScrollPane>
                       </content>
                    </TitledPane>          
                </panes>
            </Accordion>
        </items>
    </SplitPane>
</children>

When I look at the api for javafx (https://docs.oracle.com/javase/8/javafx/api), AnchorPane shows this:

Class AnchorPane

java.lang.Object
   javafx.scene.Node
      javafx.scene.Parent
         javafx.scene.layout.Region
            javafx.scene.layout.Pane
               javafx.scene.layout.AnchorPane

While ScrollPane shows this:

Class ScrollPane

java.lang.Object
   javafx.scene.Node
      javafx.scene.Parent
         javafx.scene.layout.Region
            javafx.scene.control.Control
               javafx.scene.control.ScrollPane

I'm assuming the formatting, which to me implies inheritance, is significant. I noticed that down through "javafx.scene.layout.Region" is identical, but that they differ after that. One goes to layout.Pane, the other to control.Control.

I've read through the descriptions on the api and, perhaps because of my obvious lack of experience with coding, it didn't quite make sense to me - perhaps I'm trying to use one of them incorrectly?

What's the difference? Is an AnchorPane required?

Answer 1

You can put anything you like as the content of a TitledPane. SceneBuilder (which seems unduly fond of AnchorPanes, for some reason) puts an AnchorPane as the default content; however you can remove it, or just choose "TitledPane (empty)" and add your own content. For example, you can remove the AnchorPane (or start with an empty TitledPane) and drag a ScrollPane there instead.

It actually sounds like you really need a ListView as the content of your TitledPane. A ListView comes already equipped with as-needed scroll bar functionality.

To answer your actual question, the API documentation is indeed indicating the inheritance hierarchy.

JavaFX (like most UI libraries) defines a rich inheritance structure. Parent is the superclass of anything in the scene graph that contains other Nodes. The vast majority of classes that subclass Parent also subclass Region, which represents something that takes up a particular space in the layout. (The exceptions are Group, which behaves somewhat differently with respect to layout, and WebView, which probably should be a subclass of Control, but isn't...).

Control and Pane are both subclasses of Region (and hence of Parent). Pane represents a "container": something that is merely designed to hold other Nodes and manage their layout. AnchorPane is a subclass of Pane. Control, by contrast, represents a UI "widget" (something with which the user directly interacts), so Label, Button, ComboBox, etc, are all subclasses of Control.

Some controls are actually quite complex, and contain other Nodes. ScrollPane is an example of a control, because the user can interact with it (via its scroll bars); it also contains another Node, called its "content". In the same way that you can use any Node as the content for the TitledPane, you can use any node as the content for the ScrollPane. The ScrollPane's content is the node the user views and moves around via the ScrollPane's scroll bars. Again, you can use any Node as the ScrollPane's content; SceneBuilder just chooses an AnchorPane as the default (for no real reason other than it has to use something).