diff --git a/docs/chapters/batch.adoc b/docs/chapters/batch.adoc
index 17a4215..baa7a2d 100644
--- a/docs/chapters/batch.adoc
+++ b/docs/chapters/batch.adoc
@@ -346,32 +346,34 @@ Replace `<ui:define>` section with `content' name such that it looks like:
 +
 [source, xml]
 ----
-<ui:define name="content">
-    <h1>Movie Sales</h1>
-    <h:form>
-        <h:dataTable value="#{salesBean.salesData}" var="s" border="1">
-            <h:column>
-                <f:facet name="header">
-                    <h:outputText value="Show ID" />
-                </f:facet>
-                #{s.id}
-            </h:column>
-            <h:column>
-                <f:facet name="header">
-                    <h:outputText value="Sales" />
-                </f:facet>
-                #{s.amount}
-            </h:column>
-        </h:dataTable>
-        <h:commandButton
-            value="Run Job"
-            action="sales"
-            actionListener="#{salesBean.runJob()}"/>
-        <h:commandButton
-            value="Refresh"
-            action="sales" />
-    </h:form>
-</ui:define>
+<ui:composition template="../WEB-INF/template.xhtml">
+    <ui:define name="content">
+        <h1>Movie Sales</h1>
+        <h:form>
+            <h:dataTable value="#{salesBean.salesData}" var="s" border="1">
+                <h:column>
+                    <f:facet name="header">
+                        <h:outputText value="Show ID" />
+                    </f:facet>
+                    #{s.id}
+                </h:column>
+                <h:column>
+                    <f:facet name="header">
+                        <h:outputText value="Sales" />
+                    </f:facet>
+                    #{s.amount}
+                </h:column>
+            </h:dataTable>
+            <h:commandButton
+                value="Run Job"
+                action="sales"
+                actionListener="#{salesBean.runJob()}"/>
+            <h:commandButton
+                value="Refresh"
+                action="sales" />
+        </h:form>
+    </ui:define>
+</ui:composition>
 ----
 +
 This code displays the show identifier and sales from that show in a
diff --git a/docs/chapters/jaxrs.adoc b/docs/chapters/jaxrs.adoc
index d1d30c5..d4e41f2 100644
--- a/docs/chapters/jaxrs.adoc
+++ b/docs/chapters/jaxrs.adoc
@@ -118,16 +118,18 @@ Replace `<ui:define>` section with `content' name such that it looks like:
 +
 [source, xml]
 ----
-<ui:define name="content">
-    <h:form prependId="false">
-        <h:selectOneRadio value="#{movieBackingBean.movieId}" layout="pageDirection">
-            <c:forEach items="#{movieClientBean.movies}" var="m">
-                <f:selectItem itemValue="#{m.id}" itemLabel="#{m.name}"/>
-            </c:forEach>
-        </h:selectOneRadio>
-        <h:commandButton value="Details" action="movie" />
-    </h:form>
-</ui:define>
+<ui:composition template="../WEB-INF/template.xhtml">
+    <ui:define name="content">
+        <h:form prependId="false">
+            <h:selectOneRadio value="#{movieBackingBean.movieId}" layout="pageDirection">
+                <c:forEach items="#{movieClientBean.movies}" var="m">
+                    <f:selectItem itemValue="#{m.id}" itemLabel="#{m.name}"/>
+                </c:forEach>
+            </h:selectOneRadio>
+            <h:commandButton value="Details" action="movie" />
+        </h:form>
+    </ui:define>
+</ui:composition>
 ----
 +
 This code fragment invokes `getMovies` method from `MovieClientBean`,
