Friday, February 13, 2015

Bringing XMPP Chat States to JavaFX

Chat States. Everybody knows them from Instant Messengers or Facebook Chat. Those tiny notifications, which tell you, if your chat partner is currently composing a message, is (in)active or has paused typing. E.g. "XY is typing..."

XMPP defines these states in XEP-0085: Chat State Notifications as:
  • active
  • inactive
  • gone
  • composing
  • paused

Each of them - except "gone" - are applicable to a "message input interface". So let's translate them to a JavaFX TextArea!

First we define, that whenever the TextArea receives focus, we want to change the state from 'inactive' (which is the initial default state) to 'active' (if there's no text) or to 'paused' (if there's already text):

Secondly we have to change to 'composing', whenever the text changes. Easy.

The slightly tricky part is to change to the 'paused' state. To achieve this, we can set up a javafx.animation.PauseTransition and restart it everytime the text or focus has changed. Eventually, when the transition has finished (e.g. after 3 seconds), it will automatically change the state to 'paused':

Lastly, we change to 'inactive' when focus is lost:

And here's my take on a simple implementation. Enjoy!

import javafx.animation.PauseTransition;
import javafx.beans.property.ObjectProperty;
import javafx.beans.property.ReadOnlyObjectProperty;
import javafx.beans.property.ReadOnlyObjectWrapper;
import javafx.beans.value.ChangeListener;
import javafx.beans.value.ObservableValue;
import javafx.event.ActionEvent;
import javafx.event.EventHandler;
import javafx.scene.control.TextArea;
import javafx.util.Duration;
import rocks.xmpp.extensions.chatstates.model.ChatState;

public class ChatStateTextArea extends TextArea {

    private final PauseTransition pauseTransition = new PauseTransition(Duration.seconds(3));

    private final ReadOnlyObjectWrapper<ChatState> chatState = new ReadOnlyObjectWrapper<>();

    public ChatStateTextArea() {
        // This is the initial state.
        chatState.set(ChatState.INACTIVE);

        focusedProperty().addListener(new ChangeListener<Boolean>() {
            @Override
            public void changed(ObservableValue<? extends Boolean> observableValue, Boolean aBoolean, Boolean
                    aBoolean2) {
                if (aBoolean2) {
                    if (getText().isEmpty()) {
                        // If we have received focus in an empty text field, immediately transition to "active".
                        chatState.set(ChatState.ACTIVE);
                        pauseTransition.stop();
                    } else {
                        // If we have received focus in an non-empty text field, transition to "paused".
                        chatState.set(ChatState.PAUSED);
                        // Start the timer, which will automatically transition to the next state.
                        pauseTransition.playFromStart();
                    }
                } else {
                    pauseTransition.playFromStart();
                }
            }
        });

        textProperty().addListener(new ChangeListener<String>() {
            @Override
            public void changed(ObservableValue<? extends String> observableValue, String s, String s2) {
                // We are in "composing" state.
                chatState.set(ChatState.COMPOSING);
                // Restart the timer.
                pauseTransition.playFromStart();
            }
        });

        pauseTransition.setOnFinished(new EventHandler<ActionEvent>() {
            @Override
            public void handle(ActionEvent actionEvent) {
                // When the time is up, switch to "paused", if there's any text, otherwise to active.
                if (isFocused()) {
                    if (getText() != null && !getText().isEmpty()) {
                        chatState.set(ChatState.PAUSED);
                    } else {
                        chatState.set(ChatState.ACTIVE);
                    }
                } else {
                    chatState.set(ChatState.INACTIVE);
                }
            }
        });
    }

    // Ommitted getters and setters for clearness.
}