JavaFXの入力部品でエラー時に色を変える

GUIでユーザーが入力した値が範囲外などのエラー時に、エラーとなった箇所が分かるよう色を変える方法を模索しました。今回はTextFieldを題材とします。

CSSの疑似クラスでエラーを定義

JavaFXで、CSSファイルを使って見栄えを定義している場合、CSSファイルにTextFieldの疑似クラスerrorを次のように定義します。

.text-field:error {
    -fx-text-box-border: red;
    -fx-focus-color: red;
}

"-fx-text-box-border"は、TextFieldにフォーカスが当たっていないときの枠の色を指定
"-fx-focus-color"は、TextFieldにフォーカスが当たっているときの枠の色を指定

Javaのコードで、テキストフィールドの個々のインスタンスに疑似クラスの状態を指定

    @FXML
    private TextField myTextField;
    private PseudoClass errorClass = PseudoClass.getPseudoClass("error");
    :
    void handleSubmit(ActionEvent event) {
        if (! validateInput()) {
            myTextField.pseudoClassStateChanged(errorClass, true);
        } else {
            myTextField.pseudoClassStateChanged(errorClass, false);
        }
        :
    }

疑似クラスの名前でPseudoClassインスタンスを取得し、対象となるTextFieldインスタンスのpseudoClassStateChangedメソッドで引数に疑似クラスのインスタンスと有効・無効のフラグを指定すると見栄えを変更することができます。

この実装では、submitボタンが押された段階でTextFieldの内容をチェックし疑似クラスerrorの適不適を切り替えています。
より本格的に、TextFieldに文字を入力する度にチェックし色を変えることもできますが、本日は割愛します。