JavaFX textflow ignoring assigned background color and size

Question

public BasicView(String name) {
        super(name);



        Button b = new Button("test test test");

        this.getChildren().addAll(b);

        width = MobileApplication.getInstance().getScreenWidth();
        height = MobileApplication.getInstance().getScreenHeight();
        VBox box = new VBox();
        box.getChildren().add(b);
        setCenter(box);

        Text t = new Text(width/4,height/2,"OMG ITS TEXT ON THE SCREEN !!!! TEST TEST TEST TEST");
        t.setWrappingWidth(100);
        this.getChildren().add(t);
        b.setOnAction(e -> this.rotate(t));
        TextFlow tf = new TextFlow();
        Text t1= new Text("This text is not bold ");
        Text t2= new Text(",this part is,");
        t2.setStyle("-fx-font-weight: bold");
        t2.setFill(Color.RED);
        Text t3= new Text("and this part is italic");
        t3.setStyle("-fx-font-style: italic");
        tf.setPrefSize(30,30);
        tf.setMaxWidth(USE_PREF_SIZE);
        tf.getChildren().addAll(t1,t2,t3);
        tf.setStyle("-fx-background-color: red");

        tf.setLayoutX(100);
        tf.setLayoutY(100);

        this.getChildren().addAll(tf);

    }

the resulting text flow does not wrap and has no background color. the t3 part of the text is also not displayed in italics. I have tried searching for answers but have found nothing. any help would be greatly appreciated.

EDIT: I forgot to mention that I am using the gluon mobile plugin in order to build a android app using javaFx.

Answer 1

Gluon's View extends from BorderPane, so you should add the textFlow node to one of the five possible positions (i.e. to the center).

Otherwise you'll have to take care of its layout (calling resizeRelocate).

Once you add it to the center, for instance, it will have proper size, it will show the background color, and it will wrap the content.

As for the italics, Gluon Charm uses Roboto fonts, regular, medium and bold. If you want to have italic styling, you'll need to add the Roboto-Italic.ttf font to your resources (/src/main/resources/), and then just load it:

public BasicView(String name) {
    super(name);

    Font.loadFont(getClass()
            .getResourceAsStream("/Roboto-italic.ttf"), 10);

    TextFlow tf = new TextFlow();
    Text t1= new Text("This text is not bold ");
    Text t2= new Text(", this part is,");
    t2.setStyle("-fx-font-weight: bold");
    t2.setFill(Color.RED);
    Text t3= new Text(" and this part is italic");
    t3.setStyle("-fx-font-style: italic");
    tf.getChildren().addAll(t1,t2,t3);
    tf.setStyle("-fx-background-color: yellow");

    setCenter(tf);

}