Java Reference
In-Depth Information
As we can see in the screenshot, as soon as the user clicks on an inputMask component,
the expected format is automatically displayed. All the user needs to do is "ill in the
blanks" to have the input correctly formatted. In our case, we are expecting a phone
number in the format (xxx)xxx-xxxx, where x is an integer value. When we define
our mask, the number
9
represents any numeric value, the letter
a
represents any
alphabetic character, and the asterisk (
*
) represents an alphanumeric character.
For our formatting, we gave the
mask
an attribute of
<p:inputMask>
the value of
(999)-999-9999
, which resulted in the desired mask.
As we can see, using
<p:inputMask>
allows us to enforce correctly formatted data
without having to rely on JSF validation.
Back to our tab discussion, when the user clicks on the
submit
button at the bottom
of the page, data in all tabs is submitted, and is treated as a single
<h:form>
submission, at this point, the JSF lifecycle "kicks in" as usual.
Wizard interfaces
In addition to using tabs, another common way of dividing long forms is by using
wizards. Wizards are useful whenever we need the users to fill in input fields in a
specific order. In our previous example, we had no way to force the user to enter
address information before entering phone number information. This prevents us
from validating that the phone numbers entered correspond to the geographical area
in the address. To solve this problem we can use a wizard interface, which can be
done easily with the PrimeFaces'
<p:wizard>
component. The following example
illustrates how to use this component:
<?xml version='1.0' encoding='UTF-8' ?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml"
xmlns:p="http://primefaces.prime.com.tr/ui"
xmlns:h="http://java.sun.com/jsf/html"
xmlns:ui="http://java.sun.com/jsf/facelets"
xmlns:f="http://java.sun.com/jsf/core">
<ui:composition template="./template.xhtml">
<ui:define name="top">
<h2>Customer Information Data Entry</h2>
</ui:define>
<ui:define name="content">
<h:form>
<h:panelGrid columns="1" style="width: 100%">
