javafx-2 - 水平 JavaFX TitledPane

Question

JavaFX に、アコーディオンまたはタイトル付きペインを水平にする方法が含まれているかどうか疑問に思っていました。何も見つけられませんでしたが、質問する必要があると思いました。基本的に、最終的な目標は、展開してツリー ビューを表示できるサイドバーを用意することです。ここに私の意図の写真があります：

折りたたまれた

エキスパンド

Answer 1

JavaFX 2.2 には、標準の水平方向の TitledPane はありません。

JavaFX issue trackerで機能リクエストを作成できます。

独自の水平 TitledPane を実装するのは非常に簡単です。

これは、標準のペインでアニメーションを使用するだけ の同様のデモです。

関連する手法の詳細な説明は、Sai のブログ投稿: 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

次の行をアコーディオンに追加するだけで完了です。

 accordion.setRotate(270);