We implemented a virtual event plattform which features a environment similar to a fair with booths, theatres with videos, chats with booth staff and audio chat with other users of the environment. One of the components we implemented was a chat message view with the usual smileys, clickable links etc.

Each message has to be rendered and word wrapped using the ChatText class. It breaks text into lines and inserts smileys and links. The word wrapping position is found by inserting the text into a dummy Text node and checking the boundsInLocal to find the size.

ChatText.fx

The first version inserted all chat lines into a VBox, but in a chat with more than hundreds messages the relayout of the whole component on insertion of a single line caused 1-2 secs UI hangs on each new message. Therefore we implemented a simple container optimized for the insertion of chat lines. It only recomputes the position of the new node and each node “below” that one. In the case of a chat most of the time only the last node is changed. Since it is still quite slow on a resize (all positions have to be recomputed) we have a deferred update to accomodate window resizing with a usable speed:

ChatView.fx

If you would like to see the whole plattform with the chat in action, click here: http://web.ubivent.com/start.en.html.
Login: demo@ubivent.com
Password: “demo123″.

- Thomas

Posted in Uncategorized