Page navigation

As introducing the feature pieces of the MVC specification, we have visited most of views in this demo. In fact, when you design a website, you should have a map for the page navigation among all views.

View navigation summary

1. When the application starts up, it will display the task list view.

2. User can create a new task by clicking the New Task button, the task creating view is displayed.

3. When user input the task title and description, submit the form.

   • If the task is submitted successfully, return the main task list view. The new created task should be in the list.

   • If the task form data is invalid, show the validation errors.

4. User can edit the new created task by click edit icon.

   • It will read the task from database and fill the existing data into form fields

   • The submission progress is similar with the new task subflow described in above 3.

5. User can update the task status(TODO to DOING, or DOING to DONE). When the status is changed successfully, return to the task list.

6. User can delete the DONE task. When it is deleted, return to the task list.

//todo add a graph to display the navigation

View navigation path definition

We have used GET, POST, PUT, DELETE HTTP methods to process basic CRUD operations, listed in the following table.

Navigation path	HTTP method	View page	Description
/tasks	GET	tasks.jspx	Task list view
/tasks/new	GET	add.jspx	Display new task view
/tasks	POST	redirect:tasks	Submit task form, save task, and redirect to task list view
/tasks/{id}/edit	GET	edit.jspx	Display edit task view
/tasks/{id}	PUT	redirect:tasks	Submit task form, update task, and redirect to task list view
/tasks/{id}	DELETE	redirect:tasks	Submit task form, delete task, and redirect to task list view
/tasks/{id}/status	PUT	redirect:tasks	Submit task form, update task status, and redirect to task list view

It is easy to understand. As you see, the navigation rules are very similar with the paths for RESTful APIs.

Display views

In the above paths, the task list view, new task view and edit task view can display the views directly via imputing the url path in browser locaiton bar. Others are POST submission, they will redirect to the task list view.

There are several approaches provided in MVC specification to navigate the view path.

1. Add @View annotation to a void controller method.

2. Return a Viewable object to a controller method.

3. Return a Response entity which body content includes the view path.

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

4. Return a String type value directly.

    public String someAction(){
         return "redirect:tasks";
    }

The 1 and 2 are new added to the MVC specification, and the 3rd is reusing the existing JAXRS specification.

POST-REDIRECT-GET pattern

The new task form submission and edit task form submission follow the POST-REDIRECT-GET pattern.

1. When the form is submitted successfully, a form POST request is sent to the server.

2. After the server received the request, and processed it, it will REDIRECT to the target view.

3. And perform a new GET request on the target view.

Source codes

1. Clone the codes from my GitHub account.

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

2. Open the mvc project in NetBeans IDE.

3. Run it on Glassfish.

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