JavaFX | Using JavaFX UI Controls | Working With Text Boxes

Text Box

The TextBox class implements a UI control that displays and accepts input of text. It provides capabilities to create a multiline text field or receive only one line of text input from a user. Along with another text input control, PasswordBox, this class extends the TextInputControl class, a superclass for all the text controls available through the JavaFX API. Typically, a text box is used in combination with a label to indicate the type of content that should be typed in the field.

Source Code

import javafx.scene.layout.HBox;
import javafx.geometry.VPos;
import javafx.scene.control.Label;
import javafx.scene.control.TextBox;

HBox {
    nodeVPos: VPos.BASELINE
    spacing: 10 
    content: [
        Label { text: "Name:" },
        TextBox {
            columns: 25
        }
    ]
}

The columns instance variable defines the horizontal size of the text box, specified as the number of characters it is expected to display at one time. The code fragment shown produces the following controls.

The typed text, "Michael" in this example, is obtained through the text instance variable.

The TextBox class provides the promptText instance variables to display a prompt when no text is entered into a text box. Use it when you want to save UI space in your application.

The application that uses a text box

Take a moment to review the source code of this application.

Source Code

package textboxsample;

import javafx.stage.*;
import javafx.scene.*;
import javafx.geometry.*;
import javafx.scene.layout.*;
import javafx.scene.control.*;
import javafx.scene.paint.Color;

def columns = 25;
def buttonWidth = 80;
var firstName: TextBox;
var lastName: TextBox;
var comment: TextBox;
var textBoxAction = "";

Stage {
    title: "Text Box Sample"
    scene: Scene {
        width: 310
        height: 180
        fill: Color.rgb(200, 216, 251)
        content: [
            VBox {
                padding: Insets {top: 5 left: 5}
                content: [
                    HBox {
                        spacing: 5
                        content: [
                            VBox {
                                content: [
                                    firstName = TextBox {
                                        columns: columns
                                        promptText: "Enter your name"
                                    },
                                    lastName = TextBox {
                                        columns: columns
                                        promptText: "Enter your last name"
                                    },
                                    comment = TextBox {
                                        columns: columns
                                        promptText: "Leave your comment"
                                        multiline: true
                                        lines: 4
                                    }
                                ]
                            },
                            VBox {
                                spacing: 2
                                content: [
                                    Button {
                                        layoutInfo: LayoutInfo {width: buttonWidth}
                                        text: "Submit"
                                        action: function () {
                                            if (comment.text != "") {
                                                textBoxAction =
                                                ", thank you for your comment!";
                                            } else {
                                                textBoxAction = "";
                                            }
                                        }
                                    }
                                    Button {
                                        layoutInfo: LayoutInfo {width: buttonWidth}
                                        text: "Clear"
                                        action: function () {
                                            firstName.clear();
                                            lastName.clear();
                                            comment.clear();
                                            textBoxAction = "";
                                        }
                                    }
                                ]
                            }
                        ]
                    },
                    Label {
                        text: bind "{firstName.text} {lastName.text}{textBoxAction}"
                    }
                ]
            }
        ]
    }
}

Three text fields are created in this application. The firstName and lastName controls are intended for typing only one line of text, while the comment field is a multiline text box. To enable a user to type more than one line of text, set the multiline instance variable of the text box to true and specify the number of lines the text box is expected to display at one time. The default value of the lines variable is 5.

In this application, the text variables of the firstName and lastName text boxes are bound to the content variable of the Text control to render the first name and the last name of the person who left the comment. The typed values appear in the Text control as soon as the focus of the corresponding control is lost, or if the Enter key is pressed.

The Submit button checks if the comment text box contains a nonempty string and appends a thank-you message to the Text control.

Source Code

Button {
     layoutInfo: LayoutInfo { width: buttonWidth }
     text: "Submit"
     action: function () {
         if (comment.text != "") {
                  textBoxAction = ", thank you for your comment!";
         } else {textBoxAction = "";}
     }
}

The text from the text box is submitted

The Clear button applies the clear() function of the TextInputControl class to erase the content of the text boxes and return the application to its initial state.

Source Code

Button {
     layoutInfo: LayoutInfo { width: buttonWidth }
     text: "Clear"
     action: function () {
        firstName.clear();
        lastName.clear();
        comment.clear();
        textBoxAction = "";
     }
}

The text boxes are cleared

Take a look at other helpful functions that you can use while working with text boxes.

Function Description

copy() Transfers the currently selected range in the text to the clipboard, leaving the current selection

cut() Transfers the currently selected range in the text to the clipboard, removing the current selection

paste() Transfers the contents in the clipboard into this text, replacing the current selection

Function	Description
`copy()`	Transfers the currently selected range in the text to the clipboard, leaving the current selection
`cut()`	Transfers the currently selected range in the text to the clipboard, removing the current selection
`paste()`	Transfers the contents in the clipboard into this text, replacing the current selection

You can find the complete list of the functions and instance variables of the TextBox and TextInputControl classes in the API Documentation. In addition to the text control-specific functions, the TextBox class owns the other functions and variables inherited from the Node, Resizable, and Control classes. Thus, the text box can be easily customized and combined with effects.

The next step to enhance the visual appearance of text boxes is to apply CSS styles defined by the Skin class. For more information, see Applying CSS to UI Controls.

Text Box

Related Documents

Samples That Use Text Boxes