listViewのところが分からない

Question

Eclipseを使って、JavaFXを勉強しています。以下のコードは
レイアウトの練習問題です。ListViewを作る箇所がよく理解できないので困っています。
ネットでわからない所は検索しながらコメントにして読んでみるのですが、
分かるようなわからないような、要するに理解ができていないのですね。
listView.getSelectionModel().setSelectionMode(SelectionMode.SINGLE);
を順番に説明していただけませんか。長いコードなので、読み解き方を
教えてください。
listView.getSelectionModel().select(0);のslect(0)は何か、
「選択モデル」の意味が分かりません。
listView.setEditable(false);でfalseにセットすると、編集できなくするという事でしょうか。
以上たくさんありますが、listViewのところが分からないという事です。
よろしくお願いいたします。

package application;

import javafx.application.Application;
import javafx.beans.value.ChangeListener;
import javafx.beans.value.ObservableValue;
import javafx.collections.FXCollections;
import javafx.collections.ObservableList;
import javafx.scene.Scene;
import javafx.scene.control.Button;
import javafx.scene.control.CheckBox;
import javafx.scene.control.Label;
import javafx.scene.control.ListView;
import javafx.scene.control.SelectionMode;
import javafx.scene.layout.AnchorPane;
import javafx.scene.layout.BorderPane;
import javafx.scene.layout.HBox;
import javafx.scene.layout.VBox;
import javafx.stage.Stage;

public class chapter3_3 extends Application {

	@Override
	public void start(Stage stage) throws Exception {

		stage.setTitle("chapter3_3");
		stage.setWidth(300);
		stage.setHeight(180);

		Label label = new Label();
		AnchorPane.setTopAnchor(label, 95.0);
		// labelを枠の上の位置に95pxの幅でセットする
		
		AnchorPane.setLeftAnchor(label,5.0);
		// labelを枠の左から5pxの位置にセットする
		
		Button topBtn[] = new Button[3];

		for(int i=0; i<3; i++) {
			topBtn[i] = new Button(Integer.toString(i));

			topBtn[i].setPrefWidth(60);

			String txt = String.format("button%dがクリックされました。", i);

			topBtn[i].setOnAction(event ->label.setText(txt));
		}

		HBox top = new HBox(5);

		top.getChildren().addAll(topBtn);

		VBox left = new VBox();

		CheckBox checkBox[] =new CheckBox[4];

		for(int i=0; i<4; i++) {

			String txt = "CheckBox" + Integer.toString(i);

			checkBox[i] = new CheckBox(txt);

			checkBox[i].setPrefWidth(120);

			checkBox[i].setOnAction(event ->{

				String s = "";

				for(int j=0; j<4; j++) {

					if(checkBox[j].isSelected()) {

						s = s + checkBox[j].getText();
					}
				}
				label.setText(s + "が選択されました。" );

			});

		}

		left.getChildren().addAll(checkBox);

		// ListViewを作る
		// ListViewは、ユーザーが選択できるか、ユーザーが対話できるアイテムの
		// 水平または垂直のリストを表示します。
		// ListViewの要素は、items ObservableList内に含まれています。
		// このObservableListはListViewによって自動的に監視されるため、
		// ObservableList内でなんらかの変更が発生すると、
		// その変更がListView自体に自動的に表示されます。
		// ListView(ObservableList<T> items)
		// 指定されたObservableListから取得したコンテンツを垂直に積み上げる
		// デフォルトのListViewを作成します。
		ObservableList<String> names = FXCollections.observableArrayList(
				"Blue","Green","Yellow","Cyan","Red","White","Black");
		// リストに項目を登録するには，ObservableListのリストを作成して
		// コンストラクタ「ListView<String>(names)」に渡す。

		ListView<String> listView = new ListView<String>(names);
		// 予め登録しておいた一連の項目の文字列からユーザーが
		// 1つまたは複数の項目を選択できるようになる。
		// ListView<String>はジェネリクスなので、
		// 作成するときは要素の型を指定する。

		listView.setPrefWidth(80);
		listView.setPrefHeight(120);

		listView.getSelectionModel().setSelectionMode(SelectionMode.SINGLE);
		// ユーザーが選択できる項目を1つに制限するには「SelectionMode.SINGLE」を使う
		// SelectionModelは、一貫したAPIを提供して選択を維持するために
		// UIコントロールが使用する抽象クラスです。
		// SelectionModel()	デフォルトのSelectionModelインスタンスを作成します。
		// setSelectionMode(SelectionMode value)
		// プロパティselectionModeの値を設定します。

		listView.getSelectionModel().select(0);
		// 項目選択するときはlistView.getSelectionModel().select()を使う。
		// SelectionModelは、プロパティの変更に対応したイベント処理機能を持っています。
		// 例えば、SelectionModelにはSelectedItemというプロパティがあり、
		// 選択した項目などはgetSelectedItemメソッドで取り出すことができました。
		// getSelectionModel()	現在インストールされている選択モデルを返します。

		listView.setEditable(false);
		// setEditable(boolean value)
		// プロパティeditableの値を設定します。

		listView.getSelectionModel().selectedItemProperty().addListener(new ChangeListener<String>() {
		// このSelectedItemプロパティに「ChangeListener」というイベントリスナーを
		// 組み込むことで、値が変更された時のイベントをとらえて処理することができるようになります。
		// ChangeListenerは、その名の通り値が変更された際に発生するイベント（ChangeEvent）
		// を処理するためのイベントリスナーです。
						
			@Override
			public void changed(ObservableValue<? extends String> ov,String old_val,String new_val) {

				label.setText(new_val + "が選択されました。");
			}

		});



		// root
		BorderPane root = new BorderPane();

		root.setTop(top);

		root.setLeft(left);

		root.setRight(listView);

		root.setBottom(label);

		stage.setScene(new Scene(root));

		stage.show();
	}

