【JavaFX】CSSでコントロールのサイズやフォントを設定する

JavaFXでコントロールの装飾をcssで設定できます。というかソースコードでそれを設定する方法がなく（あるような情報もあるけど超面倒）、FXMLで設定するか、FXMLを使わない場合はCSS一択となります。（で、僕は前回書いたとおりFXMLを使うのをやめた）

今回は前回のソースコード（左図）を使って、CSSファイルの読み込みとCSSクラスを割当てることで簡単に装飾（右図）していきたいと思います。

 

まずはCSSファイルの容易

以下のCSSファイルを用意します。ファイル名はstyle.cssとしました。各コントロールのサイズやフォントを設定しています。

.button {
  -fx-pref-width: 150px;
  -fx-font-size: 24px;
  -fx-font-family: "Meiryo UI";
}

.table {
  -fx-font-size: 24px;
  -fx-font-family: "Meiryo　UI";
}

.nameColumn{ 
  -fx-pref-width: 150px; 
}

.ageColumn{ 
  -fx-pref-width: 80px; 
}

.addressColumn{ 
  -fx-pref-width: 250px; 
}
 

 

これをJavaのソースコードと同じフォルダ内に保存します。

 

前回のJavaのソースコードに以下を追加すればOKです。ソースコード全文は後述。

//CSSファイルを読み込む
scene.getStylesheets().add("style.css");
//クラスと紐づけ
btn.getStyleClass().add("button");
table.getStyleClass().add("table");
nameColumn.getStyleClass().add("nameColumn");
ageColumn.getStyleClass().add("ageColumn");
addressColumn.getStyleClass().add("addressColumn");
 

 

 

こちらがソースコード全文です。TableViewと連動するデータクラスのソースは省略。前回の記事を見てください。

import javafx.application.Application;
import javafx.scene.Scene;
import javafx.scene.control.*;
import javafx.scene.control.cell.*;
import javafx.collections.*;
import javafx.scene.layout.BorderPane;
import javafx.stage.Stage;
import javafx.scene.text.Font;

public class TableViewTest extends Application{
  public static void main(String[] args){
    launch(args);
  }

  @Override
  public void start(Stage stage) throws Exception{        
    BorderPane pane = this.setComponents();
    Scene scene = new Scene(pane,800,600);
    stage.setScene(scene);
    stage.show();
    //CSSファイルを読み込む
    scene.getStylesheets().add("style.css");
  }

  private BorderPane setComponents(){
    Button btn = new Button("Button");
    ToolBar toolBar = new ToolBar(btn);

    TableView<Member> table = new  TableView<Member>();
    ObservableList<Member> data = FXCollections.observableArrayList(
      new Member("山田太郎", 48, "東京都千代田区"),
      new Member("渡辺花子", 52, "北海道札幌市"),
      new Member("池田隆", 27, "大阪府大坂市"),
      new Member("鈴木一郎", 32, "福岡県北九州市")
    );
    table.itemsProperty().setValue(data);

    TableColumn<Member, String> nameColumn = new TableColumn<>("名前");
    TableColumn<Member, String> ageColumn = new TableColumn<>("年齢");
    TableColumn<Member, String> addressColumn = new TableColumn<>("出身地");

    //ButtonにCSSを適用
    btn.getStyleClass().add("button");
    //TableにCSSを適用
    table.getStyleClass().add("table");
    nameColumn.getStyleClass().add("nameColumn");
    ageColumn.getStyleClass().add("ageColumn");
    addressColumn.getStyleClass().add("addressColumn");

    nameColumn.setCellValueFactory(new PropertyValueFactory<Member, String>("name"));
    ageColumn.setCellValueFactory(new PropertyValueFactory<Member, String>("age"));
    addressColumn.setCellValueFactory(new PropertyValueFactory<Member, String>("address"));

    table.getColumns().addAll(nameColumn, ageColumn, addressColumn);

    BorderPane pane = new BorderPane();
    pane.setTop(toolBar);
    pane.setCenter(table);
    return pane;
  }
}

 

 

 

 - Java