前回前々回とJavaFXのGUI部品であるコントロールを紹介してきました。

 今月紹介するのは次の3種類のコントロールです。

  • リスト
  • コンボボックス
  • テーブル

 いずれもGUIを構成する上で、欠かせない部品です。

 これら3種類のコントロールは、いずれもセルを扱うという共通点があります。このため、使い方も共通している部分があります。特にリストとコンボボックスは非常に似た使い方になります。

リスト

 リストは項目が垂直方向もしくは水平方向にならんだコントロールです。リストはjavafx.scene.control.ListViewクラスで表します。

 さっそく使ってみましょう。サンプルのListDemoがすべてJavaで記述したサンプル、ListFXMLDeomoがFXMLを使用して記述したサンプルになります。

サンプルのプロジェクト
ListDemo.zip
ListFXMLDemo.zip

 ListDemo/ListFXMLDeomoはルートコンテナにリストが1つあるだけのサンプルです。まずはその部分だけをリスト1に示します。

リスト1●ListDemoクラス(Java)
public class ListDemo extends Application {

    @Override
    public void start(Stage stage) {
        VBox root = new VBox();
 
        // リストの生成
        // ジェネリクスのパラメータにはリストに表示する型を指定する
        ListView<String> list = new ListView<>();

        // 垂直方向に領域が余っている場合、リストを伸ばす     
        VBox.setVgrow(list, Priority.SOMETIMES);
        root.getChildren().add(list);
 
        Scene scene = new Scene(root, 200, 150);
 
        stage.setTitle("ListView Demo");
        stage.setScene(scene);
        stage.show();
    }
 
    public static void main(String[] args) {
        launch(args);
    }
}

図1●ListDemoクラスの実行結果
図1●ListDemoクラスの実行結果

 ListViewクラスはジェネリクスで項目に表示する型を指定する必要があります。ここでは赤字で示したように文字列を使用します。文字列以外の場合、表示するクラスのtoStringメソッドの戻り値が表示されます。

 この状態で実行してみましょう。図1に実行結果を示しました。

 では、項目を表示させましょう。

 ListViewクラスではリストに表示する項目をjavafx.collections.ObservableListインタフェースで表します。

 ObservableListインタフェースはjava.util.Listインタフェースのサブインタフェースで、要素の追加や削除が発生した時にイベントを発生させます。

 ObservableListインタフェースのオブジェクトはjavafx.collections.FXCollectionsクラスを使用して生成します。

 ListViewオブジェクトにObservableListオブジェクトを指定するには、コンストラクタかsetItemsメソッドを使用します。ここでは、8種類の色名を表示するようにしてみます。

リスト2●ListViewオブジェクトに項目を設定(Java)
public class ListDemo extends Application {

    private ObservableList<String> items 
        = FXCollections.observableArrayList(
            "Red", "Green", "Blue", "Yellow", "Magenta", "Cyan", "Black", "White");

    @Override
    public void start(Stage stage) {
        VBox root = new VBox();
 
        // 項目を指定してリストを生成する
        ListView<String> list = new ListView<>(items);

        // 次のように項目を指定することも可能 
        // ListView<String> list = new ListView<>();
        // list.setItems(items);
        
        <<以下、省略>>

図2●項目を表示する
図2●項目を表示する

 項目を追加した場合の実行結果を図2に示します。

 ここでは垂直方向にリストを表示していますが、水平方向に表示する場合はListViewクラスのsetOrientationメソッドで指定します。setOrientationメソッドの引数の型はenumのjavafx.geometry.Orientationになります。

 Orientationの取りうる値はHORIZONTALとVERTICALです。

 FXMLを使用すると、項目もFXMLに記述することができます。

リスト3●ListViewオブジェクトに項目を設定(FXML)
<VBox prefHeight="150.0" prefWidth="200.0" xmlns:fx="http://javafx.com/fxml" fx:controller="ListDemoViewController">
  <children>
    <ListView fx:id="list" VBox.vgrow="SOMETIMES" onEditCommit="#handleEditCommitted">
      <items>
        <FXCollections fx:factory="observableArrayList">
          <String fx:value="Red" />
          <String fx:value="Green" />
          <String fx:value="Blue" />
          <String fx:value="Yellow" />
          <String fx:value="Magenta" />
          <String fx:value="Cyan" />
          <String fx:value="Black" />
          <String fx:value="White" />
        </FXCollections>
      </items>
    </ListView>
  </children>
</VBox>

 Javaで記述した場合、ObservableListオブジェクトはFXCollectionsクラスのobserableArrayListメソッドを使用しました。FXMLでも同じような記述を行います。

 赤で書いたように<items>要素の子要素には<FXCollections>要素にします。そして、ObservableListオブジェクトを生成するobservableArrayListメソッドをfx:factory属性に指定します。

 すると、<FXCollections>要素の子要素をObservableListオブジェクトに変換します。

 Stringクラスはイミュタブルクラスなので、値を後から変更することはできません。そこで、fx:value属性を記述し、指定された値からStringオブジェクトを生成するようにしています。

 ここでは選択項目をFXMLに記述しましたが、コントローラに記述することもできます。特にScene Builder 1.1ではitems要素をグラフィカルに編集することができません。このため、選択項目をFXMLに記述するのであれば、FXMLファイルをエディタなどで編集して付け加える必要があります。

この先は会員の登録が必要です。今なら有料会員(月額プラン)が4月末まで無料!

日経 xTECHには有料記事(有料会員向けまたは定期購読者向け)、無料記事(登録会員向け)、フリー記事(誰でも閲覧可能)があります。有料記事でも、登録会員向け配信期間は登録会員への登録が必要な場合があります。有料会員と登録会員に関するFAQはこちら