Getting started with MVC(2)

Handling form submission

In the tranditional MVC applications, the mostly-used HTML methods should GET and POST.

POST method is usually used in the form submission, aka form post.

In order to create a new task, you should follow the flow.

1. In the task list view, click Add Task button to enter the creating task view.
2. Fill the fields of the task form and submit. It will return to task list view.

Display the creating page

Firstly display the task creating page.

@GET
@Path("new")
public Viewable add() {
    log.log(Level.INFO, "add new task");

    return new Viewable("add.jspx");
}

Viewableis another approach to indicate a view path, I have motioned the@Viewannotation in the first post.

The add.jspx page code snippets.

<div class="row">
    <div class="col-md-12">
        <c:url var="formActionUrl" value="/mvc/tasks"/>
        <form id="form" name="form" role="form" class="form" action="${formActionUrl}" method="post">
            <div
                class="form-group">
                <label class="control-label" for="name">Task Name:</label>
                <input id="name" name="name" type="text" class="form-control"/>
                <div class="help-block">
                    <jsp:text/>
                </div>
            </div>
             <div
                class="form-group">
                <label class="control-label" for="description">Task Description:</label>
                <textarea id="description" name="description" class="form-control" rows="8"><jsp:text/></textarea>
                <div class="help-block">
                    <jsp:text/>
                </div>
            </div>

            <div class="form-group">
                <button id="submitTask" type="submit" class="btn btn-lg btn-primary">Add Task</button>
            </div>
        </form>
    </div>
</div>

Unlike other MVC frameworks, such as Spring MVC, MVC 1.0 does not provides specific taglib for form field wrapping. Most of the codes are pure HTML codes and some addtional standard JSTL taglib in JSP specification.

When the Add Task button is clicked, the form is submitted via POST method to the backend controller.

Handling form submission

Let's have a look at the controller to process the form submission.

@POST
public Response save(@Valid @BeanParam TaskForm form) {
    log.log(Level.INFO, "saving new task @{0}", form);

    if (validationResult.isFailed()) {
        AlertMessage alert = AlertMessage.danger("Validation voilations!");
        validationResult.getAllViolations()
                .stream()
                .forEach((ConstraintViolation t) -> {
                    alert.addError(t.getPropertyPath().toString(), "", t.getMessage());
                });
        models.put("errors", alert);
        return Response.status(BAD_REQUEST).entity("add.jsp").build();
    }

    Task task = new Task();
    task.setName(form.getName());
    task.setDescription(form.getDescription());

    taskRepository.save(task);

    flashMessage.notify(Type.success, "Task was created successfully!");

    return Response.ok("redirect:tasks").build();
}

You could have notice there is@BeanParamannotation withTaskFormbean.

Let's dig in theTaskFormcode.

@RequestScoped
public class TaskForm implements Serializable {

    private static final long serialVersionUID = 1L;

    @NotNull
    @FormParam("name")
    private String name;

    @NotNull
    @FormParam("description")
    private String description;

    //setters and getters are omitted.
    //equals and hashcode methods are omitted.

}

In theTaskForm, there are two fields defined,nameanddescription, and they are annotated with a@FormParamannotation, it means the fields in the input form will be bound to these fields by name.

When the form is submitted, the value of input field namednamewill be bound to thenamefield of theTaskForminstance. Thesavemethod will read the form data and save it into database, and return to the task list view.

Source codes

1. Clone the codes from my github.com account.

   https://github.com/hantsy/ee8-sandbox/

2. Open the mvc project in NetBeans IDE.

3. Run it on Glassfish 4.1.1.
4. After it is deployed and runging on Glassfish application server, navigate http://localhost:8080/ee8-mvc/mvc/tasks in browser.

5. Click the Add Task button and try to create a new task.