Page History

Intro

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

Sample 1 - Simple Hello World

...

Anchor

	sample1

...

	sample1

java

Code Block

theme	Eclipse
language	java
linenumbers	true

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

    
TextFlow textFlow = new DivTextFlow();
 div = new DivtextFlow.setLayoutX(40, );
    textFlow.setLayoutY(40);
    SpanText span1text1 = new SpanText("Hello ");
    span1text1.setFont(Font.font(family, size));
    SpanText span2text2 = new SpanText("Bold");
    span2text2.setFont(Font.font(family, FontWeight.BOLD, size));
    SpanText span3text3 = new SpanText(" World");
    span3text3.setFont(Font.font(family, FontPosture.ITALIC, size));
    divtextFlow.getChildren().addAll(span1text1, span2text2, span3text3);
    
    Group group = new Group(divtextFlow);
    Scene scene = new Scene(group, 500, 500, Color.WHITE);
    stage.setTitle("Hello Rich Text");
    stage.setScene(scene);
    stage.show();
}

Result:

Sample 2 - FXML + CSS

Anchor

...

	sample2

...

	sample2

java

Code Block

theme	Eclipse
language	java
linenumbers	true

@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();
}

Code Block

language	xml

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

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

Code Block

language	css

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

.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

...

Anchor

	sample3

...

	sample3

java

Code Block

theme	Eclipse
language	java
linenumbers	true

@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();
}

Code Block

language	xml

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

Code Block

language	css

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

.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

Anchor

...

	sample4

...

	sample4

java

Code Block

theme	Eclipse
language	java
linenumbers	true

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

    
TextFlow textFlow = new DivTextFlow();
 div = new DivtextFlow.setLayoutX(0, );
    textFlow.setLayoutY(100);
    SpanText span1text1 = new SpanText("Lets have ");
    span1text1.setFont(Font.font(family, size));
    SpanText span2text2 = new SpanText("embedded objects: ");
    span2text2.setFont(Font.font(family, FontWeight.BOLD, size));
    Rectangle rect = new Rectangle(80, 60);
    rect.setFill(null);
    rect.setStroke(Color.RED);
    SpanText span3text3 = new SpanText(" then button ");
    Button button = new Button("click me");
    SpanText span4text4 = new SpanText(" finally an image ");
    ImageView image = new ImageView("file:///Users/felipe/Documents/felipe/worker.png");
    SpanText span5text5 = new SpanText(".");
    span5text5.setFont(Font.font(family, size));
    
    divtextFlow.getChildren().addAll(span1text1, span2text2, rect, span3text3, button, span4text4, image, span5text5);
    
    Scene scene = new Scene(divtextFlow, 800, 500, Color.WHITE);
    divtextFlow.wrappingWidthProperty().bind(scene.widthProperty());
    
    stage.setTitle("Hello Rich Text with Embedded Objects");
    stage.setScene(scene);
    stage.show();
}

Result:

Sample 5 - Transforms

...

Anchor

	sample5

...

	sample5

java

Code Block

theme	Eclipse
language	java
linenumbers	true

@Override
public void start(Stage stage) throws Exception {
    String family = "Helvetica";
    double size = 20;
    
    DivTextFlow divtextFlow = new DivTextFlow();
    divtextFlow.setTranslateX(30);
    divtextFlow.setTranslateY(100);
    divtextFlow.setRotate(45);
    SpanText span1text1 = new SpanText("Hello ");
    span1text1.setFont(Font.font(family, size));
    SpanText span2text2 = new SpanText("Bold");
    span2text2.setRotate(-45);
    span2text2.setFont(Font.font(family, FontWeight.BOLD, size));
    SpanText span3text3 = new SpanText(" World");
    span3text3.setFont(Font.font(family, FontPosture.ITALIC, size));
    divtextFlow.getChildren().addAll(span1, span2, span3text1, 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:

Image Added

Sample 6 - Bidi Text

Anchor

	sample6
	sample6

Code Block

theme	Eclipse
language	java
linenumbers	true


@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(divtextFlow);
    Scene scene = new Scene(group, 500, 500, Color.WHITE);
    stage.setTitle("Hello Rich Text");
    stage.setScene(scene);
    stage.show();
}

Result:

Image RemovedImage Added

Child pages

Versions Compared

Old Version 1

New Version Current

Key

Intro

Sample 1 - Simple Hello World

Result:

Sample 2 - FXML + CSS

Result:

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

Result:

Sample 4 - Embedded Objects

Result:

Sample 5 - Transforms

Result:

Sample 6 - Bidi Text

Result: