JavaFX provides many UI controls for developing a comprehensive user interface. A graphical user interface (GUI) makes a system user-friendly and easy to use. Creating a GUI requires creativity and knowledge of how UI controls work. Since the UI controls in JavaFX are very flexible and versatile, you can create a wide assortment of useful user interfaces for rich Internet applications.

Oracle provides tools for visually designing and developing GUIs. This enables the programmer to rapidly assemble the elements of a GUI with minimum coding. Tools, however, cannot do everything. You have to modify the programs they produce. Consequently, before you begin to use the visual tools, you must understand the basic concepts of JavaFX GUI programming.

The prefixes lbl, bt, chk, rb, tf, pf, ta, cbo, lv, scb, sld, and mp are used to name reference variables for Label, Button, CheckBox, RadioButton, TextField, PasswordField, TextArea, ComboBox, ListView, ScrollBar, Slider, and MediaPlayer.

Labeled and Label

A label is a display area for a short text, a node, or both. It is often used to label other controls (usually text fields). Labels and buttons share many common properties. These common properties are defined in the Labeled class, as shown in Figure below.

A Label can be constructed using one of the three constructors as shown in Figure below.

The graphic property can be any node such as a shape, an image, or a control. The code below gives an example that displays several labels with text and images in the label, as shown in Figure below.

package application;
import javafx.application.Application;
import javafx.stage.Stage;
import javafx.scene.Scene;
import javafx.scene.control.ContentDisplay;
import javafx.scene.control.Label;
import javafx.scene.image.Image;
import javafx.scene.image.ImageView;
import javafx.scene.layout.HBox;
import javafx.scene.layout.StackPane;
import javafx.scene.paint.Color;
import javafx.scene.shape.Circle;
import javafx.scene.shape.Rectangle;
import javafx.scene.shape.Ellipse;

public class LabelWithGraphic extends Application {
    @Override // Override the start method in the Application class
    public void start(Stage primaryStage) {
        ImageView us = new ImageView(new Image("file:/C:/Users/Paul/development/MyJavaFX/src/application/image/ke.jpg"));
        Label lb1 = new Label("US\n50 States", us);
        lb1.setStyle("-fx-border-color: green; -fx-border-width: 2");
        lb1.setContentDisplay(ContentDisplay.BOTTOM);
        lb1.setTextFill(Color.RED);

        Label lb2 = new Label("Circle", new Circle(50, 50, 25));
        lb2.setContentDisplay(ContentDisplay.TOP);
        lb2.setTextFill(Color.ORANGE);

        Label lb3 = new Label("Rectangle", new Rectangle(10, 10, 50, 25));
        lb2.setContentDisplay(ContentDisplay.RIGHT);

        Label lb4 = new Label("Ellipse", new Ellipse(50, 50, 50, 25));
        lb3.setContentDisplay(ContentDisplay.LEFT);

        Ellipse ellipse = new Ellipse(50, 50, 50, 25);
        ellipse.setStroke(Color.GREEN);
        ellipse.setFill(Color.WHITE);
        StackPane stackPane = new StackPane();
        stackPane.getChildren().addAll(ellipse, new Label("JavaFX"));
        Label lb5 = new Label("A pane inside a label", stackPane);
        lb5.setContentDisplay(ContentDisplay.BOTTOM);

        HBox pane = new HBox(20);
        pane.getChildren().addAll(lb1, lb2, lb3, lb4, lb5);

        // Create a scene and place it in the stage
        Scene scene = new Scene(pane, 450, 150);
        primaryStage.setTitle("LabelWithGraphic"); // Set the stage title
        primaryStage.setScene(scene); // Place the scene in the stage
        primaryStage.show(); // Display the stage
    }

    public static void main(String[] args) {
        Application.launch(args);
    }
}

The program creates a label with a text and an image (line 20). The text is US\n50 States so it is displayed in two lines. Line 22 specifies that the image is placed at the bottom of the text.

The program creates a label with a text and a circle (line 25). The circle is placed on top of the text (line 26). The program creates a label with a text and a rectangle (line 29). The rectangle is placed on the right of the text (line 30). The program creates a label with a text and an ellipse (line 32). The ellipse is placed on the left of the text (line 33).

The program creates an ellipse (line 35), places it along with a label to a stack pane (line 39), and creates a label with a text and the stack pane as the node (line 40). As seen from this example, you can place any node in a label. The program creates an HBox (line 43) and places all five labels into the HBox (line 44).