Mastering Spring MVC 4

Fr
ee
Mastering Spring MVC will take you on a journey from

developing your own web application to uploading it to the
cloud.
What you will learn from this book
You begin your journey by generating your own Spring

project by using Spring Tool Suite and Spring Boot.
Set up your own web application using

Spring Boot and Spring Tool Suite
As you develop an advanced-level interactive application

that can handle file uploads as well as complex URLs, you
will dive into the inner workings of Spring MVC and the
principles of modern web architectures.
Discover the MVC architecture and the

different tools along with navigating
between views
You will then test, secure, and optimize your Spring web
application and design RESTful services that will be
consumed on the frontend.
Design complex advanced-level forms and

validate the model
Finally, at the end of the journey, when everything is ready,

you will release your application on a cloud provider and
invite everyone to see it.
Craft a RESTful application with a meaningful

API and error messages
Secure your application while allowing

it to scale
Who this book is written for
Optimize your requests with caching, ETags,

and asynchronous responses
$ 49.99 US
31.99 UK
community experience distilled
P U B L I S H I N G
Prices do not include

local sales tax or VAT
where applicable
Visit www.PacktPub.com for books, eBooks,

code, downloads, and PacktLib.
Geoffroy Warin
Deploy the web application to the cloud in

a snap
pl
C o m m u n i t y
Create maintainable unit and acceptance tests
Once this is done, we go a step ahead to see how far we've

come, the problems we solved and the ones we didn't. We
even check out other projects out there in the community.
This book is perfect for developers who are familiar with

the fundamentals of Spring programming and are eager
to deepen their web development skills. Prior knowledge
of the Spring MVC framework is recommended.
Mastering Spring MVC 4
Mastering Spring
MVC 4
Sa
m
E x p e r i e n c e
D i s t i l l e d
Mastering Spring
MVC 4
Gain expertise in designing real-world web applications using the
Spring MVC framework
Geoffroy Warin
In this package, you will find:
The author biography

A preview chapter from the book, Chapter 2 'Mastering the MVC
Architecture'
A synopsis of the books content
More information on Mastering Spring MVC 4
About the Author

Geoffroy Warin has been programming since he was 10. A firm believer in the
Software Craftsmanship movement and open source initiatives, he is a developer by

choice and conviction. He has been working on the conception of enterprise-level
web applications in Java and JavaScript throughout the course of his career.
At ease with both the backend and frontend, Geoffroy has a strong focus on Clean
Code and testability. He believes that developers should strive for readable code that
delivers constant value to their customers.
Pair programming and mentorship are his primary tools to promote a test-driven
development approach and create great software designs.
He also teaches courses on Java web stacks and is a Groovy and Spring enthusiast.
Lately, he has been part of the reviewing team for Learning Spring Boot and Spring
Boot Cookbook, both by Packt Publishing, which cover the latest major additions to
the Spring ecosystem.
Check out his blog at http://geowarin.github.io and his Twitter account at
https://twitter.com/geowarin for fresh Spring and JavaScript programming tips.
Preface
As a web developer, I like to create new things, put them online quickly, and move
on to my next idea.
In a world where all our applications are connected to each other, we need to interact
with social media to promote our products and complex systems, to provide great
value for our users.
Until recently, all this was a distant and complicated world for Java developers. With
the birth of Spring Boot and the democratization of cloud platforms, we can now
create amazing applications and make them available to everyone in record time,
without spending a penny.
In this book, we will build a useful web application from scratch. An application with
a lot of neat features, such as internationalization, form validation, distributed sessions
and caches, social login, multithreaded programming, and many more.
Also, we will test it completely.
By the end of this book, we will have published our little application and made it
available on the Web.
If this sounds like fun to you, let's not waste any more time and get our hands on the
code!
Preface
What this book covers

