This How To shows some really basic concepts related to a Java FX List View. The very simple app was built using Scene Builder and FXML. Here is what the sample application looks like. The application allows you to add items to the list and to delete items from the list.
The key things to look at in the code are as follows.
- Using an
ObservableListto store the items in a list. - How to access an item in a
ListViewand then in theObservableList. - How to remove an item from a
ListView. - How the click actions are linked to the Java Controller from the FXML file.
In addtion, this code shows how to write an event listener that detects when a UI element receives the focus. This is not really related to lists, but is interesting nonetheless. The source code for the project are provided below.
ListViewBasics.java
This is the Java launcher file for the application.
1 package com.example.gui;
2
3 import javafx.application.Application;
4 import javafx.fxml.FXMLLoader;
5 import javafx.scene.Parent;
6 import javafx.scene.Scene;
7 import javafx.stage.Stage;
8
9 /**
10 * Michael Williams blueskyworkshop.com 2012
11 */
12 public class ListViewBasics extends Application {
13
14 @Override
15 public void start(Stage stage) throws Exception {
16 Parent root = FXMLLoader.load(getClass().getResource("ListViewUi.fxml"));
17
18 Scene scene = new Scene(root);
19
20 stage.setScene(scene);
21 stage.show();
22 }
23
24 public static void main(String[] args) {
25 launch(args);
26 }
27 }
ListViewUi.fxml
This file defines the JavaFX user interface. This file was created completely with Scene Builder.
1 <?xml version="1.0" encoding="UTF-8"?>
2
3 <?import java.lang.*?>
4 <?import java.util.*?>
5 <?import javafx.scene.*?>
6 <?import javafx.scene.control.*?>
7 <?import javafx.scene.layout.*?>
8 <?import javafx.scene.text.*?>
9
10 <AnchorPane id="AnchorPane" prefHeight="480.0" prefWidth="640.0" xmlns:fx="http://javafx.com/fxml" fx:controller="com.example.gui.ListViewUiController">
11 <children>
12 <VBox fx:id="VBoxMain" alignment="TOP_CENTER" prefHeight="423.0" prefWidth="341.0" AnchorPane.bottomAnchor="40.0" AnchorPane.leftAnchor="100.0" AnchorPane.rightAnchor="100.0" AnchorPane.topAnchor="20.0">
13 <children>
14 <Label fx:id="TitleLbl" alignment="TOP_LEFT" text="ListView Example">
15 <font>
16 <Font name="System Bold" size="18.0" />
17 </font>
18 </Label>
19 <ListView fx:id="listBoxMain" prefHeight="200.0" prefWidth="200.0" />
20 <Label id="TextLbl" fx:id="LblAddText" text="Enter Text" />
21 <TextField fx:id="txtAddItem" prefWidth="200.0" />
22 <HBox id="HBox" fx:id="HBox4Btns" alignment="CENTER" spacing="5.0">
23 <children>
24 <Button fx:id="BtnAdd" mnemonicParsing="false" onAction="#addAction" text="Add" />
25 <Button fx:id="BtnDelete" mnemonicParsing="false" onAction="#deleteAction" text="Delete" />
26 </children>
27 </HBox>
28 </children>
29 </VBox>
30 </children>
31 </AnchorPane>
ListViewUiController.java
This is the Java controller for the application.
1 package com.example.gui;
2
3 import java.net.URL;
4 import java.util.ResourceBundle;
5 import javafx.beans.value.ChangeListener;
6 import javafx.beans.value.ObservableValue;
7 import javafx.collections.FXCollections;
8 import javafx.collections.ObservableList;
9 import javafx.event.ActionEvent;
10 import javafx.fxml.FXML;
11 import javafx.fxml.Initializable;
12 import javafx.scene.control.Button;
13 import javafx.scene.control.Label;
14 import javafx.scene.control.ListView;
15 import javafx.scene.control.TextField;
16 import javafx.scene.layout.HBox;
17 import javafx.scene.layout.VBox;
18
19 /**
20 * @author Michael Williams blueskyworkshop.com
21 * Oct 2012
22 */
23 public class ListViewUiController implements Initializable {
24
25 @FXML
26 private Button BtnAdd;
27
28 @FXML
29 private Button BtnDelete;
30
31 @FXML
32 private HBox HBox4Btns;
33
34 @FXML
35 private Label LblAddText;
36
37 @FXML
38 private ListView<String> listBoxMain;
39
40 @FXML
41 private Label TitleLbl;
42
43 @FXML
44 private VBox VBoxMain;
45
46 @FXML
47 private TextField txtAddItem;
48
49 final ObservableList<String> listItems = FXCollections.observableArrayList("Add Items here");
50
51 // Add event handlers
52 @FXML
53 private void addAction(ActionEvent action){
54 listItems.add(txtAddItem.getText());
55 System.out.println("Add Button Pushed");
56 }
57
58
59 @FXML
60 private void deleteAction(ActionEvent action){
61 int selectedItem = listBoxMain.getSelectionModel().getSelectedIndex();
62 listItems.remove(selectedItem);
63 }
64
65 @Override
66 public void initialize(URL url, ResourceBundle rb) {
67 // TODO
68 listBoxMain.setItems(listItems);
69
70 // Disable buttons to start
71 BtnAdd.setDisable(true);
72 BtnDelete.setDisable(true);
73
74 // Add a ChangeListener to TextField to look for change in focus
75 txtAddItem.focusedProperty().addListener(new ChangeListener<Boolean>() {
76 public void changed(ObservableValue<? extends Boolean> observable, Boolean oldValue, Boolean newValue) {
77 if(txtAddItem.isFocused()){
78 BtnAdd.setDisable(false);
79 }
80 }
81 });
82
83 // Add a ChangeListener to ListView to look for change in focus
84 listBoxMain.focusedProperty().addListener(new ChangeListener<Boolean>() {
85 public void changed(ObservableValue<? extends Boolean> observable, Boolean oldValue, Boolean newValue) {
86 if(listBoxMain.isFocused()){
87 BtnDelete.setDisable(false);
88 }
89 }
90 });
91
92 }
93 }