Collapsible Pane

Question

I have a UI design where I'd like to be able to provide the capability for the user to expand and collapse a pane on the left side of the window for access to a search pane.  On the right side will be a pane with a table on the top containing a list of entries found, and a pane on the bottom containing details of whatever row in the table is selected. Once the user has run a search, they can collapse the search pane to hide it and maximize the results.
I looked at the TitledPane, but this only seems to expand or collapse in vertical direction.  Does anyone have any suggestions on what I might do to achieve this effect?

Answer 1

Sure, here's a little sample of your described UI I made using Scene Builder. Sorry if the code's a bit simplistic, I'm a UI guy, not a programmer ;-)
Main
package sample;
import javafx.application.Application;
import javafx.fxml.FXMLLoader;
import javafx.scene.Parent;
import javafx.scene.Scene;
import javafx.stage.Stage;
public class Main extends Application {
    @Override
    public void start(Stage primaryStage) throws Exception{
        Parent root = FXMLLoader.load(getClass().getResource("sample.fxml"));
        primaryStage.setTitle("Search UI");
        primaryStage.setScene(new Scene(root));
        primaryStage.show();
    public static void main(String[] args) {
        launch(args);
Controller
package sample;
import javafx.event.ActionEvent;
import javafx.fxml.FXML;
import javafx.scene.control.SplitPane;
import javafx.scene.layout.VBox;
public class Controller {
    @FXML private SplitPane search_split;
    @FXML private VBox search_vbox;
    @FXML
    void search(ActionEvent event) {
        search_vbox.setManaged(true);
        search_split.setDividerPosition(0, 0.33);
    @FXML
    void closeSearch(ActionEvent event) {
        search_vbox.setManaged(false);
        search_split.setDividerPosition(0, 0);
    @FXML
    void initialize() {
        closeSearch(null);
FXML
<?xml version="1.0" encoding="UTF-8"?>
<?import java.lang.*?>
<?import javafx.geometry.*?>
<?import javafx.scene.control.*?>
<?import javafx.scene.layout.*?>
<VBox prefHeight="400.0" prefWidth="500.0" xmlns:fx="http://javafx.com/fxml/1" xmlns="http://javafx.com/javafx/2.2" fx:controller="sample.Controller">
  <children>
    <HBox spacing="8.0">
      <children>
        <TextField maxWidth="1.7976931348623157E308" HBox.hgrow="ALWAYS" />
        <Button mnemonicParsing="false" onAction="#search" text="Search" />
      </children>
      <padding>
        <Insets bottom="8.0" left="8.0" right="8.0" top="8.0" />
      </padding>
    </HBox>
    <SplitPane id="h_split" fx:id="search_split" dividerPositions="0.321285140562249" focusTraversable="true" VBox.vgrow="ALWAYS">
      <items>
        <VBox fx:id="search_vbox" prefHeight="200.0" prefWidth="100.0">
          <children>
            <HBox alignment="CENTER_LEFT">
              <children>
                <Label maxWidth="1.7976931348623157E308" text="Search Results" HBox.hgrow="ALWAYS" />
                <Button mnemonicParsing="false" onAction="#closeSearch" text="x" />
              </children>
            </HBox>
          </children>
          <padding>
            <Insets bottom="8.0" left="8.0" right="8.0" top="8.0" />
          </padding>
        </VBox>
        <SplitPane dividerPositions="0.4022346368715084" focusTraversable="true" orientation="VERTICAL" prefHeight="200.0" prefWidth="160.0">
          <items>
            <TableView prefHeight="200.0" prefWidth="200.0">
              <columns>
                <TableColumn prefWidth="75.0" text="C1" />
                <TableColumn prefWidth="75.0" text="C2" />
              </columns>
            </TableView>
            <VBox prefHeight="200.0" prefWidth="100.0">
              <children>
                <Label text="Details" />
              </children>
              <padding>
                <Insets bottom="8.0" left="8.0" right="8.0" top="8.0" />
              </padding>
            </VBox>
          </items>
        </SplitPane>
      </items>
    </SplitPane>
  </children>
</VBox>