Chapter 1, Setting Up a Spring Web Application in No Time, gets us started with Spring
Boot really quickly. It covers the tools that will make us more productive, such as
Spring Tool Suite and Git. It will also help us to scaffold our application in a snap
and see the magic behind Spring boot.
Chapter 2, Mastering the MVC Architecture, guides us through creating a small
Twitter search engine. It covers the basics of Spring MVC and the principles of web
architecture along the way.
Chapter 3, Handling Forms and Complex URL Mapping, helps you understand how you
can create a user profile form. It covers how to validate our data on the server, as
well as on the client, and make our application available in different languages.
Chapter 4, File Upload and Error Handling, guides you through adding file upload to
your profile form. It demonstrates handling errors properly in a Spring MVC and
displaying custom error pages.
Chapter 5, Crafting a RESTful Application, explains the principles of a RESTful
architecture. It also helps us to create a user management API accessible through
HTTP calls, see which tools can help us design this API, and talks about how we can
document it easily.
Chapter 6, Securing Your Application, guides us through securing our application. It
covers how we can secure our RESTful API with basic HTTP authentication and our
web pages behind a login page. It demonstrates how to enable login via Twitter and
store our session on a Redis server to allow our application to scale.
Chapter 7, Leaving Nothing to Luck Unit Tests and Acceptance Tests, helps us test our
application. It discusses testing and TDD, and covers how to unit test our controllers
and use modern libraries to design end-to-end tests. It finishes with how Groovy can
improve our productivity and the readability of our tests.
Chapter 8, Optimizing Your Requests, takes us through optimizing our application.
It covers how to use cache-control and Gzipping. This chapter teaches you how to
cache our Twitter search results in-memory and on Redis, and shows you how to
multithread the search. As a bonus, implementing Etags and using WebSockets is
also covered.
Preface
Chapter 9, Deploying Your Web Application to the Cloud, guides us through publishing
our application. It shows how the different PaaS solutions can be compared to each
other. Then, it demonstrates how to deploy the application on both Cloud Foundry
and Heroku.
Chapter 10, Beyond Spring Web, discusses the Spring ecosystem in general, what
modern web applications are made of, and where to go from there.
Mastering the MVC

