JavaFX：如何在某种文本区域中存储和设置多个段落的格式？

Question

I am currently creating a small chat program (mainly for the purpose of getting some experience with RMI and JavaFX). The chat itself is already finished, now I'm working on the GUI. I want every chat message to be printed in some kind of text area similar to this:

Alice <19:21:35>: Hello World!

These are my problems/questions:

1. What JavaFX class to use for this? I found a class called TextFlow that seems to be able to do what I want, but I didn't understand how exactly it works by now. Or is a simple TextArea enough?
2. How can I use different formattings within one line? Using HTML?
3. How should I keep the received text messages within the client? Just always append them to the text area (and have them saved implicitly by the GUI)? Or should I use some kind of ObservableList that buffers the messages and the text area synchronizes with it?

The messages are received as Message objects. These objects basically just store username, message, and timestamp; each of them in a seperate attribute.

Answer 1

The simplest way of doing it would be through a TextArea, although there wouldn't be any neat text formatting, it would just look like a bland NotePad like program. I would recommend using a VBox and Texts. One VBox could be used to store all the Texts, and you could put the VBox in a ScrollPane for scrolling. Then, for every message, put an HBox consisting of 3 Texts. Here is an example

//Put this method in your Application class
public static void addMessage(Message message){
    Text username = new Text(message.getUsername());
    username.setFont(Font.font("Verdana", FontWeight.BOLD, 14));
    Text date = new Text(message.getTimestamp());
    date.setFont(Font.font("Verdana", FontWeight.ITALIC, 12));
    date.setFill(Color.GRAY);
    Text message = new Text(message.getMessage());
    date.setFont(Font.font("Courier New", 12));
    mainBox.getChildren().Add(new HBox(username, date, message)); //mainBox being a VBox that stores all your HBoxes. 
}

Obviously, change this to suit your needs, and please change the styling. I just gave an example. This is what I have done before, and with the right styling, it looks a lot nicer than just slopping on a TextArea.

Answer 2

1. If your formatting requirements are fixed, then Text and TextFlow would be a good place to start. Each text node can be assigned a style either in code or via CSS. Put multiple text nodes together into a TextFlow. Put the TextFlow node into a layout container. Start with a VBox for testing, but I would suggest using a TableView once you get the basics working. The javadoc for TextFlow has snippets of sample code that should get you going.

2. For a pure JavaFX solution then use multiple Text nodes, styled with CSS. Either set formatting properties on each node, or assign a style and use an external .css file. Or if you want to consider third-party components, then something like this: https://github.com/TomasMikula/RichTextFX might be a good place to start.

3. You definitely want to separate your data model from your display model (or view, if you want to use that terminology). Build a data class (eg, Message). If you hold your message data in an ObservableList of Message objects then you can bind it to a TableView, and have the table automatically update as you add or remove entries in the list. Add code to the table cell factories to control how you render each cell from your data model (eg, by creating a TextFlow to draw the content).