JavaFX | Using JavaFX UI Controls

Label

Use the Label class to display noneditable text in your application. A text element can be wrapped to fit the specific space or it might be accompanied by an image. An entry-level task is to implement a text label as follows.

Source Code

import javafx.scene.paint.Color;
import javafx.scene.control.Label;

Label {
    text: "Simple Label!"
    textFill: Color.BLUE
}

The text instance variable defines the label content, while the textFill variable specifies the fill color to use for the label text.

Now consider an application that implements three common label usages: the first label is a text element with an image, the second label represents rotated text, and the third label renders wrapped text.

The following code creates a Search label accompanied by the corresponding image of a magnifying glass.

Source Code


label = Label {
    text: "Search"
    font: Font {name: "Cambria" size: 24}
    layoutInfo: LayoutInfo {width: 200}
    hpos: HPos.RIGHT
    textFill: bind if (label.hover) colorMouseOn
        else colorMouseOff
    graphic: ImageView {image: image}
    graphicVPos: VPos.CENTER                        
}

Take a moment to become familiar with the instance variables and functions that are used to create these labels. The textFill variable sets the text color depending on whether the label is hovered or not. This construction produces a rollover effect. The textFill variable is the instance variable that belongs to the Label class, while the other variables are inherited from superclasses. The text, font, graphic, graphicVPos, and hpos variables are inherited by the Label class from the Labeled class, a super class for UI controls such as Button, RadioButton, ToggleButton, CheckBox, and Hyperlink. These variables set textual and graphical contents of the label and define their position relative to the label borders and each other.

Instance variable of the Lable class inherited from the Labeled class

The hpos and vpos variables control the position of the label's contents as a unit within the space allocated to the Label. Because the Label is being given a width wider than its natural width, and the hpos is set to HPos.RIGHT, the text and graphics are positioned to the right within the allocated space.

In this example no gap between the image and the text is specified. However, you can define the amount of space between the graphic and text with the graphicTextGap instance variable.

The following code illustrates creating a simple text label that is aligned vertically. Use the rotate instance variable to perform this effect. Recall that all the UI controls that reside in the javafx.scene.control package are extensions of the Node class. Thus, you can apply any transformations, effects, or animated transitions available through the API.

Source Code

Label {
    text: "Values"
    font: Font {name: "Comic Sans MS" size: 32}
    textFill: colorMouseOn
    rotate: 270
}

Text wrapping is another beneficial feature of the Label class. It can help you to fit your label in the specified space.

Source Code

Label {
    text: "A label text that needs to be wrapped"
    font: Font {name: "Tahoma" size: 14}
    textFill: colorMouseOn
    layoutInfo: LayoutInfo{ width: 100}
    textWrap: true
    textAlignment: TextAlignment.JUSTIFY
}

Set the textWrap variable to true to enable wrapping within the space defined by the width variable. Apply one of the following TextAlignment constants: CENTER, RIGHT, LEFT, or JUSTIFY to define the alignment style for the multiline text.

Label

Related Documents

Samples That Use Labels