HTML and CSS Reference
In-Depth Information
Listing 1-6. The index.xhtml Page
<?xml version='1.0' encoding='UTF-8' ?>
<!DOCTYPE html>
<html xmlns=" "
xmlns:ui=" "
xmlns:h=" " >
<ui:composition template="/WEB-INF/templates/simple.xhtml">
<ui:define name="title">
<ui:define name="content">
<h:panelGrid columns="3">
<h:outputText value="#{bundle['']}"></h:outputText>
<h:inputText id="userName"
<h:message for="userName" styleClass="errorMessage"/>
<h:outputText value="#{bundle['user.password']}"></h:outputText>
<h:inputSecret id="password"
<h:message for="password" styleClass="errorMessage"/>
<h:commandButton value="#{bundle['application.login']}" action="welcome">
</h:commandButton> <br/><br/>
In order to include the simple.xhtml template page in the index.xhtml page (or any other XHTML page), the
<ui:composition> tag is used, specifying its template attribute with the relative path of the template page. The
<ui:composition> tag includes <ui:define> tags. The <ui:define> tag is used for overriding the template content
that is defined by the <ui:insert> tag if the tags are matched using the name attribute.
In the index.xhtml page, the "title" and the "content" of the template are overridden with the page title and
the page content. The page content includes an <h:form> tag that is required for all the JSF input components which
participate in the form submission.
In order to make the internal layout of the form, the <h:panelGrid> tag is used. The <h:panelGrid> tag is a layout
container that renders the JSF components in a grid of rows and columns. The <h:panelGrid> tag has a columns
Search WWH ::

Custom Search