Sunday, January 19, 2014

JSF 2.x: Nested Templates, Decorators, Fragments, and Includes

Ugly for Illustrative Purpose
I was looking at some JSF pages that I had been playing with to see about using decorators, fragments, etc. I thought someone might find it instructional, so I thought I would publish it before deleting the project. It demonstrates using a combination of methods to composite a JSF page into a cohesive unit.

DecoratedPage.xhtml

?
1
2
3
4
5
6
7
8
9
10
11
12
<?xml version='1.0' encoding='UTF-8' ?>
<!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:ui="http://java.sun.com/jsf/facelets">
    <h:head>
        <title>Decorated Table</title>
    </h:head>
    <h:body>
         <ui:include src="decoratedTable.xhtml"/>
    </h:body>
</html> 

decoratedTable.xhtml

?
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
<?xml version='1.0' encoding='UTF-8' ?>
<table xmlns="http://www.w3.org/1999/xhtml"
       xmlns:ui="http://java.sun.com/jsf/facelets" border="1" bgcolor="salmon" width="50%" align="center">
    <caption>
        This is a decorated table.
    </caption>
<tr>
        <td>
            <ui:decorate template="unorderedListTemplate.xhtml">
                <ui:define name="content">
                    <ui:include src="listElements.xhtml"/>
                </ui:define>
            </ui:decorate>
        </td>
    </tr>
</table>

unorderedListTemplate.xhtml

?
1
2
3
4
5
6
<ui:fragment xmlns="http://www.w3.org/1999/xhtml"
             xmlns:ui="http://java.sun.com/jsf/facelets">
    <ul>
        <ui:insert name="content">Content</ui:insert>
    </ul>
</ui:fragment> 

listElements.xhtml

?
1
2
3
4
5
6
7
8
9
<?xml version='1.0' encoding='UTF-8' ?>
<ui:fragment xmlns="http://www.w3.org/1999/xhtml"
             xmlns:h="http://java.sun.com/jsf/html"
             xmlns:ui="http://java.sun.com/jsf/facelets">
<li>A</li>
<li>B</li>
<li>C</li>
<li>D</li>
</ui:fragment> 
Labels: , , , , , , ,

0 comments :

Post a Comment

Subscribe to: Post Comments ( Atom )

Popular Posts