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['']}"></h:outputText>
<h:inputText id="userName"
<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, #{} , 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.
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=" "
Search WWH ::

Custom Search