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

ListViewとSelectionModel (1/5)

作成:2014-12-20 13:17
更新:2014-12-20 13:17

■ListViewを作成しよう

基本的なGUIコントロールの使い方は既に説明しましたが、JavaFXにはもっと複雑なコントロールも用意されています。特に重要なのが「データを扱うためのコントロール」でしょう。あらかじめ用意したデータを元に必要な情報を表示し操作するようなものです。

その代表とも言えるのが「リスト」です。いくつもの項目ずらっと一覧表示するGUIですね。JavaFXでは、これを「ListView」というコントロールとして用意しています。

まずは、FXMLを利用してListViewを作成してみましょう。ListViewは、<ListView>というタグを使って作成します。これ自体はとてもシンプルですが、しかしこれだけでは空のリストになってしまいます。この中に、表示する内容を記述してやらないといけません。
<ListView>
    <items>
        <FXCollections
fx:factory
="データの種類">
            ……データの内容……
        </FXCollections>
    </items>
</ListView>


データの内容までFXMLで記述するとこのような感じになるでしょう。ListViewのデータは、<items>というタグとして用意します。この中に<FXCollection>というタグを用意しておきます。ここに具体的なデータの内容を記述していきます。通常は、ここにfx:factoryという属性を用意し、データの種類(FXCollectionに保管するクラス)を指定します。

これは色々と設定できるのですが、とりあえずは「observableArrayList」というクラスを指定しておくのがよいでしょう。これは、オブジェクトをまとめるArrayListのサブクラスです。この中に、例えば<String>タグを使ってテキストを記述すれば、StringデータのArrayListができ、それが表示項目として設定されます。

実際の利用例を挙げておきましょう。下のリストは、いくつかのテキスト項目を表示するサンプルです。<ListView>内の<items>タグには、以下のような形でデータを用意しています。
<FXCollections fx:factory="observableArrayList">
そして、この中に<String>タグを使って表示するテキストを指定しています。単純なテキストの値ならばこれで表示できます。

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

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

●プログラム・リスト●

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

<?language javascript?>
<?import java.lang.*?>
<?import java.net.URL ?>
<?import javafx.scene.text.*?>
<?import javafx.scene.control.*?>
<?import javafx.scene.layout.*?>
<?import javafx.collections.FXCollections?>
<BorderPane xmlns="http://javafx.com/javafx" 
    xmlns:fx="http://javafx.com/fxml"
    fx:controller="com.tuyano.libro.AppController">
    <stylesheets>
        <URL value="@app.css" />
    </stylesheets>
    <top>
        <Label fx:id="label1" text="This is FXML!" />
    </top>
    <center>
        <ListView fx:id="list1">
            <items>
                <FXCollections fx:factory="observableArrayList">
                    <String fx:value="Windows" />
                    <String fx:value="Mac OS" />
                    <String fx:value="Linux" />
                </FXCollections>
            </items>
        </ListView>
    </center>
    <bottom>
        <Button text="Click" fx:id="btn1" />
    </bottom>
</BorderPane>

※関連コンテンツ

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