web-dev-qa-db-ja.com

JavaFX CSSクラススタイル

JavaFXオブジェクトを拡張するクラスのCSSスタイルを設定するにはどうすればよいですか?

public class DiagramPane extends ScrollPane implements IDiagramEditor {
    // .... Methods go here
}

私はメインメソッドで次の方法を試しました:

public class DiagramPane extends ScrollPane implements IDiagramEditor {
    DiagramPane() {
        this.setStyle("-fx-background-color: #f8ecc2;-fx-font-size: 8pt;");
        setStyle("-fx-background-color: #f8ecc2;-fx-font-size: 8pt;");
    }
}
8
user5562650

これらの行をcssファイルに追加します

.diagram-pane {
    -fx-background-color: #f8ecc2;
    -fx-font-size: 8pt;
}

DiagramPaneインスタンスを設定してdiagram-paneスタイルクラスを使用する

diagramPane.getStyleClass().clear();
diagramPane.getStyleClass().add("diagram-pane");
9
Jan Lochman

可能性の1つは、ノードのメソッド setStyleを使用することについて述べたものです。

public class MyScrollPane extends ScrollPane {

    public MyScrollPane(){
        setStyle("-fx-background-color: blue;");
    }

}

CSSスタイルシートを使用する別の可能性

これは、CSSスタイルをJavaコードから完全に分離するため、推奨されるアプローチです。

注意: MyScrollPane.cssは、クラス自体と同じディレクトリに配置されます。

MyScrollPane.Java

public class MyScrollPane extends ScrollPane {

    public MyScrollPane(){
        getStylesheets().add(getClass().getResource("MyScrollPane.css").toExternalForm());
    }

}

このスタイルシートでは、ScrollPaneの既存のCSSクラスを次のように上書きできます。

MyScrollPane.css

.scroll-pane {
    -fx-background-color: red, white;
    -fx-background-insets: 0, 2;
    -fx-padding: 2.0;
}

JavaFXのスクロールペインにどのクラスが存在するかを確認するには、 caspian.css を読み取ります。 ScrollPaneの基本クラスは.scroll-pane

また、新しいCSSクラスを定義してScrollPaneに追加することもできます。

public class MyScrollPane extends ScrollPane {

    public MyScrollPane(){
        getStylesheets().add(getClass().getResource("MyScrollPane.css").toExternalForm());
        getStyleClass().add("red-border");
    }

}

そしてCSSで

.red-border {
    -fx-background-color: red, white;
    -fx-background-insets: 0, 2;
    -fx-padding: 2.0;
}

JavaFXでのCSSスタイル設定について学ぶには http://docs.Oracle.com/javafx/2/css_tutorial/jfxpub-css_tutorial.htm

また、JavaFXのCSSリファレンスガイドを確認することもできます: https://docs.Oracle.com/javafx/2/api/javafx/scene/doc-files/cssref.html

3
DVarga