格式化 PrimeFaces 滑块 InputText

Question

我有一个带有关联 inputText 的 PrimeFaces 滑块。一切正常，除了我找不到格式化 inputText 值的方法。我希望 inputText 以货币格式显示和获取值。

到目前为止我已经尝试过：

• 将p:inputText 更改为pe:inputNumber 组件：导致异常，因为无法设置该值（滑块根本不适用于inputNumber）；
• 将p:slider 目标设置为与p:inputText 具有相同值的h:inputHidden 组件（附加了f:convertNumber）：在通过滑块更改值时有效，但在使用inputText 更改值滑块时不起作用不更新（在幕后引发 UpdateModelException）；

更新：后来发现第二个选项抛出异常是因为f:convertNumber期望的是数字类型的bean属性，而不是整数。下面显示的两种解决方案都可以解决此问题。

有没有不使用 jQuery 的简单方法？

谢谢！

菲利普

Answer 1

所以有两种方法可以解决这个问题：

1. 创建自定义转换器（由@giaffa86 在他的解决方案中起草）；
2. 对 int 属性启用 Number getter 和 setter 并将它们与 inputText 一起使用（更简单，IMO）。

下面的代码展示了如何实现第二个选项。

TestView.java

@ManagedBean(name="testView")
@ViewScoped
public class TestView {

    private int realValue = 500;

    public int getValueAsInt() {
        return this.realValue;
    }

    public Number getValueAsNumber() {
        return (Number)realValue;
    }

    public void setValueAsInt(int value) {
        this.realValue = value;
    }

    public void setValueAsNumber(Number value) {
        this.realValue = value.intValue();
    }

    public void onSlideEnd(SlideEndEvent event) {
        this.realValue = event.getValue();
    }
}

view.xhtml

    <p:inputText id="input" value="#{testView.valueAsNumber}">
        <p:ajax update="slider" />
        <f:convertNumber currencySymbol="$" type="currency"
            integerOnly="true" />
    </p:inputText>

    <h:inputHidden id="hidden" value="#{testView.valueAsInt}" />
    <p:slider id="slider" for="hidden" minValue="0" maxValue="1000" step="10">
        <p:ajax event="slideEnd" listener="#{testView.onSlideEnd}" update="input" />                    
    </p:slider>

这个解决方案，作为第一个选项，也会丢失实时更新，但这在我的场景中没有问题。

Answer 2

我在下面发布了获取自定义 inputText 的最低要求，但您丢失了它的实时更新。

SliderView.java

private int number1 = 0;
private String number2 = String.valueOf(number1);

public int getNumber1() {
return number1;
}

public void setNumber1(int number1) {
this.number1 = number1;
}



public String getNumber2() {
return number2;
}

public void setNumber2(String number2) {
this.number2 = number2;
}

public void converToInt() {
log.debug(number2);
//TODO should be improved
this.number1 = Integer.parseInt(number2);
}

public void onSlideEnd(SlideEndEvent event) {
log.debug("current number: " + event.getValue());
this.number1 = event.getValue();
this.number2 = String.valueOf(event.getValue());

}

slider.xhtml

<h:form id="bcr_form_2" styleClass="form">
    <h:panelGrid columns="1" style="margin-bottom: 10px">
        <p:inputMask id="output" value="#{sliderView.number2}">
            <p:ajax event="keyup" listener="#{sliderView.converToInt}" update="@form:txt @form:slider" />
            <f:converter converterId="CurrencyConverter" />
            <pe:keyFilter regEx="/[0-9_]/i" />
        </p:inputMask>
        <h:inputHidden id="txt" value="#{sliderView.number1}" />
        <p:slider id="slider" for="txt" style="width: 200px">
            <p:ajax event="slideEnd" listener="#{sliderView.onSlideEnd}" update="@form:output" />
        </p:slider>
    </h:panelGrid>
</h:form>

CurrencyConverter.java

@FacesConverter("CurrencyConverter")
public class CurrencyConverter implements Converter {
  @Override
  public Object getAsObject(FacesContext context, UIComponent component, String value) {
    return value.replace('€', ' ').trim();
  }

  @Override
  public String getAsString(FacesContext context, UIComponent component, Object value) {
    return value.toString() + "€";
  }
}

很高兴能提供帮助。