Thodoris Bais

About Thodoris Bais

Thodoris Bais is currently working as a Junior Java Developer while on parallel, pursuing a diploma at Informatics & Telecommunications Engineering. He specializes in Java Core, Android and J2EE and looks forward to being a professional Software Engineer. He is also a quick learner and curious about new technologies.

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.

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.

Related Whitepaper:

Java Essential Training

Author David Gassner explores Java SE (Standard Edition), the language used to build mobile apps for Android devices, enterprise server applications, and more!

The course demonstrates how to install both Java and the Eclipse IDE and dives into the particulars of programming. The course also explains the fundamentals of Java, from creating simple variables, assigning values, and declaring methods to working with strings, arrays, and subclasses; reading and writing to text files; and implementing object oriented programming concepts. Exercise files are included with the course.

Get it Now!  

Examples Java Code Geeks and all content copyright © 2010-2014, Exelixis Media Ltd | Terms of Use | Privacy Policy
All trademarks and registered trademarks appearing on Examples Java Code Geeks are the property of their respective owners.
Java is a trademark or registered trademark of Oracle Corporation in the United States and other countries.
Examples Java Code Geeks is not connected to Oracle Corporation and is not sponsored by Oracle Corporation.

Sign up for our Newsletter

20,709 insiders are already enjoying weekly updates and complimentary whitepapers! Join them now to gain exclusive access to the latest news in the Java world, as well as insights about Android, Scala, Groovy and other related technologies.

As an extra bonus, by joining you will get our brand new e-books, published by Java Code Geeks and their JCG partners for your reading pleasure! Enter your info and stay on top of things,

  • Fresh trends
  • Cases and examples
  • Research and insights
  • Two complimentary e-books