diff --git a/docs/chapters/jms.adoc b/docs/chapters/jms.adoc
index 48adb6b..cf6bf89 100644
--- a/docs/chapters/jms.adoc
+++ b/docs/chapters/jms.adoc
@@ -222,24 +222,26 @@ Replace the `<ui:define>` section with `content' name such that it looks like:
 +
 [source, xml]
 ----
-<ui:define name="content">
-    <h1>Points</h1>
-    <h:form>
-    Queue size:
-        <h:outputText value="#{receivePointsBean.queueSize}"/><p/>
-        <h:inputText value="#{sendPointsBean.message}"/>
-        <h:commandButton
-            value="Send Message"
-            action="points"
-            actionListener="#{sendPointsBean.sendMessage()}"/>
-    </h:form>
-    <h:form>
-        <h:commandButton
-            value="Receive Message"
-            action="points"
-            actionListener="#{receivePointsBean.receiveMessage()}"/>
-    </h:form>
-</ui:define>
+<ui:composition template="../WEB-INF/template.xhtml">
+    <ui:define name="content">
+        <h1>Points</h1>
+        <h:form>
+        Queue size:
+            <h:outputText value="#{receivePointsBean.queueSize}"/><p/>
+            <h:inputText value="#{sendPointsBean.message}"/>
+            <h:commandButton
+                value="Send Message"
+                action="points"
+                actionListener="#{sendPointsBean.sendMessage()}"/>
+        </h:form>
+        <h:form>
+            <h:commandButton
+                value="Receive Message"
+                action="points"
+                actionListener="#{receivePointsBean.receiveMessage()}"/>
+        </h:form>
+    </ui:define>
+</ui:composition>
 ----
 +
 Click on the yellow bulb to resolve namespace prefix/URI mapping for `h:`
diff --git a/docs/chapters/jsf.adoc b/docs/chapters/jsf.adoc
index 47ef3bb..6fea6c4 100644
--- a/docs/chapters/jsf.adoc
+++ b/docs/chapters/jsf.adoc
@@ -51,22 +51,24 @@ Replace `<ui:define>` section with `content' name such that it looks like:
 +
 [source, xml]
 ----
-<ui:define name="content">
-    <h2>Pick a movie</h2>
-    <h:form prependId="false">
-        <h:selectOneRadio 
-            value="#{booking.movieId}"
-            layout="pageDirection"
-            required="true">
-            <f:selectItems
-                value="#{movieFacadeREST.all}"
-                var="m"
-                itemValue="#{m.id}"
-                itemLabel="#{m.name}"/>
-        </h:selectOneRadio>
-        <h:commandButton id="shows" value="Pick a time" action="showtimes" />
-    </h:form>
-</ui:define>
+<ui:composition template="../WEB-INF/template.xhtml">
+    <ui:define name="content">
+        <h2>Pick a movie</h2>
+        <h:form prependId="false">
+            <h:selectOneRadio 
+                value="#{booking.movieId}"
+                layout="pageDirection"
+                required="true">
+                <f:selectItems
+                    value="#{movieFacadeREST.all}"
+                    var="m"
+                    itemValue="#{m.id}"
+                    itemLabel="#{m.name}"/>
+            </h:selectOneRadio>
+            <h:commandButton id="shows" value="Pick a time" action="showtimes" />
+        </h:form>
+    </ui:define>
+</ui:composition>
 ----
 +
 The code builds an HTML form that displays the list of movies as radio
@@ -139,18 +141,20 @@ Replace `<ui:define>` section with `content' name such that it looks like:
 +
 [source, xml]
 ----
-<ui:define name="content">
-    <h2>Show Timings for <font color="red">#{booking.movieName}</font></h2>
-    <h:form>
-        <h:selectOneRadio value="#{booking.startTime}" layout="pageDirection" required="true">
-            <c:forEach items="#{timeslotFacadeREST.all}" var="s">
-                <f:selectItem itemValue="#{s.id},#{s.startTime}" itemLabel="#{s.startTime}"/>
-            </c:forEach>
-        </h:selectOneRadio>
-        <h:commandButton value="Confirm" action="confirm" />
-        <h:commandButton id="back" value="Back" action="booking" immediate="true"/>
-    </h:form>
-</ui:define>
+<ui:composition template="../WEB-INF/template.xhtml">
+    <ui:define name="content">
+        <h2>Show Timings for <font color="red">#{booking.movieName}</font></h2>
+        <h:form>
+            <h:selectOneRadio value="#{booking.startTime}" layout="pageDirection" required="true">
+                <c:forEach items="#{timeslotFacadeREST.all}" var="s">
+                    <f:selectItem itemValue="#{s.id},#{s.startTime}" itemLabel="#{s.startTime}"/>
+                </c:forEach>
+            </h:selectOneRadio>
+            <h:commandButton value="Confirm" action="confirm" />
+            <h:commandButton id="back" value="Back" action="booking" immediate="true"/>
+        </h:form>
+    </ui:define>
+</ui:composition>
 ----
 +
 This code builds an HTML form that displays the chosen movie name and
@@ -246,28 +250,30 @@ Replace `<ui:define>' section with `content' name such that it looks like:
 +
 [source, xml]
 ----
