HTML and CSS Reference
In-Depth Information
attribute that specifies the number of the columns of the grid (which is
"3"
in the example). In the
index.xhtml
page,
every row in the
<h:panelGrid>
represents an input field with its label and message. The first row is as follows:
<h:outputText value="#{bundle['user.name']}"></h:outputText>
<h:inputText id="userName"
value="#{user.name}"
required="true"
requiredMessage="#{bundle['user.name.validation']}">
</h:inputText>
<h:message for="userName" styleClass="errorMessage"/>
The
<h:outputText>
defines the user name label, the
<h:inputText>
defines the
"userName"
input text, and
finally the
<h:message>
defines the message of the
"userName"
input text in order to display the validation error
messages. The
<h:message>
is linked with the input text using the
for
attribute specifying the ID of the input text
(which is the
"userName"
in this case).
Setting the
required
attribute of the
<h:inputText>
tag to
true
creates a validation on the input text in order to
avoid empty values. If an empty value is entered in the input text, then the message in the
requiredMessage
attribute
will be displayed in the
<h:message>
. The
value
attribute of the
<h:inputText>
tag contains the following JSF value
expression,
#{user.name}
, which links the
name
property of the
User
managed bean with the input text value that is
entered by the user. The code of the
User
managed bean is listed in the “Managed Beans” section.
The second row of the
<h:panelGrid>
represents the
"password"
secret field with its label and message. It is
the same idea of the first row with the difference that it uses the
<h:inputSecret>
tag in order to define a password
input field, and the value of the
<h:inputSecret>
tag is linked with the
password
property of the
User
managed bean
through the
#{user.password}
value expression. The
<h:commandButton>
renders an HTML submit button. In the
page, the login command button is defined as follows:
<h:commandButton value="#{bundle['application.login']}" action="welcome"></h:commandButton>
The
action
attribute of the
<h:commandButton>
can accept a JSF method-binding expression for a managed bean
action method to invoke when the command button is clicked. The managed bean action method must be a public
method and it must return a String value or null. The returned String represents the logical outcome of the action
and is used by the JSF runtime to determine the next page to display by looking if there is a matching navigation
rule defined in the configuration file. However since JSF 2.0, implicit navigation is supported. This allows the
action
attribute to accept a String value that directly points to a target page without the need to define a navigation rule in the
configuration file (for example: if the target page name is
"foo.xhtml"
then the action String outcome must be
"foo"
and the JSF runtime will append the
".xhtml"
extension with the action String value in order to navigate correctly to
the target page). In the
index.xhtml
page, the action attribute is set to
"welcome"
, which means that when the login
command button is clicked, the application will navigate to the
welcome.xhtml
page.
■
the JSF navigation is a topic that has many details, and it will be illustrated in more detail in the next chapters
of the topic. JSF validation and conversion will be illustrated in depth in Chapter 3.
Note
Listing 1-7 shows the
welcome.xhtml
page code, which represents the welcome page of the application.
Listing 1-7.
The welcome.xhtml Page Code
<?xml version='1.0' encoding='UTF-8' ?>
<!DOCTYPE html>
<html xmlns="
http://www.w3.org/1999/xhtml
"
