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にしてみてください。
●プログラム・リスト●
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 | <? 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 > |
※関連コンテンツ