Horizontal JavaFX TitledPane - javafx-2

Question

I was wondering if JavaFX included a way to make the accordion or titled panes horizontal. I can't find anything, but I thought I should ask. Essentially, the end goal is to have a sidebar that can expand to reveal a tree view. Here are pictures of my intention:
Collapsed
Expanded

Answer 1

There is no standard horizontal orientation TitledPane in JavaFX 2.2.
You can create a feature request for one in the JavaFX issue tracker.
Implementing your own horizontal TitledPane is pretty easy.
Here is a demo of a similar thing just using animation on a standard Pane.
Further explanations of the techniques involved are in Sai's blog post: Sliding in JavaFX (It’s all about clipping).
/** Animates a node on and off screen to the left. */
class SideBar extends VBox {
/** #return a control button to hide and show the sidebar */
public Button getControlButton() { return controlButton; }
private final Button controlButton;
/** creates a sidebar containing a vertical alignment of the given nodes */
SideBar(final double expandedWidth, Node... nodes) {
getStyleClass().add("sidebar");
this.setPrefWidth(expandedWidth);
// create a bar to hide and show.
setAlignment(Pos.CENTER);
getChildren().addAll(nodes);
// create a button to hide and show the sidebar.
controlButton = new Button("Collapse");
controlButton.getStyleClass().add("hide-left");
// apply the animations when the button is pressed.
controlButton.setOnAction(new EventHandler<ActionEvent>() {
#Override public void handle(ActionEvent actionEvent) {
// create an animation to hide sidebar.
final Animation hideSidebar = new Transition() {
{ setCycleDuration(Duration.millis(250)); }
protected void interpolate(double frac) {
final double curWidth = expandedWidth * (1.0 - frac);
setPrefWidth(curWidth);
setTranslateX(-expandedWidth + curWidth);
}
};
hideSidebar.onFinishedProperty().set(new EventHandler<ActionEvent>() {
#Override public void handle(ActionEvent actionEvent) {
setVisible(false);
controlButton.setText("Show");
controlButton.getStyleClass().remove("hide-left");
controlButton.getStyleClass().add("show-right");
}
});
// create an animation to show a sidebar.
final Animation showSidebar = new Transition() {
{ setCycleDuration(Duration.millis(250)); }
protected void interpolate(double frac) {
final double curWidth = expandedWidth * frac;
setPrefWidth(curWidth);
setTranslateX(-expandedWidth + curWidth);
}
};
showSidebar.onFinishedProperty().set(new EventHandler<ActionEvent>() {
#Override public void handle(ActionEvent actionEvent) {
controlButton.setText("Collapse");
controlButton.getStyleClass().add("hide-left");
controlButton.getStyleClass().remove("show-right");
}
});
if (showSidebar.statusProperty().get() == Animation.Status.STOPPED && hideSidebar.statusProperty().get() == Animation.Status.STOPPED) {
if (isVisible()) {
hideSidebar.play();
} else {
setVisible(true);
showSidebar.play();
}
}
}
});
}
}

Answer 2

there you go:
#Override
public void start(Stage stage) throws Exception {
Label label1 = new Label("label 1");
label1.setRotate(90);
TitledPane pane1 = new TitledPane("titled pane 1", label1);
pane1.setAlignment(Pos.CENTER);
Label label2 = new Label("label 2");
label2.setRotate(90);
TitledPane pane2 = new TitledPane("titled pane 2", label2);
pane2.setAlignment(Pos.CENTER);
Accordion accordion = new Accordion();
accordion.setRotate(270);
accordion.getPanes().add(pane1);
accordion.getPanes().add(pane2);
HBox mainPane = new HBox(accordion);
accordion.prefWidthProperty().bind(mainPane.heightProperty());
accordion.prefHeightProperty().bind(mainPane.widthProperty());
stage.setTitle("Horizontal Accordion");
stage.setScene(new Scene(mainPane, 800, 600));
stage.show();
}

Answer 3

Perhaps JavaFx don't provide horizontal TitledPane, but what you can do is rotate your TitledPane to 90 degree and rotate the node which you want to set in it's content to 270 degree, and you are done.
Here is a code sample for you.
TitledPane titledPane = new TitledPane();
BorderPane borderPane = new BorderPane();
borderPane.setCenter(new Label("My Label")); //Or your tree view
borderPane.setRotate(270);
titledPane .setContent(borderPane);

Answer 4

Just add following line to accordion and your done.
accordion.setRotate(270);