Jsf default textbox value

Question

I would like to find out how to set the default value for the textbox field in JSF, the field will be empty onFocus. If the user does not enter any value it will again show the default value.

I was able to find the solution using JS with regular html textbox but could not find anything Using JSF.

<h:inputText id="DT_INPUT" value="#{examplebean.date}" maxlength="11" size="10" />

something like

<h:inputText id="DT_INPUT" value="dd-MMM-yyyy" maxlength="11" size="10" />

but how to tie the actual value back to the bean?

Thanks, Sai.

Answer 1

I would recommend you to look at some component libraries which already have components with necessary functionality. As I understand it's a jsf way. Here is an example of input text with hint.

Answer 2

• you can set an initial value to examplebean.date (in the java code or the bean), and it will appear in the text field
• what works with plain html, works with jsf as well, because it's transformed into html
• for date components, look at richfaces, primefaces, icefaces, trinidad, etc for ready-to-use calendar components.

Answer 3

If I understand your question correctly, your example works okay as JSF. The tag h: implies that you are using JSF already.

In JSF , The Screen components (in HTML Terms - Input Controls) are bound to a java class properties (or Attributes) , When the JSF Page is rendered (Please refer to Debug JSF Life Cycle ), the default or the manually set values are set (if request scoped).

The values are set and retrieved using Java Expression Language.

In your example, value="#{examplebean.date}" , examplebean is your bean (which you should have configured in your faces-config) and date is the attribute (for which you will have a corresponding setter and getter) - accessing the java class properties at run time is the biggest advantage of Expression Language.

Refer BalusC Posts, Get JSF API's , Expression Language in Sun sites.

Answer 4

As a completely different alternative without the need for component libraries, you could also achieve this with just a h:outputLabel and a good shot of CSS/JS.

JSF:

<h:form id="form">
    <h:outputLabel for="inputId" value="dd-MM-yyyy" />
    <h:inputText id="inputId" value="#{bean.date}" />
</h:form>

CSS:

#form label {
    position: absolute;
    cursor: text;
    color: gray;
    padding: 2px;
}

JS (actually using jQuery since it insanely eases DOM traversion and manipulation):

$(document).ready(function() {
    $('#form input').focus(function() {
        $('label[for=' + $(this).attr('id') + ']').hide();
    }).blur(function() {
        if (!$(this).val().length) $('label[for=' + $(this).attr('id') + ']').show();
    });
});

Here's a live demo (based on plain HTML).

Answer 5

PrimeFaces has a watermark component;

http://www.primefaces.org:8080/prime-showcase/ui/watermark.jsf