Architecture
In this chapter, we will discuss the MVC architecture principles and see how Spring
MVC implements those.
We will continue to use the application from the previous chapter and build
something more interesting. Our goal is to design a simple page where users can
search for tweets corresponding to certain criteria and display them to our users.
To achieve this, we will use the Spring Social Twitter project, which is available
at http://projects.spring.io/spring-social-twitter/.
We will see how to make Spring MVC work with a modern template engine,
Thymeleaf, and try to understand the inner mechanics of the framework. We will
route our users through different views, and finally, we will give a stellar look to
our application using WebJars and Materialize (http://materializecss.com).
[ 33 ]
Mastering the MVC Architecture
The MVC architecture

I expect the meaning of the MVC acronym to be familiar to most. It stands for
Model View Controller, and it is considered to be a very popular way to build a user
interface by decoupling the data and the presentation layers.
The MVC pattern became wildly popular after emerging from the world of Smalltalk
and landing in the Ruby on Rails framework.
The architectural pattern features three layers:
The Model: This consists of various representations of the data your

application knows about.
The View: This is made up of several representations of the data that will be
displayed to your users.
The Controller: This is the part of the application that will handle user
interactions. It's a bridge between the model and the view.
[ 34 ]
Chapter 2
The idea behind MVC is to decouple the View from the Model. The model must
be self-contained and ignorant of the UI. This basically allows the same data to be
reused across multiple views. These views are different way to look at the data.
Drill down or using different renderers (HTML, PDF) are good illustrations of this
principle.
The Controller acts as a mediator between the user and the data. Its role is to control
actions available to the end user, as well as routing through the different views of the
application.
MVC critics and best practices

While MVC remains the go-to approach for designing a UI, many criticisms arose
with its prevalence. Most critics are actually pointing a finger at the incorrect use
of the pattern.
Anemic Domain Model

Eric Evans' influential book Domain Driven Design, also abbreviated as DDD, defines
a set of architecture rules leading to a better integration of the business domain
inside the code.
One of the core ideas is to take advantage of the object-oriented paradigms inside
the domain objects. Going against this principle is sometimes referred to as Anemic
Domain Model. A good definition of this problem can be found on Martin Fowler's
blog (http://www.martinfowler.com/bliki/AnemicDomainModel.html).
An Anemic Model typically exhibits the following symptoms:
The model is constituted from very simple plain old Java objects (POJOs)
with only getters and setters
All the business logic is handled inside a service layer
Validation of the model is found outside this model, for instance, in

controllers
This can be a bad practice depending on the complexity of your business domain.
Generally speaking, DDD practices require additional efforts to isolate the domain
from the application logic.
Architecture is always a tradeoff. It is good to note that typical ways of designing a
Spring application can lead to complicated maintenance somewhere along the road.
[ 35 ]
How to avoid domain anemia is explained here:
The Service layer is good for application-level abstraction like transaction

handling, not business logic.
Your domain should always be in a valid state. Leave validation inside the
form objects using validators or JSR-303's validation annotations.
translate the inputs into meaningful domain objects.
Think of your data layer in term of repositories with domain queries (refer to
Spring Data Specification, for example)
Decouple your domain logic from the underlying persistence framework
Use real objects as much as possible. For instance, manipulate the FirstName
class rather than a string.
There is much more to DDD than these simple rules: Entities, value types,
Ubiquitous Language, Bounded Context, Onion Architecture, and anti corruption
layers. I strongly encourage you to study these principles on your own. As far as we
are concerned, with this book we will try to keep in mind the guidelines listed earlier
as we craft our web application. These concerns will become more familiar to you as
we advance through this book.
Learning from the sources

If you're familiar with Spring, you have probably already landed on Spring's
website, http://spring.io. It is entirely made with Spring and the good news
is that it is open source.
The code name of the project is sagan. It has numerous interesting features:
A gradle multimodule project
Security integration
Github integration
Elasticsearch integration
A JavaScript frontend application
The GitHub wiki associated with the project is really detailed and will help you get
started easily with the project.
[ 36 ]
Chapter 2
Visit the following URL if you're interested in the Spring's

architecture of a real world application:
https://github.com/spring-io/sagan
Spring MVC 1-0-1

In spring MVC, the model is a simple map encapsulated in the Model or
ModelAndView classes of Spring MVC. It can come from a database, files, external
services, and so on. It is up to you to define how to fetch the data and put it into the
model. The recommended way of interacting with the data layer is through Spring
Data libraries: Spring Data JPA, Spring Data MongoDB, and so on. There are
a dozen projects related to Spring Data and I encourage you to take a look at
http://projects.spring.io/spring-data.
The controller side of Spring MVC is handled through the use of the @Controller
annotation. In a web application, the controller's role is to respond to HTTP requests.
Classes annotated with the @Controller annotation will be picked up by Spring and
given a chance to handle upcoming requests.
Via the @RequestMapping annotation, Controllers declare handling specific requests
based on their HTTP method (GET or POST methods, for instance) and their URLs.
The Controller then decides to either write content directly in the web response or
route the application to a view and inject properties into that view.
A pure RESTful application would choose the first approach and expose a JSON
or XML representation of the model directly in the HTTP response with the
@ResponseBody annotation. In the case of a web application, this type of architecture
is often associated with a frontend JavaScript framework such as Backbone.js,
AngularJS, or React. In this case, the Spring application would then only handle the
Model layer of the MVC model. We will study this kind of architecture in Chapter 4,
File Upload and Error Handling.
With the second approach, the Model is passed to the View, which is rendered by a
templating engine and then written to the response.
The view is often associated with a templating dialect, which will allow navigation
inside the model. Popular dialects for templating are JSPs, FreeMarker, or Thymeleaf.
Hybrid approaches may take advantage of the templating engine to interact with
some aspects of the application and then delegate the view layer to a frontend
framework.
[ 37 ]
Using Thymeleaf
Thymeleaf is a templating engine that gets particular attention from the Spring
community.
Its success is due mostly to its friendly syntax (it almost looks like HTML) and the
ease with which it can be extended.
Various extensions are available and integrated with Spring Boot:
Support
Dependency
Layouts
nz.net.ultraq.thymeleaf:thymeleaf-layoutdialect
com.github.mxab.thymeleaf.
HTML5 data-* attributes
extras:thymeleaf-extras-data-attribute
Internet Explorer conditional org.thymeleaf.extras:thymeleaf-extrasconditionalcomments
comments
Support for spring security
org.thymeleaf.extras:thymeleaf-extrasspringsecurity3
A very good tutorial on Thymeleaf's integration with Spring can be found at http://
www.thymeleaf.org/doc/tutorials/2.1/thymeleafspring.html.
Without further ado, let's add the spring-boot-starter-thymeleaf dependency to

bootstrap the thymeleaf templating engine:
buildscript {
ext {
springBootVersion = '1.2.5.RELEASE'
}
repositories {
mavenCentral()
}
dependencies {
classpath("org.springframework.boot:spring-boot-gradleplugin:${springBootVersion}")
classpath("io.spring.gradle:dependency-managementplugin:0.5.1.RELEASE")
}
}
[ 38 ]
Chapter 2
apply
apply
apply
apply
apply
plugin:
plugin:
plugin:
plugin:
plugin:
'java'
'eclipse'
'idea'
'spring-boot'
'io.spring.dependency-management'
jar {
baseName = 'masterSpringMvc'
version = '0.0.1-SNAPSHOT'
}
sourceCompatibility = 1.8
targetCompatibility = 1.8
repositories {
mavenCentral()
}
dependencies {
compile 'org.springframework.boot:spring-boot-starter-web'
compile 'org.springframework.boot:spring-boot-starter-thymeleaf'
testCompile 'org.springframework.boot:spring-boot-starter-test'
}
eclipse {
classpath {
containers.remove('org.eclipse.jdt.launching.JRE_CONTAINER')
containers 'org.eclipse.jdt.launching.JRE_CONTAINER/org.
eclipse.jdt.internal.debug.ui.launcher.StandardVMType/JavaSE-1.8'
}
}
task wrapper(type: Wrapper) {
gradleVersion = '2.3'
}
[ 39 ]
Our first page

We will now add the first page to our application. It will be located in src/main/
resources/templates. Let's call the file resultPage.html:
<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">
<head lang="en">
<meta charset="UTF-8"/>
<title>Hello thymeleaf</title>
</head>
<body>
<span th:text="|Hello thymeleaf|">Hello html</span>
</body>
</html>
We can see from the very start that Thymeleaf integrates perfectly with html and its
syntax almost feels natural.
The th:text value is put between pipes. It means that all the values inside the text
will be concatenated.
It might seem a bit awkward at first, but in practice, text will rarely be hardcoded in
our pages; so, Thymeleaf makes an opinionated design decision here.
Thymeleaf has a big advantage for web designers: everything that is dynamic inside
the templates can fall back to a default value in the case where they are opened
without the server running. Resource URLs can be specified relatively and every
markup can contain placeholders. In our previous example, the text "Hello html"
would not be displayed when the view is rendered in the context of our application,
but it will if the file is opened directly with a web browser.
To speed up development, add this property to your application.properties file:
spring.thymeleaf.cache=false
This will disable the view cache and cause templates to reload every time they are
accessed.
Of course, this setting will need to be disabled when we go into production. We will
see that in Chapter 8, Optimizing Your Requests.
[ 40 ]
Chapter 2
Reloading the views

With the cache disabled, simply save your view with eclipse or use
the Build > Make Project action in IntelliJ to refresh the views
after a change.
Lastly, we will need to modify our HelloController class. Instead of displaying

plain text, it must now route to our freshly created view. To accomplish this, we will
remove the @ResponseBody annotation. Doing so and still returning a string will
tell Spring MVC to map this string to a view name instead of displaying a particular
model directly in the response.
Here is what our controller now looks like:
@Controller
public class HelloController {
@RequestMapping("/")
public String hello() {
return "resultPage";
}
}
In this example, the controller will redirect the user to the view name resultPage.
The ViewResolver interface will then associate this name with our page.
Let's launch our application again and go to http://localhost:8080.
You will see the following page:
[ 41 ]
Spring MVC architecture

Let's take a step back from this spectacular new "Hello World" and try to understand
what happened inside our web application. To do this, we will retrace the journey of
the HTTP request our browser sent and the response it got from the server.
DispatcherServlet
The entry point of every Spring web application is the DispatcherServlet. The
following figure illustrates the Dispatcher Servlet architecture:
This is a classical HttpServlet class that dispatches HTTP requests to

HandlerMapping. A HandlerMapping is an association of resources (URLs) and
Controllers.
[ 42 ]
Chapter 2
The appropriate methodsthose annotated with @RequestMapping annotationare

then called on the Controller. In this method, the controller sets the model data and
returns the view name to the dispatcher.
The DispatcherServlet will then interrogate the ViewResolver interface to find
the corresponding implementation of the view.
In our case, the ThymeleafAutoConfiguration class has set up the view resolver
for us.
You can see in the ThymeleafProperties class that the default prefix for our views
is classpath:/templates/ the default suffix is .html.
This means that, given the view name resultPage, the view resolver will look in the
templates directory of our classpath, looking for a file called resultPage.html.
In our application our ViewResolver interface is static, but more advanced
implementation can return different results given the request headers or the
user's locale.
The view will finally be rendered and the result written to the response.
Passing data to the view

Our first page is completely static; it does not really take advantage of the power
of Spring MVC. Let's spice things up a little bit. What if the "Hello World" string,
instead of being hardcoded, came from the server?
It would still be a lame "hello world" you say? Yes, but it will open up many more
possibilities. Let's change our resultPage.html file to display a message coming
from the model:
<!DOCTYPE html>
<head lang="en">
<title>Hello thymeleaf</title>
</head>
<body>
<span th:text="${message}">Hello html</span>
</body>
</html>
[ 43 ]
Then, let's modify our controller so it puts this message inside this model:
@Controller
public String hello(Model model) {
model.addAttribute("message", "Hello from the controller");
}
}
I know, the suspense is killing you! Let's see what http://localhost:8080 looks
like.
The first thing to note is that we passed a new argument to the controller's method
and that the DispatcherServlet provided the correct object for us. There are,
in fact, many objects that can be injected into the controller's methods such as
HttpRequest or HttpResponse, the Locale, the TimeZone, and the Principal,
which represent an authenticated user. The full list of such objects is available in the
documentation, which can be found at http://docs.spring.io/spring/docs/
current/spring-framework-reference/html/mvc.html#mvc-ann-arguments.
Spring Expression Language

When using the ${} syntax, you are in fact using Spring Expression Language
(SpEL). There are several variants of EL available in the wild; SpEl is one of the most
powerful variants.
[ 44 ]
Chapter 2
Here is an overview of its main features:

Feature
Syntax
Accessing a list element
list[0]
Accessing a map entry
map[key]
Ternary operator
Elvis operator
condition ? 'yes' :
'no'
person ?: default
Safe navigation
person?.name
Returns null if person or

her name is null
Templating
'Your name is
#{person.name}'
${persons.![name]}
Injects values into a string
Selection
persons.?[name ==
'Bob']'
Retrieves the person whose

name is Bob inside a list
Function call
person.sayHello()
Projections
Explanation
Returns default if person's

value is null
Extracts the names of all the

persons and puts them into
a list
For complete reference, check the manual at http://docs.spring.

io/spring/docs/current/spring-framework-reference/
html/expressions.html.
The SpEl usage is not limited to views. You can also use it in various places inside
the Spring framework, for instance, when injecting properties inside beans with the
@Value annotation.
Getting data with a request parameter

We are able to display data coming from the server inside the view. However, what
if we wanted to get input from the user? With the HTTP protocol, there are multiple
ways to do this. The simplest way is to pass a query parameter to our URL.
Query parameters
You certainly know query parameters. They are found after
the ? character in a URL. They consist of a list of name and
values separated by the & symbol (Ampersand), for example,
page?var1=value1&var2=value2.
[ 45 ]
We can leverage this technique to ask our user for their name. Let's modify our
HelloController class again:
@Controller
public String hello(@RequestParam("name") String userName, Model
model) {
model.addAttribute("message", "Hello, " + userName);
}
}
If we navigate to localhost:8080/?name=Geoffroy, we can see the following:
By default, the request parameter is mandatory. This means that if we were to