	public static void main(String[] args)
    {
        launch( args );
    }

}

Answer 1

読み解き方

GUIアプリは作りたい画面がまず背景としてあります。前提となるGUIコントロール(今回の場合はListBox)の知識がないと、コード上で何をやっているのか公式ドキュメント(JavaDoc)からは理解しずらいと思います。

3つ参考になりそうなリンクを貼りましたので、このページをザッと読んでみてくださいな。

リストボックス
リストボックス | http://e-words.jp
リストボックス 使用パターン | msdn.microsoft.com

---

分かりやすい説明=厳密な説明ではないので、できるだけmicrosoft.com関係のサイトを正としてくださいな。

リストボックスの選択モードのsetSelectionModeは引数が列挙型のSelectionModeです。

SelectionModeのページより引用
SINGLE
一度に1つのアイテムのみを選択できるようにします。
MULTIPLE

一度に1つ以上の連続したインデックス範囲を選択できるようにします。

ListViewには単一選択リスト(SINGLE)と複数選択リスト(MULTIPLE)のモードがあります。

質問文の「選択モデルとはなにか？」の疑問の回答はSelectionModelです。このクラスが選択モデルです。

モード	クラス
単一選択リスト	SingleSelectionModel
複数選択リスト	MultipleSelectionModel

選択モデルを親クラスとしてモード毎にクラスが別れます。

1, listView.getSelectionModel().setSelectionMode(SelectionMode.SINGLE);は単一選択リストモードの設定をしています。
試しにSelectionMode.SINGLEをSelectionMode.MULTIPLEに変更し、Shiftキーを押しながら、右側のBlueとGreenをクリックしてみてください。
複数選択できるようになります。これが複数選択リストです。

2, listView.getSelectionModel().select(0);
この行はlistboxの項目の0行目(0から始まる、0オリジンといいます)を選択しています。
参考SelectionModel#select

select(1)に書き換えると1行目(画面上は2行目)のGreenを選択します。

3, setEditableは編集できなくするで正しいですが。サンプルコードで動きを確認しながらのほうが動作が理解しやすいと思うので。

以下サンプルを実行してみてください。編集したいセルをクリック後にEnterキーで内容の編集ができます。
setEditableのtrueとfalseの行をコメントアウトで変えつつ、動作確認してみてくださいな。

package application;

import java.util.Arrays;

import javafx.application.Application;
import javafx.beans.value.ChangeListener;
import javafx.beans.value.ObservableValue;
import javafx.collections.FXCollections;
import javafx.collections.ObservableList;
import javafx.scene.Scene;
import javafx.scene.control.Label;
import javafx.scene.control.ListView;
import javafx.scene.control.cell.TextFieldListCell;
import javafx.scene.layout.BorderPane;
import javafx.stage.Stage;

public class A146717 extends Application {

