Time for action – adding a welcome page
To create and add a welcome page, we need to execute the following steps:
- Create a
WEB-INF/jsp/directory structure under thesrc/main/webapp/directory; create a jsp view file calledwelcome.jspunder thesrc/main/webapp/WEB-INF/jsp/directory, and add the following code snippets into it and save it:<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core"%> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1"> <link rel="stylesheet" href="//netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap.min.css"> <title>Welcome</title> </head> <body> <section> <div class="jumbotron"> <div class="container"> <h1> ${greeting} </h1> <p> ${tagline} </p> </div> </div> </section> </body> </html> - Create a class called
HomeControllerunder thecom.packt.webstore.controllerpackage in the source directorysrc/main/java, and add the following code into it:package com.packt.webstore.controller; import org.springframework.stereotype.Controller; import org.springframework.ui.Model; import org.springframework.web.bind.annotation.RequestMapping; @Controller public class HomeController { @RequestMapping("/") public String welcome(Model model) { model.addAttribute("greeting", "Welcome to Web Store!"); model.addAttribute("tagline", "The one and only amazing webstore"); return "welcome"; } }
What just happened?
In step 1, we just created a JSP view; the important thing we need to notice here is the <h1> tag and the <p> tag. Both the tags have some expression that is surrounded by curly braces and prefixed by the $ symbol:
<h1> ${greeting} </h1>
<p> ${tagline} </p>So, what is the meaning of ${greeting}? It means that greeting is a kind of variable; during the rendering of this JSP page, the value stored in the greeting variable will be shown in the header 1 style, and similarly, the value stored in the tagline variable will be shown as a paragraph.
So now, the next question of where we will assign values to those variables arises. This is where the controller will be of help; within the welcome method of the HomeController class, take a look at the following lines of code:
model.addAttribute("greeting", "Welcome to Web Store!");
model.addAttribute("tagline", "The one and only amazing web store");You can observe that the two variable names, greeting and tagline, are passed as a first parameter of the addAttribute method and the corresponding second parameter is the value for each variable. So what we are doing here is simply putting two strings, "Welcome to Web Store!" and "The one and only amazing web store", into the model with their corresponding keys as greeting and tagline. As of now, simply consider the fact that model is a kind of map. Folks with knowledge of servlet programming can consider the fact that model.addAttribute works exactly like request.setAttribute.
So, whatever value we put into the model can be retrieved from the view (jsp) using the corresponding key with the help of the ${} placeholder expression notation.
The dispatcher servlet
We created a controller that can put values into the model, and we created the view that can read those values from the model. So, the model acts as an intermediate between the view and the controller; with this, we have finished all the coding part required to present the welcome page. So will we be able to run our project now? No; at this stage, if we run our project and enter the http://localhost:8080/webstore/ URL on the browser, we will get an HTTP Status 404 error. This is because we have not performed any servlet mapping yet. In a Spring MVC project, we must configure a front servlet mapping. The front servlet (sometimes called the front controller) mapping is a design pattern where all requests for a particular web application are directed to the same servlet. One such front servlet given by Spring MVC framework is the dispatcher servlet (org.springframework.web.servlet.DispatcherServlet). We have not configured a dispatcher servlet for our project yet; this is why we get the HTTP Status 404 error.