navigate to localhost:8080, we would see an error message.
Looking at the @RequestParam code, we can see that in addition to the value
parameter, there are two other attributes possible: required and defaultValue.
Therefore, we can change our code and specify a default value for our parameter or
indicate that it is not required:
@Controller
public String hello(@RequestParam(defaultValue = "world") String
name, Model model) {
model.addAttribute("message", "Hello, " + name);
}
}
In Java 8, it is possible not to specify the value parameter. In that

case, the name of the annotated method parameter will be used.
[ 46 ]
Chapter 2
Enough Hello Worlds, let's fetch tweets!

All right, the name of the book isn't "Mastering Hello Worlds", after all. With Spring,
interrogating Twitter's API is really easy.
Registering your application

Before you start, you have to register your application in the Twitter developer
console.
Go to https://apps.twitter.com and create a new application.
Give it the name you please. Under the website and Callback URL sections, just
enter http://127.0.0.1:8080. This will allow you to test your application in
development on your local machine.
[ 47 ]
Now, navigate to the keys, access the token, and copy the Consumer Key and
the Consumer Secret. We will use this in a moment. Take a look at the following
screenshot:
By default, our application has read only permissions. This will be enough for our
application, but you can tweak it if you wish.
Setting up Spring Social Twitter

We will add the following dependency to our build.gradle file:
compile 'org.springframework.boot:spring-boot-starter-social-twitter'
Spring Social is a set of projects providing access to the public APIs

