intra-mart Accel Platform SAStruts+S2JDBC プログラミングガイド 第17版 2020-08-01

実装例:参照画面を作る

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

前提条件

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

  • ベースモジュールに SAStruts 開発フレームワーク、およびIM-Mobile Frameworkモジュールを含めて環境を作成してください。
    実行環境は単体テスト用で作成してください。
  • 実装例:一覧画面を作る を参考に事前にサンプル画面を作成しておいてください。

画面の用意

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

  • sample.sastruts.action.samplesp.RefAction.java

    package sample.sastruts.action.samplesp;
    
    import org.seasar.struts.annotation.Execute;
    public class RefAction {
    
        public String todoId;
    
        @Execute(validator = false)
        public String index() {
            return "/sample/imsp/ref/ref.jsp";
        }
    }
    
  • %CONTEXT_PATH%/WEB-INF/view/sample/imsp/ref/ref.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">
      <div data-role="header">
        <h3>TODO参照</h3>
        <a data-rel="back" data-icon="arrow-l">戻る</a>
      </div>
      <div class="ui-content" role="main">
        <c:out value="${todoId}" />
      </div>
      <imsp:commonFooter dataPosition="fixed"/>
    </div>
    

    コラム

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

画面遷移処理を実装する

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

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

     <c:forEach var="record" items="${list}">
     <li>
       <a list-todo-id='<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>
    
  • さらに、参照画面へ遷移するフォームを設置します。

    <form id="refForm" method="POST" action="<c:url value="ref" />">
      <input type="hidden" name="todoId" />
    </form>
  • 一覧タップ時のイベントを実装します。

    <script>
      ...
       (function($){
         $(document).on("pagecreate", function() {
           $("li a[list-todo-id]").on("tap", function() {
             $("input[name=todoId]").val($(this).attr("list-todo-id"));
             $("#refForm").submit();
           });
         });
       })(jQuery);
     </script>
  • マークアップ結果。一覧右部に右矢印アイコンが表示されます。

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

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

参照項目を表示する

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

  • RefAction.javaを以下のように修正します。

    import javax.annotation.Resource;
    
    import org.seasar.struts.annotation.Execute;
    import org.seasar.extension.jdbc.JdbcManager;
    
    import sample.sastruts.entity.MfwSample;
    
    public class RefAction {
        @Resource
        JdbcManager jdbcManager;
    
        public String todoId;
    
        public MfwSample record;
    
        @Execute(validator = false)
        public String index() {
            record = jdbcManager.from(MfwSample.class).where("id = ?", todoId).getSingleResult();
            return "/sample/imsp/ref/ref.jsp";
        }
    }
    
  • ref.jspの<div class=”ui-content” role=”main”>を以下のように修正します。

    <div class="ui-content" role="main">
      <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: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 class="ui-content" role="main">
       <imsp:collapsible title="登録者情報" dataTheme="b" collapse="false" dataInset="false">
         <imsp:fieldContain label="登録者">
           <c:out value="${record.userCd}" />
         </imsp:fieldContain>
         <imsp:fieldContain label="登録日">
           <c:out value="${record.timestmp}" />
         </imsp:fieldContain>
       </imsp:collapsible>
       <imsp:fieldContain label="TODO名">
           ...
    
  • マークアップ結果。開閉リストに登録者と登録日が埋め込まれました。

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

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

    コラム

    spCollapsibleタグのdataInset属性にfalseを指定すると、通常のリスト形式表示になります。
  • さらに、残りの項目を以下の様に修正します。

    <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="コメント">
          ...
        </imsp:fieldContain>
      </imsp:collapsible>
      <imsp:collapsible title="進捗状況" dataTheme="b">
        <imsp:fieldContain label="進捗">
          <imart type="string" value=$record.progress />
        </imsp:fieldContain>
        <imsp:fieldContain label="完了">
          ...
        </imsp:fieldContain>
      </imsp:collapsible>
    </div>
    
  • マークアップ結果。TODO登録内容が開閉ブロックに囲まれました。

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

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

    コラム

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

最終結果

  • sample.sastruts.action.samplesp.RefAction.java

    package sample.sastruts.action.samplesp;
    
    import javax.annotation.Resource;
    
    import org.seasar.extension.jdbc.JdbcManager;
    import org.seasar.struts.annotation.Execute;
    
    import sample.sastruts.entity.MfwSample;
    
    public class RefAction {
        @Resource
        JdbcManager jdbcManager;
    
        public String todoId;
    
        public MfwSample record;
    
        @Execute(validator = false)
        public String index() {
            record = jdbcManager.from(MfwSample.class).where("id = ?", todoId).getSingleResult();
            return "/sample/imsp/ref/ref.jsp";
        }
    }
    
  • %CONTEXT_PATH%/WEB-INF/view/sample/imsp/ref/ref.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">
      <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:collapsible>
          <imsp:collapsible title="進捗状況" dataTheme="b">
            <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/view/sample/imsp/list/list.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();
            }
            (function($){
                $(document).live("pageinit", function() {
                    $("li a[list-todo-id]").unbind().bind("tap", function() {
                        $("input[name=todoId]").val($(this).attr("list-todo-id"));
                        $("#refForm").submit();
                    });
                });
            })(jQuery);
        </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 list-todo-id="<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>
            <form id="refForm" method="POST" action="<c:url value="samplesp/ref" />">
                <input type="hidden" name="todoId" />
            </form>
        </div>
        <imsp:commonFooter dataPosition="fixed"/>
    </div>