Controls

Controls are the nodes the user works with: input fields, check boxes, drop-down lists, buttons. They all live in the javafx.scene.control package. Each one has a method that returns its current value, and that is what you read when the user clicks a button.

The main controls

Input fields

// src/main/java/com/example/notes/App.java — part of start()
TextField titleField = new TextField();
titleField.setPromptText("For example, Buy milk");
 
TextArea textArea = new TextArea();
textArea.setPrefRowCount(5);
textArea.setWrapText(true);

setPromptText is a grey hint in an empty field. setPrefRowCount(5) makes the multi-line field five lines tall, and setWrapText(true) wraps long lines instead of scrolling sideways.

A drop-down list and a check box

// src/main/java/com/example/notes/App.java — part of start()
ComboBox<String> categoryBox = new ComboBox<>();
categoryBox.getItems().addAll("Work", "Home", "Ideas");
categoryBox.setValue("Ideas");
 
CheckBox importantBox = new CheckBox("Important");

ComboBox is a generic class: the angle brackets hold the type of the options. getItems() returns the list of options, and setValue picks the starting one. A check box is created with a caption and is unchecked by default.

A button

A button gets an action: a lambda that runs when it is clicked. Here it simply prints the form values:

// src/main/java/com/example/notes/App.java — part of start()
Button addButton = new Button("Add");
addButton.setOnAction(event -> {
    System.out.println("Title: " + titleField.getText());
    System.out.println("Text: " + textArea.getText());
    System.out.println("Category: " + categoryBox.getValue());
    System.out.println("Important: " + importantBox.isSelected());
});

Events are covered in detail in the next lesson.

The whole form

Let's put the controls into the grid from the previous lesson. Here BorderPane is created with the constructor that takes five areas in this order: center, top, right, bottom, left.

// src/main/java/com/example/notes/App.java — part of start()
GridPane form = new GridPane();
form.setHgap(8);
form.setVgap(8);
form.setPadding(new Insets(0, 0, 0, 16));
form.add(new Label("Title:"), 0, 0);
form.add(titleField, 1, 0);
form.add(new Label("Text:"), 0, 1);
form.add(textArea, 1, 1);
form.add(new Label("Category:"), 0, 2);
form.add(categoryBox, 1, 2);
form.add(importantBox, 1, 3);
 
// ...column rules, listPane and buttons as in the previous lesson
 
Label header = new Label("My notes");
BorderPane root = new BorderPane(form, header, null, buttons, listPane);

The check box sits in column 1 under the fields; it needs no label on the left. The button row is now created as new HBox(8, addButton, new Button("Delete")) so that it holds the button with the action.

Trying it out

Run the application, type "Buy milk", put "2 liters, skimmed" in the text, choose the "Home" category, tick "Important" and click "Add". The terminal shows:

Title: Buy milk
Text: 2 liters, skimmed
Category: Home
Important: true

Common mistake

If you do not call setValue, the ComboBox has no selected value and getValue() returns null. Code like categoryBox.getValue().length() fails with java.lang.NullPointerException: Cannot invoke "String.length()" because the return value of "javafx.scene.control.ComboBox.getValue()" is null. Set a starting value or check it for null before use.