CodesJava

Easy learning with example program codes

Jsf facelets template tutorial


JSF Template:

JSF provides the following tags for building and using a template layout.

Tag Description
ui:insert It defines content in a template which have to be replaced by the file that use the template. The ui:define tag can be used to replace its contents.
ui:define It is used to define the contents which is Inserts into template with a matching “ui:insert” tag.
ui:include It is used to include contents of one xhtml page into another xhtml page.
ui:composition It is used to load the specific template using template attribute. It can be used to define a group of components that can be inserted in xhtml page.

 

Example:

main.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"
	xmlns:f="http://java.sun.com/jsf/core"
	xmlns:ui="http://java.sun.com/jsf/facelets">
<h:body>
	<div style="border-width: 2px; 
	  border-color: blue; border-style: solid;">
	 <ui:insert name="header">
		<ui:include src="header.xhtml" />
	 </ui:insert>
	</div>
	<br/>
	<div style="border-width: 2px; 
	  border-color: green; border-style: solid;">
	 <ui:insert name="content">
		<ui:include src="body.xhtml" />
	 </ui:insert>
	</div>
	<br/>
	<div style="border-width: 2px; 
	  border-color: red; border-style: solid;">
	 <ui:insert name="footer">
		<ui:include src="footer.xhtml" />
	 </ui:insert>
	</div>
</h:body>
</html>

header.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"
	xmlns:f="http://java.sun.com/jsf/core"
	xmlns:ui="http://java.sun.com/jsf/facelets">
    <h:body>
    	<ui:composition> 
          <h1>Header</h1>
        </ui:composition>
    </h:body>    
</html>

footer.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"
	xmlns:f="http://java.sun.com/jsf/core"
	xmlns:ui="http://java.sun.com/jsf/facelets">
    <h:body>
    	<ui:composition> 
          <h1>Footer</h1>
        </ui:composition>
    </h:body>    
</html>

body.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"
	xmlns:f="http://java.sun.com/jsf/core"
	xmlns:ui="http://java.sun.com/jsf/facelets">
    <h:body>
    	<ui:composition> 
          <h1>Body</h1>
        </ui:composition>
    </h:body>    
</html>

home.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"
	xmlns:f="http://java.sun.com/jsf/core"
	xmlns:ui="http://java.sun.com/jsf/facelets">
<h:body>
	<ui:composition template="main.xhtml">	
        <ui:define name="content">				
            <br/>
            <h:link value="Test Page" outcome="test" />
            <br/><br/>
            <h:link value="Welcome Page" outcome="welcome" />			
            <br/>
        </ui:define>
     </ui:composition>
</h:body>
</html>

test.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"
	xmlns:f="http://java.sun.com/jsf/core"
	xmlns:ui="http://java.sun.com/jsf/facelets">
<h:body>
	<ui:composition template="main.xhtml">
         <ui:define name="header">
            <h2>Test Page header</h2>
         </ui:define>			
         <ui:define name="content">
            <h2>Test Page content</h2>
             <h:link value="Home" outcome="home" />
         </ui:define> 
         <ui:define name="footer">
            <h2>Test Page Footer</h2>
         </ui:define>			
      </ui:composition> 
</h:body>
</html>

welcome.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"
	xmlns:f="http://java.sun.com/jsf/core"
	xmlns:ui="http://java.sun.com/jsf/facelets">
<h:body>
	<ui:composition template="main.xhtml">
         <ui:define name="header">
            <h2>Welcome Page header</h2>
         </ui:define>			
         <ui:define name="content">
            <h2>Welcome Page content</h2>
             <h:link value="Home" outcome="home" />
         </ui:define> 
         <ui:define name="footer">
            <h2>Welcome Page Footer</h2>
         </ui:define>			
      </ui:composition> 
</h:body>
</html>

faces-config.xml

<?xml version="1.0" encoding="windows-1252"?>
<faces-config version="2.0" 
xmlns="http://java.sun.com/xml/ns/javaee" 
xmlns:xi="http://www.w3.org/2001/XInclude" 
xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"
xsi:schemaLocation="http://java.sun.com/xml/ns/javaee 
http://java.sun.com/xml/ns/javaee/web-facesconfig_2_0.xsd">
 
</faces-config>

web.xml

<?xml version="1.0" encoding="UTF-8"?>
<web-app version="3.0" 
    	xmlns="http://java.sun.com/xml/ns/javaee" 
    	xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" 
    	xsi:schemaLocation="http://java.sun.com/xml/ns/javaee 
    	http://java.sun.com/xml/ns/javaee/web-app_3_0.xsd">
 
    <servlet>
        <servlet-name>faces</servlet-name>
        <servlet-class>
         javax.faces.webapp.FacesServlet
	<servlet-mapping>
        <servlet-name>faces</servlet-name>
        <url-pattern>/faces/*</url-pattern>
    </servlet-mapping>
 
</web-app>

URL:

http://localhost:7001/JSFExample46/faces/test.xhtml

Output:

JSF example46-1
 
If click on “Test Page” link.
JSF example46-2
 
If click on “Welcome Page” link.
JSF example46-3
 
Download this example.
 



Industrial Training

We offers Placement Oriented Training on Java, Spring, JSF, Hibernate, PHP, AngularJS, Angular 4, PLSQL, Oracle BI Publisher etc. We also provides Online training, please mail us at hr@codesjava.com.

Development

We also provides the Development services for Website Development , Java Development, PHP Development, Android App Development etc. You can contact us on hr@codesjava.com.

Copyright © 2019 CodesJava DMCA.com Protection Status SiteMap Reference: Java Wiki