intra-mart Accel Platform スクリプト開発モデル プログラミングガイド 第15版 2018-08-01

実装例:参照画面を作る

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

前提条件

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

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

画面の用意

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

  • %CONTEXT_PATH%/WEB-INF/jssp/src/sample/mobile_fw/sp_ref.js

    var $id;
    function init(request) {
        $id = request.id;
    }
    
  • %CONTEXT_PATH%/WEB-INF/jssp/src/sample/mobile_fw/sp_ref.html

    <imart type="head">
      <title>TODO参照</title>
    </imart>
    <div data-role="page">
      <div data-role="header">
        <h3>TODO参照</h3>
        <a data-rel="back" data-icon="arrow-l">戻る</a>
      </div>
      <div class="ui-content" role="main">
        <imart type="string" value=$id />
      </div>
      <imart type="spCommonFooter" dataPosition="fixed"/>
    </div>
    

    コラム

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

次に、参照画面へのURLのルーティングを追加します。

  • %CONTEXT_PATH%/WEB-INF/conf/routing-jssp-config/im_mobile_sample.xml

     <?xml version="1.0" encoding="UTF-8"?>
     <routing-jssp-config xmlns="http://www.intra-mart.jp/router/routing-jssp-config" xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xsi:schemaLocation="http://www.intra-mart.jp/router/routing-jssp-config routing-jssp-config.xsd ">
       <authz-default mapper="welcome-all" />
       <file-mapping path="/sample/sp/store" client-type="sp" page="/sample/mobile_fw/sp_store" />
       <file-mapping path="/sample/sp/store/insert" client-type="sp" page="/sample/mobile_fw/sp_store" action="insertData" />
       <file-mapping path="/sample/sp/list" client-type="sp" page="/sample/mobile_fw/sp_list" />
       <file-mapping path="/sample/sp/list/{currentPage}" client-type="sp" page="/sample/mobile_fw/sp_list" />
       <file-mapping path="/sample/sp/ref/{id}" client-type="sp" page="/sample/mobile_fw/sp_ref" />
     </routing-jssp-config>
    

    コラム

    PathVariablesの詳細については ルーティング を参照してください。

画面遷移処理を実装する

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

  • sp_list.htmlの<li>タグにaタグを追加します。

      <imart type="repeat" list=$list item="record">
        <li>
          <a href='<imart type="string" value=$contextPath/>/sample/sp/ref/<imart type="string" value=record.id />'>
            <p class="ui-li-aside"><imart type="string" value=record.limit_date />まで</p>
            <h3><imart type="string" value=record.title /></h3>
            <p class="ui-li-desc"><imart type="string" value=record.comment /></p>
          </a>
        </li>
      </imart>
    
  • マークアップ結果。一覧右部に右矢印アイコンが表示されます。

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

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

コラム

この項目では、下記のポイントを確認しました。

  • 画面遷移を実装する場合、ルーティングを設定し<a>タグのhref属性に指定する

参照項目を表示する

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

  • sp_ref.jsを以下のように修正します。

    var $record;
    var $id;
    
    function init(request) {
      $id = request.id;
      var tenantDB  = new TenantDatabase();
      var query   = "select * from mfw_sample where id = ?";
    
      var result = tenantDB.select(query, [new DbParameter($id, DbParameter.TYPE_STRING)]);
      if (result.error) {
           Transfer.toErrorPage({
             title: 'エラー',
             message: '削除処理時にエラーが発生しました。',
             detail: result.errorMessage
         });
      }
    
      $record = result.data[0];
    }
    
  • sp_ref.htmlの<div data-role=”content”>以下を以下のように修正します。

    <div class="ui-content" role="main">
      <imart type="spFieldContain" label="登録者">
        <imart type="string" value=$record.user_nm />
      </imart>
      <imart type="spFieldContain" label="登録日">
        <imart type="string" value=$record.timestmp />
      </imart>
      <imart type="spFieldContain" label="TODO名">
        <imart type="string" value=$record.title />
      </imart>
      <imart type="spFieldContain" label="期限">
        <imart type="string" value=$record.limit_date />
      </imart>
      <imart type="spFieldContain" label="コメント">
        <imart type="string" value=$record.comment />
      </imart>
      <imart type="spFieldContain" label="進捗">
        <imart type="string" value=$record.progress />%
      </imart>
      <imart type="spFieldContain" label="完了">
        <imart type="decision" value=$record.complete case="0">
          未完了
        </imart>
        <imart type="decision" value=$record.complete case="0">
          完了
        </imart>
      </imart>
    </div>
    
  • マークアップ結果。各項目が表示されました。

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

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

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

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

     ...
     <div data-role="content" role="main">
       <imart type="spCollapsible" title="登録者情報" dataTheme="b" collapse="false" dataInset="false">
         <imart type="spFieldContain" label="登録者">
           <h3><imart type="string" value=$record.user_nm /></h3>
         </imart>
         <imart type="spFieldContain" label="登録日">
           <h3><imart type="string" value=$record.timestmp /></h3>
         </imart>
       </imart>
       <imart type="spFieldContain" label="TODO名">
         ...
    
  • マークアップ結果。開閉リストに登録者と登録日が埋め込まれました。

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

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

    コラム

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

     <div data-role="collapsible-set">
       <imart type="spCollapsible" title="TODO内容" dataTheme="b" collapse="false">
         <imart type="spFieldContain" label="TODO名">
           <imart type="string" value=$record.title />
         </imart>
             ...
         <imart type="spFieldContain" label="コメント">
           ...
         </imart>
       </imart>
       <imart type="spCollapsible" title="進捗状況" dataTheme="b">
         <imart type="spFieldContain" label="進捗">
           <imart type="string" value=$record.progress />%
         </imart>
         <imart type="spFieldContain" label="完了">
           ...
         </imart>
       </imart>
     </div>
    
  • マークアップ結果。TODO登録内容が開閉ブロックに囲まれました。

    ../../../../../_images/ref-collapsible.PNG

    コラム

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

