HTMLでは、次のようにプログラムでスタイルシートを設定できるという優れた点に慣れています。
<link rel="stylesheet" ... >
しかし、JavaFXで見つけたスタイルシートの設定例では、次のようにプログラムでスタイルシートを設定する必要があります。
scene.getStylesheets().add("/resources/shell.css");
HTMLで行われるのと同じようにFXMLでスタイルシートを設定することは可能ですか?
以下を使用して、親ノードにスタイルシートを設定できます。
parent.getStylesheets().add("/resources/shell.css");
FXMLで使用できる要素と属性は、パブリックJavaFX Java APIから派生しているため、FXMLスタイルシート要素(または互換性のある属性)を使用して、スタイルシートを親ノードに割り当てることもできます。すべてのコンテナがParentを拡張するため、FXMLで参照する任意のコンテナに1つ以上のカスタムスタイルシートを設定できます。
<?xml version="1.0" encoding="UTF-8"?>
<?import javafx.scene.layout.*?>
<?import java.net.URL?>
....
<?scenebuilder-stylesheet fruitcombo.css?>
<AnchorPane prefHeight="205.0" prefWidth="168.0"
styleClass="layout"
fx:controller="fruit.FruitComboController"
xmlns:fx="http://javafx.com/fxml">
<children>
....
</children>
<stylesheets>
<URL value="@fruitcombo.css" />
</stylesheets>
</AnchorPane>
fxmlファイルからcssファイルを参照する完全な実行可能サンプルについては、このサンプルのfxmlファイルを参照してください。
上記のコードには、いくつかの優れた機能があります。
スタイルシートURLの奇妙なプレフィックスは厳密には必要ありませんが、JavaFXのロケーション解決@
を利用するために使用できます。「ロケーション解決演算子(属性値の「@」プレフィックスで表される)は、属性値を単純な文字列ではなく、現在のファイルからの相対的なロケーションとして扱う必要があることを指定するために使用されます。」
次の行は実行時に必要ありませんが、SceneBuilderツールを使用している場合は、デザイン時に必要なcssスタイルシートを見つけるために使用されます。
<?scenebuilder-stylesheet fruitcombo.css?>
コメントに関する更新
警告:これはFXML 1.0であり、2.0では機能しません。javafx.fxml.LoadException:URLは有効なタイプではありません。
このコメントは少し間違っていると思います。私の知る限り、現在FXML2.0のようなものはありません。
コメント投稿者がLoadExceptionを受け取った理由は、この投稿の指示スニペットがjava.net.URL
クラスをFXMLドキュメントにインポートしていなかったためです。スニペットを更新してインポートを含め、スニペットの意図を明確にするためにjava.net.URL
省略記号を追加しました。省略記号....
とは、「通常、元の意味を変更せずに、テキストから単語、文、またはセクション全体を意図的に省略したことを示す一連のドット」を意味します。
この答えを最もよく理解するには、リンクされたサンプルコードをコンパイルして実行することをお勧めします。
FXMLLoaderでInputStreamロード関数を使用することに対する警告
FXMLLoader.load(InputStream)関数を使用するのではなく、場所を使用して新しいFXMLLoaderを作成することを強くお勧めします。静的load()関数を使用すると、FXMLファイルのベースロケーションがないため、相対ロケーション参照を解決できません。
つまり、しないでください:
InputStream input = this.getClass().getResourceAsStream("layout.fxml");
FXMLLoader loader = new FXMLLoader.load(input);
Parent content = loader.load();
代わりに:
String url = this.getClass().getResource("layout.fxml").toExternalForm();
FXMLLoader loader = new FXMLLoader(url);
Parent content = loader.load();
はい、たとえば、このチュートリアルの例 4-8 を参照してください。次の属性をノードに適用します。
stylesheets="fxmlexample/Login.css"
例えば
<GridPane stylesheets="fxmlexample/Login.css">
JavaFX で fxml を使用する場合は、時間をかけて SceneBuilder をダウンロードして使用する必要があります。そうすれば、css スタイル シートの使用が簡単になります。もちろん、NetBeans を使用してください。SceneBuilder が実行されている状態で、NetBeans dxml ボイラープレート アプリケーションでビルド済みの dxml ファイルを開くと、SceneBuilder で編集するために自動的に開かれます。すべての StackPlane、ボタン、およびラベルを取り除き、本当に必要なコントロールとコンテナーを配置したら、スタイル シートを SceneBuilder に直接追加するだけです。メイン メニューの [プレビュー] の下に、CSS スタイル シートのメニュー選択があります。これを選択すると、スタイル シート ファイルをロードできるサブメニューが表示されます。
ファイルが読み込まれると、コントロールはスタイル シートの規則に従ってスキンされているように表示され、SceneBuilder のプロパティ セクションで各コントロールを選択し、そのスタイル シートがそのコントロールに適用されていることを宣言するまで、そのスキンは表示されません。その後、アプリケーションの実行時にスタイルが表示されます。