JavaFX8 tabpane的选项卡没有切换

Question

Below is my code for GridPane with TabPane.

There are 2 tabs inside a TabPane.

When I click preview on SceneBuilder the tabs are not switching upon clicking on the tab head.

<?xml version="1.0" encoding="UTF-8"?>
    <?import javafx.scene.control.SplitPane?>
    <?import javafx.scene.control.Tab?>
    <?import javafx.scene.control.TabPane?>
    <?import javafx.scene.control.TreeView?>
    <?import javafx.scene.layout.AnchorPane?>
    <?import javafx.scene.layout.ColumnConstraints?>
    <?import javafx.scene.layout.GridPane?>
    <?import javafx.scene.layout.RowConstraints?>
    <GridPane id="content" alignment="CENTER" prefHeight="310.0" prefWidth="800.0" styleClass="mainParent" xmlns="http://javafx.com/javafx/8.0.65" xmlns:fx="http://javafx.com/fxml/1" fx:controller="com.gvj.sndp.view.controller.HomeController">
      <children>
          <SplitPane dividerPositions="0.18421052631578946" prefHeight="160.0" prefWidth="200.0" GridPane.rowIndex="2">
            <items>
                <TreeView fx:id="menuTreeView" prefHeight="273.0" prefWidth="115.0" />
                <TabPane fx:id="tabPane" mouseTransparent="true" prefHeight="200.0" prefWidth="200.0" rotateGraphic="true">
                   <tabs>
                      <Tab text="Untitled Tab">
                        <content>
                          <AnchorPane minHeight="0.0" minWidth="0.0" prefHeight="180.0" prefWidth="200.0" />
                        </content>
                      </Tab>
                      <Tab text="Untitled Tab">
                        <content>
                          <AnchorPane minHeight="0.0" minWidth="0.0" prefHeight="180.0" prefWidth="200.0" />
                        </content>
                      </Tab>
                   </tabs></TabPane>
            </items>
          </SplitPane>
      </children>
      <columnConstraints>
        <ColumnConstraints hgrow="ALWAYS" minWidth="-1.0" prefWidth="-1.0" />
      </columnConstraints>
      <rowConstraints>
          <RowConstraints maxHeight="35.0" minHeight="22.0" prefHeight="30.0" valignment="CENTER" vgrow="ALWAYS" />
        <RowConstraints maxHeight="35.0" minHeight="22.0" prefHeight="22.0" valignment="CENTER" vgrow="ALWAYS" />
          <RowConstraints valignment="CENTER" vgrow="ALWAYS" />
      </rowConstraints>
    </GridPane>

Answer 1

It is expected that it doesn't do anything on mouse click as you set it transparent for mouse events: mouseTransparent="true"

<TabPane fx:id="tabPane" mouseTransparent="true" prefHeight="200.0" prefWidth="200.0" rotateGraphic="true">

I guess it was done by accident, but when you set mouseTransparent property to true:

If true, this node (together with all its children) is completely transparent to mouse events. When choosing target for mouse event, nodes with mouseTransparent set to true and their subtrees won't be taken into account.

Remove the mentioned part from your FXML and your preview will work like a charm.

In SceneBuilder, on the Properties Tab of TabPane:

Answer 2

<?xml version="1.0" encoding="UTF-8"?>

<?import java.lang.*?>
<?import javafx.scene.control.*?>
<?import javafx.scene.layout.*?>
<?import javafx.scene.control.SplitPane?>
<?import javafx.scene.control.Tab?>
<?import javafx.scene.control.TabPane?>
<?import javafx.scene.control.TreeView?>
<?import javafx.scene.layout.AnchorPane?>
<?import javafx.scene.layout.ColumnConstraints?>
<?import javafx.scene.layout.GridPane?>
<?import javafx.scene.layout.RowConstraints?>


<Pane maxHeight="-Infinity" maxWidth="-Infinity" minHeight="-Infinity" minWidth="-Infinity" prefHeight="400.0" prefWidth="600.0" xmlns="http://javafx.com/javafx/8" xmlns:fx="http://javafx.com/fxml/1">
   <children>
      <TabPane nodeOrientation="LEFT_TO_RIGHT" tabClosingPolicy="UNAVAILABLE">
        <tabs>
          <Tab text="Tab1" />
          <Tab text="Tab2">
            <content>
              <AnchorPane minHeight="0.0" minWidth="0.0" prefHeight="229.0" prefWidth="600.0" />
            </content>
          </Tab>
        </tabs>
      </TabPane>
   </children>
</Pane>

Change here tabpane according to your required size.