JavaFX : Rotated TitledPane does not fill the layout - layout

Question

I'm making a desktop application and was trying to create a vertical TitledPane to represent a "vertical collapsible toolbar".
I have done some researches on how to do it and was able to create my vertical TitledPane correctly, but I can't figure out how to set the size of the TitledPane to fill the layout.
Here is a screenshot of what I've done, and what I want. My VerticalTitledPane is an FXML included in a root layout, which is a BorderPane, and is set to be placed on the left container. Do you know if it is possible to tell the TitledPane to fill the layout (where TitledPane.height = BorderPane.left.height in pseudo-code) ?
Here is the FXML of the vertical TitledPane. The BorderPane just includes and sets it to the left (if needed please ask) :
<Group xmlns="http://javafx.com/javafx/8" xmlns:fx="http://javafx.com/fxml/1" fx:controller="ch.aardex.widgets.toolbar_vertical.VerticalToolbarCtrl" fx:id="group">
<stylesheets>
<URL value="#/ch/aardex/widgets/toolbar_vertical/toolbar_vertical.css"/>
</stylesheets>
<children>
<Accordion rotate="90.0" fx:id="accordion">
<panes>
<TitledPane onMouseClicked="#expandMenu" >
<content>
<HBox spacing="15.0">
<children>
<Button fx:id="btShowHome" styleClass="vertical-bar-button" onAction="#showHome" rotate="270.0" >
<graphic>
<ImageView>
<Image url="/ch/aardex/widgets/images/logo_home_48.png"/>
</ImageView>
</graphic>
</Button>
<Button fx:id="btShowInitPatient" styleClass="vertical-bar-button" onAction="#showInitPatient" rotate="270.0" >
<graphic>
<ImageView>
<Image url="/ch/aardex/widgets/images/user_add_48.png"/>
</ImageView>
</graphic>
</Button>
<Button fx:id="btShowReadMems" styleClass="vertical-bar-button" onAction="#showReadMems" rotate="270.0">
<graphic>
<ImageView>
<Image url="/ch/aardex/widgets/images/mems_read_48.png"/>
</ImageView>
</graphic>
</Button>
<Button fx:id="btShowPatientList" styleClass="vertical-bar-button" onAction="#showPatientList" rotate="270.0">
<graphic>
<ImageView>
<Image url="/ch/aardex/widgets/images/user_group_48.png"/>
</ImageView>
</graphic>
</Button>
</children>
</HBox>
</content>
</TitledPane>
</panes>
</Accordion>
</children>
Thank you very much !

Answer 1

