intra-mart Accel Platform TERASOLUNA Server Framework for Java (5.x) プログラミングガイド 第16版 2019-12-01

実装例:参照画面を作る

この項では、TODO登録画面で登録したTODOをスマートフォンで参照表示する画面の実装例を紹介します。

前提条件

  • intra-mart Accel Platform をインストールし、初期設定までが完了していること。

  • ベースモジュールに TERASOLUNA Server Framework for Java (5.x) for Accel Platform およびIM-Mobile Frameworkモジュールを含めて環境を作成してください。
    実行環境は単体テスト用で作成してください。
  • 実装例:一覧画面を作る を参考に事前にサンプル画面を作成しておいてください。

画面の用意

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

  • jp.co.intra_mart.sample.spring.imsp.app.reference.ReferenceController.java

    package jp.co.intra_mart.sample.spring.imsp.app.reference;
    
    import org.springframework.stereotype.Controller;
    import org.springframework.ui.Model;
    import org.springframework.web.bind.annotation.PathVariable;
    import org.springframework.web.bind.annotation.RequestMapping;
    
    @Controller
    @RequestMapping("sample/spring/sp/reference/{todoId}")
    public class ReferenceController {
        
        @RequestMapping({"", "/"})
        public String index(Model model, @PathVariable("todoId") String todoId) {
            
            model.addAttribute("todoId", todoId);
            
            return "sample/spring/imsp/reference/index.jsp";
        }
    }
    
  • %CONTEXT_PATH%/WEB-INF/views/sample/spring/imsp/reference/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">
      <div data-role="header">
        <h3>TODO参照</h3>
        <a data-rel="back" data-icon="arrow-l">戻る</a>
      </div>
      <div data-role="content">
        <c:out value="${todoId}" />
      </div>
      <imsp:commonFooter dataPosition="fixed"/>
    </div>
    

    コラム

    <a>タグにdata-rel=”back”属性を与えると、ボタン押下時に前画面へ戻ります。

画面遷移処理を実装する

実装例:一覧画面を作る で作成した一覧画面から、参照画面へ遷移するように修正します。

  • list.jspの<ul>タグにリンクを追加します。

    <c:forEach var="record" items="${list}">
          <li>
            <a href="<c:url value="sample/spring/sp/reference/" /><c:out value="${record.todoId}" />">
              <p class="ui-li-aside"><c:out value="${record.limitDate}"/></p>
              <h3><c:out value="${record.title}"/></h3>
              <p class="ui-li-desc"><c:out value="${record.comment}"/></p>
            </a>
          </li>
    </c:forEach>
  • マークアップ結果。一覧右部に右矢印アイコンが表示されます。

    ../../../../../_images/list.PNG
  • 一覧押下時。参照画面へ遷移し、選択されたTODOのIDが渡されたことが分かります。

    ../../../../../_images/ref_blank.PNG

参照項目を表示する

TODO参照画面に表示項目を追加します。

