実装例：参照画面を作る¶

この項では、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>
マークアップ結果。一覧右部に右矢印アイコンが表示されます。

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

参照項目を表示する ¶

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>

マークアップ結果。各項目が表示されました。

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

より参照画面を見やすくするために、画面をカスタマイズします。
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名">
       ...
マークアップ結果。開閉リストに登録者と登録日が埋め込まれました。

使用するタグについて

jspタグ名機能概要マークアップ例

spCollapsible 開閉可能なブロックを提供します。

コラム

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登録内容が開閉ブロックに囲まれました。

使用するタグについて

jspタグ名機能概要マークアップ例

spCollapsible 開閉可能なブロックを提供します。

コラム

spCollapsibleタグを<div data-role=”collapsible-set”>タグで囲むと

アコーディオン表示になります。

最終結果 ¶