• Menu
  • Skip to primary navigation
  • Skip to main content
  • Skip to primary sidebar

JavaBeat

Java Tutorial Blog

  • Java
    • Java 7
    • Java 8
    • Java EE
    • Servlets
  • Spring Framework
    • Spring Tutorials
    • Spring 4 Tutorials
    • Spring Boot
  • JSF Tutorials
  • Most Popular
    • Binary Search Tree Traversal
    • Spring Batch Tutorial
    • AngularJS + Spring MVC
    • Spring Data JPA Tutorial
    • Packaging and Deploying Node.js
  • About Us
    • Join Us (JBC)
  • Java
    • Java 7
    • Java 8
    • Java EE
    • Servlets
  • Spring Framework
    • Spring Tutorials
    • Spring 4 Tutorials
    • Spring Boot
  • JSF Tutorials
  • Most Popular
    • Binary Search Tree Traversal
    • Spring Batch Tutorial
    • AngularJS + Spring MVC
    • Spring Data JPA Tutorial
    • Packaging and Deploying Node.js
  • About Us
    • Join Us (JBC)

JSF 2 Body and Head Example

March 26, 2014 //  by Amr Mohammed//  Leave a Comment

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:

  • JSF 2 Tutorials
  • JSF Tutorials
  • Introduction to JSF

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

&lt;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"&gt;
&lt;h:head&gt;
&lt;title&gt;JavaBeat JSF2 Body &amp;amp; Head Components&lt;/title&gt;
&lt;/h:head&gt;
&lt;h:body&gt;
&lt;h:form&gt;
&lt;h1&gt;
&lt;h:outputText value="JavaBeat JSF 2.2 Examples" /&gt;
&lt;/h1&gt;
&lt;h2&gt;
&lt;h:outputText value="Body &amp;amp; Head Example" /&gt;
&lt;/h2&gt;
&lt;h:outputStylesheet library="css" name="style.css"/&gt;
&lt;h:outputScript library="js" name="javascript.js" target="body"/&gt;
&lt;h:outputText value="Styled Text Using The Concept of Resource Re-location"
styleClass="java-beat-larger-text"/&gt;
&lt;br/&gt;
&lt;h:outputText value="Body &amp;amp; Head Should Be Defined To Make Such That Concept Applied"
styleClass="java-beat-larger-text"/&gt;
&lt;/h:form&gt;
&lt;/h:body&gt;
&lt;/html&gt;

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

&lt;html xmlns="http://www.w3.org/1999/xhtml"&gt;&lt;head id="j_idt2"&gt;
&lt;title&gt;JavaBeat JSF2 Body &amp;amp; Head Components&lt;/title&gt;&lt;link type="text/css" rel="stylesheet"
href="/JavaBeat-JSF-Installation/javax.faces.resource/style.css.xhtml?ln=css"&gt;&lt;/head&gt;
&lt;body&gt;
&lt;form id="j_idt5" name="j_idt5" method="post"
action="/JavaBeat-JSF-Installation/index.xhtml" enctype="application/x-www-form-urlencoded"&gt;
&lt;input type="hidden" name="j_idt5" value="j_idt5"&gt;

&lt;h1&gt;JavaBeat JSF 2.2 Examples
&lt;/h1&gt;
&lt;h2&gt;Body &amp;amp; Head Example
&lt;/h2&gt;&lt;span class="java-beat-larger-text"&gt;Styled Text Using The Concept of Resource Re-location&lt;/span&gt;
&lt;br&gt;&lt;span class="java-beat-larger-text"&gt;Body &amp;amp; Head Should Be Defined To Make Such That Concept Applied&lt;/span&gt;
&lt;br&gt;&lt;a href="" onclick="sayHello();"&gt;Say Hello Using Resource Re-Location&lt;/a&gt;
&lt;/form&gt;&lt;script type="text/javascript" src="/JavaBeat-JSF-Installation/javax.faces.resource/javascript.js.xhtml?ln=js"&gt;&lt;/script&gt;
&lt;/body&gt;&lt;/html&gt;

When The body & head Aren’t Used

