FXMLでGUIをデザインしよう (5/6)
作成:2014-12-06 11:24
更新:2014-12-06 11:24
更新:2014-12-06 11:24
■スタイルシートを利用しよう
コントロール類の細かな表示設定は、FXMLに属性として書いていくよりも、もっとわかりやすいやり方があります。それは「スタイルシート」を使うのです。JavaFXでは、コントロール類の属性をスタイルシートから読み込み適用させる機能を持っています。これを利用することで、コントロールの表示を、Javaのコードを書くことなく簡単に設定できるようになります。
スタイルシートの利用は非常に簡単です。FXMLのPaneタグの中に、以下のような形でスタイルシートを記述するだけです
<stylesheets>タグの中に、ロードするスタイルシートのURLを用意します。これは、必要なだけ書くことができます。<URL>タグでは、valueにロードするスタイルシートのパスを指定します。これは、「@ファイル名」というように記述することで、FXMLファイルと同じ場所にあるスタイルシートファイルを指定することができます。
下のリスト欄に、先ほどのFXMLにスタイルシートを追加したものを挙げておきました。これで、FXMLファイルと同じ場所にある「app.css」をロードします。ここではスタイルシートを適用する関係で、<Label>タグにIDを指定してあります。
このように、「fx:id」と記述することで、そのコントロールにIDを指定できます。スタイルシートでは、このIDを使って特定のコントロールにスタイルを適用することができるようになります。
スタイルシートの利用は非常に簡単です。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>
※関連コンテンツ