私はこれについての答えをインターネットのどこにも見つけることができません。
折りたたみ可能なパネルが必要なアプリケーションがあるので、Java FXでのTitledPaneとAccordionのセットアップは当然の候補です。
アプリケーションでは、コンテナが折りたたまれたときにコンテナのカスタムヘッダーを用意する必要があります。 TitledPaneのcssドキュメントで、ヘッダーは実際にはHBoxやその他のさまざまなコンポーネントであることがわかります。
http://docs.Oracle.com/javafx/2/api/javafx/scene/doc-files/cssref.html#titledpane
このコンポーネントにアクセスして、カスタムコンポーネントに置き換えたいと思います。
TitledPaneAPIのsetGraphic関数とsetContentDisplayをGraphicOnlyに使用しています。カスタムコンポーネントを使用します。ただし、正しくレンダリングできません。矢印の削除と、矢印が占めるスペースの削除で問題が発生しました。
目的の外観のスクリーンショットと実際の外観については、以下のリンクを参照してください。
矢印を削除してパディングを削除するにはどうすればよいですか?
TitledPaneはラベル付きであるため、リスナーで グラフィックを設定 するか、 拡張 プロパティにバインドすることができます。
背景色の変更など(:focused疑似クラスのスタイリングのオーバーライドを含む)は、cssを介して実行できます(例については、jfxrt.jarの caspian.css スタイルシートのTitledPaneセクションを参照してください)。 。
TitledPaneのサブコンポーネントへのコードベースのアクセスが必要な場合は、TitledPaneがステージに表示されているシーンに追加された後で lookup 関数を使用できます。
adminPane.lookup(".arrow").setVisible(false);
ルックアップを試す前に、グラフィック/ cssスタイルシートベースのアプローチを試すことをお勧めします。
テキストを表示するためにLabeledが必要ない場合は、 グラフィックのみ を表示するように設定します。
titledPane.setContentDisplay(ContentDisplay.GRAPHIC_ONLY);
これは、カスタマイズされたヘッダーのないTitledPaneの横にカスタマイズされたヘッダーのあるTitledPaneを表示するサンプルコードです。
import javafx.application.Application;
import javafx.beans.binding.Bindings;
import javafx.geometry.Pos;
import javafx.scene.*;
import javafx.scene.control.*;
import javafx.scene.image.*;
import javafx.scene.layout.*;
import javafx.scene.Paint.Color;
import javafx.scene.shape.Circle;
import javafx.scene.shape.Rectangle;
import javafx.stage.Stage;
/** http://stackoverflow.com/questions/11765436/how-to-change-header-component-in-titledpane-in-javafx */
public class TitledPaneCustomization extends Application {
public static void main(String[] args) { launch(args); }
@Override public void start(Stage primaryStage) {
TitledPane adminPane = new TitledPane("Administration",
VBoxBuilder.create().style("-fx-padding: 10").spacing(10).children(
ButtonBuilder.create().text("Admin Client").maxWidth(Double.MAX_VALUE).build(),
ButtonBuilder.create().text("Admin User").maxWidth(Double.MAX_VALUE).build()
).build()
);
adminPane.setAnimated(false);
adminPane.getStyleClass().add("admin");
Node open = HBoxBuilder.create().spacing(5).children(
new Circle(4, 4, 8, Color.FORESTGREEN),
new Rectangle(50, 16, Color.AQUAMARINE)
).build();
Node closed = HBoxBuilder.create().spacing(5).children(
new Circle(4, 4, 8, Color.GOLDENROD),
new Rectangle(50, 16, Color.AQUAMARINE)
).build();
adminPane.graphicProperty().bind(
Bindings
.when(adminPane.expandedProperty())
.then(open)
.otherwise(closed)
);
adminPane.setContentDisplay(ContentDisplay.GRAPHIC_ONLY);
TitledPane viewPane = new TitledPane("View",
VBoxBuilder.create().style("-fx-padding: 10").spacing(10).children(
ButtonBuilder.create().text("View Client").maxWidth(Double.MAX_VALUE).build(),
ButtonBuilder.create().text("View User").maxWidth(Double.MAX_VALUE).build()
).build()
);
viewPane.setAnimated(false);
VBox errorPane = VBoxBuilder.create().style("-fx-padding: 10").spacing(10).children(
new Label("500: Aug 8, 12:15pm"),
new Label("404: Aug 7, 3:27am")
).build();
Label nErrors = new Label();
nErrors.getStyleClass().add("nerrors");
nErrors.textProperty().bind(Bindings.size(errorPane.getChildren()).asString());
TitledPane connectivityPane = new TitledPane(
"",
errorPane
);
Label connectivityErrorLabel = new Label("CONNECTIVITY ERROR");
connectivityErrorLabel.getStyleClass().add("connectivityErrorLabel");
connectivityPane.getStyleClass().add("connectivity");
connectivityPane.setAnimated(false);
connectivityPane.setGraphic(
HBoxBuilder.create().spacing(2).alignment(Pos.CENTER).styleClass("header").children(
nErrors,
new ImageView(
new Image(
"http://openiconlibrary.sourceforge.net/gallery2/open_icon_library-full/icons/png/48x48/actions/network-disconnect-2.png",
0, 24, true, true
)
),
connectivityErrorLabel
).build()
);
HBox layout = new HBox(10);
layout.setStyle("-fx-padding: 10; -fx-background-color: cornsilk;");
layout.getChildren().addAll(adminPane, viewPane, connectivityPane);
layout.setPrefHeight(150);
layout.getStylesheets().add(this.getClass().getResource("titledpanecustomization.css").toExternalForm());
primaryStage.setScene(new Scene(layout));
primaryStage.show();
Node arrow = adminPane.lookup(".arrow");
arrow.setVisible(false);
arrow.setManaged(false);
// translate the titledpane arrow and header so that the arrow is displayed to right of the header.
Pane connectivityArrow = (Pane) connectivityPane.lookup(".arrow");
connectivityArrow.translateXProperty().bind(
connectivityPane.widthProperty().subtract(connectivityArrow.widthProperty().multiply(2))
);
Pane connectivityTitle = (Pane) connectivityPane.lookup(".header");
connectivityTitle.translateXProperty().bind(
connectivityArrow.widthProperty().negate()
);
}
}
そしてそれに合わせていくつかのCSS:
/** titledpanecustomization.css place in same build directory as TitledPaneCustomization.Java
and ensure build system copies it to the output classpath. */
.admin .titled-pane > .title {
-fx-background-color: blue, yellow, linear-gradient(to bottom, derive(coral, +50%), coral);
}
.connectivity {
-fx-text-fill: white;
}
.nerrors {
-fx-background-color: derive(-fx-focus-color, -15%);
-fx-padding: 5 8 5 8;
-fx-text-fill: white;
}
.connectivityErrorLabel {
-fx-text-fill: white;
-fx-padding: 0 40 0 3;
}
.connectivity .titled-pane > .title {
-fx-background-color: -fx-box-border, -fx-inner-border, -fx-body-color;
-fx-background-insets: 0, 1, 2;
-fx-background-radius: 0 0 0 0, 0 0 0 0, 0 0 0 0;
-fx-padding: 0.166667em 1.166667em 0.25em 0; /* 2 14 3 0 */
-fx-color: -fx-focus-color;
}
.connectivity .titled-pane > .title > .arrow-button .arrow {
-fx-background-color: white;
}
(質問からの回答を移動)
これが答えです:
矢印を削除するには、次のCSS宣言を追加します。
.titled-pane > .title > .arrow-button .arrow{
-fx-shape: "";
}
上記のCSSスニペットは矢印を削除しますが、矢印のスペースはまだ使用されています。これは本当にトリッキーで、インターネット上のどこにも文書化されていませんでしたが、このCSSステートメントを適用すると、矢印からギャップが削除されました。
.titled-pane > .title{
-fx-padding: 0 0 0 -4;
}
これは最善の解決策ではないかもしれませんが、私のニーズに合った解決策です。
2018年末の現在、これらのソリューションはいずれもJDK1.8のJavaFXでは機能しません。だから私は簡単な解決策に取り組んできました。このメソッドをユーティリティクラスにコピーできます。
public static boolean hideArrow(TitledPane pane) {
Node arrowButton = pane.lookup(".arrow-button");
if (arrowButton == null) {
return false;
}
// I don't know how with this the arrow space disappears...., but it does
arrowButton.setStyle("-fx-background-color: black;");
Parent titleRegion = arrowButton.getParent();
titleRegion.addEventFilter(MouseEvent.ANY, MouseEvent::consume);
titleRegion.setCursor(Cursor.DEFAULT);
((StackPane) titleRegion).getChildren().remove(arrowButton);
return true;
}