I finally found a way to implement what I wanted. Since I have not found many answers, I'll post mine hoping this could help someone else.
The best I've found to implement this is to use a simple VBox with some animations.
Here is the FXML :
<?xml version="1.0" encoding="UTF-8"?>
<?import java.lang.*?>
<?import java.net.*?>
<?import java.util.*?>
<?import javafx.scene.*?>
<?import javafx.geometry.*?>
<?import javafx.scene.control.*?>
<?import javafx.scene.layout.*?>
<?import javafx.scene.image.*?>
<VBox minWidth="75.0" alignment="CENTER_RIGHT" styleClass="vertical-bar" fx:id="toolbarVertical" xmlns:fx="http://javafx.com/fxml/1" fx:controller="ch.aardex.root.ToolbarVerticalCtrl">
<padding>
<Insets top="10" right="10" bottom="10" left="10"/>
</padding>
<Button fx:id="btExpandMenu" styleClass="vertical-bar-button" onAction="#expandMenu" >
<graphic>
<ImageView>
<Image url="..."/>
</ImageView>
</graphic>
</Button>
<VBox VBox.vgrow="ALWAYS"/>
<GridPane alignment="CENTER_RIGHT" >
<Label fx:id="homeLabel" text="Go to the dashboard view" GridPane.columnIndex="0" GridPane.rowIndex="0" managed="false" wrapText="true" />
<Button fx:id="homeBt" styleClass="vertical-bar-button" onAction="#showHome" GridPane.columnIndex="1" GridPane.rowIndex="0" >
<graphic>
<ImageView>
<Image url="..."/>
</ImageView>
</graphic>
</Button>
<Label fx:id="addLabel" text="Read a patient or add a new one" GridPane.columnIndex="0" GridPane.rowIndex="1" managed="false" wrapText="true"/>
<Button fx:id="addBt" styleClass="vertical-bar-button" onAction="#showInitPatient" GridPane.columnIndex="1" GridPane.rowIndex="1" >
<graphic>
<ImageView>
<Image url="..."/>
</ImageView>
</graphic>
</Button>
<Label fx:id="listLabel" text="Show the list of patients" GridPane.columnIndex="0" GridPane.rowIndex="2" managed="false" wrapText="true"/>
<Button fx:id="listBt" styleClass="vertical-bar-button" onAction="#showPatientList" GridPane.columnIndex="1" GridPane.rowIndex="2">
<graphic>
<ImageView>
<Image url="..."/>
</ImageView>
</graphic>
</Button>
<Label fx:id="confLabel" text="Settings of the app" GridPane.columnIndex="0" GridPane.rowIndex="3" managed="false" wrapText="true"/>
<Button fx:id="confBt" styleClass="vertical-bar-button" onAction="#showConfiguration" GridPane.columnIndex="1" GridPane.rowIndex="3">
<graphic>
<ImageView>
<Image url="..."/>
</ImageView>
</graphic>
</Button>
</GridPane>
</VBox>
And the controller :
import ch.aardex.common.IController;
import java.net.URL;
import java.util.ResourceBundle;
import javafx.animation.Animation;
import javafx.animation.Transition;
import javafx.event.ActionEvent;
import javafx.fxml.FXML;
import javafx.fxml.Initializable;
import javafx.scene.control.Button;
import javafx.scene.control.Label;
import javafx.scene.layout.VBox;
import javafx.util.Duration;
public class ToolbarVerticalCtrl extends IController implements Initializable {
// FXML controls
#FXML private VBox toolbarVertical;
#FXML private Label homeLabel;
#FXML private Button homeBt;
#FXML private Label addLabel;
#FXML private Button addBt;
#FXML private Label listLabel;
#FXML private Button listBt;
#FXML private Label confLabel;
#FXML private Button confBt;
// Constants
private final double EXPANSION = 90.0; // the expansion of the vertical toolbar
private final double MARGIN = 10.0; // the margin of the vertical toolbar
// margin is used to set the offset when sliding the toolbar
// Variables
private boolean hidden = true; // is the bar hidden ?
#Override
public void initialize(URL url, ResourceBundle rb) {
}
#FXML
private void showHome(ActionEvent event) {
getRoot().initViewWithTopOnly(DASHBOARD_VIEW);
}
#FXML
private void showInitPatient(ActionEvent event) {
getRoot().initViewWithTopAndVertical(WORKFLOW_VIEW);
}
#FXML
private void showPatientList(ActionEvent event) {
getRoot().initViewWithTopAndVertical(LIST_VIEW);
}
#FXML
private void showConfiguration(ActionEvent event) {
getRoot().initViewWithTopAndVertical(CONFIG_VIEW);
}
#FXML
private void expandMenu(ActionEvent event){
final Animation hideSideBar = new Transition() {
{ setCycleDuration(Duration.millis(250)); }
#Override
protected void interpolate(double frac) {
double current = EXPANSION - EXPANSION * frac;
toolbarVertical.setPrefWidth(EXPANSION + current);
}
};
final Animation showSideBar = new Transition() {
{ setCycleDuration(Duration.millis(250)); }
#Override
protected void interpolate(double frac) {
double current = MARGIN + EXPANSION * frac;
toolbarVertical.setPrefWidth(EXPANSION + current);
}
};
showSideBar.onFinishedProperty().set((ActionEvent event1) -> {
setLabelsManagement(true);
});
if(showSideBar.statusProperty().get() == Animation.Status.STOPPED &&
hideSideBar.statusProperty().get() == Animation.Status.STOPPED){
if(!hidden){
hideSideBar.play();
setLabelsManagement(false);
System.out.println(toolbarVertical.getWidth());
} else {
showSideBar.play();
System.out.println(toolbarVertical.getWidth());
}
}
}
private void setLabelsManagement(boolean b){
homeLabel.setManaged(b);
homeLabel.setVisible(b);
addLabel.setManaged(b);
addLabel.setVisible(b);
listLabel.setManaged(b);
listLabel.setVisible(b);
confLabel.setManaged(b);
confLabel.setVisible(b);
hidden = !b;
}
}
The important part is the expandMenu function, which is in charge of sliding the VBox and hiding / managing or not the Labels (because in this case, they can be laid out even when hidden, and thus add some extra space when not required).
The original source can give you a few more hints, the idea comes from here.
Hope this can help someone, cheers !