When the web developers try to develop a web application using a JSF 2, no need for using HTML Tags such as <body/> and <head/> for determining the browser body and head respectively. JSF 2 provides both of them as a separate components inside its component kit. The <h:body/> component renders HTML body element, this enables JSF developers to implement components that have dependencies on resources such as images, scripts ans cascading stylesheets in a more flexible way by telling the framework where to render these resources at request time.
Also Read:
The concept of Resource Re-Location is provided as a new feature for JSF 2 Mojarra. In that the head and body components (Tags) are fairly straight forward as to their attributes, but their main use is for knowing where to output relocated resources. Since JSF 2.2 the <h:outputStylesheet/> component (Tag) doesn’t provide a target attribute like <h:outputScript/> in order to parametrized the location of styles. The default location for your styles that are defined using <h:outputStylesheet/> will be enclosed at the <h:head/> in case it is defined, if not the style will not be accessible anymore.
1. The View
index.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/jsp/jstl/core"> <h:head> <title>JavaBeat JSF2 Body &amp; Head Components</title> </h:head> <h:body> <h:form> <h1> <h:outputText value="JavaBeat JSF 2.2 Examples" /> </h1> <h2> <h:outputText value="Body &amp; Head Example" /> </h2> <h:outputStylesheet library="css" name="style.css"/> <h:outputScript library="js" name="javascript.js" target="body"/> <h:outputText value="Styled Text Using The Concept of Resource Re-location" styleClass="java-beat-larger-text"/> <br/> <h:outputText value="Body &amp; Head Should Be Defined To Make Such That Concept Applied" styleClass="java-beat-larger-text"/> </h:form> </h:body> </html>
2. The Style Used
style.css
.java-beat-larger-text {
font-size: xx-large;
font-family: fantasy;
font-weight: bolder;
}
3. The JavaScript Used
javascript.js
function sayHello(){
alert("Hello JavaBeat !");
}
4. Body Tag & Head Tag on the generated HTML
When The body & head Are Used
<html xmlns="http://www.w3.org/1999/xhtml"><head id="j_idt2"> <title>JavaBeat JSF2 Body &amp; Head Components</title><link type="text/css" rel="stylesheet" href="/JavaBeat-JSF-Installation/javax.faces.resource/style.css.xhtml?ln=css"></head> <body> <form id="j_idt5" name="j_idt5" method="post" action="/JavaBeat-JSF-Installation/index.xhtml" enctype="application/x-www-form-urlencoded"> <input type="hidden" name="j_idt5" value="j_idt5"> <h1>JavaBeat JSF 2.2 Examples </h1> <h2>Body &amp; Head Example </h2><span class="java-beat-larger-text">Styled Text Using The Concept of Resource Re-location</span> <br><span class="java-beat-larger-text">Body &amp; Head Should Be Defined To Make Such That Concept Applied</span> <br><a href="" onclick="sayHello();">Say Hello Using Resource Re-Location</a> </form><script type="text/javascript" src="/JavaBeat-JSF-Installation/javax.faces.resource/javascript.js.xhtml?ln=js"></script> </body></html>
When The body & head Aren’t Used
<html xmlns="http://www.w3.org/1999/xhtml"> <head> <title>JavaBeat JSF2 Body &amp; Head Components</title> </head> <body><form id="j_idt2" name="j_idt2" method="post" action="/JavaBeat-JSF-Installation/index.xhtml" enctype="application/x-www-form-urlencoded"> <input type="hidden" name="j_idt2" value="j_idt2"> <h1>JavaBeat JSF 2.2 Examples </h1> <h2>Body &amp; Head Example </h2><span class="java-beat-larger-text">Styled Text Using The Concept of Resource Re-location</span> <br><span class="java-beat-larger-text">Body &amp; Head Should Be Defined To Make Such That Concept Applied</span> <br><a href="" onclick="sayHello();">Say Hello Using Resource Re-Location</a> </form> </body></html>
- The <h:outputStylesheet/> component (Tag) does provide a default target value; it’s head. So the defined style has been located inside <h:head/> while rendering the HTML.
- The <h:outputScript/> component (Tag) doesn’t provide a default target value, for that the developer is capable to provide a value expression or an inline value for determining the target of the JavaScript. The value that’s provided is an inline and it is have a value of body, so the JavaScript code will be enclosed by the <body/> tag (component).
- If the developer doesn’t provide <h:body/> and <h:head/> Neither the JavaScript nor the style sheet are considered at the generated HTML as it’s obvious in the second example (When the body and head Aren’t Used) and consequently, the JavaScript and the style sheet never been executed.
- If the developer try to remove the <h:head/> alone, where the <h:outputStylesheet/> consumes it, the style will not be considered and it will not be consumed by the components that they are refer to.
5. The Deployment Descriptor (web.xml)
web.xml
<?xml version="1.0" encoding="UTF-8"?> <web-app xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xmlns="http://java.sun.com/xml/ns/javaee" xmlns:web="http://java.sun.com/xml/ns/javaee/web-app_2_5.xsd" xsi:schemaLocation="http://java.sun.com/xml/ns/javaee http://java.sun.com/xml/ns/javaee/web-app_2_5.xsd" id="WebApp_ID" version="2.5" metadata-complete="true"> <context-param> <description>State saving method: 'client' or 'server' (=default). See JSF Specification 2.5.2</description> <param-name>javax.faces.STATE_SAVING_METHOD</param-name> <param-value>client</param-value> </context-param> <context-param> <param-name>javax.faces.application.CONFIG_FILES</param-name> <param-value>/WEB-INF/faces-config.xml</param-value> </context-param> <servlet> <servlet-name>Faces Servlet</servlet-name> <servlet-class>javax.faces.webapp.FacesServlet</servlet-class> <load-on-startup>1</load-on-startup> </servlet> <servlet-mapping> <servlet-name>Faces Servlet</servlet-name> <url-pattern>/faces/*</url-pattern> </servlet-mapping> <servlet-mapping> <servlet-name>Faces Servlet</servlet-name> <url-pattern>*.xhtml</url-pattern> </servlet-mapping> <listener> <listener-class>com.sun.faces.config.ConfigureListener</listener-class> </listener> </web-app>
6. JSF 2 Body & Head Example
The below demonstration shows the impact of use both of body & head Tags on the components.
- The style sheet is loaded, cause the <h:head/> component is there.
- The JavaScript code is loaded, cause the <h:body/> component is there.
- The <h:outputScript/> does reference the body intentionally, unlike the <h:outputStylesheet/> that doesn’t.
The below snapshot shows the impact of use no both of body and head Tags on the components.
- The <h:head/> Tag has been omitted, so the style sheet will not be loaded and consequently it’s not used by the components that they are refer to.
- The <h:body/> Tag has been omitted, so the JavaScript code will not be loaded and consequently it’s not used by the components that they are refer to.
- Even if you are using <head/> HTML Tag, the JSF framework wouldn’t be aware of such that HTML Tag.
JavaScript Reserved Words