Showing posts with label jsf facelets. Show all posts
Showing posts with label jsf facelets. Show all posts

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>