JSF 2: Page Templating with Facelets

Templating helps to avoid repetition in facelets pages. This used to create layout and styling for web application. By using facelets tags one can create web interface layout easily.

Basic Steps
• Define a template file
– Content that will appear in all clients is entered directly
– Content that can be replaced in client files is marked with ui:insert (with default values in case client does not supply content)
• Define a client file that uses the template
– Use ui:composition to specify the template file used
– Use ui:define to override content for each replaceable section in template (marked in template with ui:insert)
-Use ui:include to includes content from another XHTML page– Similar to JSP’s jsp:include
• Access the client file in a browser
– http://host/app/clientfile.xhtml
• Users never access template files directly

Template File: Example
(/templates/page-template.xhtml)

<!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><ui:insert name="title">Title</ui:insert></title>
        <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
        <link href="./resources/css/default.css" rel="stylesheet" type="text/css" />
        <link href="./resources/css/cssLayout.css" rel="stylesheet" type="text/css" />
    </h:head>
    <h:body>
        <div id="container">
            <div id="top">
                <ui:insert name="top">Top</ui:insert>
            </div>
            <div>
                <div>
                    <div id="right">
                        <ui:insert name="right">Right</ui:insert>
                    </div>
                    <div id="content" class="right_content">
                        <ui:insert name="content">Content</ui:insert>
                    </div>
                </div>
            </div>
            <div id="bottom">
                <ui:insert name="bottom">&copy; Copyright: javaknowledge.info</ui:insert>
            </div>
        </div>
    </h:body></html>

index.xhtml

<?xml version='1.0' encoding='UTF-8' ?>
<!DOCTYPE html>
<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">

    <ui:composition template="/templates/page-template.xhtml">
        <ui:define name="title">
            Title for Index page
        </ui:define>
        <div id="container">
            <ui:define name="top">
                <div id="blank"></div>
                <div id="menu">
                    <ui:include src="menu.xhtml"/>
                </div>
            </ui:define>
            <ui:define name="right">
                <h2>Sample Header</h2>
                <p>Text to be included to right content</p>
                <p>Text to be included to right content</p>
                <p>Text to be included to right content</p>
                <p>Text to be included to right content</p>
                <p>Text to be included to right content</p>
                <p>Text to be included to right content</p>
            </ui:define>
            <ui:define name="content">
                <h:form id="ff">
                    <h2>Content here.</h2> <p>column long long column very long fill fill fill long text text column text silly very make long very fill silly make make long make text fill very long text column silly silly very column long very column filler fill long make filler long silly very long silly silly silly long filler make column filler make silly long long fill very.</p>
                    <p>very make make fill silly long long filler column long make silly silly column filler fill fill very filler text fill filler column make fill make text very make make very fill fill long make very filler column very long very filler silly very make filler silly make make column column </p>
                    <h:graphicImage name="admin.gif" library="images" style="float: right"/>
                    <h:panelGrid columns="2">
                        <h:outputLabel>User Name</h:outputLabel> 
                        <h:inputText id="un" />
                        <h:outputLabel>Password</h:outputLabel> 
                        <h:inputSecret id="pp" />
                        <h:commandButton value="Login" action="#"/>
                        <h:commandButton value="Reset" action="#"/>
                    </h:panelGrid>
                </h:form>
            </ui:define>
        </div>
    </ui:composition>

</html>

menu.xhtml

<?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">
    <h:head>
        <title>Facelet Title</title>
    </h:head>
    <h:body>
        <a href="#{request.contextPath}/index.xhtml">Home</a> |
        <a href="#{request.contextPath}/contact.xhtml">Contact</a> |
        <a href="#{request.contextPath}/privacy.xhtml">Privacy</a>
    </h:body>
</html>

Screenshot:
jsf_page_templating

 

admin

Hello! I am Md. Abdul Bari; founder and admin of javaknowledge; currently providing training as a J2EE faculty in The Computers Ltd. Dhaka, Bangladesh under an IT Scholarship project provided by IDB-BISEW. I am a self learner and passionate about training and writing. I am always trying my best to share my knowledge through my blog.

More Posts - Website

Follow Me:
TwitterFacebookGoogle Plus

4,273` Total Views

Leave a Reply

Your email address will not be published. Required fields are marked *


5 × two =