Home » Enterprise Java » jsf » OutputStyleSheet 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.

OutputStyleSheet Example with JSF 2.0

Hello geeks, another quick ‘n easy example for today! In our last JSF example, we figured out how to manipulate an image insertion into a JSF application.

Ok, we now know how to implement this, but without CSS, it’s just another brick in our JSF wall. So, how could we include a css file into a JSF project? That’s what we are going to investigate today and especially we are going to see the best practice for it.

Want to be a JSF Ninja?

Subscribe to our newsletter and download the JSF 2.0 Programming Cookbook right now!

In order to get you prepared for your JSF development needs, we have compiled numerous recipes to help you kick-start your projects. Besides reading them online you may download the eBook in PDF format!

 

In JSF, we can use the <h:outputStylesheet /> tag to use an external css file.

For example, assume the following tag:

<h:outputStylesheet library="css" name="style.css"  />

which is generated to the following HTML:

<link type="text/css" rel="stylesheet" 
	href="/JavaServerFaces/faces/javax.faces.resource/style.css?ln=css" />

Best Practice Project Structure

According to best practices, we should place our css files under /resources/css folder. Here is the corresponding project structure, just for demonstration:

img

And here is the JSF file:

<?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"
      >
    <h:head></h:head>
    <h:body>
 
    	<h1>JSF 2.2 OutputStyleSheet Example</h1>
 
    	<h:outputStylesheet library="css" name="style.css"  />
 
    	<div class="awesome_color">This sentence will be colored as described in the corresponding css.
        </div>
 
    </h:body>
 
</html>

The fore-mentioned file will be automatically generated to an HTML format 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>
		<link type="text/css" rel="stylesheet" 
		  href="/JavaServerFaces/faces/javax.faces.resource/style.css?ln=css" />
	</head>
 
	<body>
 
    	   <h1>JSF 2.2 OutputStyleSheet Example</h1>
 
    	   <div class="awesome_color">This sentence will be colored as described in the corresponding css.
           </div>
 
	</body>
</html>

Last Words

Yes, you did notice it right, I didn’t include anything between the JSF head, I just left it as an empty tag and please try to do so (in case you don’t need anything in you page’s “head”). Otherwise, there is a serious case that your css file won’t be included.

Have a nice weekend!
This was an example of OutputStyleSheet in JSF 2.0.

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 ....

 

 

Want to take your Java skills to the next level?

Grab our programming books for FREE!

Here are some of the eBooks you will get:

  • Advanced Java Guide
  • Java Design Patterns
  • JMeter Tutorial
  • Java 8 Features Tutorial
  • JUnit Tutorial
  • JSF Programming Cookbook
  • Java Concurrency Essentials