ListViewとSelectionModel (1/5)
作成:2014-12-20 13:17
更新:2014-12-20 13:17
更新:2014-12-20 13:17
■ListViewを作成しよう
基本的なGUIコントロールの使い方は既に説明しましたが、JavaFXにはもっと複雑なコントロールも用意されています。特に重要なのが「データを扱うためのコントロール」でしょう。あらかじめ用意したデータを元に必要な情報を表示し操作するようなものです。
その代表とも言えるのが「リスト」です。いくつもの項目ずらっと一覧表示するGUIですね。JavaFXでは、これを「ListView」というコントロールとして用意しています。
まずは、FXMLを利用してListViewを作成してみましょう。ListViewは、<ListView>というタグを使って作成します。これ自体はとてもシンプルですが、しかしこれだけでは空のリストになってしまいます。この中に、表示する内容を記述してやらないといけません。
データの内容までFXMLで記述するとこのような感じになるでしょう。ListViewのデータは、<items>というタグとして用意します。この中に<FXCollection>というタグを用意しておきます。ここに具体的なデータの内容を記述していきます。通常は、ここにfx:factoryという属性を用意し、データの種類（FXCollectionに保管するクラス）を指定します。
これは色々と設定できるのですが、とりあえずは｢observableArrayList」というクラスを指定しておくのがよいでしょう。これは、オブジェクトをまとめるArrayListのサブクラスです。この中に、例えば<String>タグを使ってテキストを記述すれば、StringデータのArrayListができ、それが表示項目として設定されます。
実際の利用例を挙げておきましょう。下のリストは、いくつかのテキスト項目を表示するサンプルです。<ListView>内の<items>タグには、以下のような形でデータを用意しています。
その代表とも言えるのが「リスト」です。いくつもの項目ずらっと一覧表示する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>タグを使って表示するテキストを指定しています。単純なテキストの値ならばこれで表示できます。
(by. SYODA-Tuyano.)
※プログラムリストが表示されない場合
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>
※関連コンテンツ