JSF and Tiles

Sang Shin, sang.shin@sun.com, Sun Microsystems, www.javapassion.com/j2ee



In this lab, you are going to build JSF applications using Tiles. The sample applications used in this lab are created from the published source code from Core JSF book written by David Geary and Cay Horstmann. (The book is highly recommended.)
Expected duration: 90 minutes (excluding homework)


Prerequisites

This hands-on lab assumes you have some basic knowledge or programming experience on the following  technologies.


Software Needed

Before you begin, you need to install the following software on your computer. 


OS platforms you can use

Change Log



Lab Exercises


Exercise 1: Build and run "core-book-viewer" sample application

Learning points:


(1.1) Open, build, and run "core-book-viewer" sample application

0. Start NetBeans IDE. 
1. Open core-book-viewer NetBeans project. 

2. Build and run core-book-viewer project.




(1.2)  Look under the hood of the  "core-book-viewer" sample application


1.  book.jsp

<html>
    <%@ taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c" %>
    <%@ taglib uri="http://java.sun.com/jsf/core"  prefix="f" %>
    <%@ taglib uri="http://java.sun.com/jsf/html"  prefix="h" %>
   
    <f:view>
        <f:loadBundle basename="com.corejsf.messages" var="msgs"/>
        <head>              
            <link href="styles.css" rel="stylesheet" type="text/css"/>
            <title><h:outputText value="#{msgs.bookWindowTitle}"/></title>
        </head>
       
        <body>
            <h:form>
                <h:panelGrid columns="2" styleClass="book"
                             columnClasses="menuColumn, chapterColumn">
                    <f:facet name="header">
                        <h:panelGrid columns="1" styleClass="bookHeader">
                            <h:graphicImage value="#{book.image}"/>
                            <h:outputText value="#{msgs[book.titleKey]}"
                                          styleClass='bookTitle'/>
                            <hr/>
                        </h:panelGrid>
                    </f:facet>
                   
                    <h:dataTable value="#{book.chapterKeys}" var="chapterKey"
                                 styleClass="links" columnClasses="linksColumn">
                        <h:column>
                            <h:commandLink>
                                <h:outputText value="#{msgs[chapterKey]}"/>
                                <f:param name="chapter" value="#{chapterKey}"/>
                            </h:commandLink>
                        </h:column>
                    </h:dataTable>
                   
                    <c:import url="${param.chapter}.html"/>
                </h:panelGrid>
            </h:form>
        </body>
    </f:view>
</html>

2.  chapter1.html

<h2>
                            CHAPTER I
</h2>
<h3>
                      Down the Rabbit-Hole
</h3>
<p>
  Alice was beginning to get very tired of sitting by her sister
on the bank, and of having nothing to do:  once or twice she had
peeped into the book her sister was reading, but it had no
pictures or conversations in it, `and what is the use of a book,'
thought Alice `without pictures or conversation?'
<p>


Summary

In this exercise,  you have built and run a ready-to-build-and-run "core-book-viewer" sample application to get a sense how the application works. 

                                                                                                                        return to the top



Exercise 2: Build and run "core-book-viewer-include" sample application


Learning points:

(2.1) Open, build, and run "core-book-viewer-include" sample application

1. Open core-book-viewer-include NetBeans project. 

2. Build and run core-book-viewer-include project.



(2.2)  Look under the hood of the  "core-book-viewer-include" sample application


1. book.jsp

<html>
    <%@ taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c" %>
    <%@ taglib uri="http://java.sun.com/jsf/core"  prefix="f" %>
    <%@ taglib uri="http://java.sun.com/jsf/html"  prefix="h" %>
   
    <f:view>
        <f:loadBundle basename="com.corejsf.messages" var="msgs"/>
        <head>              
            <link href="styles.css" rel="stylesheet" type="text/css"/>
            <title><h:outputText value="#{msgs.bookWindowTitle}"/></title>
        </head>
       
        <body>
            <h:form>
                <h:panelGrid columns="2" styleClass="book"
                             columnClasses="menuColumn, chapterColumn">
                    <f:facet name="header">
                        <f:subview id="header">
                            <c:import url="/bookHeader.jsp"/>
                        </f:subview>
                    </f:facet>
                   
                    <f:subview id="menu">
                        <c:import url="/bookMenu.jsp"/>
                    </f:subview>
                   
                    <c:import url="/bookContent.jsp"/>
                </h:panelGrid>
            </h:form>
        </body>
    </f:view>
</html>


Summary

In this exercise,  you have built and run a ready-to-build-and-run "core-book-viewer-include" sample application to get a sense how the application works. 

                                                                                                                        return to the top


Exercise 3: Build and run "core-book-viewer-tiles" sample application


Leaning points:

