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

この項では、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

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”属性を与えると、ボタン押下時に前画面へ戻ります。

画面遷移処理を実装する ¶

実装例：一覧画面を作る で作成した一覧画面から、参照画面へ遷移するように修正します。
%CONTEXT_PATH%/WEB-INF/views/sample/spring/imsp/list/index.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>
マークアップ結果。一覧右部に右矢印アイコンが表示されます。

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

参照項目を表示する ¶

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

前項で作成したリポジトリインタフェースにメソッドを追加します。

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

public interface MfwSampleRepository {

   ...

   MfwSample findOne(String todoId);

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

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

public interface MfwSampleService {

   ...

   public MfwSample findOne(String todoId);

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

public class MfwSampleServiceImpl implements MfwSampleService {

...

 public MfwSample findOne(String todoId) {
     return mfwSampleRepository.findOne(todoId);
 }

前項で作成したマッピングファイルにクエリを追加します。

MfwSampleRepository.xml

<select id="findOne" resultType="MfwSample">
    SELECT * FROM mfw_sample WHERE todo_id = #{todoId}
</select>

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を設定します。

index.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>

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

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

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

使用するタグについて

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

spCollapsibleList 開閉可能なリストを提供します。
さらに、残りの項目を以下の様に修正します。
<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" contentTheme="a">
    <imsp:fieldContain label="進捗">
      <c:out value="${record.progress}" />
    </imsp:fieldContain>
    <imsp:fieldContain label="完了">
      ...
    </imsp:fieldContain>
  </imsp:collapsible>
</div>
マークアップ結果。TODO登録内容が開閉ブロックに囲まれました。

使用するタグについて

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

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

コラム

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

アコーディオン表示として扱われます。

最終結果 ¶