最終結果

  • %CONTEXT_PATH%/WEB-INF/jssp/src/sample/mobile_fw/sp_list.html

    <div data-role="page" id="main" data-theme="a">
      <script>
        function onPageLinkFunc(page) {
          document.location.href = "sample/sp/list/" + page;
        }
      </script>
      <imart type="spHeaderWithLink" path="home" label="HOME" headerText="TODO一覧" />
      <div class="ui-content" role="main">
        <ul data-role="listview" data-divider-theme="b">
          <li data-role="list-divider"><imart type="string" value=$currentPage />ページ目</li>
          <imart type="repeat" list=$list item="record">
            <li>
              <a href="<imart type="string" value=$contextPath/>/sample/sp/ref/<imart type="string" value=record.id />">
                <p class="ui-li-aside"><imart type="string" value=record.limit_date />まで</p>
                <h3><imart type="string" value=record.title /></h3>
                <p class="ui-li-desc"><imart type="string" value=record.comment /></p>
              </a>
            </li>
          </imart>
          <imart type="spPagingButton" maxRecord=$maxRecord pageLine=$pageLine currentPage=$currentPage/>
        </ul>
      </div>
      <imart type="spCommonFooter" dataPosition="fixed"/>
    </div>
  • %CONTEXT_PATH%/WEB-INF/jssp/src/sample/mobile_fw/sp_ref.js

    var $record;
    var $id;
    
    function init(request) {
        $id = request.id;
        var tenantDB  = new TenantDatabase();
        var query   = "select * from mfw_sample where id = ?";
    
        var result = tenantDB.select(query, [new DbParameter($id, DbParameter.TYPE_STRING)]);
        if (result.error) {
            Transfer.toErrorPage({
                title: 'エラー',
                message: '削除処理時にエラーが発生しました。',
                detail: result.errorMessage
            });
        }
    
        $record = result.data[0];
    }
    
  • %CONTEXT_PATH%/WEB-INF/jssp/src/sample/mobile_fw/sp_ref.html

    <imart type="head">
      <title>TODO参照</title>
    </imart>
    
    <div data-role="page">
      <div data-role="header">
        <h3>TODO参照</h3>
        <a data-rel="back" data-icon="arrow-l">戻る</a>
      </div>
      <div class="ui-content" role="main">
        <imart type="spCollapsible" title="登録者情報" dataTheme="b" collapse="false" dataInset="false">
          <imart type="spFieldContain" label="登録者">
            <imart type="string" value=$record.user_nm />
          </imart>
          <imart type="spFieldContain" label="登録日">
            <imart type="string" value=$record.timestmp />
          </imart>
        </imart>
        <div data-role="collapsible-set">
          <imart type="spCollapsible" title="TODO内容" dataTheme="b" collapse="false">
            <imart type="spFieldContain" label="TODO名">
              <imart type="string" value=$record.title />
            </imart>
            <imart type="spFieldContain" label="期限">
              <imart type="string" value=$record.limit_date />
            </imart>
            <imart type="spFieldContain" label="コメント">
              <imart type="string" value=$record.comment />
            </imart>
          </imart>
          <imart type="spCollapsible" title="進捗状況" dataTheme="b">
            <imart type="spFieldContain" label="進捗">
              <imart type="string" value=$record.progress />%
            </imart>
            <imart type="spFieldContain" label="完了 / 未完了">
              <imart type="decision" value=$record.complete case="0">
                              未完了
              </imart>
              <imart type="decision" value=$record.complete case="1">
                              完了
              </imart>
            </imart>
          </imart>
        </div>
      </div>
      <imart type="spCommonFooter" dataPosition="fixed"/>
    </div>
    
  • %CONTEXT_PATH%/WEB-INF/conf/routing-jssp-config/im_mobile_sample.xml

    <?xml version="1.0" encoding="UTF-8"?>
    <routing-jssp-config xmlns="http://www.intra-mart.jp/router/routing-jssp-config" xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xsi:schemaLocation="http://www.intra-mart.jp/router/routing-jssp-config routing-jssp-config.xsd ">
      <authz-default mapper="welcome-all" />
      <file-mapping path="/sample/sp/store" client-type="sp" page="/sample/mobile_fw/sp_store" />
      <file-mapping path="/sample/sp/store/insert" client-type="sp" page="/sample/mobile_fw/sp_store_do" />
      <file-mapping path="/sample/sp/list" client-type="sp" page="/sample/mobile_fw/sp_list" />
      <file-mapping path="/sample/sp/list/{currentPage}" client-type="sp" page="/sample/mobile_fw/sp_list" />
      <file-mapping path="/sample/sp/ref/{id}" client-type="sp" page="/sample/mobile_fw/sp_ref" />
    </routing-jssp-config>