Spring MVC 3: Part 2 - Form Processing

Overview:
This will is a TWO part series article that looks at Spring MVC 3. To better understand the usage of the framework + to keep the tutorial short and keep the reader interested, I have split this into TWO parts.

Part 1: Listing and Viewing Person Details (Retrieve)
Part 2: Form Processing ( Create, Update and Delete)

The example used for both the articles will be same, and will be concentrating on CRUD operations. The example will be a People Management Application.

The sample code for BOTH these articles are here.

Part 2: Form Processing (Create, Update and Delete)

Application Demo:


Listing All People Details.

Edit Details of a Person

Project Structure: Following is the project structure used in the article (Maven wed application).

Java package structure

Web app structure

Step 1: Creating the Web Project.

Refer to Part 1.

Step 2: Maven Dependencies (pom.xml)


Refer to Part 1.

Step 3: Defining the Spring MVC Model, and Updated Backend Logic.

Person.java - represent the M in MVC(Refer Part 1).

 package org.fazlan.spring.mvc.model;  
 public class Person {  
   //model properties
   private Long id;  
   . . .

   // model constructors  
   public Person(long id, String firstName, String lastName) {  
   . . .
   }  

   // getter/setter and rest of the methods
   . . .  
 }  

IManager.java and PersonManager - the updated backend service implementation.

IManager.java

 package org.fazlan.spring.mvc.manager;  

 import java.util.List;  

 public interface IManager<T> {  
   List<T> getAll();  
   T get(Long id);  
   void save(T t);  
   void update(T t);  
   void delete(T t);  
 }  

PersonManager.java

  package org.fazlan.spring.mvc.manager; 
  
  import org.fazlan.spring.mvc.model.Person;   
  import java.util.ArrayList;   
  import java.util.HashMap;   
  import java.util.List;   
  import java.util.Map;  
 
  public class PersonManager implements IManager<Person>{   
   private final Map<Long, Person> PERSON_MAP = new HashMap<Long, Person>();   
   private static Long INDEX = 1L;   
   {   
    PERSON_MAP.put(INDEX, new Person(INDEX, "First Name", "Second Name"));   
   }   
   @Override   
   public List<Person> getAll() {   
    return new ArrayList<Person>(PERSON_MAP.values());   
   }   
   @Override   
   public Person get(Long id) {   
    return PERSON_MAP.get(id);   
   }   

   <!-- Newly Added CUD Operation -->
   @Override   
   public void save(Person person) {   
    person.setId(++INDEX);   
    update(person);   
   }   
   @Override   
   public void update(Person person) {   
    PERSON_MAP.put(person.getId(), person);   
   }   
   @Override   
   public void delete(Person person) {   
    PERSON_MAP.remove(person.getId());   
   }   
  }   

Step 4: Updated Spring MVC Controller.
A controller receives web requests, performs business logic, and populates the model (Person.java) for the view to present.

 package org.fazlan.spring.mvc.controllers;
  
 import org.fazlan.spring.mvc.manager.IManager;  
 import org.fazlan.spring.mvc.model.Person;  
 import org.fazlan.spring.mvc.validators.PersonValidator;  
 import org.springframework.beans.factory.annotation.Autowired;  
 import org.springframework.beans.propertyeditors.StringTrimmerEditor;  
 import org.springframework.stereotype.Controller;  
 import org.springframework.ui.Model;  
 import org.springframework.validation.BindingResult;  
 import org.springframework.web.bind.WebDataBinder;  
 import org.springframework.web.bind.annotation.*;  
 import org.springframework.web.bind.support.SessionStatus;  

 import java.util.List;  

 @Controller  
 @SessionAttributes("person")  
 public class PersonForm {  
   @Autowired  
   private IManager<Person> manager;
  
   @Autowired  
   private PersonValidator validator;
  
   @RequestMapping("/list")  
   @ModelAttribute("personList")  
   public List<Person> getAll() {  
     return manager.getAll();  
   }  

   @RequestMapping("/view")  
   public Person get(@RequestParam(value = "id", required = true) Long personId) {  
     return manager.get(id);  
   }  

   @InitBinder  
   public void initBind(WebDataBinder binder) {  
     binder.setDisallowedFields("id");  
     binder.setRequiredFields("firstName", "lastName");  
     binder.registerCustomEditor(String.class, new StringTrimmerEditor(false));  
   }  

   @RequestMapping(value="/add", method = RequestMethod.GET)  
   public Person setup(@RequestParam(value = "id", required = false) Long personId) {  
     Person p;  
     if (personId == null) {  
       p = new Person();  
     } else {  
       p = manager.get(personId);  
     }  
     return p;  
   }  

   @RequestMapping(value="/add", params = "create", method = RequestMethod.POST)  
   public String save(Person person, BindingResult result, SessionStatus status) {  

     validator.validate(person, result);  

     if (result.hasErrors()) {  
       return "add";  
     } else {  
       manager.save(person);  
       status.setComplete();  
       return "redirect:list.html";  
     }  
   }  

   @RequestMapping(value="/add", params = "update", method = RequestMethod.POST)  
   public String update(Person person, BindingResult result, SessionStatus status) {  

     validator.validate(person, result);  

     if (result.hasErrors()) {  
       return "add";  
     } else {  
       manager.update(person);  
       status.setComplete();  
       return "redirect:list.html";  
     }  
   }  

   @RequestMapping(value="/add", params = "delete", method = RequestMethod.POST)  
   public String delete(Person person, BindingResult result, SessionStatus status) {  
     manager.delete(person);  
     status.setComplete();  
     return "redirect:list.html";  
   }  
 }  

The above class defined the controller to handle the requests for managing a Person. For now, let's look at the following elements,

Form Backing Object
This is used to pre-populate the data in the form. Lets look at the following code snippet to better understand form backing object.

@RequestMapping(value="/add", method = RequestMethod.GET)  
public Person setup(@RequestParam(value = "id", required = false) Long personId) {  
  Person p;  
  if (personId == null) {  
    p = new Person();  
  } else {  
    p = manager.get(personId);  
  }  
  return p;  
}  

When the controller receives a HTTP.GET request, the setup() gets invoked and populates the form with a Person JavaBean based on the personId parameter. When the personId is available, then it's a request for either update or delete operation, and hence an existing Person JavaBean object is returned. If the personId parameter is empty, then the request is for create new operation, and hence a new Person JavaBean object is returned.

Saving, Updating and Deleting
These operations are pretty much alike. They receive data (Person JavaBean argument) from the form and process the backend logic.

   @RequestMapping(value="/add", params = "create", method = RequestMethod.POST)  
   public String save(Person person, BindingResult result, SessionStatus status) {  
      . . .
   }  

   @RequestMapping(value="/add", params = "update", method = RequestMethod.POST)  
   public String update(Person person, BindingResult result, SessionStatus status) {  
      . . .
   }  

   @RequestMapping(value="/add", params = "delete", method = RequestMethod.POST)  
   public String delete(Person person, BindingResult result, SessionStatus status) {  
     . . .  
   }  

The params attribute in each of the above method signatures refer to a parameter passed by the HTML form into the controller.

 . . .  
 <form:form method="post" commandName="person" action="add.html" cssClass="box-form-a">  
    . . .  
    <button type="submit" name="create"><spring:message code="navigation.add"/></button>  
    . . .  
    <button type="submit" name="update"><spring:message code="navigation.edit"/></button>  
    <button type="submit" name="delete"  
            onclick="return confirm('Are you sure to delete ${person.firstName} ${person.lastName}?')">  
          <spring:message  
              code="navigation.delete"/></button>  
   . . .  
 </form:form>  
 . . .  

Here, they are names of the buttons in the HTML form., and when one of those buttons clicked, the corresponding method will be invoked.

Returning Logical Views

Please note that some of the methods return a String value. When a String is returned from a method annotated with @RequestMapping, it represents a logical view name. Here, we are telling Spring exactly which page to display next.

As an example,  the create() and update() methods takes the user back to /jsp/add.jsp if any validation errors found. If the input is valid, then /jsp/list.jsp page is displayed.

The redirect: prefix triggers an HTTP redirect to the browser. This is required when delegating the response to another controller, rather than just rendering the view.

In this example, when valid data has been submitted from the form, it takes the user to the people list page. Redirection ensures that the getAll() method is called on the PersonForm class, and the necessary data is added to the model.


@SessionAttributes

