JSF 2 OutputStyleSheet Example

JavaServer Faces (JSF 2) provides a number of user interfaces components that cover the most common requirements, one of the most important component is a <h:outputStyleSheet/> component. You can include a style sheet in your views using the typical link tag. JavaServer Faces 2 provides you a resources newly concept that’s ever provided before; it is now possible to include your style sheet using <h:outputStyleSheet/> tag. You can place style sheets files into a resources directory in the root of your web application. Sub directories of this directory are called libraries, you can create any libraries that you would.

Also Read:

1. The View


<html xmlns="http://www.w3.org/1999/xhtml"
	<h:outputStylesheet library="css" name="style.css" />
			<h:outputText value="JavaBeat JSF 2.2 Examples" />
			<h:outputText value="OutputStyleSheet Example" />
		<h:outputText value="Java Beat Text Style"
			styleClass="java-beat-larger-text" />

2. Style.css


.java-beat-larger-text {
	font-size: large;
	font-family: fantasy;
	font-weight: bolder;

3. The Deployment Descriptor (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"
	id="WebApp_ID" version="2.5" metadata-complete="true">
		<description>State saving method: 'client' or 'server' (=default). See JSF Specification 2.5.2</description>
		<servlet-name>Faces Servlet</servlet-name>
		<servlet-name>Faces Servlet</servlet-name>
		<servlet-name>Faces Servlet</servlet-name>

4. The Directory Structure

For a proper use of <h:outputStyleSheet/> you have to structure your directories as you would be seeing in the snapshot below.

outputStyleSheet Example

5. JSF 2 outputStyleSheet Demo

The below snapshot shows you a running example using of outputStyleSheet component.

outputStyleSheet Example 2

Leave a Reply

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

Pin It on Pinterest

Share This

Share this post with your friends!