前項で作成したサービスクラスにメソッドを追加します。
  • MfwSampleService.java

    public interface MfwSampleService {
    
       ...
    
       public MfwSample findOne(String todoId);
    
  • MfwSampleServiceImpl.java

    public class MfwSampleServiceImpl implements MfwSampleService {
    
    ...
    
     public MfwSample findOne(String todoId) {
         return mfwSampleRepository.findOne(todoId);
     }
    
  • ReferenceController.javaを以下のように修正します。

    @Controller
    @RequestMapping("sample/spring/sp/reference/{todoId}")
    public class ReferenceController {
    
        @Inject
        MfwSampleService mfwSampleService;
    
        @RequestMapping({"", "/"})
        public String index(Model model, @PathVariable("todoId") String todoId) {
    
            MfwSample result = mfwSampleService.findOne(todoId);
    
            model.addAttribute("record", result);
    
            return "sample/spring/imsp/reference/index.jsp";
        }
    }
    

    コラム

    リクエストマッピングに設定した変数を受け取るには
    変数に@PathValiableを設定します。
  • ref.jspの<div data-role=”content”>以下を以下のように修正します。

    <div data-role="content">
      <imsp:fieldContain label="登録者">
        <c:out value="${record.userCd}" />
      </imsp:fieldContain>
      <imsp:fieldContain label="登録日">
        <c:out value="${record.timestmp}" />
      </imsp:fieldContain>
      <imsp:fieldContain label="TODO名">
        <c:out value="${record.title}" />
      </imsp:fieldContain>
      <imsp:fieldContain label="期限">
        <c:out value="${record.limitDate}" />
      </imsp:fieldContain>
      <imsp:fieldContain label="コメント">
        <c:out value="${record.comment}" />
      </imsp:fieldContain>
      <imsp:fieldContain label="重要度">
        <c:if test='${record.priority.equals("0")}'></c:if>
        <c:if test='${record.priority.equals("1")}'></c:if>
        <c:if test='${record.priority.equals("2")}'></c:if>
      </imsp:fieldContain>
      <imsp:fieldContain label="進捗">
        <c:out value="${record.progress}" />
      </imsp:fieldContain>
      <imsp:fieldContain label="完了">
        <c:if test='${record.complete.equals("0")}'>
          未完了
        </c:if>
        <c:if test='${record.complete.equals("1")}'>
          完了
        </c:if>
      </imsp:fieldContain>
    </div>
    
  • マークアップ結果。各項目が表示されました。

    ../../../../../_images/ref_first.PNG

レイアウトをカスタマイズする

より参照画面を見やすくするために、画面をカスタマイズします。

  • ref.jspの登録者・登録日項目を以下の様に修正します。

       ...
       <div data-role="content">
         <imsp:collapsibleList title="登録者情報" dividerTheme="b">
           <imsp:fieldContain label="登録者">
                       <c:out value="${record.userCd}" />
                </imsp:fieldContain>
                <imsp:fieldContain label="登録日">
                  <c:out value="${record.timestmp}" />
                </imsp:fieldContain>
         </imsp:collapsibleList>
         <imsp:fieldContain label="TODO名">
           ...
    
  • マークアップ結果。開閉リストに登録者と登録日が埋め込まれました。

    ../../../../../_images/ref-collapsibleList.PNG
  • 使用するタグについて

    jspタグ名 機能概要 マークアップ例
    spCollapsibleList 開閉可能なリストを提供します。
    ../../../../../_images/spCollapsibleList.png
  • さらに、残りの項目を以下の様に修正します。

    <div data-role="collapsible-set">
      <imsp:collapsible title="TODO内容" dataTheme="b" contentTheme="a" collapse="false">
                <imsp:fieldContain label="TODO名">
                  <c:out value="${record.title}" />
                </imsp:fieldContain>
            ...
        <imart type="spFieldContain" label="重要度">
          ...
        </imart>
      </imsp:collapsible>
      <imsp:collapsible title="進捗状況" dataTheme="b" contentTheme="a">
        <imart type="spFieldContain" label="進捗">
          <imart type="string" value=$record.progress />
        </imart>
        <imart type="spFieldContain" label="完了">
          ...
        </imart>
      </imsp:collapsible>
    </div>
    
  • マークアップ結果。TODO登録内容が開閉ブロックに囲まれました。

    ../../../../../_images/ref-collapsible.PNG
  • 使用するタグについて

    jspタグ名 機能概要 マークアップ例
    spCollapsible 開閉可能なブロックを提供します。
    ../../../../../_images/spCollapsible.png

    コラム

    spCollapsibleタグを<div data-role=”collapsible-set”>タグで囲むと
    アコーディオン表示になります。

最終結果

  • jp.co.intra_mart.sample.spring.imsp.app.reference.ReferenceController.java

    package jp.co.intra_mart.sample.spring.imsp.app.reference;
    
    import jp.co.intra_mart.sample.spring.imsp.domain.model.MfwSample;
    import jp.co.intra_mart.sample.spring.imsp.service.MfwSampleService;
    
    import javax.inject.Inject;
    
    import org.springframework.stereotype.Controller;
    import org.springframework.ui.Model;
    import org.springframework.web.bind.annotation.PathVariable;
    import org.springframework.web.bind.annotation.RequestMapping;
    
    @Controller
    @RequestMapping("sample/spring/sp/reference/{todoId}")
    public class ReferenceController {
        
        @Inject
        MfwSampleService mfwSampleService;
        
        @RequestMapping({"", "/"})
        public String index(Model model, @PathVariable("todoId") String todoId) {
    
            MfwSample result = mfwSampleService.findOne(todoId);
            
            model.addAttribute("record", result);
            
            return "sample/spring/imsp/reference/index.jsp";
        }
    }
    
  • jp.co.intra_mart.sample.spring.imsp.service.MfwSampleService.java

    package jp.co.intra_mart.sample.spring.imsp.service;
    
    import java.util.List;
    
    import org.springframework.data.domain.Pageable;
    
    import jp.co.intra_mart.sample.spring.imsp.domain.model.MfwSample;
    
    public interface MfwSampleService {
        public void store(MfwSample entity);
        
        public List<MfwSample> findAll(Pageable pageable);
        
        public MfwSample findOne(String todoId);
        
        public long count();
    }
    
  • jp.co.intra_mart.sample.spring.imsp.service.MfwSampleServiceImpl.java

    package jp.co.intra_mart.sample.spring.imsp.service;
    
    import java.util.List;
    
    import javax.inject.Inject;
    
    import org.springframework.data.domain.Pageable;
    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.save(entity);
        }
    
        @Override
        public List<MfwSample> findAll(Pageable pageable) {
            return mfwSampleRepository.findAll(pageable).getContent();
        }
    
        @Override
        public long count() {
            return mfwSampleRepository.count();
        }
    
        @Override
        public MfwSample findOne(String todoId) {
            return mfwSampleRepository.findOne(todoId);
        }
    }
    
  • %CONTEXT_PATH%/WEB-INF/views/sample/spring/imsp/reference/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">
      <div data-role="header">
        <h3>TODO参照</h3>
        <a data-rel="back" data-icon="arrow-l">戻る</a>
      </div>
      <div data-role="content">
        <imsp:collapsibleList title="登録者情報" dividerTheme="b">
          <imsp:fieldContain label="登録者">
            <c:out value="${record.userCd}" />
          </imsp:fieldContain>
          <imsp:fieldContain label="登録日">
            <c:out value="${record.timestmp}" />
          </imsp:fieldContain>
        </imsp:collapsibleList>
        <div data-role="collapsible-set">
          <imsp:collapsible title="TODO内容" dataTheme="b" contentTheme="a" collapse="false">
            <imsp:fieldContain label="TODO名">
              <c:out value="${record.title}" />
            </imsp:fieldContain>
            <imsp:fieldContain label="期限">
              <c:out value="${record.limitDate}" />
            </imsp:fieldContain>
            <imsp:fieldContain label="コメント">
              <c:out value="${record.comment}" />
            </imsp:fieldContain>
            <imsp:fieldContain label="重要度">
              <c:if test='${record.priority.equals("0")}'></c:if>
              <c:if test='${record.priority.equals("1")}'></c:if>
              <c:if test='${record.priority.equals("2")}'></c:if>
            </imsp:fieldContain>
            </imsp:collapsible>
            <imsp:collapsible title="進捗状況" dataTheme="b" contentTheme="a">
              <imsp:fieldContain label="進捗">
                <c:out value="${record.progress}" />
              </imsp:fieldContain>
              <imsp:fieldContain label="完了">
                <c:if test='${record.complete.equals("0")}'>
                      未完了
                </c:if>
                <c:if test='${record.complete.equals("1")}'>
                      完了
                </c:if>
              </imsp:fieldContain>
            </imsp:collapsible>
          </div>
        </div>
        <imsp:commonFooter dataPosition="fixed"/>
    </div>
    
  • %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">
      <script>
         function onPageLinkFunc(page) {
           $("input[name=currentPage]").val(page);
           $("#pageForm").submit();
         }
       </script>
      <imsp:headerWithLink headerText="TODO一覧" />
      <div data-role="content">
        <ul data-role="listview">
    	   <li data-role="list-divider"><c:out value="${currentPage}" />ページ目</li>
    	   <c:forEach var="record" items="${list}">
    		  <li>
    		    <a href="<c:url value="sample/spring/sp/reference/" /><c:out value="${record.todoId}" />">
    		      <p class="ui-li-aside"><c:out value="${record.limitDate}"/></p>
    		      <h3><c:out value="${record.title}"/></h3>
    		      <p class="ui-li-desc"><c:out value="${record.comment}"/></p>
    		    </a>
    		  </li>
    	    </c:forEach>
    	   <imsp:pagingButton currentPage="${currentPage}" pageLine="${pageLine}" maxRecord="${maxRecord}" />
    	 </ul>
         <form id="pageForm" method="POST">
           <input type="hidden" name="currentPage" />
         </form>
      </div>
      <imsp:commonFooter dataPosition="fixed"/>
    </div>