of various social networks. Out of the box, Spring Boot provides
integration with Twitter, Facebook, and LinkedIn. Spring Social
includes about 30 projects overall, which can be found at http://
projects.spring.io/spring-social/.
Add the following two lines to the application.properties:

spring.social.twitter.appId= <Consumer Key>
spring.social.twitter.appSecret= <Consumer Secret>
These are the keys associated with the application we just created.
[ 48 ]
Chapter 2
You will learn more about OAuth in Chapter 6, Securing Your Application. For now,
we will just use those credentials to issue requests to Twitter's API on behalf of our
application.
Accessing Twitter
We can now use Twitter in our controller. Let's change its name to TweetController
as a variable to reflect its new responsibility in a better manner:
@Controller
@Autowired
private Twitter twitter;
public String hello(@RequestParam(defaultValue =
"masterSpringMVC4") String search, Model model) {
SearchResults searchResults = twitter.searchOperations().
search(search);
String text = searchResults.getTweets().get(0).getText();
model.addAttribute("message", text);
}
}
As you can see, the code searches for tweets matching the request parameter. If it all
goes well, you will see the text of the first one being displayed on your screen:
Of course, if the search doesn't yield any result, our clumsy code will fail with an
ArrayOutOfBoundException. So, do not hesitate to tweet to solve the problem!
What if we wanted to display a list of tweets? Let's modify the resultPage.html file:
<!DOCTYPE html>
<head lang="en">
<title>Hello twitter</title>
[ 49 ]

</head>
<body>
<ul>
<li th:each="tweet : ${tweets}" th:text="${tweet}">Some
tweet</li>
</ul>
</body>
</html>
The th:each is a tag defined in Thymeleaf that allows it to iterate over a

collection and assign each value to a variable inside a loop.
We will need to change our controller as well:

