Home » Enterprise Java » jsf » OutputScript Example with JSF 2.0

About Thodoris Bais

Thodoris Bais
Thodoris is an Oracle Certified Associate Java Programmer and currently works as a Junior Software Developer, for Intrasoft International S.A. He holds a diploma at Informatics & Telecommunications Engineering and is interested in continuous development.

OutputScript Example with JSF 2.0

Hi there, today we ‘ll see how to include a javascript file in our JSF applications. In JSF 2.0, we can use the <h:outputScript /> tag to render an HTML script element and link it to a javascript file.
 
 
 
 
 
 
 
 
 
 

 
For example,

<h:outputScript library="js" name="common.js" />

will generate an HTML output like below:

<script type="text/javascript" 
  	src="/JavaServerFaces/faces/javax.faces.resource/common.js?ln=js">
</script>

1. A demonstration example

Here is the proposed project structure, regarding combination of JSF and Javascript:

img

Here is a sample JSF, including a script reference:

<?xml version="1.0" encoding="UTF-8"?>
<!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" >
    <h:head>
    </h:head>
    <h:body> 
    	<h1>JSF 2.0 OutputScript Example</h1>
    	<h:outputScript library="js" name="common.js"></h:outputScript>
    </h:body>
</html>

And this is what the HTML generation will look like:

<?xml version="1.0" encoding="UTF-8"?>
<!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">
    <head></head>
    <body> 
    	<h1>JSF 2.0 OutputScript Example</h1>
    	<script type="text/javascript"
		src="/JavaServerFaces/faces/javax.faces.resource/common.js?ln=js">
    <body>
</html>

That is, the javascript file will be rendered where the <h:outputScript/> tag is placed.

2. Target Attribute

In addition, we can further control the location of our javascript file by using the target attribute. Here are the three available options for it:

  1. target="head" : displays the script at the top of the HTML head tag.
  2. target="body" : displays the script in the end of the body tag.
  3. no target : a no target attribute means that the script will be displayed, where the tag is placed.

For example,

<h:outputScript library="js" name="common.js" target="body" />

will generate an HTML like the following:

<?xml version="1.0" encoding="UTF-8"?>
<!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">
    <head></head>
    <body> 
    	<h1>JSF 2.0 OutputScript Example</h1>
    	<script type="text/javascript"
		src="/JavaServerFaces/faces/javax.faces.resource/common.js?ln=js">
    <body>
</html>

Have a nice week!
This was an example of OutputScript in JSF 2.0.

(No Ratings Yet)
Start the discussion Views Tweet it!

Do you want to know how to develop your skillset to become a Java Rockstar?

Subscribe to our newsletter to start Rocking right now!

To get you started we give you our best selling eBooks for FREE!

 

1. JPA Mini Book

2. JVM Troubleshooting Guide

3. JUnit Tutorial for Unit Testing

4. Java Annotations Tutorial

5. Java Interview Questions

6. Spring Interview Questions

7. Android UI Design

 

and many more ....

 

Receive Java & Developer job alerts in your Area

 

Leave a Reply

avatar
  Subscribe  
Notify of