What is facelets ui:composition ?
The UI Composition tag is a templating tag that wraps content to be included in another Facelet. Any content outside of the UI Composition tag will be ignored by the Facelets view handler. Any content inside of the UI Composition tag will be included when another Facelets page includes the page containing this UI Composition tag.
Example –
Template.xhtml
<html>
<head>
<title><ui:insert name="title" /></title>
<body>
<h2><ui:insert name="header" /></h2>
<ui:insert name="message" />
</body>
</html>
Composition.xhtml
<html>
<head>
<title>Welcome</title>
</head>
<body>
<h2>Hello World!</h2>
How are you today?
</body>
</html
How to call onLoadBody JS script?
As there is no body tag in <ui:composition> then how to call onBodyLoad function after loading content of template ? We can use <div> tag inside those <ui:include> but there is no reliable way to call function on div onLoad or on div unload .Because of this we have to define a template in header of base template and override it to insert onbodyLoad functions .
How to override a facelets?
Example template for override onBodyLoad and onBodyUnload
• Template.xhtml
<html xmlns="http://www.w3.org/1999/xhtml"
xmlns:ui="http://java.sun.com/jsf/facelets"
xmlns:h=http://java.sun.com/jsf/html
xmlns:f="http://java.sun.com/jsf/core"
xmlns:c="http://java.sun.com/jstl/core"
xmlns:a4j="http://richfaces.org/a4j"
xmlns:rich="http://richfaces.org/rich">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
<title>SALPE TECHNOLOGIES</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta http-equiv="Cache-Control" content="no-cache" />
<meta http-equiv="Pragma" content="no-cache" />
<meta http-equiv="Expires" content="0" />
<ui:insert name="header">
<script language="JavaScript" type="text/JavaScript">
function bodyLoaded(){
alert("Event bodyLoaded called from base template .. ");
}
</script>
</ui:insert>
<ui:insert name="headerUnLoaded">
<script language="JavaScript" type="text/JavaScript">
function bodyUnLoaded(){
alert("Event bodyUnLoaded called from base template .. ");
}
</script>
</ui:insert>
</head>
<body onload="bodyLoaded();" onUnload ="bodyUnLoaded();">
<f:view locale="#{session.locale}">
<table>
<tr>
<td>
<ui:include id="_header" src="HeaderTemplate.xhtml" />
</td>
</tr>
<tr>
<td>
<ui:insert name="_bodyContent">Insert Body Content</ui:insert>
</td>
</tr>
<tr>
<td>
<ui:include id="_footer" src=FooterTemplate.xhtml"></ui:include>
</td>
</tr>
</table>
</body>
GeneralPage.xhtml
<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<ui:composition
template =”Template.xhtml"
xmlns="http://www.w3.org/1999/xhtml"
xmlns:ui="http://java.sun.com/jsf/facelets"
xmlns:h="http://java.sun.com/jsf/html"
xmlns:f="http://java.sun.com/jsf/core"
xmlns:a4j="http://richfaces.org/a4j"
xmlns:rich="http://richfaces.org/rich"
xmlns:c="http://java.sun.com/jstl/core" >
<ui:define name="header">
<script type="text/javascript" language="javascript" src=".MyJavascript.js"> </script>
<script type="text/javascript">
function bodyLoaded(){
alert("Event bodyLoaded fucntion from overrriden template");
</script>
</ui:define>
<ui:define name="content">
<f:view locale="#{session.locale}">
<f:loadBundle basename="SALLabel" var="bundle" />
<h:form id="myForm">
<table>
<tr>
<td>
WELCOME TO SALPE Colglomeration !
</td>
</tr>
</table>
</h:form>
</f:view>
</ui:define>
</ui:composition>
</ui:composition>
Standard ways to use facelets.
Do not use <body> tag inside the <ui:composition>. For java script declare source of file before using it .
