libro
www.tuyano.com
初心者のためのJavaFXプログラミング入門

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

作成:2014-12-06 11:24
更新:2014-12-06 11:24

■スタイルシートを利用しよう

コントロール類の細かな表示設定は、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を使って特定のコントロールにスタイルを適用することができるようになります。

※プログラムリストが表示されない場合

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>
※関連コンテンツ

「初心者のためのJavaFXプログラミング入門」に戻る