@Controller
public class TweetController {
@Autowired
search(search);
List<String> tweets =
searchResults.getTweets()
.stream()
.map(Tweet::getText)
.collect(Collectors.toList());
model.addAttribute("tweets", tweets);
}
}
Note that we are using Java 8 streams to collect only the messages from the tweets.
The Tweet class contains many other attributes such as the sender, the retweet count,
and so on. However, we will keep it simple for now, as shown in the following
screenshot:
[ 50 ]
Chapter 2
Java 8 streams and lambdas

You might not be familiar with lambdas yet. In Java 8, every collection gets a default
method stream(), which gives access to functional-style operations.
These operations can be either intermediate operations returning a stream, and thus
allowing chaining, or a terminal operation that returns a value.
The most famous intermediate operations are as follows:
map: This applies a method to every element of a list and returns the list of
filter: This returns a list of every element matching a predicate
reduce: This projects a list into a single value using an operation and an
results
accumulator
Lambdas are shorthand syntax for function expressions. They can be coerced into a
Single Abstract Method, an interface with only one function.
For instance, you can implement the Comparator interface as follows:
Comparator<Integer> c = (e1, e2) -> e1 - e2;
Within lambdas, the return keyword is implicitly its last expression.

The double colon operator we used earlier is a shortcut to get a reference to a
function on a class,
Tweet::getText
[ 51 ]
The preceding is equivalent to the following:

(Tweet t) -> t.getText()
The collect method allows us to call a terminal operation. The Collectors class
is a set of terminal operations that will put results into lists, sets, or maps, allowing
grouping, joining, and so on.
Calling the collect(Collectors.toList()) method will produce a list with every
element within the stream; in our case, the tweet names.
Material design with WebJars

