In this section, we will create input and output Facelets composition pages, input.xhtml
and output.xhtml
. Create the Facelets pages similar to creating the BasicTemplate.xhtml
, header.xhtml
, and footer.xhtml
to that select the folder to create input.xhtml
and output.xhtml
as webapp
. For example, specify input.xhtml
in Create New XHTML Page, as shown here:
And in Select XHTML Template, select Form Facelet Page Template and click on Finish, as shown in the following screenshot:
In the BasicTemplate.xhtml
file, we defined the structure of a template that may be reused in composition pages. The header and footer div
tags are included in the header.xhtml
and footer.xhtml
files respectively. In the input.xhtml
file, include the BasicTemplate.xhtml
file using the ui:composition
tag's template
attribute. Specify the relative path to the template. We only need to define the content section of the input.xhtml
composition page. The placeholder in the BasicTemplate.xhtml
file is specified using <ui:insert name="content"/>
. Specify the actual definition in the input.xhtml
with <ui:define name="content"/>
. Within the ui:define
tag, add the JSF components for an input text with a corresponding output label, and a command button to invoke the action method in the managed bean catalog
. The components have binding with corresponding managed bean properties using EL expression (http://docs.oracle.com/javaee/6/tutorial/doc/gjddd.html). Enclose the JSF components within h:panelGrid
, which is enclosed within a h:form
tag. The Facelet composition page is listed as follows:
<!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:ui="http://java.sun.com/jsf/facelets" xmlns:h="http://java.sun.com/jsf/html" xmlns:f="http://java.sun.com/jsf/core"> <ui:composition template="/WEB-INF/templates/BasicTemplate.xhtml"> <ui:define name="content"> <h:form> <h:panelGrid columns="2"> <h:outputLabel binding="#{catalog.outputLabel1}" value="SQL Query:" /> <h:inputText binding="#{catalog.inputText1}" /> <h:commandButton value="Submit" binding="#{catalog.commandButton1}" action="#{catalog.commandButton1_action}" /> </h:panelGrid> </h:form> </ui:define> </ui:composition> </html>
In the output.xhtml
file, include BasicTemplate.xhtml
with the template
attribute of the ui:composition
tag. Define the content section using the ui:define
tag. Within the ui:define
tag, add a h:dataTable
tag for a data table. Specify binding to the managed bean property dataTable1
using EL expression. Set the data table border with the border attribute of h:dataTable
and set the number of rows to 5 using the rows
attribute. Within the h:dataTable
tag, add six h:column
tags for the data table columns. Specify binding of the h:column
tags to the managed bean properties.
The output.xhtml
page is listed as follows:
<!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:ui="http://java.sun.com/jsf/facelets" xmlns:h="http://java.sun.com/jsf/html" xmlns:f="http://java.sun.com/jsf/core"> <ui:composition template="/WEB-INF/templates/BasicTemplate.xhtml"> <ui:define name="content"> <h:form> <h:dataTable binding="#{catalog.dataTable1}" border="1" rows="5"> <h:column binding="#{catalog.column1}"></h:column> <h:column binding="#{catalog.column2}"></h:column> <h:column binding="#{catalog.column3}"></h:column> <h:column binding="#{catalog.column4}"></h:column> <h:column binding="#{catalog.column5}"></h:column> <h:column binding="#{catalog.column6}"></h:column> </h:dataTable> </h:form> </ui:define> </ui:composition> </html>
For a more detailed discussion on JSF 2 features, refer to JavaServer Faces 2.0, Essential Guide for Developers, Cengage Learning. Add an error.xhtml
JSF page for displaying an error message. The error.xhtml
page is not a Facelets composition page and just has a h:outputLabel
tag with binding to the errorMsg
managed bean property:
<!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:h="http://java.sun.com/jsf/html" xmlns:f="http://java.sun.com/jsf/core" xmlns:ui="http://java.sun.com/jsf/facelets"> <head> <title>Error Page</title> </head> <body>Error Page<h:outputLabel binding="#{catalog.errorMsg}" value="#{catalog.errorMsg}" /> </body> </html>
The template BasicTemplate.xhtml
, the header header.xhtml
, the footer footer.xhtml
and the input.xhtml
and output.xhtml
composition pages are shown in the Project Explorer tab: