FXMLでGUIをデザインしよう (5/6)

コントロール類の細かな表示設定は、FXMLに属性として書いていくよりも、もっとわかりやすいやり方があります。それは「スタイルシート」を使うのです。JavaFXでは、コントロール類の属性をスタイルシートから読み込み適用させる機能を持っています。これを利用することで、コントロールの表示を、Javaのコードを書くことなく簡単に設定できるようになります。

スタイルシートの利用は非常に簡単です。FXMLのPaneタグの中に、以下のような形でスタイルシートを記述するだけです

<stylesheets>
    <URL value="@スタイルシート" />
</stylesheets>

<stylesheets>タグの中に、ロードするスタイルシートのURLを用意します。これは、必要なだけ書くことができます。<URL>タグでは、valueにロードするスタイルシートのパスを指定します。これは、「@ファイル名」というように記述することで、FXMLファイルと同じ場所にあるスタイルシートファイルを指定することができます。

下のリスト欄に、先ほどのFXMLにスタイルシートを追加したものを挙げておきました。これで、FXMLファイルと同じ場所にある「app.css」をロードします。ここではスタイルシートを適用する関係で、<Label>タグにIDを指定してあります。

<Label fx:id="label1" …… />

このように、「fx:id」と記述することで、そのコントロールにIDを指定できます。スタイルシートでは、このIDを使って特定のコントロールにスタイルを適用することができるようになります。

(by. SYODA-Tuyano.)

※リストが表示されない場合

AddBlockなどの広告ブロックツールがONになっているとリストなどが表示されない場合があります。これらのツールをOFFにしてみてください。

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

<?import java.net.URL ?>
<?import javafx.scene.text.*?>
<?import javafx.scene.control.*?>
<?import java.lang.*?>
<?import javafx.scene.layout.*?>

<BorderPane xmlns="http://javafx.com/javafx/8" xmlns:fx="http://javafx.com/fxml/1">
    <stylesheets>
        <URL value="@app.css" />
    </stylesheets>
    <top>
        <Label fx:id="label1" text="This is FXML!" />
    </top>
</BorderPane>