Our application is already great but it seriously leaves something to be desired in
terms of aesthetics. You may have heard of material design. It is Google's take on
flat design,
We will use Materialize (http://materializecss.com), a great looking responsive
CSS and JavaScript library, just like Bootstrap.
[ 52 ]
Chapter 2
We talked a bit about WebJars in Chapter 1, Setting Up a Spring Web Application

in No Time; we will now get to use them. Add jQuery and Materialize CSS to our
dependencies:
compile 'org.webjars:materializecss:0.96.0'
compile 'org.webjars:jquery:2.1.4'
The way a WebJar is organized is completely standardized. You will find the JS and
CSS files of any library in /webjars/{lib}/{version}/*.js.
For instance, to add jQuery to our page, the following to a web page:
<script src="/webjars/jquery/2.1.4/jquery.js"></script>
Let's modify our controller so that it gives us a list of all tweet objects instead of
simple text:
package masterSpringMvc.controller;
import
import
import
import
import
import
import
import
org.springframework.beans.factory.annotation.Autowired;
org.springframework.social.twitter.api.SearchResults;
org.springframework.social.twitter.api.Tweet;
org.springframework.social.twitter.api.Twitter;
org.springframework.stereotype.Controller;
org.springframework.ui.Model;
org.springframework.web.bind.annotation.RequestMapping;
org.springframework.web.bind.annotation.RequestParam;
import java.util.List;
@Controller
@Autowired
search(search);
List<Tweet> tweets = searchResults.getTweets();
model.addAttribute("search", search);
}
}
[ 53 ]
Let's include materialize CSS in our view:

<!DOCTYPE html>
<head lang="en">
<link href="/webjars/materializecss/0.96.0/css/materialize.css"
type="text/css" rel="stylesheet" media="screen,projection"/>
</head>
<body>
<div class="row">
<h2 class="indigo-text center" th:text="|Tweet results for
${search}|">Tweets</h2>
<ul class="collection">
<li class="collection-item avatar" th:each="tweet :
${tweets}">
<img th:src="${tweet.user.profileImageUrl}" alt=""
class="circle"/>
<span class="title" th:text="${tweet.user.
name}">Username</span>
<p th:text="${tweet.text}">Tweet message</p>
</li>
</ul>
</div>
<script src="/webjars/materializecss/0.96.0/js/materialize.js"></
script>
</body>
</html>
The result already looks way better!
[ 54 ]
Chapter 2
Using layouts
The last thing we want to do is to put the reusable chunks of our UI into templates.
To do this, we will use the thymeleaf-layout-dialect dependency, which is
included in the spring-boot-starter-thymeleaf dependency of our project.
We will create a new file called default.html in src/main/resources/templates/
layout. It will contain the code we will repeat from page to page:
<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org"
xmlns:layout="http://www.ultraq.net.nz/thymeleaf/layout">
<head>
<meta http-equiv="Content-Type" content="text/html;
charset=UTF-8"/>
<meta name="viewport" content="width=device-width, initialscale=1, maximum-scale=1.0, user-scalable=no"/>
<title>Default title</title>
<link href="/webjars/materializecss/0.96.0/css/materialize.css"
type="text/css" rel="stylesheet" media="screen,projection"/>
</head>
<body>
[ 55 ]

<section layout:fragment="content">
<p>Page content goes here</p>
</section>
<script src="/webjars/materializecss/0.96.0/js/materialize.js"></
script>
</body>
</html>
We will now modify the resultPage.html file so it uses the layout, which will
simplify its contents:
<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org"
xmlns:layout="http://www.ultraq.net.nz/thymeleaf/layout"
layout:decorator="layout/default">
<head lang="en">
</head>
<body>
<div class="row" layout:fragment="content">
<h2 class="indigo-text center" th:text="|Tweet results for
${search}|">Tweets</h2>
<ul class="collection">
<li class="collection-item avatar" th:each="tweet :
${tweets}">
<img th:src="${tweet.user.profileImageUrl}" alt=""
class="circle"/>
<span class="title" th:text="${tweet.user.
name}">Username</span>
<p th:text="${tweet.text}">Tweet message</p>
</li>
</ul>
</div>
</body>
</html>
The layout:decorator="layout/default" will indicate where our layout can be

found. We can then inject content into the different layout:fragment sections of the
layout. Note that each template are valid HTML files. You can also override the title
very easily.
[ 56 ]
Chapter 2
Navigation
We have a nice little tweet display application, but how are our users supposed to
figure out that they need to supply a "search" request parameter?
It would be nice if we added a little form to our application.
Let's do something like this:
First, we need to modify our TweetController to add a second view to our

application. The search page will be available directly at the root of our application
and the result page when hit enter in the search field:
@Controller
@Autowired
public String home() {
return "searchPage";
}
@RequestMapping("/result")
search(search);
List<Tweet> tweets = searchResults.getTweets();
model.addAttribute("search", search);
}
}
[ 57 ]
We will add another page to the templates folder called the searchPage.html file.
It will contain a simple form, which will pass the search term to the result page via
the get method:
<!DOCTYPE html>
<html xmlns:th="http://www.w3.org/1999/xhtml"
<head lang="en">
<title>Search</title>
</head>
<body>
<h4 class="indigo-text center">Please enter a search term</h4>
<form action="/result" method="get" class="col s12">
<div class="row center">
<div class="input-field col s6 offset-s3">
<i class="mdi-action-search prefix"></i>
<input id="search" name="search" type="text"
class="validate"/>
<label for="search">Search</label>
</div>
</div>
</form>
</div>
</body>
</html>
This is very simple HTML and it works perfectly. You can try it now.
What if we wanted to disallow some search result? Let's say we want to display an
error message if the user types in struts.
The best way to achieve this would be to modify the form to post the data. In the
controller, we can then intercept what is posted and implement this business rule
accordingly.
First, we need to change the form in the searchPage, which is as follows:
<form action="/result" method="get" class="col s12">
[ 58 ]
Chapter 2
Now, we change the form to this:

<form action="/postSearch" method="post" class="col s12">
We also need to handle this post on the server. Add this method to the
TweetController:
@RequestMapping(value = "/postSearch", method = RequestMethod.POST)
public String postSearch(HttpServletRequest request,
RedirectAttributes redirectAttributes) {
String search = request.getParameter("search");
redirectAttributes.addAttribute("search", search);
return "redirect:result";
}
There are several novelties here:
In the request mapping annotation, we specify the HTTP method we want to

handle, that is, POST.
We inject two attributes directly as method parameters. They are the request
and RedirectAttributes.
We retrieve the value posted on the request and pass it on to the next view.
Instead of returning the name of the view, we make a redirection to a URL.
The RedirectAttributes is a Spring model that will be specifically used to

propagate values in a redirect scenario.
Redirect/Forward are classical options in the context of a Java web
application. They both change the view that is displayed on the user's
browser. The difference is that Redirect will send a 302 header that will
trigger navigation inside the browser, whereas Forward will not cause
the URL to change. In Spring MVC, you can use either option simply by
prefixing your method return strings with redirect: or forward:. In
both cases, the string you return will not be resolved to a view like we
saw earlier, but will instead trigger navigation to a specific URL.
The preceding example is a bit contrived, and we will see smarter form handling in
the next chapter. If you put a breakpoint in the postSearch method, you will see
that it will be called right after a post in our form.
So what about the error message?
[ 59 ]
Let's change the postSearch method:

@RequestMapping(value = "/postSearch", method = RequestMethod.POST)
public String postSearch(HttpServletRequest request,
RedirectAttributes redirectAttributes) {
String search = request.getParameter("search");
if (search.toLowerCase().contains("struts")) {
redirectAttributes.addFlashAttribute("error", "Try
using spring instead!");
return "redirect:/";
}
redirectAttributes.addAttribute("search", search);
return "redirect:result";
}
If the user's search terms contain "struts", we redirect them to the searchPage and
add a little error message using flash attributes.
These special kinds of attributes live only for the time of a request and will disappear
when the page is refreshed. This is very useful when we use the POST-REDIRECT-GET
pattern, as we just did.
We will need to display this message in the searchPage result:
<!DOCTYPE html>
<html xmlns:th="http://www.w3.org/1999/xhtml"
<head lang="en">
<title>Search</title>
</head>
<body>
<h4 class="indigo-text center">Please enter a search term</h4>
<div class="col s6 offset-s3">
<div id="errorMessage" class="card-panel red lighten-2"
th:if="${error}">
<span class="card-title" th:text="${error}"></span>
</div>
[ 60 ]
Chapter 2
<form action="/postSearch" method="post" class="col s12">
<div class="row center">
<div class="input-field">
<i class="mdi-action-search prefix"></i>
<input id="search" name="search" type="text"
class="validate"/>
<label for="search">Search</label>
</div>
</div>
</form>
</div>
</div>
</body>
</html>
Now, if users try to search for "struts2" tweets, they will get a useful and appropriate
answer:
The check point

At the end of this chapter, you should have one controller, the TweetController,
handling the search and the untouched generated configuration class,
MasterSpringMvcApplication, in the src/main/java directory:
[ 61 ]
In the src/main/resources directory, you should have one default layout and two
pages using it.
In the application.properties file, we added the Twitter application credentials
as well as a property telling Spring not to cache the templates to ease development:
Summary
In this chapter, you learned what it takes to make a good MVC architecture. We
saw some of the inner workings of Spring MVC and used Spring Social Twitter with
very little configuration. We can now design a beautiful web application, thanks to
WebJars.
In the next chapter, we will ask the user to fill in their profile, so that we can fetch
tweets they might like automatically. This will give you the opportunity to learn
more about forms, formatting, validation, and internationalization.
[ 62 ]
Get more information Mastering Spring MVC 4
Where to buy this book

You can buy Mastering Spring MVC 4 from the Packt Publishing website.
Alternatively, you can buy the book from Amazon, BN.com, Computer Manuals and most internet
book retailers.
Click here for ordering and shipping details.
www.PacktPub.com
Stay Connected:

Mastering Spring MVC 4 - Sample Chapter

Uploaded by

Copyright:

Available Formats

Mastering Spring MVC 4 - Sample Chapter

Uploaded by

Document Information

Copyright

Available Formats

Share this document

Share or Embed Document

Sharing Options

Did you find this document useful?

Is this content inappropriate?

Copyright:

Available Formats

Mastering Spring MVC 4 - Sample Chapter

Uploaded by

Copyright:

Available Formats

What is the book about?

What is the book about?

Who is the book written for?

Who is the book written for?

Fr

Mastering Spring MVC will take you on a journey from

What you will learn from this book

You begin your journey by generating your own Spring

Set up your own web application using

As you develop an advanced-level interactive application

Discover the MVC architecture and the

Design complex advanced-level forms and

Finally, at the end of the journey, when everything is ready,

Craft a RESTful application with a meaningful

Secure your application while allowing

Who this book is written for

Optimize your requests with caching, ETags,

community experience distilled

Prices do not include

Visit www.PacktPub.com for books, eBooks,

Deploy the web application to the cloud in

Create maintainable unit and acceptance tests

Once this is done, we go a step ahead to see how far we've

This book is perfect for developers who are familiar with

In this package, you will find:

The author biography

About the Author

Software Craftsmanship movement and open source initiatives, he is a developer by

What this book covers

Mastering the MVC

Mastering the MVC Architecture

The MVC architecture

The Model: This consists of various representations of the data your

MVC critics and best practices

Anemic Domain Model

All the business logic is handled inside a service layer

Validation of the model is found outside this model, for instance, in

Mastering the MVC Architecture

How to avoid domain anemia is explained here:

The Service layer is good for application-level abstraction like transaction

translate the inputs into meaningful domain objects.

Decouple your domain logic from the underlying persistence framework

Learning from the sources

A gradle multimodule project

A JavaScript frontend application

Visit the following URL if you're interested in the Spring's

Spring MVC 1-0-1

Mastering the MVC Architecture

Without further ado, let's add the spring-boot-starter-thymeleaf dependency to

Mastering the MVC Architecture

Our first page

Reloading the views

Lastly, we will need to modify our HelloController class. Instead of displaying

Mastering the MVC Architecture

Spring MVC architecture

This is a classical HttpServlet class that dispatches HTTP requests to

The appropriate methodsthose annotated with @RequestMapping annotationare

Passing data to the view

Mastering the MVC Architecture