39 Using Text in JavaFX
This chapter explains how to add text to your JavaFX applications.
It also includes code samples to illustrate the APIs being used.
Introduction
The graphical content of JavaFX applications consists of objects organized in a tree-like structure called a scene graph. A single element in the scene graph is called a node. Nodes can handle different types of content, including text. Nodes can be transformed and animated. You can also apply various effects to nodes. Using features common to all node types enables you to provide sophisticated text content that meets the demands of modern rich Internet applications (RIAs).
The JavaFX SDK provides the javafx.scene.text.Text class that is used to display text. The Text class inherits from the Node class. For this reason, you can apply effects, animation, and transformations to text nodes in the same way as to any other nodes. Because the Node class inherits from the Shape class, you can set a stroke or apply a fill setting to text nodes in the same way as to any shape.
Adding Text
To add a text object to your application, use any of the constructors shown in Example 39-1 through Example 39-3.
The constructor in Example 39-3 creates a text object at the coordinates specified with the first two parameters.
Setting Text Font and Color
When adding text, you can also set some of its properties. To set the font, you can use an instance of the javafx.scene.text.Font class. The Font.font() method enables you to specify the font family name and size. You can also set the text color as shown in Example 39-4.
Example 39-4
t.setText("This is a text sample");
t.setFont(Font.font ("Verdana", 20));
t.setFill(Color.RED);
Alternatively, you may want to use a system font, which varies depending on the platform. For this purpose, call the Font.getDefault() method.
In the production code, Oracle recommends that you set the styles using cascading style sheets (CSS). For example, to be able to apply a linear gradient fill to your text objects, add the style with the required rules to your CSS as shown in Example 39-5.
Example 39-5
#fancytext {
-fx-font: 100px Tahoma;
-fx-fill: linear-gradient(from 0% 0% to 100% 200%, repeat, aqua 0%, red 50%);
-fx-stroke: black;
-fx-stroke-width: 1;
}
In your code, create a text object and apply the style from CSS as shown in Example 39-6.
This code creates the text shown in Figure 39-1.
For more details about using CSS in JavaFX applications, see Skinning JavaFX Applications with CSS.
Making Text Bold or Italic
To make the text look bold, use the FontWeight constant of the font method as shown in Example 39-7.
To display text in italic, use the FontPosture constant as shown in Example 39-8.
Using Custom Fonts
If you need to use a unique font that might not be installed on another computer, you can include a TrueType font (.ttf) or an OpenType (.otf) in your JavaFX application.
To include a TrueType or OpenType font as a custom font, use the following procedure:
-
Create a
resources/fontsfolder in your project folder. -
Copy your font files to the
fontssubfolder in your project. -
In your source code, load the custom font as shown in Example 39-9.
This code provides the font for the text shown in Figure 39-2.
Setting LCD Text Support
LCD (liquid crystal display) text is an anti-aliased text that takes advantage of the properties of LCD panels to render smoother text. You can take advantage of the LCD text on the text nodes by using the API shown in Example 39-10.
Alternatively, you can provide this setting in a .css file by using the syntax shown in Example 39-11.
Rich Text and Bidirectional Support
You can create several Text nodes and lay them out in a single text flow by using the TextFlow layout pane. The TextFlow object employs the text and font of each Text node but ignores the wrapping width and the x and y properties of its children. The TextFlow object uses its own width and text alignment to determine the location of each child. Example 39-12 shows three Text nodes that have different fonts and text laid out in a TextFlow pane.
Example 39-12
String family = "Helvetica";
double size = 50;
TextFlow textFlow = new TextFlow();
textFlow.setLayoutX(40);
textFlow.setLayoutY(40);
Text text1 = new Text("Hello ");
text1.setFont(Font.font(family, size));
text1.setFill(Color.RED);
Text text2 = new Text("Bold");
text2.setFill(Color.ORANGE);
text2.setFont(Font.font(family, FontWeight.BOLD, size));
Text text3 = new Text(" World");
text3.setFill(Color.GREEN);
text3.setFont(Font.font(family, FontPosture.ITALIC, size));
textFlow.getChildren().addAll(text1, text2, text3);
Group group = new Group(textFlow);
Scene scene = new Scene(group, 500, 150, Color.WHITE);
stage.setTitle("Hello Rich Text");
stage.setScene(scene);
stage.show();
This code provides the output shown in Figure 39-3.
You can embed objects such as shapes and images together with the text nodes in a TextFlow object or create text with bidirectional support as shown in Example 39-13.
Example 39-13
import javafx.application.Application;
import static javafx.application.Application.launch;
import javafx.scene.Group;
import javafx.scene.Scene;
import javafx.scene.paint.Color;
import javafx.scene.text.Font;
import javafx.scene.text.Text;
import javafx.scene.text.TextFlow;
import javafx.stage.Stage;
public class JavaFXBidiText extends Application {
@Override
public void start(Stage stage) throws Exception {
TextFlow textFlow = new TextFlow();
Font font = new Font("Tahoma", 48);
Text text1 = new Text("He said \u0627\u0644\u0633\u0644\u0627\u0645");
text1.setFill(Color.RED);
text1.setFont(font);
Text text2 = new Text(" \u0639\u0644\u064a\u0643\u0645 to me.");
text2.setFill(Color.BLUE);
text2.setFont(font);
textFlow.getChildren().addAll(text1, text2);
Group group = new Group(textFlow);
Scene scene = new Scene(group, 650, 150, Color.WHITE);
stage.setTitle("Hello Bidi Text");
stage.setScene(scene);
stage.show();
}
This code creates the output shown in Figure 39-4.
This example shows how the content of a single Text node can be divided and placed in different locations on the TextFlow object due to bidirectional reordering.
The default orientation of the TextFlow object is left-to-right with Arabic words to be rendered right-to-left. There are two Arabic words to be rendered together: the red word is rendered first at the rightmost position and is followed to the left by the blue word.
You can change the default orientation of the TextFlow object by calling
textFlow.setNodeOrientation(NodeOrientation.RIGHT_TO_LEFT);
Note that both the Text and TextFlow objects support bidirectional reordering as defined by the Unicode Consortium in the Bidirectional Algorithm Annex #9 at
