FreeCode

Donate HTML/CSS JavaFX Java Home
JavaFX Starter Template JavaFX Labels JavaFX Buttons JavaFX Toggle Buttons JavaFX Radio Buttons and Toggle Groups JavaFX Checkboxes JavaFX Choice Boxes JavaFX Combo Boxes JavaFX Text Areas JavaFX Text Fields JavaFX List Views JavaFX Image Views JavaFX Color Pickers JavaFX Date Pickers JavaFX Resizable Split Pane Layouts JavaFX VBox (Vertical Box Layouts) JavaFX HBox (Horizontal Box Layouts) JavaFX Flow Pane Layouts JavaFX Tile Pane Layouts JavaFX Web Views

JavaFX List Views

Code Description:

How a List View works

The code provided below shows how to create a List View in JavaFX. List Views allow for data to be presented in a vertical list with slight background color differences for the odd and even rows. The list is clickable and can be configured for multi-select. Hold "Shift" to select a range and hold "Ctrl" (Windows) or "Command" (Mac) to select additional list elements when multi-select is enabled.

Creating a List View

The runnable example code shows how multiple selected values can be retrieved with the press of a button. After retrieved in the example, we display the values in a Label. To make a new List View, we need to first create an Array or List like data structure. We can then create a new List View object where we specify the data type it will use. In this case we are using String. We can use the setItems() method to add the choices to the drop down. The setItems() method requires an ObservableList parameter so we can convert our Array or List to one. As it is an observable list, any items we add to that list will reflect in our List View.

List View Syntax:

String[] listItems = {"List Item 1", "List Item 2", "List Item 3", "List Item 4", "List Item 5"};
		
ListView<String> listView = new ListView<String>();
listView.setItems(FXCollections.observableArrayList(listItems));

Runnable JavaFX List View Example Code:

import javafx.application.Application;
import javafx.collections.FXCollections;
import javafx.event.ActionEvent;
import javafx.event.EventHandler;
import javafx.scene.Scene;
import javafx.scene.control.Button;
import javafx.scene.control.Label;
import javafx.scene.control.ListView;
import javafx.scene.control.SelectionMode;
import javafx.scene.layout.VBox;
import javafx.stage.Stage;

public class Demo extends Application {

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

    @Override
    public void start(Stage primaryStage) throws Exception {
		
	VBox root = new VBox();
		
	String[] listItems = {"List Item 1", "List Item 2", "List Item 3", "List Item 4", "List Item 5"};
		
	ListView<String> listView = new ListView<String>();
	listView.setItems(FXCollections.observableArrayList(listItems));
	listView.getSelectionModel().setSelectionMode(SelectionMode.MULTIPLE);
				
	Label label = new Label("Selected Item(s): ");
		
	Button button = new Button("Get List Item Value");
	button.setOnAction(new EventHandler<ActionEvent>() {
			
	    @Override
	    public void handle(ActionEvent event) {
	        label.setText("Selected Item(s): " + listView.getSelectionModel().getSelectedItems());
	    }
	});
		
	root.getChildren().addAll(listView, button, label);

	primaryStage.setTitle("List View Demo");
	primaryStage.setScene(new Scene(root, 400, 200));
	primaryStage.show();
		
    }

}

How to Run This Code:

Make sure that your Class name is the same as ours. In this case, we are using the Class name of "Demo". Alternatively, you can change the Class name in the provided code to match yours.

Note: You will NOT be able to copy and paste this code into your IDE unless you first set up JavaFX for your project. Check out this link if you need help setting up JavaFX:

JavaFX Comprehensive Setup Guide

Output:

JavaFX List View Output Image

Important Methods:

  • setItems() - Sets all of the list elements that are shown in the list view.
  • getItems() - Returns a list of all items in the list view.
  • getSelectionModel().setSelectionMode() - Allows the configuration of multi-select. EX: "listView.getSelectionModel().setSelectionMode(SelectionMode.MULTIPLE);"
  • getSelectionModel().clearSelection() - Deselect all currently selected items.
  • getSelectionModel().getSelectedIndex() - Returns the numeric index of the list element. The count starts at 0.
  • getSelectionModel().getSelectedItem() - Get the currently selected item.
  • getSelectionModel().getSelectedItems() - Get all of the selected items if multi-select is enabled.
  • getSelectionModel().isSelected() - Used to check if a particular index is selected.
  • getSelectionModel().select() - Select a single list element by either the data type or by index.
  • getSelectionModel().selectAll() - Select every list element in the list view.
  • setDisable() - Used to make the list view grayed out and unclickable. EX: "listView.setDisable(true);"
  • setPrefSize() - Set the preferred width and height for the list view.
  • setTooltip() - Set a message that displays when a user hovers over the list view for a certain amount of time. EX: "listView.setTooltip(new Tooltip("Select my elements"));"
  • setVisible() - Show or hide a list view from the scene. EX: "listView.setVisible(false);"

Related Links:

JavaFX Choice Boxes JavaFX Combo Boxes JavaFX Image Views JavaFX Web Views Array Data Structures Array List Data Structures Linked List Data Structures