Rich Text API Samples

Intro

This page host samples of the Rich Text API in use along with the rendering result.
Visit Rich Text API Details for some background information on the API.

Sample 1 - Simple Hello World

@Override
public void start(Stage stage) throws Exception {
    String family = "Helvetica";
    double size = 20;

    TextFlow textFlow = new TextFlow();
    textFlow.setLayoutX(40);
    textFlow.setLayoutY(40);
    Text text1 = new Text("Hello ");
    text1.setFont(Font.font(family, size));
    Text text2 = new Text("Bold");
    text2.setFont(Font.font(family, FontWeight.BOLD, size));
    Text text3 = new Text(" World");
    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, 500, Color.WHITE);
    stage.setTitle("Hello Rich Text");
    stage.setScene(scene);
    stage.show();
}

Result:

Sample 2 - FXML + CSS

@Override
public void start(Stage stage) throws Exception {
    stage.setTitle("Hello Rich Text FXML");
    stage.setScene((Scene)FXMLLoader.load(getClass().getResource("hellorichtext.fxml")));
    stage.show();
}

<Scene width="500" height="500" fill="white" xmlns:fx="http://javafx.com/fxml">
    <stylesheets>
        <URL value="@style1.css"/>
    </stylesheets>

    <Group>
        <TextFlow styleClass="paragraph">
            <Text styleClass="span1">Hello </Text>
            <Text styleClass="span2">Bold</Text>
            <Text styleClass="span3"> World</Text>
        </TextFlow>
    </Group>
</Scene>

.paragraph {
	-fx-font-family: "Helvetica";
	-fx-font-size: 50px;
}

.span1 {
}

.span2 {
	-fx-fill: red;
	-fx-font-weight: bold;
}

.span3 {
	-fx-fill: green;
	-fx-font-style: italic;
}

Result:

Sample 3 - FXML + CSS + Gradient + Stroke + Effects

@Override
public void start(Stage stage) throws Exception {
    stage.setTitle("Hello Rich Text FXML");
    stage.setScene((Scene)FXMLLoader.load(getClass().getResource("fancy.fxml")));
    stage.show();
}

<Scene width="800" height="500" fill="white" xmlns:fx="http://javafx.com/fxml">
    <stylesheets>
        <URL value="@style2.css"/>
    </stylesheets>
    <Pane fx:id="pane">
         <TextFlow styleClass="paragraph" wrappingWidth="${pane.width}">
            <Text styleClass="span1, fancy1">Hello </Text>
            <Text styleClass="span2, big, fancy2">Bold</Text>
            <Text text=" "/>
            <Text styleClass="span3, fancy3">Effect</Text>
            <Text text=" "/>
            <Text styleClass="underlinefancy">fancy underline</Text>
            <Text text=" "/>
            <Text styleClass="strikeout, fancy2">fancy strikeout</Text>
        </TextFlow>
    </Pane>
</Scene>

.paragraph {
	-fx-font-family: "Helvetica";
	-fx-font-size: 50px;
}

.span1 {
}

.span2 {
	-fx-fill: red;
	-fx-font-weight: bold;
}

.span3 {
	-fx-fill: green;
	-fx-font-style: italic;
}

.big {
	-fx-font-size: 80px;
	-fx-cursor: hand;
}

.fancy1 {
	-fx-stroke: rgb(255, 0, 0);
	-fx-fill: rgba(255, 0, 0, 0.2);
}

.fancy2 {
	-fx-fill: linear-gradient(from 0% 0% to 100% 100%, repeat, orange 0%, red 50%);
	-fx-stroke: black;
	-fx-stroke-width: 1;
}

.fancy3 {
	-fx-effect: dropshadow(gaussian, gray, 8, 0.5, 8, 8);
}

.underlinefancy {
	-fx-underline: true;
	-fx-fill: transparent;
	-fx-stroke: linear-gradient(from 0% 0% to 100% 100%, repeat, black 0%, blue 50%);
	-fx-stroke-width: 1;
}

.strikeout {
	-fx-strikethrough: true;
}

Result:

Sample 4 - Embedded Objects

@Override
public void start(Stage stage) throws Exception {
    String family = "Helvetica";
    double size = 20;

    TextFlow textFlow = new TextFlow();
    textFlow.setLayoutX(0);
    textFlow.setLayoutY(100);
    Text text1 = new Text("Lets have ");
    text1.setFont(Font.font(family, size));
    Text text2 = new Text("embedded objects: ");
    text2.setFont(Font.font(family, FontWeight.BOLD, size));
    Rectangle rect = new Rectangle(80, 60);
    rect.setFill(null);
    rect.setStroke(Color.RED);
    Text text3 = new Text(" then button ");
    Button button = new Button("click me");
    Text text4 = new Text(" finally an image ");
    ImageView image = new ImageView("file:///Users/felipe/Documents/felipe/worker.png");
    Text text5 = new Text(".");
    text5.setFont(Font.font(family, size));

    textFlow.getChildren().addAll(text1, text2, rect, text3, button, text4, image, text5);

    Scene scene = new Scene(textFlow, 800, 500, Color.WHITE);
    textFlow.wrappingWidthProperty().bind(scene.widthProperty());

    stage.setTitle("Hello Rich Text with Embedded Objects");
    stage.setScene(scene);
    stage.show();
}

Result:

Sample 5 - Transforms

@Override
public void start(Stage stage) throws Exception {
    String family = "Helvetica";
    double size = 20;

    TextFlow textFlow = new TextFlow();
    textFlow.setTranslateX(30);
    textFlow.setTranslateY(100);
    textFlow.setRotate(45);
    Text text1 = new Text("Hello ");
    text1.setFont(Font.font(family, size));
    Text text2 = new Text("Bold");
    text2.setRotate(-45);
    text2.setFont(Font.font(family, FontWeight.BOLD, size));
    Text text3 = new Text(" World");
    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, 500, Color.WHITE);
    stage.setTitle("Hello Rich Text");
    stage.setScene(scene);
    stage.show();
}

Result:

Sample 6 - Bidi Text

@Override
public void start(Stage stage) throws Exception {
    TextFlow textFlow = new TextFlow();
    Font font = new Font("Tahoma", 48);
    textFlow.setTextOrigin(VPos.TOP);
    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, 500, 500, Color.WHITE);
    stage.setTitle("Hello Rich Text");
    stage.setScene(scene);
    stage.show();
}