(3.1) Open, build, and run "core-book-viewer-tiles" sample application

1. Open core-book-viewer-tiles NetBeans project. 

2. Remove broken references and add library files.

3. Build and run core-book-viewer-tiles project.



(3.2)  Look under the hood of the  "core-book-viewer-tiles" sample application


1. web.xml

<?xml version="1.0"?>
<web-app xmlns="http://java.sun.com/xml/ns/javaee"
         xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"
         xsi:schemaLocation="http://java.sun.com/xml/ns/javaee
         http://java.sun.com/xml/ns/javaee/web-app_2_5.xsd"
         version="2.5">
    <servlet>
        <servlet-name>Tiles Servlet</servlet-name>
        <servlet-class>org.apache.tiles.servlets.TilesServlet</servlet-class>
        <init-param>
            <param-name>definitions-config</param-name>
            <param-value>/WEB-INF/tiles.xml</param-value>
        </init-param>
        <load-on-startup>2</load-on-startup>
    </servlet>  
   
    <servlet>
        <servlet-name>Faces Servlet</servlet-name>
        <servlet-class>javax.faces.webapp.FacesServlet</servlet-class>
        <load-on-startup>1</load-on-startup>
    </servlet>  
   
    <servlet-mapping>
        <servlet-name>Faces Servlet</servlet-name>
        <url-pattern>*.faces</url-pattern>
    </servlet-mapping> 
   
    <welcome-file-list>
        <welcome-file>index.html</welcome-file>
    </welcome-file-list>
</web-app>

2. tiles.xml

<!DOCTYPE tiles-definitions PUBLIC
"-//Apache Software Foundation//DTD Tiles Configuration//EN"
"http://jakarta.apache.org/struts/dtds/tiles-config.dtd">

<tiles-definitions>
    <definition name="book" path="/headerMenuContentLayout.jsp">
        <put name="gridClass"           value="headerMenuContent"/>
        <put name="headerClass"         value="header"/>
        <put name="menuColumnClass"     value="menuColumn"/>
        <put name="contentColumnClass"  value="contentColumn"/>
       
        <put name="header"  value="/bookHeader.jsp"/>
        <put name="menu"    value="/bookMenu.jsp"/>
        <put name="content" value="/bookContent.jsp"/>
    </definition>
</tiles-definitions>

3. headerMenuContentLayout.jsp

<%@ taglib uri="http://java.sun.com/jsf/core"  prefix="f" %>
<%@ taglib uri="http://java.sun.com/jsf/html"  prefix="h" %>
<%@ taglib uri="http://jakarta.apache.org/tiles" prefix="tiles" %>

<tiles:importAttribute scope="request"/>

<h:panelGrid columns="2" styleClass="#{gridClass}"
             headerClass="#{headerClass}"
             columnClasses="#{menuColumnClass}, #{contentColumnClass}">
    <f:facet name="header">
        <f:subview id="header">
            <tiles:insert attribute="header" flush="false"/>
        </f:subview>
    </f:facet>
   
    <f:subview id="menu">
        <tiles:insert attribute="menu" flush="false"/>
    </f:subview>
   
    <f:subview id="content">
        <tiles:insert attribute="content" flush="false"/>
    </f:subview>
</h:panelGrid>

4.  book.jsp

<html>
    <%@ taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c" %>
    <%@ taglib uri="http://java.sun.com/jsf/core"  prefix="f" %>
    <%@ taglib uri="http://java.sun.com/jsf/html"  prefix="h" %>
    <%@ taglib uri="http://jakarta.apache.org/tiles" prefix="tiles" %>
   
    <f:view>
        <f:loadBundle basename="com.corejsf.messages" var="msgs"/>
        <head>              
            <link href="styles.css" rel="stylesheet" type="text/css"/>
            <title><h:outputText value="#{msgs.bookWindowTitle}"/></title>
        </head>
       
        <body>
            <f:subview id="book">
                <h:form>
                    <tiles:insert definition="book" flush="false"/>
                </h:form>
            </f:subview>
        </body>
    </f:view>
</html>


Exercise 4: Build and run "core-book-viewer-tiles-extends" sample application


Learning points:

(4.1) Open, build, and run "core-book-viewer-tiles-extends" sample application

1. Open core-book-viewer-tiles-extends NetBeans project. 

2. Add library files.

2. Build and run core-book-viewer-tiles-extends project.



(4.2)  Look under the hood of the  "core-book-viewer-tiles-extends" sample application


1. tiles.xml

<!DOCTYPE tiles-definitions PUBLIC
"-//Apache Software Foundation//DTD Tiles Configuration//EN"
"http://jakarta.apache.org/struts/dtds/tiles-config.dtd">