-<ui:define name="content">
-    <c:choose>
-        <c:when test="#{booking.theater == 'none'}">
-            <h2>No theater found, choose a different time</h2>
-            <h:form>
-                Movie name: #{booking.movieName}<p/>
-                Starts at: #{booking.startTime}<p/>
-                <h:commandButton id="back" value="Back" action="showtimes"/>
-            </h:form>
-        </c:when>
-        <c:otherwise>
-            <h2>Confirm ?</h2>
-            <h:form>
-                Movie name: #{booking.movieName}<p/>
-                Starts at: #{booking.startTime}<p/>
-                Theater: #{booking.theater}<p/>
-                <h:commandButton id="next" value="Book" action="print"/>
-                <h:commandButton id="back" value="Back" action="showtimes"/>
-            </h:form>
-        </c:otherwise>
-    </c:choose>
-</ui:define>
+<ui:composition template="../WEB-INF/template.xhtml">
+    <ui:define name="content">
+        <c:choose>
+            <c:when test="#{booking.theater == 'none'}">
+                <h2>No theater found, choose a different time</h2>
+                <h:form>
+                    Movie name: #{booking.movieName}<p/>
+                    Starts at: #{booking.startTime}<p/>
+                    <h:commandButton id="back" value="Back" action="showtimes"/>
+                </h:form>
+            </c:when>
+            <c:otherwise>
+                <h2>Confirm ?</h2>
+                <h:form>
+                    Movie name: #{booking.movieName}<p/>
+                    Starts at: #{booking.startTime}<p/>
+                    Theater: #{booking.theater}<p/>
+                    <h:commandButton id="next" value="Book" action="print"/>
+                    <h:commandButton id="back" value="Back" action="showtimes"/>
+                </h:form>
+            </c:otherwise>
+        </c:choose>
+    </ui:define>
+</ui:composition>
 ----
 +
 The code displays the selected movie, show timing, and theater if
@@ -292,15 +298,17 @@ Replace `<ui:define>` section with `content' name such that it looks like:
 +
 [source, xml]
 ----
-<ui:define name="content">
-    <h2>Reservation Confirmed</h2>
-    <h:form>
-        Movie name: #{booking.movieName}<p/>
-        Starts at: #{booking.startTime}<p/>
-        Theater: #{booking.theater}<p/>
-        <h:commandButton id="home" value="home" action="goHome" /><p/>
-    </h:form>
-</ui:define>
+<ui:composition template="../WEB-INF/template.xhtml">
+    <ui:define name="content">
+        <h2>Reservation Confirmed</h2>
+        <h:form>
+            Movie name: #{booking.movieName}<p/>
+            Starts at: #{booking.startTime}<p/>
+            Theater: #{booking.theater}<p/>
+            <h:commandButton id="home" value="home" action="goHome" /><p/>
+        </h:form>
+    </ui:define>
+</ui:composition>
 ----
 +
 This code displays the movie name, show timings, and the selected
diff --git a/docs/chapters/json.adoc b/docs/chapters/json.adoc
index 349b5f8..4140903 100644
--- a/docs/chapters/json.adoc
+++ b/docs/chapters/json.adoc
@@ -199,29 +199,31 @@ Replace `<ui:define>` section with `content' name such that it looks like:
 +
 [source, xml]
 ----