&lt;html xmlns="http://www.w3.org/1999/xhtml"&gt;
&lt;head&gt;
&lt;title&gt;JavaBeat JSF2 Body &amp;amp; Head Components&lt;/title&gt;
&lt;/head&gt;
&lt;body&gt;&lt;form id="j_idt2" name="j_idt2" method="post"
action="/JavaBeat-JSF-Installation/index.xhtml" enctype="application/x-www-form-urlencoded"&gt;
&lt;input type="hidden" name="j_idt2" value="j_idt2"&gt;
&lt;h1&gt;JavaBeat JSF 2.2 Examples
&lt;/h1&gt;
&lt;h2&gt;Body &amp;amp; Head Example
&lt;/h2&gt;&lt;span class="java-beat-larger-text"&gt;Styled Text Using The Concept of Resource Re-location&lt;/span&gt;
&lt;br&gt;&lt;span class="java-beat-larger-text"&gt;Body &amp;amp; Head Should Be Defined To Make Such That Concept Applied&lt;/span&gt;
&lt;br&gt;&lt;a href="" onclick="sayHello();"&gt;Say Hello Using Resource Re-Location&lt;/a&gt;
&lt;/form&gt;
&lt;/body&gt;&lt;/html&gt;
  • 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

&lt;?xml version="1.0" encoding="UTF-8"?&gt;
&lt;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"&gt;
&lt;context-param&gt;
&lt;description&gt;State saving method: 'client' or 'server' (=default). See JSF Specification 2.5.2&lt;/description&gt;
&lt;param-name&gt;javax.faces.STATE_SAVING_METHOD&lt;/param-name&gt;
&lt;param-value&gt;client&lt;/param-value&gt;
&lt;/context-param&gt;
&lt;context-param&gt;
&lt;param-name&gt;javax.faces.application.CONFIG_FILES&lt;/param-name&gt;
&lt;param-value&gt;/WEB-INF/faces-config.xml&lt;/param-value&gt;
&lt;/context-param&gt;
&lt;servlet&gt;
&lt;servlet-name&gt;Faces Servlet&lt;/servlet-name&gt;
&lt;servlet-class&gt;javax.faces.webapp.FacesServlet&lt;/servlet-class&gt;
&lt;load-on-startup&gt;1&lt;/load-on-startup&gt;
&lt;/servlet&gt;
&lt;servlet-mapping&gt;
&lt;servlet-name&gt;Faces Servlet&lt;/servlet-name&gt;
&lt;url-pattern&gt;/faces/*&lt;/url-pattern&gt;
&lt;/servlet-mapping&gt;
&lt;servlet-mapping&gt;
&lt;servlet-name&gt;Faces Servlet&lt;/servlet-name&gt;
&lt;url-pattern&gt;*.xhtml&lt;/url-pattern&gt;
&lt;/servlet-mapping&gt;
&lt;listener&gt;
&lt;listener-class&gt;com.sun.faces.config.ConfigureListener&lt;/listener-class&gt;
&lt;/listener&gt;
&lt;/web-app&gt;

6. JSF 2 Body & Head Example

The below demonstration shows the impact of use both of body & head Tags on the components.
JSF 2 Body & Head Example 1

  • 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.
JSF 2 Body & Head Example 2

  • 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.
[wpdm_file id=16]

Category: JSFTag: JSF 2

About Amr Mohammed

Previous Post: « JavaScript Reserved Words
Next Post: JSF 2 Button and Link Example »

Reader Interactions

Leave a Reply Cancel reply

Your email address will not be published. Required fields are marked *

This site uses Akismet to reduce spam. Learn how your comment data is processed.

Primary Sidebar

Follow Us

  • Facebook
  • Pinterest

FEATURED TUTORIALS

New Features in Spring Boot 1.4

Difference Between @RequestParam and @PathVariable in Spring MVC

What is new in Java 6.0 Collections API?

The Java 6.0 Compiler API

Introductiion to Jakarta Struts

What’s new in Struts 2.0? – Struts 2.0 Framework

JavaBeat

Copyright © by JavaBeat · All rights reserved
Privacy Policy | Contact