実装例：一覧画面を作る¶

まず、以下２点のファイルを作成します。

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

  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一覧</title>
  </imui:head>
  <div data-role="page" id="main" data-theme="a">
    <imsp:headerWithLink headerText="TODO一覧" />
    <div data-role="content">
    </div>
    <imsp:commonFooter dataPosition="fixed"/>
  </div>
  

登録画面と同様に一覧画面をメニューに追加します。パスは”sample/spring/sp/list”とします。

クライアントタイプをスマートフォンに切り替えグローバルナビ画面を表示します。

TODO一覧を選択します。先ほど作ったブランク画面が表示されました。

 <div data-role="content">
   <ul data-role="listview">
     <li data-role="list-divider">テストの一覧</li>
     <li>一行目です。</li>
     <li>二行目です。</li>
     <li>三行目です。</li>
   </ul>
 </div>

• マークアップ結果。ulタグに囲まれたliタグが１行づつ表示されました。

  

それでは実際にTODO一覧を表示する処理を実装していきます。

前項で作成したリポジトリインタフェースに検索処理を追加します。

• jp.co.intra_mart.sample.spring.imsp.domain.repository.MfwSampleRepository

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

前項で作成したサービスクラスに検索処理を追加します。

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

  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

  package jp.co.intra_mart.sample.spring.imsp.service;
  
  import java.util.List;
  
  import javax.inject.Inject;
  
  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 {
      
      @Inject
      MfwSampleRepository mfwSampleRepository;
      
      @Override
      public void store(MfwSample entity) {
          mfwSampleRepository.create(entity);
      }
  
      @Override
      public List<MfwSample> findAll() {
          return mfwSampleRepository.findAll();
      }
  }
  

ListControllerにサービスクラスをバインドし、検索処理を追加します。

@Inject
MfwSampleService mfwSampleService;

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

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

    model.addAttribute("list", result);

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

前項で作成したマッピングファイルに検索処理で実行するクエリを追加します。

• MfwSampleRepository.xml

  <select id="findAll" resultType="MfwSample">
      SELECT * FROM mfw_sample
  </select>
  

  コラム

  • データベースの詳細については データベース を参照してください。

index.jspのulタグの内部を修正します。

  <ul data-role="listview">
    <li data-role="list-divider">テストの一覧</li>
    <c:forEach var="record" items="${list}">
    <li><c:out value="${record.title}"/></li>
    </c:forEach>
  </ul>

マークアップ結果。登録されている全件のTODOのタイトルが表示されました。

リポジトリインタフェースのfindAllメソッドを以下のように修正します。

• jp.co.intra_mart.sample.spring.imsp.domain.repository.MfwSampleRepository

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

サービスクラスのfindAllメソッドを以下のように修正します。

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

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

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

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

ListControllerクラスを以下のように修正します。

    import org.springframework.data.domain.PageRequest;
    import org.springframework.data.domain.Pageable;
    import org.springframework.data.domain.Sort.Direction;

    ...

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

    currentPage = (currentPage == null)? 1 : currentPage;

    //ページング情報オブジェクト
    Pageable pageable = PageRequest.of(currentPage - 1, 5, Direction.ASC, "limit_date", "todo_id");

    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";
}

<select id="findAll" resultType="MfwSample">
    SELECT * FROM mfw_sample
    ORDER BY
    <foreach collection="sort" item="order" separator=", ">
        ${order.property} ${order.direction}
    </foreach>
    LIMIT #{pageSize} OFFSET #{offset}
</select>

<select id="count" resultType="java.lang.Long">
    SELECT COUNT(*) FROM mfw_sample
</select>

• index.jspのulタグの内部に<imsp:pagingButton>タグを表示します。 またページ送り用のフォームも設置します。

   <ul data-role="listview">
     <li data-role="list-divider">テストの一覧</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>
  

  • 使用するタグについて

    jspタグ名	機能概要	マークアップ例
    pagingButton	リストのページを移動するためのボタンを提供します。

• 最後に、index.jspにページ遷移ボタン押下時の処理を追加します。

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

  コラム

  pagingButtonタグのページ遷移ボタンは未実装関数「onPageLinkFunc」を呼び出しますので

  必要に応じて実装してください。

• マークアップ結果。一覧下部にページ遷移ボタンが表示され、一覧が5ページづつ表示されます。

  

• ページ遷移ボタン押下時。2ページ目が表示されました。