Introduction
By offering a component-centric method for creating Java Web user interfaces, JSF streamlines development. A wide range of Java/Web developers are drawn to JavaServer Faces. While "systems developers" will find that the extensive and robust JSF API offers them unparalleled power and programming flexibility, "corporate developers" and Web designers will find that JSF development may be as simple as dragging and dropping user interface (UI) components into a page.
In this article, we will study h:outputStyleSheet/> and how using the standard link tag, you can incorporate a style sheet in your code. Let's take a closer look at this concept with the help of an example.
JSF h:outputStylesheet Tag
The JSF framework offers a collection of common HTML tags. Each tag will produce the appropriate HTML output. The output (h) an HTML element of type "link" with the type "text/css" is rendered by the stylesheet tag. The external stylesheet file can be added to the JSF page using this tag.
JSF Tag
<h:outputStylesheet library = "css" name = "styles.css" /> Rendered Output
<link type = "text/css" rel = "stylesheet"
href = "/Coding Ninjas/javax.faces.resource/styles.css.jsf?ln = css" /> Example Algorithm
To test the aforementioned tag, let's build a test JSF application.
Step |
Description |
1 |
Make a project called Coding Ninjas under the com.codingninjas.test package. |
2 |
Add a resources folder to the main src folder. |
3 |
Add a CSS folder to the resources folder under the src folder. |
4 |
Make a styles.css file and place it in the src/main/resources/css folder. |
5 |
Adjust the styles.css file as described below. |
6 |
Adjust pom.xml as described below. |
7 |
Make the following changes to home.xhtml. Leave the remaining files alone. |
8 |
Compile and run the programme to ensure that the business logic is operating in accordance with the specifications. |
9 |
Create the programme as a war file, then deploy it to the Apache Tomcat Webserver. |
10 |
As stated in the final step below, launch your web application using the proper URL. |
styles.css
.messege{
Color: blue;
}pom.xml
<project xmlns = "http://maven.apache.org/POM/4.0.0"
xmlns:xsi = "http://www.w3.org/2001/XMLSchema-instance"
xsi:schemaLocation = "http://maven.apache.org/POM/4.0.0
http://maven.apache.org/maven-v4_0_0.xsd">
<modelVersion>4.0.0</modelVersion>
<groupId>com.codingninjas.test</groupId>
<artifactId>Coding Ninjas</artifactId>
<packaging>war</packaging>
<version>1.0-SNAPSHOT</version>
<name>Coding Ninjas Maven Webapp</name>
<url>http://maven.apache.org</url>
<dependencies>
<dependency>
<groupId>junit</groupId>
<artifactId>junit</artifactId>
<version>3.8.1</version>
<scope>test</scope>
</dependency>
<dependency>
<groupId>com.sun.faces</groupId>
<artifactId>jsf-api</artifactId>
<version>2.1.7</version>
</dependency>
<dependency>
<groupId>com.sun.faces</groupId>
<artifactId>jsf-impl</artifactId>
<version>2.1.7</version>
</dependency>
<dependency>
<groupId>javax.servlet</groupId>
<artifactId>jstl</artifactId>
<version>1.2</version>
</dependency>
</dependencies>
<build>
<finalName>helloworld</finalName>
<plugins>
<plugin>
<groupId>org.apache.maven.plugins</groupId>
<artifactId>maven-compiler-plugin</artifactId>
<version>2.3.1</version>
<configuration>
<source>1.6</source>
<target>1.6</target>
</configuration>
</plugin>
<plugin>
<artifactId>maven-resources-plugin</artifactId>
<version>2.6</version>
<executions>
<execution>
<id>copy-resources</id>
<phase>validate</phase>
<goals>
<goal>copy-resources</goal>
</goals>
<configuration>
<outputDirectory>${basedir}/target/helloworld/resources
</outputDirectory>
<resources>
<resource>
<directory>src/main/resources</directory>
<filtering>true</filtering>
</resource>
</resources>
</configuration>
</execution>
</executions>
</plugin>
</plugins>
</build>
</project>home.xhtml
<?xml version = "1.0" encoding = "UTF-8"?>
<!DOCTYPE html PUBLIC "-//CN//DTD XHTML 1.0 Transitional//EN"
"http://www.encoding.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns = "http://www.CodingNinjas/2022/xhtml"
xmlns:f = "http://java.sun.com/jsf/core"
xmlns:h = "http://java.sun.com/jsf/html">
<h:head>
<title>Blog on JSF</title>
<h:outputStylesheet library = "css" name = "styles.css" />
</h:head>
<h:body>
<h2>h:outputStylesheet example</h2>
<hr />
<h:form>
<div class = "message">Coding Ninjas</div>
</h:form>
</h:body>
</html>Output
19+ registered 
