Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

JavaFX - Center Text in TextFlow vertically

I'm currently working with JavaFX' Text and TextFlow layout, and I need to figure out how to center the Text node inside a TextFlow. As you see in the picture below, I've added some ImageView's, to simulate emoticons which I want to add.

The problem is, that they are aligned differently. While the emoticons are centered, the text stays at the bottom.

The green border line represents the TextFlow's border, the blue border line the Text's one.

Preview

I've already tried out to set the Text's textOrigin property to CENTER, but it doesn't change anything in my case. Setting textAlignment to CENTER won't work either.

Here's my code excerpt:

public CChatMessage(String senderName, String messageText)
{
    this.sender = new Label(senderName);
    this.sender.setTextAlignment(TextAlignment.CENTER);
    this.sender.setFont(Font.font("Verdana", FontWeight.EXTRA_BOLD, 14));

    this.message = new Text(messageText);
    this.message.setTextAlignment(TextAlignment.CENTER);
    this.message.setTextOrigin(VPos.CENTER);

    this.setEffect(new DropShadow());
    this.setAlignment(Pos.CENTER);
    this.setPadding(new Insets(0, 10, 10, 10));

    TextFlow messagePane = new TextFlow();
    messagePane.setStyle("-fx-border-color: green");
    messagePane.setTextAlignment(TextAlignment.CENTER);
    Image smileyImage = new Image("/resources/smiley.png");

    messagePane.getChildren().addAll(this.message, new ImageView(smileyImage), new ImageView(smileyImage), new ImageView(smileyImage), 
                                                   new ImageView(smileyImage), new ImageView(smileyImage), new ImageView(smileyImage));

    if(!senderName.equals(""))
    {
        CChatMessage.setMargin(messagePane, new Insets(10, 0, 0, 0));
        this.message.setFont(Font.font("Calibri", FontWeight.SEMI_BOLD, 18));
        this.getChildren().addAll(this.sender, messagePane);
    }
    else
    {
        this.setPadding(new Insets(5, 5, 5, 5));
        message.setFont(Font.font("Verdana", FontWeight.EXTRA_BOLD, 11));
        this.getChildren().add(messagePane);
    }
}
like image 436
Rouman Avatar asked Mar 12 '17 12:03

Rouman


1 Answers

Edit: I think this is the answer you're looking for: https://bugs.openjdk.java.net/browse/JDK-8098128

Edit 2: It appears the solution I've given below has a problem. The words in the Text node don't stay within the HBox. So far, I haven't figured out how to fix that. But it does stay inside when the Text nodes are inside a TextFlow container.

A solution to the problem has been given there. I don't fully understand it but I hope you do.

I'll just leave my original answer since it contains the way I'm dealing with the issue.

This solution might work. After failing to center the Text node like that, I've come to this workaround: Rather than using the TextFlow, I've used an HBox. It gets the job done for me. The behaviour is similar enough and I'm able to align the Text nodes whichever way I want.

But a word of caution, I'm just a newbie. So there may be issues that would pop up if you used this method. I don't know about the properties of TextFlow and HBox enough to confidently answer. But I just thought I'd tell you my solution since that's what I'm using for my project now. (Edit: As you can read above at Edit 2, I ran into one problem. There might be more.) :)

Happy coding.

like image 196
Dan Avatar answered Oct 18 '22 00:10

Dan