web-dev-qa-db-ja.com

FXMLにCSSスタイルシートを追加する方法

CSSファイルをアプリケーションにリンクしたいのですが。私のfxmlファイルでは、これを使用します。

  <stylesheets>
    <URL value="@../stylesheet1.css" />
  </stylesheets>

...さらに、シーンビルダーでfxmlファイルを開くと、スタイル付きのプレビューが表示されます。しかし、アプリケーションを実行しようとすると、エラーが発生します。

Java.net.MalformedURLException：no protocol：../stylesheet1.css

だから私はこの方法でそれをテストしました：

<stylesheets>
    <String fx:value="stylesheet1.css" />
</stylesheets>

そして今それは逆です-アプリケーションがCSSを開始して適用しますが、シーンビルダーにプレビューが表示されません。エラーメッセージ：

"ファイルstylesheet1.cssは存在しません。リソースstylesheet1.cssが見つかりません。"

では、CSSファイルを適切に添付するにはどうすればよいですか？

さて、なぜ私の質問には答えられませんでしたが、なぜそれが上記の方法でうまくいかないのですか、私にはうまくいく解決策が見つかりました。私のFXMLには次の行しかありません

<?scenebuilder-stylesheet ../stylesheet1.css?>

したがって、ScenebuilderはそのCSSで動作します。そして、私のメインクラスで、スタイルシートをプログラムで設定しました：

Scene scene = new Scene(root);
String css = this.getClass().getResource("../stylesheet1.css").toExternalForm(); 
scene.getStylesheets().add(css);
cssjavafxstylesheetfxmlscenebuilder
12
cody

cssにfxmlファイルを含めるために使用できる実用的な解決策は、追加stylesheets="@app/cssfilename.css"スタックペインと同じようにfxmlファイルの親ノードに

<StackPane maxHeight="-Infinity" maxWidth="-Infinity" minHeight="-Infinity" minWidth="-Infinity" prefHeight="400.0" prefWidth="600.0" xmlns="http://javafx.com/javafx/8" xmlns:fx="http://javafx.com/fxml/1" fx:controller="app.fxml.SettingsController" stylesheets="@app/cssfilepath.css">

......
.....
.....
</StackPane>
12
Mr.AshishGK

以下は、開発環境、シーンビルダー、およびパッケージ化されたJARで機能するソリューションです。

フォルダー構造：

enter image description here

Main.Java：

package application;

import javafx.application.Application;
import javafx.fxml.FXMLLoader;
import javafx.scene.Scene;
import javafx.scene.layout.AnchorPane;
import javafx.stage.Stage;


public class Main extends Application {
    @Override
    public void start(Stage primaryStage) {
        try {

            FXMLLoader loader = new FXMLLoader(Main.class.getResource("view/RootLayout.fxml"));
            AnchorPane rootLayout = (AnchorPane) loader.load();

            Scene scene = new Scene(rootLayout, 400, 400);
            scene.getStylesheets().add(getClass().getResource("css/application.css").toExternalForm());

            primaryStage.setScene(scene);
            primaryStage.show();

        } catch(Exception e) {
            e.printStackTrace();
        }
    }

    public static void main(String[] args) {
        launch(args);
    }
}

RootLayout.fxml：

<?xml version="1.0" encoding="UTF-8"?>

<?import Java.lang.*?>
<?import javafx.scene.control.*?>
<?import javafx.scene.layout.*?>
<?import javafx.scene.layout.AnchorPane?>

<AnchorPane xmlns="http://javafx.com/javafx/8" xmlns:fx="http://javafx.com/fxml/1" fx:controller="application.view.RootLayoutController">
   <children>
      <Pane layoutX="0.0" layoutY="0.0" prefHeight="200.0" prefWidth="200.0">
         <children>
            <Button fx:id="sunButton" layoutX="74.0" layoutY="88.0" mnemonicParsing="false" onAction="#handleSunButtonClick" styleClass="Sun-button" stylesheets="@../css/toolbar.css" text="Button" />
         </children>
      </Pane>
   </children>
</AnchorPane>

RootLayoutController.Java：

package application.view;

import javafx.fxml.FXML;
import javafx.scene.control.Button;

public class RootLayoutController {


    @FXML
    Button sunButton;

    @FXML
    public void handleSunButtonClick() {
        System.out.println( "Button clicked");
    }
}

toolbar.css：

.Sun-button {
  -fx-graphic: url('./icons/Sun.png');
}

application.css：

.root {
    -fx-background-color:lightgray;
}

Sun.png：

enter image description here

これは、開発環境とJARをパッケージ化する場合の両方で機能します（Eclipseで[必要なライブラリを生成されたJARに抽出する]を選択します）。

スクリーンショット（CSSを介して読み込まれたアイコンが付いたボタンのみ）

enter image description here

8
Roland

プログラムで実行したくない場合は、コードとリソースを分離することで実行できます。私はこのようなMavenプロジェクト構造を持っていますが、これは要件ではありません。

src/main/Java/${packageName}
    MainWindow.fxml
src/main/resources/${packageName}
    stylesheet1.css

これで、.fxmlでスタイルシートを使用できます

stylesheets="@stylesheet1.css"

または、スタイルシートタグを使用します。

SceneBuilderに警告があるかもしれませんが、動作します。

3
DaRich