• Struts
  • jQuery
  • Core Java
  • Spring
  • Java IO
  • JavaScript
  • Servlet
  • SQL Tutorial
  • RubyonRails

  • <

    Facelets Templates

    It is a tool which provides the facility to implement the user interface. Templating is a useful Facelets feature that allows you to create a page that will act as the base for the other pages in an application. By using templates, you can reuse code and avoid recreating similarly pages again and again. Templating also helps in maintaining a standard look and feel in an application with a large number of pages.

    Templates Tags



    Tag Function
    ui:component It is used to define a component that is created and added to the component tree.
    ui:composition It is used to define a page composition that optionally uses a template. Content outside of this tag is ignored.
    ui:debug It is used to define a debug component that is created and added to the component tree.
    ui:decorate It is similar to the composition tag but does not disregard content outside this tag.
    ui:define It is used to define content that is inserted into a page by a template.
    ui:fragment It is similar to the component tag but does not disregard content outside this tag.
    ui:include It is used to encapsulate and reuse content for multiple pages.
    ui:insert It is used to insert content into a template.
    ui:param It is used to pass parameters to an included file.
    ui:repeat It is used as an alternative for loop tags, such as c:forEach or h:dataTable.
    ui:remove It is used to remove content from a page.


    Example



    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:ui="http://xmlns.jcp.org/jsf/facelets"  
    xmlns:h="http://xmlns.jcp.org/jsf/html">  
    <h:head>  
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />  
    <h:outputStylesheet name="./css/default.css"/>  
    <h:outputStylesheet name="./css/cssLayout.css"/>  
    <title>Facelets Template</title>  
    </h:head>  
    <h:body>  
    <div id="top">  
    <ui:insert name="top">Top</ui:insert>  
    </div>  
    <div>  
    <div id="left">  
    <ui:insert name="left">Left</ui:insert>  
    </div>  
    <div id="content" class="left_content">  
    <ui:insert name="content">Content</ui:insert>  
    </div>  
    </div>  
    <div id="bottom">  
    <ui:insert name="bottom">Bottom</ui:insert>  
    </div>  
    </h:body>  
    </html>  
    
    


    index.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://xmlns.jcp.org/jsf/html"  
    xmlns:ui="http://xmlns.jcp.org/jsf/facelets">  
    <h:head>  
    <meta http-equiv="Content-Type"  
    content="text/html; charset=UTF-8" />  
    <h:outputStylesheet library="css" name="default.css"/>  
    <h:outputStylesheet library="css" name="cssLayout.css"/>  
    <title>Facelets Template Example</title>  
    </h:head>  
    <h:body>  
    <ui:composition template="./template.xhtml">  
    <ui:define name="header">  
    <h:graphicImage value="/resources/images/header.png"/>  
    </ui:define>  
      
    <ui:define name="index">  
    <h:graphicImage value="/resources/images/index.png"/>  
    </ui:define>  
      
    <ui:define name="content">  
    <h:graphicImage value="/resources/images/content.png"/>  
    </ui:define>  
    <ui:define name="footer">  
    <h:graphicImage value="/resources/images/footer.png"/>  
    </ui:define>  
    </ui:composition>  
    </h:body>  
    </html>  
    
    
    

    ui:composition tag is used to implement template into the index.xhtml file.

    ui:define tag is used to insert content into the implemented template.

















    © copyright 2017-2021 Completedone pvt ltd.