Disclosure Pane in JavaFX

Question

I am currently searching for a solution in JavaFX to achieve a behavior like the DisclosurePanel in GWT see http://samples.gwtproject.org/samples/Showcase/Showcase.html#!CwDisclosurePanel.

I already tried to build something with a TitledPane but it doesn't look or work well.

I am working with FXML:

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

<?import javafx.scene.text.*?>
<?import javafx.geometry.*?>
<?import javafx.scene.control.*?>
<?import javafx.scene.layout.*?>

<VBox minWidth="260.0" spacing="10.0" xmlns="http://javafx.com/javafx/8" xmlns:fx="http://javafx.com/fxml/1">
    <children>
        <FlowPane>
            <children>
                <Label text="Packages">
                    <font>
                        <Font name="System Bold" size="14.0" />
                    </font>
                </Label>
                <TitledPane animated="true" expanded="false">
                    <content>
                        <VBox spacing="10.0">
                            <children>
                                <CheckBox mnemonicParsing="false" text="Filter 1" />
                                <CheckBox mnemonicParsing="false" text="Filter 2" />
                                <CheckBox mnemonicParsing="false" text="Filter 3" />
                            </children>
                        </VBox>
                    </content>
                    <graphic>
                    </graphic>
               <FlowPane.margin>
                  <Insets left="20.0" />
               </FlowPane.margin>
                </TitledPane>
            </children>
        </FlowPane>
        <TreeView fx:id="dataPackagesTree" prefWidth="250.0" VBox.vgrow="ALWAYS">
        </TreeView>
    </children>
    <padding>
        <Insets bottom="5.0" left="5.0" right="10.0" top="0.0" />
    </padding>
</VBox>

The according Java code is only a starter in this example.

package javafx.example;

import javafx.application.Application;
import javafx.fxml.FXMLLoader;
import javafx.scene.Scene;
import javafx.scene.layout.VBox;
import javafx.stage.Stage;

public class Main extends Application {
    @Override
    public void start(Stage primaryStage) {
        try {
            VBox root = (VBox) FXMLLoader.load(getClass().getResource("Sample.fxml"));
            Scene scene = new Scene(root, 300, 400);
            primaryStage.setScene(scene);
            primaryStage.show();
        } catch (Exception e) {
            e.printStackTrace();
        }
    }

    public static void main(String[] args) {
        launch(args);
    }
}

What I want is that the TitledPane overlays the TreeView. So that the content of the TitledPane is in front of the TreeView and does not push the TreeView down.

I can't post a picture of the prototype, not enough reputation yet, sorry.

Every idea is appreciated. Thanks in advance.

Best regards.

`TitledPane` is designed for this kind of functionality. Please create an [MCVE](http://stackoverflow.com/help/mcve) showing what you tried, edit your question to include it, and explain what behavior you want and how it is different to the behavior you are getting. — James_D, Mar 13 '15 at 13:24

ItachiUchiha · Accepted Answer · 2015-03-17T09:04:16.217

Just replace the VBox with a StackPane. StackPane lays out its children in a back-to-front stack i.e all the children have a z-order. The children being the TreeView and FlowPane, with the later being on top of the former.

TreeView is wrapped in an AnchorPane, giving enough space to the FlowPane to be visible.

FXML

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

<?import javafx.geometry.Insets?>
<?import javafx.scene.control.*?>
<?import javafx.scene.layout.*?>
<?import javafx.scene.text.Font?>
<StackPane xmlns="http://javafx.com/javafx/8" xmlns:fx="http://javafx.com/fxml/1">
   <children>
      <AnchorPane prefHeight="204.0" prefWidth="400.0">
         <children>
            <TreeView fx:id="dataPackagesTree" prefHeight="200.0" prefWidth="200.0" AnchorPane.topAnchor="30.0" />
         </children>
      </AnchorPane>
       <FlowPane rowValignment="TOP">
           <children>
               <Label alignment="TOP_LEFT" text="Packages">
                   <font>
                       <Font name="System Bold" size="14.0" />
                   </font>
               </Label>
               <TitledPane animated="true" expanded="false">
                   <content>
                       <VBox spacing="10.0">
                           <children>
                               <CheckBox mnemonicParsing="false" text="Filter 1" />
                               <CheckBox mnemonicParsing="false" text="Filter 2" />
                               <CheckBox mnemonicParsing="false" text="Filter 3" />
                           </children>
                       </VBox>
                   </content>
                   <graphic>
                   </graphic>
                   <FlowPane.margin>
                       <Insets left="20.0" />
                   </FlowPane.margin>
               </TitledPane>
           </children>
       </FlowPane>
   </children>
</StackPane>

Changes in Main Class

try {
        // VBox root = (VBox) FXMLLoader.load(getClass().getResource("Sample.fxml"));
        StackPane root = (StackPane) FXMLLoader.load(getClass().getResource("Sample.fxml"));
        Scene scene = new Scene(root, 300, 400);
        primaryStage.setScene(scene);
        primaryStage.show();
    } catch (Exception e) {
        e.printStackTrace();
    }

Final Output

enter image description here

You can further style the TitledPane using CSS so it looks *exactly* like the Disclosure Pane. — RDM, Mar 17 '15 at 10:06
Works perfect. Thank you so much. I need this about 20 times in my application. This is so cool. — hemsbeach, Mar 17 '15 at 11:29

Disclosure Pane in JavaFX

1 Answers1