Appliweb

More dynamic form with ValueListener

Next difficulty: I add a checkbox, and when the user check this box, I want some other fields to appear.

For now, only one input field will be enough, but this field, when displayed, must be filled by the user. It is mandatory.

How do you do that ?

Simply add the checkbox and the input, and map the rendered attribute of the input to the same model value of the checkbox.

The result should be, after a click in the check box:

But, nothing happens.

We have to tell JSF to generate an event as soon as the user click on the checkbox. By default, JSF does nothing.

We simply use our famous attribute partialSubmit= »true »

Now, when we click on the checkbox, we have the dependant input field displayed or not. Great ! But we’re not done yet with this.

Let’s try to input an incorrect value in the integer field, then check the box:

Ooopps, the integer input just gets validated before the checkbox can modify the model value, so the dependant input field don’t display.

We need to set the immediate= »true » attribute:

We must leave the partialSubmit= »true », otherwise no event occurs when clicking on the checkbox.

After testing, same (bad) result ! The validation error is displayed, but what’s annoying is that the checkbox is now checked, without the dependent input field displayed !

We need another trick: This trick, is to call a method when the value of the checkbox is changed. We do it like that:

And the code for the called method is this:

And the result is just perfect! You can check / uncheck, you see the dependant input field disappearing or appearing accordingly, even if bad values are entered.

Icefaces partialSubmit and immediate compared

Now let’s try something else: We want, next to the « Search » button, another one, « Back to Home », that goes directly to another page, let’s say the home page.
If we simply add the button in the .xhtml page, and click on it, we have the following result:

Result:

You can see that we cannot go back to the homepage without setting required fields in the form. That’s clearly not good.
One of the solution to this, according to icefaces documentation, is to use partialSubmit= »true » in the button. This tell Icefaces to ignore all mandatory components that are not filled.
Let’s try:

And the result is working !

But, suppose that you’ve typed a wrong value in the first field, and press « Back to home » ?
Here is the result:

What happened ? partialSubmit bypassed the required check, but not the integer validation.

To avoid these 2 checks, we need to use another attribute in the button, it’s immediate= »true ». That means: When I press the button, just handle the button’s action, and forget about all other fields.

And the result works, even with a bad value in the integer field!

Basic error handling

Seam, JSF and Java all team up together to help developers in displaying error messages to the user.

JSF provides the basis, with the FacesMessage mechanism. Anywhere in your code, you can create FacesMessages, and add them to a FacesMessages object. Then, when the next page displays, the error messages are displayed to the user.

You can use special tags for that in your .xhtml page:

Notice icefaces allows us to set various css style depending on the type of error.

The result is here:

Now, when a validation is bad, we want to highlight the input field, then display the error message next to it. Fortunately, JSF allows a developer to assign an error message to a field, and by default the validators and converters do just that.

And Seam, allows us to define specific html code when a field is in error. This is done using the s:decorate tag, and the best option is to refer to a template file that will be reused for all fields.

Now the input field is declared like that:

and for the field that must not be null or empty, we just add an required= »true » attribute:

and the content of the error template file is this:

The errors css style just sets the component border to Red.

Now, if we try some basic errrors, like by inputing letters in a field mapped to an integer value, here is the result:

Notice the error message is more precise than the previous screenshot. Any error message can be changed in JSF by a simple properties file.

That’s all for basic error handling. Next time, we’ll try to see the behavior of the current page for all errors defined in the first part.

Using Seam, JSF and IceFaces, I’m trying to write THE form.

I mean, even the basic stuff like a good form is not easy to do, and we’re experiencing some troubles in our project.

So I decided to try to write the « perfect » and « working in all cases » form.

What features are needed ?

1. Input must be validated. A integer field should not accept letters for example.
2. Fields can be mandatory or not
3. Erroneous fields should be highlighted, with an error message.
4. I want to select easily a date. Moreover, I want to select it, even if a mandatory field has not been set.
5. A Field can update values and rendering of other fields. Even if some fields contains errors

Well, that’s all for now. I can’t think of others features, but I’m quite sure I forgot some. We’ll add it later.

The basic:

For beginning, I’m just going to write an input field accepting integers, a date selector, and another field that is mandatory.

To do this, a few xhtml lines of code are needed:

1.
2.
3.
4.
5.
6.
7.
8.
9.
10.
11.

<ice:form id="searchForm" >
  <ice:panelGrid id="homePanelGrid" columns="2" columnClasses="rightMenu,leftMenu">
    <ice:outputLabel value="Nb Elements:" />
    <ice:inputText id="nbElements" value="#{searchPage.nbElements}" />
    <ice:outputLabel value="Not null:" />
    <ice:inputText id="notNull" value="#{searchPage.notNull}" />
    <ice:outputLabel value="Start Date:" />
    <ice:selectInputDate id="startDate" value="#{searchPage.startDate}" renderAsPopup="true" />
  </ice:panelGrid>
  <ice:commandButton id="searchAction" value="Search" action="#{searchPage.search}" />
</ice:form>

Quite easy, and the result is here:

Now, if I try to enter an invalid value in the integer field and press the button:

No error message is displayed…

We’ll see in our next chapter how to handle error messages.