Wednesday, April 17

Templating in jsf 2.0 simple example

This is the template code: template.xhtml and this file is located in WEB-INF/template/usertemplate

<!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:head>
<title>
<ui:insert name="pageTitle">Page Title</ui:insert>
</title>
<style type="text/css">
body {
 font-family: Verdana, Arial, Helvetica, sans-serif;
 font-size: 14px;
}
#header {
 font-family: Verdana, Arial, Helvetica, sans-serif;
 font-size: 18px;
}
#content{
width:80%;
margin:0 auto;
}
#footer {
 font-family: Verdana, Arial, Helvetica, sans-serif;
 font-size: 12px;
 text-align: center;
 color: #8E969D;
 border:1px solid black;
 width:80%;
 margin:0 auto;
 background-color: gray;
}
#abc{
background-color: black;
opacity:0.4;
filter:alpha(opacity=40)
}
</style>
</h:head>
<h:body>
<div id="header">
<ui:insert name="header">
<!--Header Content here-->
</ui:insert>
</div>
<div id="content">
<ui:insert name="content">
<!--Body Content here-->
</ui:insert>
</div>
<div id="footer">
<ui:insert name="footer">
<!--Footer Content here-->
</ui:insert>
</div>
</h:body>
</html>



this is one facelet code: 

<!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"
      xmlns:p="http://primefaces.org/ui"> 

<ui:composition template="/WEB-INF/templates/userTemplate/template.xhtml">
<ui:define name="content">
<h:form id="addBrandForm" style="border:2px solid #CCC; padding:3px;" onmouseover="style.border='2px solid #0276FD'" onmouseout="style.border='2px solid #CCC'">
<h:outputLabel value="Facelet" />
</h:form>
</ui:define>
</ui:composition>
</html>