Example of Faceted Navigation using JSP and Spring MVC
Faceted Navigation using JSP and Spring MVC.
First, create a Java class to represent a product, with fields for the product name, category, brand, color, and price:
public class Product {
private String name;
private String category;
private String brand;
private String color;
private double price;
// Constructor, getters, and setters omitted for brevity
}
Next, create a Spring MVC controller to handle requests and responses:
@Controller
public class ProductController {
@Autowired
private ProductService productService;
@RequestMapping("/")
public ModelAndView index() {
ModelAndView mav = new ModelAndView("index");
mav.addObject("categories", productService.getCategories());
mav.addObject("brands", productService.getBrands());
mav.addObject("colors", productService.getColors());
mav.addObject("products", productService.getAllProducts());
return mav;
}
@RequestMapping("/filter")
public ModelAndView filter(@RequestParam(value = "category", required = false) String category,
@RequestParam(value = "brand", required = false) String brand,
@RequestParam(value = "color", required = false) String color) {
ModelAndView mav = new ModelAndView("index");
mav.addObject("categories", productService.getCategories());
mav.addObject("brands", productService.getBrands());
mav.addObject("colors", productService.getColors());
mav.addObject("products", productService.getProductsByFilter(category, brand, color));
mav.addObject("selectedCategory", category);
mav.addObject("selectedBrand", brand);
mav.addObject("selectedColor", color);
return mav;
}
}
This controller has two request mappings: one for the home page (“/”), which displays all products and facet options, and one for filtered results (“/filter”), which displays only products that match the selected facet options. The ProductService is injected and used to retrieve the necessary data.
Next – Create a JSP view file to display the products and facet navigation:
<%@ taglib uri="http://www.springframework.org/tags/form" prefix="form" %>
<html>
<head>
<title>Faceted Navigation Example</title>
</head>
<body>
<h1>Faceted Navigation Example</h1>
<div class="facets">
<h2>Facets</h2>
<form:form action="/filter" method="get">
<ul>
<li>
<h3>Category</h3>
<ul>
<li><a href="?category=">All</a></li>
<c:forEach var="category" items="${categories}">
<li>
<a href="?category=${category}">
<c:out value="${category}"/>
</a>
</li>
</c:forEach>
</ul>
</li>
<li>
<h3>Brand</h3>
<ul>
<li><a href="?brand=">All</a></li>
<c:forEach var="brand" items="${brands}">
<li>
<a href="?brand=${brand}">
<c:out value="${brand}"/>
</a>
</li>
</c:forEach>
</ul>
</li>
<li>
<h3>Color</h3>
<ul>
<li><a href="?color=">All</a></li>
<c:forEach var="color" items="${colors}">
<li>
<a href="?color=${color}">
<c:out value="${color}"/>
</a>
</li>
</c:forEach>
Together – these will allow you to build the facet navigation based on the categories, brands, and colors available in the database. When a user clicks on a facet option, the filter query is updated, and the results are reloaded based on the selected filter.