Set default value of input field while using EL statement to read value

Question

So my team has a jsf and we use an EL statement to read in the value of an input box, works fine but by default we have our value set as what should be filled into the field. How can I set a default value for the input while still having the EL statement work. Example:

 <h:inputText value="#{registrationBean.firstName}" styleClass="formEle"/>

I tried

<h:inputText value="#{registrationBean.firstName}First Name" styleClass="formEle"/>

but this breaks the connection when we submit. Any ideas?

Barracks

Answer 1

You're looking for something which is called a "watermark" or "placeholder". At low level, these days this is normally to be done by the HTML5 placeholder attribute:

<input type="text" placeholder="First Name" />

This works of course only in browsers supporting HTML5 and then only with JSF components supporting the new HTML5 attribute. The standard JSF <h:inputText> doesn't support this natively (yet). You'd need to look for 3rd party component libraries supporting this. Among them is PrimeFaces with its <p:watermark>:

<h:inputText id="firstName" value="#{registrationBean.firstName}" />  
<p:watermark for="firstName" value="First Name" />  

If using PrimeFaces is not an option for some reason, you'd need to reinvent it yourself in flavor of a custom component and/or a custom piece of JS/jQuery, exactly like <p:watermark> is doing under the covers.

Pyretotherapy

Answer 2

You could define default value of <h:inputText> in your backing bean in PostConstrut phase.

@ManagedBean(name="registrationBean")   
public class RegistrationBean{

    private String firstName;

    @PostConstruct
    public void init(){
        firstName = "your default value";
    }

}

After page creation value displayed in h:inputText will be as you defined in backing bean. It's kind of work around without any third party library maybe it will help someone.

Univalent

Answer 3

The HTML-Tags rendered by JSF can be modified by JavaScript after loading inserting a placeholder attibute for HTML5:

<script>
  window.onload = function() {
    document.getElementById('email').setAttribute("placeholder", "Email");
    document.getElementById('pwd').setAttribute("placeholder", "Password");
  }
</script>

Quintero

Answer 4

If you decide to use PrimeFaces you are not required to use a watermark, see example below:

<h:form>  
    <p:panel id="panel" header="Client Details" style="margin-bottom:10px;">  
    <p:messages id="messages" />  
    <h:panelGrid columns="2">

        <h:outputLabel for="firstName" value="First Name" />  
        <p:inputText id="firstName" value="#{clientlistpagebean.selectedFieldClient.firstName}" required="true" />  

        <p:outputLabel for="lastName" value="Last Name" />  
        <p:inputText id="lastName" value="#{clientlistpagebean.selectedFieldClient.lastName}" required="true" />  

    </h:panelGrid>  
    </p:panel>  

    <p:commandButton value="Submit" update="panel" style="margin-right:20px;" />  
</h:form>   

Pashm