javafx8でテキストフィールドの入力値バリデーションをプロパティバインドで実現したい

Question

###概要
例えば、社員コードを入力するテキストフィールドがあり、バリデーションのルールが以下の場合

• 入力は数値のみ
• 入力中に数値以外が入力されれば、即時にエラーメッセージをメッセージ表示用ラベルに反映
• エラーメッセージ表示と同時に確認ボタンをdisableにする

どのようにbindすればいいのかよくわかりません。
もしかすると、こういった場合はプロパティバインドでは実現できない？？

EmployeeView.fxmlには、

• id:txtEmployeeCodeのTextField
• id:lblErrorMessageのLabel
• id:btnConfirmのButton

があります。

EmployeeView.fxmlのcontroller、EmployeeViewPresenter.javaは
以下の通りに書きました。

public class EmployeeViewPresenter implements Initializable {

    @FXML
    private TextField txtEmployeeCode;
    
    @FXML
    private Label lblErrorMessage;

    @FXML
    private Button btnConfirm;

    @Override
    public void initialize(URL location, ResourceBundle resources) {

        //未入力チェック
        btnConfirm.disableProperty().bind(txtEmployeeCode.textProperty().isEmpty());
        //数値チェックはどうやれば。。。
        //エラーメッセージ表示は？？

    }


    //ちなみに以下の処理であれば正しくバリデーションできた
    @FXML
    void keyTypedValidateEmployeeCode(KeyEvent keyEvent) {
//    	String input = txtEmployeeCode.getText().concat(keyEvent.getCharacter());
//    	try {
//    		Integer.parseInt(input);
//    		btnConfirm.setDisable(false);
//    		lblErrorMessage.setText("");
//    	} catch(NumberFormatException nfe) {
//    		btnConfirm.setDisable(true);
//    		if(input.trim().length() > 0) {
//        		lblErrorMessage.setText("数字のみ入力してください");
//    		} else {
//        		lblErrorMessage.setText("");
//    		}
//    	}
    }


    @FXML
    public void actionConfirm (ActionEvent event) {
        //確認画面へ遷移する処理
    }

###できたこと

• 未入力時にボタンを無効に、入力時はボタンを有効にすることはできる
• txtEmployeeCodeのKeyTypedイベント処理では実現可能

###できなかったこと
プロパティバインドでの

• 入力時に数値でないときのチェックの方法がわからない
• エラー時に即時エラーメッセージを表示する方法がわからない

---

よろしくお願いします。

Answer 1

ご質問のようなことも可能です。またbindを使うと依存する値が変化すると即座にbindしたプロパティに反映されます。例えば確認ボタンをdisableにすべき条件が(1)、エラーメッセージを表示すべき状態が(2)でこれ以外の状態はない場合だとすると、

(1)社員コードに正しい数値が入力されているとき以外(未入力も)
(2)社員コードが空でなくかつ数値以外がが入力されている場合

BooleanBinding codeIsInvalid = Bindings.createBooleanBinding(
  () -> {
    String s = txtEmployeeCode.getText();
    try {
      int employeeCode = Integer.parseInt(s);
      return false;
    } catch (NumberFormatException e) { //必要ならNPEなども補足
      return true;
    }
  },
  txtEmployeeCode.textProperty());
btnConfirm.disableProperty().bind(codeIsInvalid);
BooleanBinding codeNotEmptyAndInvalid =
  codeIsInvalid.and(txtEmployeeCode.textProperty().isEmpty().not()); 
StringBinding message = new When(codeNotEmptyAndInvalid)
  .then("コードが正しくありません").otherwise(""));
lblErrorMessage.textProperty().bind(message);

ご存知かも知れませんが通常の片方向バインドは一つのプロパティへは只一つのバインドしかできませんし、一時的に他の値を設定したくてもできなくなります。プロパティの値はバインドした値に支配されてしまうからです。Bindingはいくらでも複雑に作れますが却ってわかりにくくなるようだとイベントによる処理の方がいいかも知れませんね。

Comments

[AlnairBright]

ご回答誠にありがとうございました。

複雑なバリデーションルールをつくるのも可能ということですね。
とても参考になりました。
最終的には、BindingsUtilクラスを作って
こんな感じになりました。

```java
public class EmployeeViewPresenter implements Initializable {

@FXML
private TextField txtEmployeeCode;

@FXML
private Label lblErrorMessage;

@FXML
private Button btnConfirm;

@Override
public void initialize(URL location, ResourceBundle resources) {

btnConfirm.setDisable(true);
lblErrorMessage.setText("");

BooleanBinding isNotNumber =
BindingUtil.createIsNotNumberBinding(txtEmployeeCode);

btnConfirm.disableProperty().bind(isNotNumber);

BooleanBinding isNotEmptyAndCodeInvalid =
isNotNumber.and(
txtEmployeeCode.textProperty().isNotEmpty().not());

StringBinding message =
BindingUtil.createMessageBinding(
isNotEmptyAndCodeInvalid, "コードは数字のみ入力してください。");

lblErrorMessage.textProperty().bind(message);
}

@FXML
public void actionConfirm (ActionEvent event) {
//確認画面へ遷移する処理
}
}
```

```java
public class BindingUtil {

public static BooleanBinding createIsNotNumberBinding(TextField textField) {

BooleanBinding bl = Bindings.createBooleanBinding(
() -> {
String code =textField.getText();
try {
Integer.parseInt(code);
return false;
} catch (NumberFormatException nfe) {
return true;
}
},
textField.textProperty());
return bl;
}

public static StringBinding createMessageBinding(
BooleanBinding condition, String msgTrue) {

return new When(condition).then(msgTrue).otherwise("");
}
}
```

[AlnairBright]

コメントにはソースのマークダウン使えないんですね。
見づらいコメントになってしまってすみません。。。

[AlnairBright]

訂正です。

BooleanBinding isNotEmptyAndCodeInvalid =
isNotNumber.and(txtEmployeeCode.textProperty().isNotEmpty().not());

の部分ですが、.not()をつけてしまうと反対の動きになってしまったので
.not()を外し、以下のようになりました。

BooleanBinding isNotEmptyAndCodeInvalid =
isNotNumber.and(txtEmployeeCode.textProperty().isNotEmpty());

確認不足ですみません。。。

[KSwordOfHaste]

ごちゃごちゃしたコードサンプルからすっきりとした分かりやすいコードが生まれていて自分も参考になりました(w;