Creating input and output Facelets composition pages

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:

Creating input and output Facelets composition pages

And in Select XHTML Template, select Form Facelet Page Template and click on Finish, as shown in the following screenshot:

Creating input and output Facelets composition pages

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:

Creating input and output Facelets composition pages
..................Content has been hidden....................

You can't read the all page of ebook, please click here login for view all page.
Reset