The Person object returned by setUp() is not the same object as the one passed into the create(), update() or delete() methods. Thus, only data from the form (which doesn't include all of the properties in our backing object) will be bound to the Person objects in these methods. 


However, more often than not, what we really need is to access the original object (one populated in the setup() method) plus any changes made to data on the form.


The type level @SessionAttributes annotation does just this by specifying the objects, by name or by type, to be kept in session between requests. The setComplete() method on the SessionStatus class, marks session processing as complete, and allows the session attributes to be cleaned up.

Step 5: Defining the Spring MVC Form Validation
This section will cover some of the annotations used in the controller for processing data.

@InitBinder
Is used to bind the data between the HTML form and the controller.

 @InitBinder   
 public void initBind(WebDataBinder binder) {   
  binder.setDisallowedFields("id");   
  binder.setRequiredFields("firstName", "lastName");   
  binder.registerCustomEditor(String.class, new StringTrimmerEditor(false));   
 }  

setDisallowedFields() - registers fields that are not allowed for binding. This example makes sure that the user does not make potentially unauthorized changes(e.i: Inspect Element from the browser)

setRequiredFields()      - lists the form fields that are mandatory. An error will be raised if any values for items in the list are missing.

Custom Validation

The following is how you can introduce your own custom validation logic into the controllers. Then, from the controller, you can invoke these validation methods.

@RequestMapping(value="/add", params = "create", method = RequestMethod.POST)   
public String save(Person person, BindingResult result, SessionStatus status) {   
 validator.validate(person, result);   
  . . .  
}   
@RequestMapping(value="/add", params = "update", method = RequestMethod.POST)   
public String update(Person person, BindingResult result, SessionStatus status) {   
 validator.validate(person, result);   
 . . .  
}      

Validation Error Codes
msg-properties/messages_en_US.properties
msg-properties/messages.properties

 person.details=Person Details  
 person.firstName=First Name  
 person.lastName=Second Name  
 field.required=Required field missing  
 firstName=First Name  
 required=Required field missing  

The 'required' entry is a special code used by Spring when a field that is specified in the setRequiredFields() method, is not supplied.

Rending the Errors on View 
To include the errors on the view, include the tag along side each of the tags in our JSP page.

 <table class="gradient">  
   <tr>  
     <td>First Name</td>  
     <td>  
       <form:input path="firstName"/><form:errors path="firstName" cssClass="errors"/>  
     </td>  
   </tr>  
   <tr>  
     <td>Last Name</td>  
     <td><form:input path="lastName"/><form:errors path="lastName" cssClass="errors"/></td>  
   </tr>  
 </table>  

Step 6: Updated Spring MVC Views.

add.jsp

Now, we introduce a new JSP page to create and update People. The same page is used for both the operations.
Create a Person
When the add.html gets a HTTP.GET request without the id parameter, the form backing object returns a new Person instance, and populates the view.

As an example, the following snippet in the /jsp/list.jsp would called when creating a new Person.

 <a href='add.html'><spring:message code="navigation.add"/></a>  

Update a Person
Similarly, when the add.html gets a HTTP.GET request with the id parameter, the form backing object returns an existing Person instance corresponding to the given id parameter, and populates the view.

As an example, the following snippet in the /jsp/list.jsp would called when creating a new Person.

 <a href="add.html?id=${person.id}"><spring:message code="navigation.edit"/></a>  

The isNew() method on the Person class from the model is used to determine the mode of the screen.

 public boolean isNew() {  
     return id == null;  
 }  

add.jsp JSP

 <body>  
 <div>  
   <form:form method="post" commandName="person" action="add.html" cssClass="box-form-a">  
     <c:choose>  
       <c:when test="${person.new}">  
         <h1>Sign-up Here</h1>  
         <p>Person registration form</p>  
       </c:when>  
       <c:otherwise>  
         <h1>Update Here</h1>  
         <p>Person updation form</p>  
       </c:otherwise>  
     </c:choose>  
     <table class="gradient">  
       <tr>  
         <td>First Name</td>  
         <td>  
           <form:input path="firstName"/><form:errors path="firstName" cssClass="errors"/>  
         </td>  
       </tr>  
       <tr>  
         <td>Last Name</td>  
         <td><form:input path="lastName"/><form:errors path="lastName" cssClass="errors"/></td>  
       </tr>  
     </table>  
     <c:choose>  
       <c:when test="${person.new}">  
         <button type="submit" name="create"><spring:message code="navigation.add"/></button>  
       </c:when>  
       <c:otherwise>  
         <button type="submit" name="update"><spring:message code="navigation.edit"/></button>  
         <button type="submit" name="delete"  
             onclick="return confirm('Are you sure to delete ${person.firstName} ${person.lastName}?')">  
           <spring:message  
               code="navigation.delete"/></button>  
       </c:otherwise>  
     </c:choose>  
   </form:form>  
   <a href="list.html"><spring:message code="navigation.back"/></a>  
 </div>  
 </body>  

Step 7: Spring MVC Configuration


Refer to Part 1.


Step 8: Building and Deploying the Application

Refer to Part 1.


Now, you can access the application with the following URL.
http://localhost:8080/org.fazlan.spring.mvc/list.html

Summary:
The Part 2 of the Spring MVC 3 article focused on how to use the framework to process form data and render on JSPs.

The sample code for BOTH these articles are here.

That's all Folks!!!