Home › JSF facelet nested template example

JSF facelet nested template example  

Fang
Joined:
08/13/2009
Posts:
164

October 28, 2011 14:49:53    Last update: October 28, 2011 14:52:19
Facelet templates can be nested, for example, a page can use a template which inherits from another template. To demonstrate this, let's start from the simple example and make these additions:
  1. Add a place holder for CSS style sheets in WEB-INF/templates/default.xhtml: 
    <h:head>
    <title>Facelets Template Demo</title>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
    <ui:insert name="style"></ui:insert>
</h:head>

  2. Add a derivative template (WEB-INF/templates/default-style.xhtml) which provides CSS: 
    <?xml version="1.0" encoding="UTF-8"?>
<ui:composition xmlns="http://www.w3.org/1999/xhtml"
    xmlns:ui="http://java.sun.com/jsf/facelets"
	xmlns:f="http://java.sun.com/jsf/core"
	xmlns:h="http://java.sun.com/jsf/html"
	template="default.xhtml">
	<ui:define name="style">
	<style type="text/css">
	body {
	    font-family: arial, sans-serif;
	    width: 700px;
	    margin: auto;
	    margin-top: 2px;
	}

	h2 {
	    padding-left: 10px;
	}

	p {
	    padding: 0;
	    margin: 0;
	}

	#header {
	    background-color: #CCCCFF;
	    border-bottom: #CCCCCC 1px solid;
	    padding: 3px;
	}

	#content {
	    padding: 25px 4px;
	}

	#footer {
	    background-color: #171717;
	    color: #999;
	    text-align: center;
	    padding: 4px;
	    border-top: #999 1px solid;
	    font-size: 85%;
	}
	</style>
	</ui:define>
</ui:composition>

  3. Add a page that uses the styled template (home-style.xhtml): 
    <?xml version="1.0" encoding="UTF-8"?>
<ui:composition xmlns="http://www.w3.org/1999/xhtml"
   xmlns:ui="http://java.sun.com/jsf/facelets"
   xmlns:f="http://java.sun.com/jsf/core"
   xmlns:h="http://java.sun.com/jsf/html"
   template="/WEB-INF/templates/default-style.xhtml">
   <ui:define name="content">
   This is the home page!
   </ui:define>
</ui:composition>

    The only difference between this file and home.xhtml is the template being used.


Compare the display of the pages home.xhtml and home-style.xhtml.
Share |
| Comment  | Tags