格式化PrimeFaces滑塊InputText

Question

我有一個帶有關聯的inputText的PrimeFaces滑塊。 一切工作正常，除非我找不到格式化inputText值的方法。 我希望inputText以貨幣格式顯示並獲取值。

到目前為止，我已經嘗試過：

• 用pe:inputNumber組件更改p:inputText會導致異常，因為無法設置值（滑塊根本無法與inputNumber配合使用）；
• 將p:slider目標設置為與p:inputText具有相同值（附加了f:convertNumber ）的h:inputHidden組件：在通過滑塊更改值時有效，但是在使用inputText更改滑塊值時不會更新（在后台拋出UpdateModelException）；

更新：后來發現，拋出第二個選項異常是因為f:convertNumber需要數字類型的bean屬性，而不是整數。 下面顯示的兩個解決方案都可以解決此問題。

有沒有使用jQuery的簡單方法？

謝謝！

菲利佩

Answer 1

下面，我發布了獲取自定義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() + "€";
  }
}

很高興為您提供幫助。

Answer 2

因此，有兩種方法可以解決此問題：

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>

作為第一個選擇，該解決方案也會丟失實時更新，但是在我的方案中這沒問題。