2 Replies Latest reply: Jan 9, 2013 5:25 PM by 857502 RSS

    Formatting Input Text

    857502
      Hi,

      I have a requirement to format the input text into a phone number format[(XXX) XXX-XXXX].

      Implementation:
      1.Defined an input text component in the UI.
              <af:inputText id="it2" value="#{pageFlowScope.testAppBean.phoneNumber}" label="Enter Phone number:">
                  <f:converter converterId="CustomConverter"/>
              </af:inputText>
      
      2.Implemented custom converter as mentioned below.
      public class CustomConverter implements javax.faces.convert.Converter, org.apache.myfaces.trinidad.convert.ClientConverter{    
          public CustomConverter() {
              super();
          }
      
          public Object getAsObject(FacesContext facesContext,
                                    UIComponent uiComponent, String value) {
              if (value == null || (value.trim().length() == 0))
                           {
                               return value;
                           }
                 
                   // format phone numbers to display correctly
                 
                     String phone = value.trim();
                     if (phone.length() == 10) {
                         phone = phone.substring(0, 3) + "-" + phone.substring(3, 6) + "-" + phone.substring(6, 10);
                     }
                     else if (phone.matches("\\d{10}\\s*\\d+")) {
                         phone = phone.replaceAll("\\s+", "");
                         phone = phone.substring(0, 3) + "-" + phone.substring(3, 6) + "-" + phone.substring(6, 10) + " x" + phone.substring(10);
                     }
               
                   return phone;
          }
      
          public String getAsString(FacesContext facesContext,
                                    UIComponent uiComponent, Object value) {        
              
              String phoneNumber = (String)value;
                       if (phoneNumber == null || (phoneNumber.trim().length() == 0))
                        {
                            return "";
                        }
                        String phone = phoneNumber.trim();
      
      
                        if (phone.length() == 10) {
                            phone = phone.substring(0, 3) + "-" + phone.substring(3, 6) + "-" + phone.substring(6, 10);
                        }
                        else if (phone.matches("\\d{10}\\s*\\d+")) {
                            phone = phone.replaceAll("\\s+", "");
                            phone = phone.substring(0, 3) + "-" + phone.substring(3, 6) + "-" + phone.substring(6, 10) + " x" + phone.substring(10);
                        }
                      
                      return phone;
          }
      
          public String getClientLibrarySource(FacesContext facesContext) {
              return null;
          }
      
          public Collection<String> getClientImportNames() {
              return Collections.emptySet();
          }
      
          public String getClientScript(FacesContext facesContext,
                                        UIComponent uiComponent) {
              return null;
          }
      
          public String getClientConversion(FacesContext facesContext,
                                            UIComponent uiComponent) {
              return null;
          }
      }
      3.Registered in faces-config.xml
       <converter>
          <description>A Converter for phone number</description>
          <converter-id>CustomConverter</converter-id>
          <converter-class>view.util.CustomConverter</converter-class>    
          </converter>
      
      4.Ran the application.
      The issue is, upon entering text into text box ... the custom converter is not getting called. Can someone help me in converting the entered text into expected phone number format.

      **Note: I'm expecting that, for every key stroke .... the custom converter will get called.

      Regards,
      Kiran