Following 2 files should be created first.

• jp.co.intra_mart.sample.spring.imsp.app.list.ListController.java

  package jp.co.intra_mart.sample.spring.imsp.app.list;
  
  import org.springframework.stereotype.Controller;
  import org.springframework.ui.Model;
  import org.springframework.web.bind.annotation.RequestMapping;
  
  @Controller
  @RequestMapping("sample/spring/sp/list")
  public class ListController {
      
      @RequestMapping({"", "/"})
      public String index(Model model) {
          return "sample/spring/imsp/list/index.jsp";
      }
  }
  

• <CONTEXT_PATH>/WEB-INF/views/sample/spring/imsp/list/index.jsp

  <%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8" %>
  <%@ taglib prefix="c" uri="http://java.sun.com/jstl/core" %>
  <%@ taglib prefix="imsp" uri="http://www.intra-mart.co.jp/taglib/imsp" %>
  <%@ taglib prefix="imui" uri="http://www.intra-mart.co.jp/taglib/imui" %>
  <imui:head>
    <title>TODO List</title>
  </imui:head>
  <div data-role="page" id="main" data-theme="a">
    <imsp:headerWithLink headerText="TODO List" />
    <div data-role="content">
    </div>
    <imsp:commonFooter dataPosition="fixed"/>
  </div>
  

Like for the case of Registration Screen, List Screen should be added to the menu. Please set the path to “sample/spring/sp/list”.

Switch client type to smart phone, and display Global Navigation Screen.

Select TODO List. Blank screen that was just created is displayed.

 <div data-role="content">
   <ul data-role="listview">
     <li data-role="list-divider">Test List</li>
     <li>This is Line 1.</li>
     <li>This is Line 2.</li>
     <li>This is Line 3.</li>
   </ul>
 </div>

• Mark-up Result. li tag enclosed by ul tag is displayed for each line.

  

Now, let us implement the process that actually displays the TODO List.

Search process is added to the service class that was created in the previous section.

• jp.co.intra_mart.sample.spring.imsp.service.MfwSampleService.java

  package jp.co.intra_mart.sample.spring.imsp.service;
  
  import java.util.List;
  
  import jp.co.intra_mart.sample.spring.imsp.domain.model.MfwSample;
  
  public interface MfwSampleService {
      public void store(MfwSample entity);
      
      public List<MfwSample> findAll();
  }
  

• jp.co.intra_mart.sample.spring.imsp.service.MfwSampleServiceImpl.java

  package jp.co.intra_mart.sample.spring.imsp.service;
  
  import java.util.List;
  
  import org.springframework.beans.factory.annotation.Autowired;
  import org.springframework.stereotype.Service;
  
  import jp.co.intra_mart.sample.spring.imsp.domain.model.MfwSample;
  import jp.co.intra_mart.sample.spring.imsp.domain.repository.MfwSampleRepository;
  
  @Service
  public class MfwSampleServiceImpl implements MfwSampleService {
      
      @Autowired
      MfwSampleRepository mfwSampleRepository;
      
      @Override
      public void store(MfwSample entity) {
          mfwSampleRepository.save(entity);
      }
  
      @Override
      public List<MfwSample> findAll() {
          return mfwSampleRepository.findAll();
      }
  }
  

Bind the service class to ListController, and add the search process.

@Autowired
MfwSampleService mfwSampleService;

@RequestMapping({"", "/"})
public String index(Model model) {

    List<MfwSample> result = mfwSampleService.findAll();

    model.addAttribute("list", result);

    return "sample/spring/imsp/list/index.jsp";
}

Note

• For the details about database, please refer to Database.

• Modify the inside of ul tag of list.jsp.

    <ul data-role="listview">
      <li data-role="list-divider">Test List</li>
      <c:forEach var="record" items="${list}">
      <li><c:out value="${record.title}"/></li>
      </c:forEach>
    </ul>
  

• Mark-up Result. All the TODO titles that are registered are displayed.

  

findAll method of service class is modified as follows.

• jp.co.intra_mart.sample.spring.imsp.service.MfwSampleService.java

  import org.springframework.data.domain.Pageable;
  
  ...
  
  public List<MfwSample> findAll(Pageable pageable);
  
  ...
  
  public long count();
  

• jp.co.intra_mart.sample.spring.imsp.service.MfwSampleServiceImpl.java

  import org.springframework.data.domain.Pageable;
  
  ...
  
  public List<MfwSample> findAll(Pageable pageable) {
      return mfwSampleRepository.findAll(pageable).getContent();
  }
  
  ...
  
  public long count() {
      return mfwSampleRepository.count();
  }
  

• ListController class is modified as follows.

      import org.springframework.data.domain.PageRequest;
      import org.springframework.data.domain.Pageable;
  
      ...
  
      @RequestMapping({"", "/"})
      public String index(Model model, Integer currentPage) {
  
      currentPage = (currentPage == null)? 1 : currentPage;
  
      //Paging Information Object
      Pageable pageable = new PageRequest(currentPage - 1, 10, Direction.ASC, "limitDate");
  
      List<MfwSample> result = mfwSampleService.findAll(pageable);
  
      model.addAttribute("currentPage", pageable.getPageNumber() + 1);
      model.addAttribute("pageLine", pageable.getPageSize());
      model.addAttribute("maxRecord", mfwSampleService.count());
      model.addAttribute("list", result);
  
      return "sample/spring/imsp/list/index.jsp";
  }
  

• <imsp:pagingButton> tag is displayed inside the ul tag of list.jsp. From for the page feed is also provided.

   <ul data-role="listview">
     <li data-role="list-divider">Test List</li>
     <c:forEach var="record" items="${list}">
     <li><c:out value="${record.title}"/></li>
     </c:forEach>
     <imsp:pagingButton currentPage="${currentPage}" pageLine="${pageLine}" maxRecord="${maxRecord}" />
   </ul>
   <form id="pageForm" method="POST">
     <input type="hidden" name="currentPage" />
   </form>
  

  • About the Tags to be Used

    jsp Tag Name	Function Summary	Mark-up Example
    pagingButton	Provide the button for page move in the list.	width: 300px alt: spPagingButton

• Finally, the process for pressing the page transition button is added to list.jsp.

   <div data-role="page">
     <script>
       function onPageLinkFunc(page) {
         $("input[name=currentPage]").val(page);
         $("#pageForm").submit();
       }
     </script>
  

  Note

  Page transition button of pagingButton tag will call the non-implemented function [onPageLinkFunc].

  Please implement it as required.

• Mark-up Result. Page transition button is displayed on the lower part of the list. List is displayed by 5 pages each.

  

• Page transition button is pressed. Page 2 is displayed.