Creating a Page

Problem

How to build a page?  How to navigate from page to page?  How to parse parameter from URL request?

Pre-requisite

• JSP/Servlet and Spring MVC
• Application Standards and Guidelines

Solution

How to build a page?

Building a ACT page consists of using JSP and JSTL.  Be sure to use the appropriate decorator and CSS styles.  This section also includes hints on managing navigation between pages, displaying collections in a page and request parameter binding.

Java Server Pages

Building a JSP page can be done by hand or various IDE with drag and drog tools.  In the end, just make sure that you are using the supported version of JSP tag libraries (ACT currently uses a 2.3 servlet container) and that all required information for the decorators are included.  Peruse the sample web application for additional demo code.

Tag Lib

Use core JSTL to simplify your JSP development.  Most useful tags include:

• <c:foreach>
• <c:out>
• <c:if>
• <c:choose><c:when><c:otherwise>

Consult the Learning JSP/Servlet resource for more information.

Decorator Metadata

Follow the Applying Decoration guide to select appropriate decorators for you web application and customize the navigation menu bar and breadcrumbs.

Style

The decorator should include the ACT UI style sheets for you, but remember to apply the appropriate class when necessary.  Please follow the Applying Styles guide for more information.

Navigation

The two simplist ways to manage navigation is to use SpringMVC's SimpleUrlHanlderMapping and DefaultAnnotationHandlerMapping.  The first are for URLs that does not require a controller, they simply get redirected to a jsp page.  The latter will be mapped to a controller which can perform more complicated task before returning a view.  The web application template should already setup your Spring to use component scan.  Yourweb/WEB-INF/config/applicationContext.xml should contain:

<context:component-scan base-package="edu.ucsd.act.hello.web" />

which means all classes under the base package will be scanned for SpringMVC meta data.  It is advised all of your controller class reside in this package.  It also contains the mappings which you can add as needed.  Refer to the sample web application for details.

If you want a Student controller's list method to handle a URL pattern /student-list.htm, then the recommended steps would be to first create a StudentController class:

package edu.ucsd.act.hello.web;
@Controller
public class StudentController {
    ...

Then to create a list method that gets a list of students, puts the list inside the model and returns a view (student-list.jsp) that displays the list of students.

@RequestMapping(value="/student-list.htm")
public String list(ModelMap model) {
    List<Student> studentList = studentMgr.getStudentList();
    model.addAttribute("studentList", studentList);
    return "student-list";
}

Note that the view name is just a name.  The configuration file web/WEB-INF/config/applicationContext.xmlcontains InternalResourceViewResolver which will convert a name an actual file.  In this case, it'll look intoweb/WEB-INF/jsp directory and look for a file with the same name and .jsp extension.  You might remember from the learning tutorials that if no view name is specified, SpringMVC will by default take the request mapping value and strip out the extension as the view name.  Thus you can further simplify your list method to the following:

@RequestMapping(value="/student-list.htm")
public void list(ModelMap model) {
    List<Student> studentList = studentMgr.getStudentList();
    model.addAttribute("studentList", studentList); 

Finally, create a student-list.jsp in web/WEB-INF/jsp directory.  You'll probably display the list of students with the following code:

<c:forEach items="${studentList}" var="student">
    <tr>
        <td><c:out value="${student.id}" /></td>
        <td><c:out value="${student.lastName}" />, <c:out value="${student.firstName}" /></td>
    </tr>
</c:forEach>

Notice that student.id and student.lastName will use the Student's getId() and getLastName() method to get the value.

Collections

How do we display collections? For a List, we can following our example from the previous section:

<c:forEach items="${studentList}" var="student">
    <tr>
        <td><c:out value="${student.id}" /></td>
        <td><c:out value="${student.lastName}" />, <c:out value="${student.firstName}" /></td>
    </tr>
</c:forEach>

For a Map, let's say we have a map that consists of parking lots and tickets from those parking lots for a particular student.  The map key is "parking lot" and the value is a list of unpaid parking tickets for that parking lot.  The syntax to display all of the tickets grouped by parking lots will be:

<c:foreach items="${parkingLotTicketListMap}" var="parkingLot">
    <c:out value="${parkingLot.value}"/>
    <ul>
    <c:foreach items="${parkingLotTicketListMap[parkingLot.key]}" var="ticketList">
        <li><c:out value="${ticketList.id}"/></li>
        <li><c:out value="${ticketList.amount}"/></li>
    </c:foreach>
    </ul>
</c:foreach>

Request Binding

If you want the StudentController also to have a view method that handles the detailed view of a student when the url is /student.htm?id=12345, modify the StudentController class to add a new view method:

@RequestMapping(value="/student.htm", method = RequestMethod.GET)
public String view(@RequestParam("id") int id) {
    Student student = studentMgr.getStudent(id);
    model.addAttribute("student", student);
}

Parameters using the @RequestParam are required by default, but you can make it optional by setting@RequestParam required attribute:

@RequestParam(value="name", required="false")

For more information on Spring MVC, refer to the Spring MVC resource.