CODEWITHSUNDEEP
jsf-2formatnumbersjsf-1.2
heng heng
heng heng

Reputation: 693

how to format the number with comma when user lost focus in <h:inputText>

I want to format number with comma in jsf eg: when i type 100000 in the text field and when i go other field, the text field should display 100,000. I know it can be done in javascript, but I wonder know whether it can be done by jsf build in function. I try the with groupingUsed="true", but still doesn't work for me.

here is some of my jsf code:

    <h:outputLabel for="testing" value="testing ID *" />                      
    <h:inputText id="testing" required="true" label="testing" value="#{user.testing}" style="width:200px"  >  
      <f:convertNumber groupingUsed="true" for="testing"  /> 
    </h:inputText>

edited: I wish to know how to do in jsf 1.2 and jsf 2 both version.

Upvotes: 1

Views: 8615

Answers (2)

Mr.J4mes
Mr.J4mes

Reputation: 9266

Without the Ajax capability of JSF 2.0, I think you should use a combination of client-side JavaScript and JSF's Converter. The client-side script will be something like this:

<script type="text/javascript">
   function convertFormat() {
      // function to add comma 
   }
</script>

<h:inputText id="testing" required="true" label="testing" value="#{user.testing}" style="width:200px" onblur="convertFormat();" />

And on the server side you should have a Converter to get the original number:

@FacesConverter("converter.numberFormatConverter")
public class NumberFormatConverter implements Converter {

    @Override
    public Object getAsObject(FacesContext context, UIComponent component, String value) {        
        value = value.replaceAll(",", "");
        return Long.parseLong(value); 
    }

    @Override
    public String getAsString(FacesContext context, UIComponent component, Object value) {
        // add back the comma
    }

}

Your getAsObject method is the place for you to convert from HTML's input text to the type of input that you want (I used Long in my example). The getAsString method is the place for you to do the opposite thing.

I will let you figure out on your own how to add , in the client-side script. Hope this helps!

Upvotes: 0

Ventsislav Marinov
Ventsislav Marinov

Reputation: 604

try:

<f:convertNumber pattern="###,###" />

Upvotes: 2

Related Questions