In this tutorial you will learn about the JSF 2 h outputStylesheet tag.
JSF 2 h outputStylesheet
In this tutorial you will learn about the JSF 2 h outputStylesheet tag.
<h:outputStyleSheet> tag of JSF 2 html tag library is rendered to the HTML <link> element. This link renders the Resource of style which is assigned by the name and library (optional) attribute. In simple we can say that this tag is used to include the CSS in JSF application.
Attributes of JSF 2 h outputStylesheet
- converter : This is an optional attribute. This attribute is used when you are required to apply a Converter class on this tag.
- id : This is an optional attribute. This attribute is used to make the tag uniquely identifiable. Value of this attribute must be unique within its closest parent component.
- rendered : This is an optional attribute. It evaluates a boolean expression. Presence of this attribute specifies that whether the
current component should be rendered in the Rendered Response phase or not or
worked on any later form submission. The default value of this attribute is
defined to true.
- value : This is an optional attribute. This attribute specifies the current value of the component.
- library : This is an optional attribute. This attribute is
used to specify the libraryName. This library should be reside in the
'resources' folder. (For detail see the directory Structure).
- name : This is an optional attribute. This attribute is used to specify the resourceName. (for example style.css).
- binding : This is an optional attribute. This attribute evaluates to a javax.faces.component.UIComponent specified for linking the component with the property of backing bean.
Example
An example is being given here which demonstrates how to use the JSF html outputStylesheet tag in an applications. To accomplish at first I have created a JavaBeans with the property name and their setter getter methods. Then created the two JSF view pages input.xhtml and output.xhtml pages. And then created the CSS files one for the input.xhtml page while another for the output.xhtml page. These CSS files will be applied on the individual JSF view pages where they are used using the <h:outputStylesheet> tag.
Directory Structure
NameBean.java
package devmanuals;
import javax.faces.bean.ManagedBean;
import javax.faces.bean.RequestScoped;
@ManagedBean(name="nameBean")
@RequestScoped
public class NameBean {
String name;
public String getName() {
return name;
}
public void setName(String name) {
this.name = name;
}
}
input.xhtml
<!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>
<title>JSF 2 h outputStylesheet</title>
</h:head>
<h:body>
<h:outputStylesheet library="css" name="inputStyle.css" />
<h:form>
<h:outputText value ="Enter Your Name : " />
<h:inputText id="text1" value="#{nameBean.name}" />
<h:commandButton value="submit" action="output" />
</h:form>
</h:body>
</html>
output.xhtml
<!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>
<title>JSF 2 h outputStylesheet</title>
</h:head>
<h:body>
<h:outputStylesheet library="css" name="outputStyle.css" />
<h:outputText value ="Your Name is : " />
<h:outputLabel value="#{nameBean.name}"></h:outputLabel>
</h:body>
</html>
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" xsi:schemaLocation="http://java.sun.com/xml/ns/javaee http://java.sun.com/xml/ns/javaee/web-app_3_0.xsd" id="WebApp_ID" version="3.0"> <display-name>jsfHOutputStylesheet</display-name> <welcome-file-list> <welcome-file>input.xhtml</welcome-file> </welcome-file-list> <servlet> <servlet-name>Faces Servlet</servlet-name> <servlet-class>javax.faces.webapp.FacesServlet</servlet-class> <load-on-startup>1</load-on-startup> </servlet> <servlet-mapping> <servlet-name>Faces Servlet</servlet-name> <url-pattern>/faces/*</url-pattern> <url-pattern>*.jsf</url-pattern> <url-pattern>*.xhtml</url-pattern> </servlet-mapping> <context-param> <description>State saving method: 'client' or 'server' (=default). See JSF Specification 2.5.2</description> <param-name>javax.faces.STATE_SAVING_METHOD</param-name> <param-value>client</param-value> </context-param> <context-param> <param-name>javax.servlet.jsp.jstl.fmt.localizationContext</param-name> <param-value>resources.application</param-value> </context-param> <listener> <listener-class>com.sun.faces.config.ConfigureListener</listener-class> </listener> <servlet-mapping> <servlet-name>Faces Servlet</servlet-name> <url-pattern>*.faces</url-pattern> </servlet-mapping> </web-app>
inputStyle.css
body {
padding-left: 7em;
color: #d8da3d ;
background-color: purple
}
outputStyle.css
body {
padding-left: 7em;
color: #d8da3d;
background-color: red
}
label {
color : #FFFFFF;
}
In the HTML source code of either of the view pages the JSF <h:outputStylesheet> tag will be shown as into the rendered <link> element within the <head> element. HTML source code of input.xhtml view page will be seen as follows :
<!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> <title>JSF 2 h outputStylesheet</title><link type="text/css" rel="stylesheet" href="/jsfHOutputStylesheet/javax.faces.resource/inputStyle.css.jsf?ln=css" /></head><body> <form id="j_idt7" name="j_idt7" method="post" action="/jsfHOutputStylesheet/input.jsf" enctype="application/x-www-form-urlencoded"> <input type="hidden" name="j_idt7" value="j_idt7" /> Enter Your Name : <input id="j_idt7:text1" type="text" name="j_idt7:text1" /><input type="submit" name="j_idt7:j_idt9" value="submit" /><input type="hidden" name="javax.faces.ViewState" id="javax.faces.ViewState" value="H4sIAAAAAAAAALVVTWgTQRSepk1tYpXa1tIeLB6qoMgWkfpXxEab0mK0wcRi7SFOk7GZZLI7zrxNNgWLnkUQPIhQ8dqDN09eFBFRChYURFC8eVU86EUvzsw22VSrxYMD+/btzLyZ733vm9n7n1CYS4G2FXAZWy5QZo1jmT+NeXjTuydPey6+akahMRRlDs6N4Sw4YgJFIC+IzDss5/HjI0i39kqbsh3qaQXUWsjQHAy5AnXNJMy6DNtz1uRsgWRh+ObK+Xsdcg8LIeRxFRByL6MF1Ky8MFct+FoQaEhHe9YlnCXSyjol7tjEBuvcxMmaP5AUDicCqqdIVSYFLWMgaLV1qh0E2hogiNtuqXGQA+rGAILOukBkOo8hJkiKgOKjK+AjJgSuJqgE79rrHXee47vNqGkCtUg6T/wEKi3aqqDd68NNgQI1rugiIoXLREwvPzh2a/Hl6RAKJVAky7CUZ3CJAOo0bA1qrIMpBcueG06gqFQxObMGoB5/BnUGU0RQzOg8nmVk2OO8rHnbLLXdovLqV9tb0rVXwWjLVGJWLJlMTMRHPUWu9W/kNhKnd2kDFA3IMxujVTW0GjXop0l3dylqhv6Ah5Y4s0bJJewyGPM7B2Kcs2raKRL729K+6cWRwki7LlalB7UPUpu7YHl5KDG1+pHoi71hT2VfE93BunwaZaWU2D2zjhR7H/9IfSy+X65JsSmILgs00MgPKWtuko6EWC6XdqYoqcR115frD5+97XjwMGS0tvv3kDqZqaoEUjJBj+YOf51amdrqB+34Pahh7q7i7af0Q9+KP3d7IEsz6ieSuBE501u6smTyMJXY3KBLXxLabvN9QPGNS78ebn0IiE1ELIc5EBGwVVv3lyoLYivNFylYul6ZWSxpVp2GKlO3ByFw1gwTwRXZ/X9CNOmCqjgKmsc9fU/UKn5g3YqvuUi0E9mYFuN3GW1v/6uctekzoms3EA4dBeLB/vqGLT6+sB4MekO6r8+kmTFpZpiTxUAdOzMej43W57WuAb/p/4Bf0K9ulYBYrUG6yokqQ0vZobk1ZNf/DebgnHAcRrD9cqe4+mbx++cQarqAwmXMXH0V6jWPej8Bh7kdPlIGAAA=" autocomplete="off" /> </form></body> </html>
How To Run
After copying the above code paste them to the respective files or by downloading the code from Download Source Code start your web server and then use the following link http://localhost:8181/jsfHOutputStylesheet/input.xhtml in the address bar of the web browser.
Output :
When you will execute the above code you will get the output as follows :
1. The main page will be displayed as follows :
2. When you will input the text into the provided textbox and clicked on submit button then the output will be as follows :
[ 0 ] Comments