<tiles-definitions>
    <definition name="header-menu-content" path="/headerMenuContentLayout.jsp">
        <put name="gridClass"           value="headerMenuContent"/>
        <put name="headerClass"         value="header"/>
        <put name="menuColumnClass"     value="menuColumn"/>
        <put name="contentColumnClass"  value="contentColumn"/>
    </definition>
   
    <definition name="book" extends="header-menu-content">
        <put name="header"  value="/bookHeader.jsp"/>
        <put name="menu"    value="/bookMenu.jsp"/>
        <put name="content" value="/bookContent.jsp"/>
    </definition>
</tiles-definitions>



Exercise 5: Build and run "core-library" sample application - not working



(5.1) Open, build, and run "core-library" sample application

1. Open core-library NetBeans project. 

2. Add library files.

3. Build and run core-library project.






(5.2)  Look under the hood of the  "core-library" sample application


1. library.jsp

<html>
   <%@ taglib uri="http://java.sun.com/jsf/core"  prefix="f" %>
   <%@ taglib uri="http://java.sun.com/jsf/html"  prefix="h" %>
   <%@ taglib uri="http://jakarta.apache.org/tiles" prefix="tiles" %>

   <f:view>
      <f:loadBundle basename="com.corejsf.messages" var="msgs"/>
      <head>              
         <link href="styles.css" rel="stylesheet" type="text/css"/>
         <title><h:outputText value="#{msgs.libraryWindowTitle}"/></title>
      </head>

      <body>
         <f:subview id="library">
            <h:form>
               <tiles:insert definition="library" flush="false"/>
            </h:form>
         </f:subview>
      </body>
   </f:view>
</html>

2. tiles.xml

<?xml version="1.0" encoding="ISO-8859-1" ?>

 <!DOCTYPE tiles-definitions PUBLIC
  "-//Apache Software Foundation//DTD Tiles Configuration 1.1//EN"
  "http://struts.apache.org/dtds/tiles-config_1_1.dtd">

<tiles-definitions>
   <definition name="menu-header-content" path="/headerMenuContentLayout.jsp">
      <put name="gridClass"           value="headerMenuContent"/>
      <put name="headerClass"         value="header"/>
      <put name="menuColumnClass"     value="menuColumn"/>
      <put name="contentColumnClass"  value="contentColumn"/>
   </definition>

   <definition name="book" extends="menu-header-content">
      <put name="header"  value="/bookHeader.jsp"/>
      <put name="menu"    value="/bookMenu.jsp"/>
      <put name="content" value="/bookContent.jsp"/>
   </definition>

   <definition name="library" path="/libraryLayout.jsp"
         controllerClass="com.corejsf.LibraryTileController">
      <put name="header" value="/bookSelector.jsp"/>
      <put name="book" value="book"/>
   </definition>
</tiles-definitions>

3. libraryLayout.jsp

<%@ taglib uri="http://java.sun.com/jsf/core"  prefix="f" %>
<%@ taglib uri="http://java.sun.com/jsf/html"  prefix="h" %>
<%@ taglib uri="http://jakarta.apache.org/tiles" prefix="tiles" %>

<h:panelGrid columns="1" styleClass="book" headerClass="libraryHeader">
   <f:facet name="header">
      <f:subview id="header">
         <tiles:insert attribute="header" flush="false"/>
      </f:subview>
   </f:facet>

   <f:subview id="book">
      <tiles:insert attribute="book" flush="false"/>
   </f:subview>
</h:panelGrid>

4. LibraryTileController.java

import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;
import javax.servlet.http.HttpSession;
import org.apache.tiles.ComponentContext;
import org.apache.tiles.Controller;

public class LibraryTileController implements Controller {
   public void execute(ComponentContext tilesContext,
                 HttpServletRequest request,
                      HttpServletResponse response,
                 ServletContext context)
                 throws IOException, ServletException {
      HttpSession session = request.getSession();

      String chapter = (String) request.getParameter("chapter");
      session.setAttribute("chapter", chapter == null || "".equals(chapter) ?
                           "chapter1" : chapter);

      Library library = (Library) session.getAttribute("library");

      if(library == null) {
         library = new Library();
         session.setAttribute("library", library);
      }

      Book selectedBook = library.getSelectedBook();
      if(selectedBook != null) {
         session.setAttribute("book", selectedBook);
      }
   }
   public void perform(ComponentContext tilesContext,
                 HttpServletRequest request,
                      HttpServletResponse response,
                 ServletContext context)
                 throws IOException, ServletException {
      HttpSession session = request.getSession();
        execute(tilesContext, request, response, context);
    }
}

Homework Exercise (for people who are taking Sang Shin's "Java EE Programming online course")


<to be provided>

                                                                                                                    return to the top