HTML and CSS Reference
In-Depth Information
Constructing JSF Pages
Weather application has the following XHTML pages:
1.
Home page (
home.xhtml
): It represents the login page of the application, which is shown
in Figure
10-4
.
2.
Registration pages
(/registration/*.xhtml
): They represent the pages which include the
registration flow; the registration pages include the following pages:
a.
registration.xhtml
page, which represents the first registration page in the flow
shown in Figure
10-1
.
b.
extraInfo.xhtml
page, which represents the second registration page in the flow
shown in Figure
10-2
.
c.
final.xhtml
page, which represents the final registration page in the flow shown
in Figure
10-3
.
3.
Weather page (
/protected/weather.xhtml
), which represents the weather page shown
in Figure
10-5
.
Listing 10-1 shows the
home.xhtml
page code.
Listing 10-1.
Home Page XHTML Code
<?xml version='1.0' encoding='UTF-8' ?>
<!DOCTYPE html>
<html xmlns="
http://www.w3.org/1999/xhtml
"
xmlns:ui="
http://java.sun.com/jsf/facelets
"
xmlns:h="
http://java.sun.com/jsf/html
"
>
<ui:composition template="/WEB-INF/templates/main.xhtml">
<ui:define name="title">
#{bundle['application.loginpage.title']}
</ui:define>
<ui:define name="content">
<h:form>
<h:panelGrid columns="3">
<h:outputText value="#{bundle['user.id']}"></h:outputText>
<h:inputText id="userID"
value="#{appUser.id}"
required="true"
requiredMessage="#{bundle['user.id.validation']}">
</h:inputText>
<h:message for="userID" styleClass="errorMessage"/>
<h:outputText value="#{bundle['user.password']}"></h:outputText>
<h:inputSecret id="password"
value="#{appUser.password}"
required="true"
requiredMessage="#{bundle['user.password.validation']}">
</h:inputSecret>
<h:message for="password" styleClass="errorMessage"/>
</h:panelGrid>
