List View
The ListView class represents a scrollable list of items. It can contain strings or nodes. You can populate the list through the items instance variable or generate the list by applying the cellFactory function. The following code fragment implements a simple vertical list with String items.
import javafx.scene.control.ListView;
import javafx.scene.layout.LayoutInfo;
ListView {
items: ["London", "New York", "Paris", "Tokyo", "Moscow", "Milan"]
layoutInfo: LayoutInfo { width: 80 height: 80 }
}
The layoutInfo instance variable is applied to set the specific size for the ListView object. When run in an application, this code produces the following control.
The list view can also be oriented horizontally by setting the vertical instance variable to false.
Study the source code of this application.
import javafx.scene.control.ListView;
import javafx.scene.layout.LayoutInfo;
ListView {
items: ["Double Room", "Twin Room", "Family App", "Junior Suite"]
layoutInfo: LayoutInfo {width: 220 height: 40 }
vertical: false
}
You can obtain the current state of each item through the Boolean variables: focusedIndex, focusedItem, selectedIndex, and selectedItem. Note that these variables are read-only and cannot be used to specify which item is selected when the application starts. Instead, use the select(itemIndex: Integer) function to make the item at the given index become selected.
You might argue that adding checkboxes one by one to the list items is not the optimal way of coding. Yes, you can use the list to display a significant amount of data. However, it is not productive to create an actual item for every single element in the list. Study the following application to learn how to generate the list items by using the cell factory. The application creates color patterns to fill the text label.
Take a moment to study the source code of the application.
package listcellsample;
import javafx.stage.Stage;
import javafx.scene.Scene;
import javafx.scene.control.*;
import javafx.scene.layout.LayoutInfo;
import javafx.scene.paint.Color;
import javafx.scene.shape.Rectangle;
import javafx.scene.text.Font;
var listView: ListView;
Stage {
title: "Application title"
scene: Scene {
width: 350
height: 150
content: [
listView = ListView {
layoutX: 10
layoutY: 10
layoutInfo: LayoutInfo {width: 120 height: 100}
items: [
"chocolate", "salmon", "gold", "coral",
"darkorchid", "darkgoldenrod", "lightsalmon", "black",
"rosybrown", "blue", "blueviolet", "brown",
];
cellFactory: function () {
def cell: ListCell = ListCell {
node: Rectangle {
width: 100 height: 20
fill: bind Color.web(cell.item as String)
}
}
}
},
Label {
text: bind listView.selectedItem as String
textFill: bind Color.web(listView.selectedItem as String)
layoutX: 150
layoutY: 50
font: Font {size: 24 name: "Cambria"}
}
]
}
}
The cellFactory function produces ListCell objects. Every cell is associated with a single data item and is used to render a single "row" of the list view. The content the cell represents through the node instance variable can include other controls, text, shapes, images, or even custom nodes. In this application, the list cell defines rectangles. The fill variable of the Rectangle cell is bound to the corresponding item of the list view as follows.
fill: bind Color.web(cell.item as String)
The text and textFill variables of the Label is bound to the selected item of the list view by using the selectedItem instance variable of the ListView class.
text: bind listView.selectedItem as String textFill: bind Color.web(listView.selectedItem as String)
Thus, the label shows the name of a selected color and uses this color to render it.
Related Documents
Samples That Use List Views
