javafx Pedia

Horizontal JavaFX TitledPane

javafx 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

1
3
6/25/2013 12:47:38 AM

Accepted Answer

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).

sidebar visible sidebar hidden

/** 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();
          }
        }
      }
    });
  }
}
2
6/25/2013 5:05:21 AM

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();
}
Fred

View more on Stack Overflow
Licensed under: CC-BY-SA with attribution
Not affiliated with: Stack Overflow
Icon