Vaadin8转换器的行为与Vaadin7转换器不同（不更新UI）？

Question

TL；DR：在Vaadin8中有类似于Vaadin7的转换器的东西来更新UI中输入字段的表示吗？即。在输入字段失去焦点后立即从用户输入中删除所有非数字，还是将十进制转换为货币？

Vaadin论坛链接:http://Vaadin.com/Forum#！/thread/15931682

我们目前正在将Vaadin7项目迁移到Vaadin8。

import java.math.BigDecimal;
import java.text.DecimalFormat;
import java.text.NumberFormat;
import java.util.Locale;
import org.apache.commons.lang3.StringUtils;
import com.vaadin.v7.data.util.converter.StringToBigDecimalConverter;
import com.vaadin.v7.data.util.converter.Converter.ConversionException;

/**
 * A converter that adds/removes the euro sign and
 * formats currencies with two decimal places.
 */
public class EuroConverter extends StringToBigDecimalConverter {

    @Override
    public BigDecimal convertToModel(String value,
                                     Class<? extends BigDecimal> targetType,
                                     Locale locale) throws ConversionException {
        if(StringUtils.isBlank(value)) {
            return null;
        }
        value = value.replaceAll("[€\\s]", "").trim();
        if(StringUtils.isBlank(value)) {
            value = "0";
        }
        return super.convertToModel(value, targetType, locale);
    }

    @Override
    public String convertToPresentation(BigDecimal value,
                                    Class<? extends String> targetType, 
                                    Locale locale) throws ConversionException {
        if(value == null) {
            return null;
        }
        return "€ " + super.convertToPresentation(value, targetType, locale);
    }

    @Override
    protected NumberFormat getFormat(Locale locale) {
        // Always display currency with two decimals
        NumberFormat format = super.getFormat(locale);
        if(format instanceof DecimalFormat) {
            ((DecimalFormat)format).setMaximumFractionDigits(2);
            ((DecimalFormat)format).setMinimumFractionDigits(2);
        }
        return format;
    }
}

import java.math.BigDecimal;
import java.text.DecimalFormat;
import java.text.NumberFormat;
import java.util.Locale;
import org.apache.commons.lang3.StringUtils;
import com.vaadin.data.Result;
import com.vaadin.data.ValueContext;
import com.vaadin.data.converter.StringToBigDecimalConverter;

/**
 * A converter that adds/removes the euro sign and formats currencies with two
 * decimal places.
 */
public class EuroConverter extends StringToBigDecimalConverter {

    public EuroConverter() {
        super("defaultErrorMessage");
    }

    public EuroConverter(String errorMessage) {
        super(errorMessage);
    }

    @Override
    public Result<BigDecimal> convertToModel(String value, ValueContext context) {
        if(StringUtils.isBlank(value)){
            return Result.ok(null);
        }
        value = value.replaceAll("[€\\s]", "").trim();
        if(StringUtils.isBlank(value)){
            value = "0";
        }
        return super.convertToModel(value, context);
    }

    @Override
    public String convertToPresentation(BigDecimal value, ValueContext context) {
        if(value == null){
            return convertToPresentation(BigDecimal.ZERO, context);
        }
        return "€ " + super.convertToPresentation(value, context);
    }

    @Override
    protected NumberFormat getFormat(Locale locale) {
        // Always display currency with two decimals
        NumberFormat format = super.getFormat(locale);
        if(format instanceof DecimalFormat){
            ((DecimalFormat)format).setMaximumFractionDigits(2);
            ((DecimalFormat)format).setMinimumFractionDigits(2);
        }
        return format;
    }
}

当使用该转换器加载页面时，初始值为null，它将在TextField中不显示任何内容。如果先前保存的初始值为“1234”，则会在文本字段中显示1.234，00。这很好。
如果您将此初始值更改为“987”，则与转换器的绑定将在对象 中保存“987”，并在键入TextField后立即在TextField 中显示987，00。

它不更新TextField中的值。它仍将显示987。Vaadin8转换器似乎只用于通过绑定从用户输入到域模型，而不是用于更改已放入的内容。

另一个变化是，转换器现在放在Vaadin8中的绑定本身上，而不是Vaadin7中的TextField上。

下面是一个gif，上面的输入字段是Vaadin7/what的行为，下面的输入字段是当前的Vaadin8的行为：

编辑：我们尝试过的一些操作：

我创建了一个只有一个TextField、一个绑定和一个转换器的测试页面：

TextField inputField = new TextField("Test");
Binder<PiggyBank> binder = new Binder<PiggyBank>();

// PiggyBank only has a property `amount` with getter & setter (see below)
PiggyBank piggyBank = new PiggyBank();
piggyBank.setAmount(BigDecimal.valueOf(1234))

binder.forField(inputField)
      .withConverter(new EuroConverter())
      .bind(PiggyBank::getAmount, PiggyBank::setAmount);
//1
binder.setBean(piggyBank);
//2

addComponent(inputField);

一些需要注意的事情：

1. 如果我们在第1行添加piggybank.setamount(456)；，它将首先在UI的TextField中显示456，00。
2. 如果我们在第2行而不是第1行添加piggybank.setamount(456)；，它仍然会在UI的TextField中显示1.234，00！因此在binder.setBean（piggyBank)
之后，转换器的 converttopresentation方法就不再被触发了
3. 如果在第1行添加piggyBank.setamount(456)；，并删除binder.setbean（piggyBank）；，它仍然显示1.234，00而不是456，00！

我们已经能够找到一个难看的变通办法，它是这样的：

inputField.setValueChangeMode(ValueChangeMode.BLUR);
inputField.addBlurListener(new BlurListener() {

    @Override
    public void blur(BlurEvent event) {
        if(binder.isValid()) {
            binder.readBean(binder.getBean());
        }
    }
});

正如您所看到的，我们只是在每次输入字段值改变时读取bean。通过此更改，该值仍然正确地保存到模型中，并且现在还触发转换器的converttopresentation方法，在此之后正确地显示987，00（尽管在上面编号列表的情况2和3中仍然错误地显示1.234，00，而不是456，00)。

我们也尝试过内联lambda转换器而不是对象；尝试使用binder.formemberfield；尝试使用binder.bindinstancefields；试图以某种方式检索设置的活页夹，这是不可能的；等等，我们已经尝试了所有的方法，但是Vaadin8转换器不像在Vaadin7中那样工作，我们无法找到一个替代的甚至是适当的解决方案。

备注中的储蓄罐代码：

public class PiggyBank {

    private BigDecimal amount;

    public BigDecimal getAmount() {
        return amount;
    }

    public void setAmount(BigDecimal amount){
        this.amount = amount;
    }
}

Answer 1

此问题已在Vaadin 8.12.1中修复。裁判。https://github.com/vaadin/framework/pull/12132