Hey guys in this post, we will discuss adding CSS stylesheet to the JavaServer Faces (JSF) application.
Table of Contents
Overview
- We will use
<h:outputStylesheet>tag to reference the external stylesheet <h:outputStylesheet>takes two attributelibrary, indicates the name of the folder in which the CSS file is located andname, indicates the name of the file
Complete example
We will create this example step by step, follow this tutorial till the end
Read More:
- Check the Complete JavaServer Faces (JSF) Tutorial
- Check the Complete Spring Data JPA Tutorial
- Check the Complete Spring Security Tutorial
- Check the Javascript Projects for Beginners
- Check the Spring JDBC Tutorial
Create Dynamic Web Project
To create a dynamic web project, you can read the following tutorial
Create a bean
Create Employee.java file inside the in.bushansirgur.jsf.beans package and add the following content
package in.bushansirgur.jsf.beans;
import javax.faces.bean.ManagedBean;
@ManagedBean
public class Employee {
private String name;
private String department;
private String email;
public Employee() {
}
public Employee(String name, String department, String email) {
this.name = name;
this.department = department;
this.email = email;
}
public String getName() {
return name;
}
public void setName(String name) {
this.name = name;
}
public String getDepartment() {
return department;
}
public void setDepartment(String department) {
this.department = department;
}
public String getEmail() {
return email;
}
public void setEmail(String email) {
this.email = email;
}
}
Create a Util class
Create EmployeeDataUtil.java file inside the in.bushansirgur.jsf.util package and add the following content
package in.bushansirgur.jsf.util;
import java.util.ArrayList;
import java.util.List;
import javax.faces.bean.ApplicationScoped;
import javax.faces.bean.ManagedBean;
import in.bushansirgur.jsf.beans.Employee;
@ManagedBean
@ApplicationScoped
public class EmployeeDataUtil {
private List<Employee> employees;
public EmployeeDataUtil() {
loadSampleData();
}
public void loadSampleData() {
employees = new ArrayList<>();
employees.add(new Employee("Bushan", "IT", "bushan@gmail.com"));
employees.add(new Employee("Bharatrh", "IT", "bharath@gmail.com"));
employees.add(new Employee("Chaitra", "Sales", "chaitra@gmail.com"));
}
public List<Employee> getEmployees() {
return employees;
}
}
Note that we have added the @ApplicationScoped annotation to the class and this class shares the same data across the application
Create a stylesheet
All the external CSS files and JS files goes inside the resources folder of the WebContent. Create css folder inside the resources folder to keep all the external stylesheets and create file dashboard.css
h2 {
color: red;
}
Create a Response page
Create dashboard.xhtml file inside the WebContent and add the following content
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml"
xmlns:h="http://xmlns.jcp.org/jsf/html"
xmlns:ui="http://xmlns.jcp.org/jsf/facelets"
xmlns:c="http://xmlns.jcp.org/jsf/core">
<h:head>
<title>Dashboard</title>
<h:outputStylesheet library="css" name="dashboard.css" />
</h:head>
<h:body>
<h2>Employees List</h2>
<hr/>
<h:dataTable value="#{employeeDataUtil.employees}" var="employee" border="1">
<h:column>
<c:facet name="header">Name</c:facet>
#{employee.name}
</h:column>
<h:column>
<c:facet name="header">Department</c:facet>
#{employee.department}
</h:column>
<h:column>
<c:facet name="header">Email</c:facet>
#{employee.email}
</h:column>
</h:dataTable>
</h:body>
</html>
Run the app
To run the application, right click on the project, select Run As -> choose Run on Server
Open the browser, navigate to the URL http://localhost:8080/JSF-hello-world/faces/register-form.xhtml
—
That’s it for this post. If you like this post, then please share this with your friends and collogues. Also share this post on your social media profiles as well.