	@Override
	public void start(final Stage stage) throws Exception {
		stage.setTitle("A146717");
		final Label label = new Label();
		ObservableList<String> names = FXCollections.observableArrayList("Blue", "Green", "Yellow", "Cyan", "Red",
				"White", "Black");

		ListView<String> listView = new ListView<String>(names);
		listView.setPrefWidth(80);
		listView.setPrefHeight(120);
		listView.setEditable(true); // 編集したい時
		//listView.setEditable(false); // 編集したくない時
		// TextFieldに
		listView.setCellFactory(TextFieldListCell.forListView());
		listView.getSelectionModel().selectedItemProperty().addListener(new ChangeListener<String>() {
			@Override
			public void changed(ObservableValue<? extends String> ov, String old_val, String new_val) {
				label.setText(new_val + "が選択されました。");
			}

		});
		// 編集時のコミットイベント
		listView.setOnEditCommit((t) -> {
			System.out.println("onEditCommit");
			System.out.println("begin:" + Arrays.toString(names.toArray()));
			// 変更内容をObservableListに反映
			t.getSource().getItems().set(t.getIndex(), t.getNewValue());
			System.out.println("end:" + Arrays.toString(names.toArray()));
		});
		// root
		final BorderPane root = new BorderPane();
		root.setLeft(listView);
		root.setBottom(label);
		stage.setScene(new Scene(root, 400, 320));
		stage.show();
	}

	public static void main(String[] args) {
		launch(args);
	}

}

Comments

[退会済みユーザー]

ありがとうございます。一通り参考書を終わりましたので、説明していただければわかりそうなのですが、
1番目、2番目は何回も参考にさせていただきました。
3番目のmsdn.microsoft.comは読んでいませんが、その他のネットで勉強していますので、
少しわかりやすい説明だと理解できると思います。microsoft.com関係の説明はわかりにくいので、
最初から他を参考にしています。
質問はクドクドしていますが、もうちょっとでわかりそうなので、説明していただけませんか。
お願いいたします。

[umyu]

@sanchu52さんへ
>1番目、2番目は何回も参考にさせていただきました。
質問するときは、2度手間を防ぐために、既に調べた内容を書いてくださいな。

[退会済みユーザー]

https://wa3.i-3-i.info/word11631.html
http://e-words.jp/w/%E3%83%AA%E3%82%B9%E3%83%88%E3%83%9C%E3%83%83%E3%82%AF%E3%82%B9.html
でリストとはについて参考にしています。
調べたことは、コードの下にコメントで書き込んでいます。同じことを色々な表現がでてきますので
追加していて、listViewに長々と書いてみました。

[退会済みユーザー]

ありがとうございます。分かり易い説明でわかりました。まだまだ駆け出しですのでこれから
穴を埋めていきたいと思います。

[umyu]

@sanchu52さんへ
解決できて、よかったですー。
1, setEditableのサンプルコードを追加しました。動作確認してみてくださいな。
これがリストボックスの編集モード(setEditable)と言われるものです。
2, マイクロソフトのサイトは難しいですが。全部一度に理解しようとせずに、用語だけ拾ってメモなどしておくと後々役に立つかと。

[退会済みユーザー]

はい、ありがとうございます。
setEditableのサンプルコードを実行してみました。trueとするとどこがどういう風に出来て、
falseにすると、どこが編集できないのでしょうか。すみません。

[umyu]

1,セルを選択します。
2,エンターキーを押します。
これで編集できませんか。

[umyu]

もしくはセルをダブルクリック

[退会済みユーザー]

できました。セルの中を変えられるように設定しているんですね。
もう一つ伺っていいでしょうか。
Eclipseのコンソールに「onEditCommit」と出ているんですが、ここにコメントを残せるんでしょうか。

[umyu]

>Eclipseのコンソールに「onEditCommit」と出ているんですが、ここにコメントを残せるんでしょうか。
これは、編集時のコミットイベントの動作をわかりやすく表示するためのSystem.out.println("onEditCommit");です。https://docs.oracle.com/javase/jp/8/javafx/api/javafx/scene/control/ListView.htmlのドキュメントの編集段落部分の解説を見てみてくださいな。

[退会済みユーザー]

明日は早いので、これで失礼します。ぐっすり眠れそうです。ありがとうございました。

[umyu]

おやすみなさいませ。良い夢を！