Archive pour la catégorie ‘Non classé’

Writing the ultimate form

Vendredi 26 février 2010

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.