JavaFX UI Controls
Interactive components for building user interfaces
🎛️ What are UI Controls?
JavaFX UI Controls are interactive components like buttons, text fields, and lists that users can interact with. They provide the building blocks for creating functional and user-friendly applications.
// Basic UI Controls Example
Button button = new Button("Click Me");
TextField textField = new TextField("Enter text here");
Label label = new Label("Welcome to JavaFX!");
VBox container = new VBox(10, label, textField, button);
Output:
Welcome to JavaFX!
Common UI Controls
Button
Clickable action trigger
Button btn = new Button("Save");
btn.setOnAction(e -> save());TextField
Single-line text input
TextField name = new TextField();
name.setPromptText("Enter name");Label
Display text information
Label title = new Label("User Info");
title.setStyle("-fx-font-size: 18px;");CheckBox
Boolean selection option
CheckBox agree = new CheckBox("I agree");
agree.setSelected(true);🔹 Text Input Controls
Various controls for text input and display:
// Text input controls
TextField singleLine = new TextField("Single line text");
TextArea multiLine = new TextArea("Multi-line\ntext area");
PasswordField password = new PasswordField();
// Configure properties
singleLine.setPromptText("Enter your name");
multiLine.setPrefRowCount(3);
password.setPromptText("Password");
VBox textControls = new VBox(10, singleLine, multiLine, password);Output:
🔹 Selection Controls
Controls for making choices and selections:
// Selection controls
CheckBox newsletter = new CheckBox("Subscribe to newsletter");
RadioButton male = new RadioButton("Male");
RadioButton female = new RadioButton("Female");
// Group radio buttons
ToggleGroup genderGroup = new ToggleGroup();
male.setToggleGroup(genderGroup);
female.setToggleGroup(genderGroup);
// ComboBox (dropdown)
ComboBox<String> countries = new ComboBox<>();
countries.getItems().addAll("USA", "Canada", "UK", "Germany");
countries.setValue("USA");Output:
🔹 List and Table Controls
Display and select from collections of data:
// ListView for simple lists
ListView<String> listView = new ListView<>();
listView.getItems().addAll("Apple", "Banana", "Orange", "Grape");
listView.getSelectionModel().selectFirst();
// TableView for structured data
TableView<Person> table = new TableView<>();
TableColumn<Person, String> nameCol = new TableColumn<>("Name");
TableColumn<Person, Integer> ageCol = new TableColumn<>("Age");
nameCol.setCellValueFactory(new PropertyValueFactory<>("name"));
ageCol.setCellValueFactory(new PropertyValueFactory<>("age"));
table.getColumns().addAll(nameCol, ageCol);Output:
Apple
Banana
Orange
Grape
Name
Age
John
25
🔹 Interactive Form Example
Combining multiple controls in a practical form:
public class UserForm extends VBox {
private TextField nameField;
private TextField emailField;
private ComboBox<String> countryBox;
private CheckBox subscribeBox;
private Button submitButton;
public UserForm() {
setSpacing(10);
setPadding(new Insets(20));
// Create controls
nameField = new TextField();
nameField.setPromptText("Full Name");
emailField = new TextField();
emailField.setPromptText("Email Address");
countryBox = new ComboBox<>();
countryBox.getItems().addAll("USA", "Canada", "UK");
countryBox.setPromptText("Select Country");
subscribeBox = new CheckBox("Subscribe to newsletter");
submitButton = new Button("Submit");
submitButton.setOnAction(this::handleSubmit);
// Add to layout
getChildren().addAll(
new Label("User Registration"),
nameField, emailField, countryBox,
subscribeBox, submitButton
);
}
private void handleSubmit(ActionEvent event) {
System.out.println("Form submitted!");
}
}