-<ui:define name="content">
-<h1>Add a New Movie</h1>
-<h:form>
-    <table cellpadding="5" cellspacing="5">
-        <tr>
-            <th align="left">Movie Id:</th>
-            <td><h:inputText value="#{movieBackingBean.movieId}"/></td>
-        </tr>
-        <tr>
-            <th align="left">Movie Name:</th>
-            <td><h:inputText value="#{movieBackingBean.movieName}"/> </td>
-        </tr>
-        <tr>
-            <th align="left">Movie Actors:</th>
-            <td><h:inputText value="#{movieBackingBean.actors}"/></td>
-        </tr>
-    </table>
-    <h:commandButton
-        value="Add"
-        action="movies"
-        actionListener="#{movieClientBean.addMovie()}"/>
-</h:form>
-</ui:define>
+<ui:composition template="../WEB-INF/template.xhtml">
+    <ui:define name="content">
+    <h1>Add a New Movie</h1>
+    <h:form>
+        <table cellpadding="5" cellspacing="5">
+            <tr>
+                <th align="left">Movie Id:</th>
+                <td><h:inputText value="#{movieBackingBean.movieId}"/></td>
+            </tr>
+            <tr>
+                <th align="left">Movie Name:</th>
+                <td><h:inputText value="#{movieBackingBean.movieName}"/> </td>
+            </tr>
+            <tr>
+                <th align="left">Movie Actors:</th>
+                <td><h:inputText value="#{movieBackingBean.actors}"/></td>
+            </tr>
+        </table>
+        <h:commandButton
+            value="Add"
+            action="movies"
+            actionListener="#{movieClientBean.addMovie()}"/>
+    </h:form>
+    </ui:define>
+</ui:composition>
 ----
 +
 This code creates a form to accept input of `id`, `name`, and `actors` of a
diff --git a/docs/chapters/websocket.adoc b/docs/chapters/websocket.adoc
index 9ad70fd..12f1b02 100644
--- a/docs/chapters/websocket.adoc
+++ b/docs/chapters/websocket.adoc
@@ -105,33 +105,35 @@ In this file, remove <ui:define> sections where name attribute value is
 Replace `<ui:define>` section with `content' name such that it looks like:
 +
 [source,xml]
-<ui:define name="content">
-    <form action="">
-        <table>
-            <tr>
-                <td>
-                    Chat Log<br/>
-                    <textarea readonly="true" rows="6" cols="50" id="chatlog"></textarea>
-                </td>
-                <td>
-                    Users<br/>
-                    <textarea readonly="true" rows="6" cols="20" id="users"></textarea>
-                </td>
-            </tr>
-            <tr>
-                <td colspan="2">
-                    <input id="textField" name="name" value="Duke" type="text"/>
-                    <input onclick="join();" value="Join" type="button"/>
-                    <input onclick="send_message();" value="Send" type="button"/><p/>
-                    <input onclick="disconnect();" value="Disconnect" type="button"/>
-                </td>
-            </tr>
-        </table>
-    </form>
-    <div id="output"></div>
-        <script language="javascript" type="text/javascript"
-            src="${facesContext.externalContext.requestContextPath}/chat/websocket.js"></script>
-</ui:define>
+<ui:composition template="../WEB-INF/template.xhtml">
+    <ui:define name="content">
+        <form action="">
+            <table>
+                <tr>
+                    <td>
+                        Chat Log<br/>
+                        <textarea readonly="true" rows="6" cols="50" id="chatlog"></textarea>
+                    </td>
+                    <td>
+                        Users<br/>
+                        <textarea readonly="true" rows="6" cols="20" id="users"></textarea>
+                    </td>
+                </tr>
+                <tr>
+                    <td colspan="2">
+                        <input id="textField" name="name" value="Duke" type="text"/>
+                        <input onclick="join();" value="Join" type="button"/>
+                        <input onclick="send_message();" value="Send" type="button"/><p/>
+                        <input onclick="disconnect();" value="Disconnect" type="button"/>
+                    </td>
+                </tr>
+            </table>
+        </form>
+        <div id="output"></div>
+            <script language="javascript" type="text/javascript"
+                src="${facesContext.externalContext.requestContextPath}/chat/websocket.js"></script>
+    </ui:define>
+</ui:composition>
 +
 The code builds an HTML form that has two textareas – one to display the
 chat log and the other to display the list of users currently logged. A