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

実装例:一覧画面を作る

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

前提条件

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

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

画面の用意

ソースの準備と配置

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

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

    function init(request) {
    }
    
  • %CONTEXT_PATH%/WEB-INF/jssp/src/sample/mobile_fw/sp_list.html

    <imart type="head">
      <title>TODO一覧</title>
    </imart>
    <div data-role="page">
      <imart type="spHeaderWithLink" headerText="TODO一覧" path="home" />
      <div class="ui-content" role="main">
      </div>
      <imart type="spCommonFooter" dataPosition="fixed"/>
    </div>
    

ルーティングの設定

次に、一覧画面への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" />
     </routing-jssp-config>
    

メニューの設定

登録画面と同様に一覧画面をメニューに追加します。

新規メニューアイテムを作成します。

  • メニューアイテム名を「TODO一覧」とし、URLを”sample/sp/list”とします。

    メニューに追加

クライアントタイプをスマートフォンに切り替えグローバルナビ画面を表示します。

グローバルナビ

TODO一覧を選択します。先ほど作ったブランク画面が表示されました。

ブランク画面

一覧表示部品を配置する

一覧表示を実現するには、<ul>タグ、および<li>タグを使用します。

一覧のマークアップ例

例として見出し行、および3行の一覧を表示してみます。
sp_list.htmlに以下の記述を追加します。
 <div class="ui-content" role="main">
   <ul data-role="listview" data-divider-theme="b">
     <li data-role="list-divider">テストの一覧</li>
     <li>一行目です。</li>
     <li>二行目です。</li>
     <li>三行目です。</li>
   </ul>
 </div>

コラム

  • リスト表示する場合、ulタグにdata-role=”listview”属性を付加します。
  • data-divider-theme属性にテーマを指定できます。
  • liタグにdata-role=”list-divider”属性を付加することで強調表現として扱います。
  • マークアップ結果。ulタグに囲まれたliタグが1行づつ表示されました。

    一覧のマークアップ結果

それでは実際にTODO一覧を表示する処理を実装していきます。

検索処理の実装

  • sp_list.jsに検索処理を追加します。

    var $list = [];
    
    function init(request) {
      var tenantDB  = new TenantDatabase();
      var selQuery     = "select * from mfw_sample order by timestmp";
    
      var seltResult = tenantDB.select(selQuery);
      if (seltResult.error) {
         Transfer.toErrorPage({
             title: 'エラー',
             message: 'データ検索時にエラーが発生しました。',
             detail: seltResult.errorMessage
         });
      }
      $list = seltResult.data;
    }
    

コラム

  • データベースの詳細については データベース を参照してください。
  • sp_list.htmlのulタグの内部を修正します。

    <ul data-role="listview" data-divider-theme="b">
      <li data-role="list-divider">テストの一覧</li>
      <imart type="repeat" list=$list item="record">
        <li><imart type="string" value=record.title /></li>
      </imart>
    </ul>
    
  • マークアップ結果。登録されている全件のTODOのタイトルが表示されました。

    レコード検索結果

コラム

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

  • 一覧表示するには<ul data-role=”listview”>を使用する
  • 行の表示は<li>タグを使用する

ページング処理を実装する

TODO一覧にページング処理を追加します。

ページ情報の定義

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

    var $list = [];
    var $maxRecord;         //レコード総件数
    var $pageLine = 5;      //一度に表示する件数
    var $currentPage = 1;   //現在表示ページ
    var $contextPath;    //コンテキストパス
    
    function init(request) {
       //表示ページの指定がある場合は$currentPageに設定
       if (request.currentPage !== undefined) {
          $currentPage = request.currentPage;
       }
       //コンテキストパスの取得
       $contextPath = Web.getContextPath();
    
       var tenantDB  = new TenantDatabase();
    
       //全レコード件数を取得
       var countQyery   = "select count(*) from mfw_sample ";
       var countResult = tenantDB.select(countQyery);
       if (countResult.error) {
         Transfer.toErrorPage({
             title: 'エラー',
             message: 'データ検索時にエラーが発生しました。',
             detail: countResult.errorMessage
         });
       }
       $maxRecord = countResult.data[0].count;
    
       //表示するページ分だけTODO情報を取得
       var startLine =  ($currentPage - 1) * $pageLine;
       var selQuery     = "select * from mfw_sample order by timestmp";
       var seltResult = tenantDB.fetch(selQuery, startLine, $pageLine);
       if (seltResult.error) {
          Transfer.toErrorPage({
            title: 'エラー',
            message: 'データ検索時にエラーが発生しました。',
            detail: seltResult.errorMessage
          });
       }
       $list = seltResult.data;
    }
    

ページング用タグの配置

  • sp_list.htmlのulタグの内部に<imart type=”spPagingButton”>タグを表示します。

     <ul data-role="listview" data-divider-theme="b">
       <li data-role="list-divider">テストの一覧</li>
       <imart type="repeat" list=$list item="record">
         <li><imart type="string" value=record.title /></li>
       </imart>
       <imart type="spPagingButton" maxRecord=$maxRecord pageLine=$pageLine currentPage=$currentPage />
     </ul>
    
    • 使用するタグについて

      jsspタグ名 機能概要 マークアップ例
      spPagingButton リストのページを移動するためのボタンを提供します。
      spPagingButton

ルーティングにパラメータを設定

  • im_mobile_sample.xmlにURLを新規追加します。

    <file-mapping path="/sample/sp/list/{currentPage}" client-type="sp" page="/sample/mobile_fw/sp_list" />
    

    コラム

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

ページング処理の実装

  • 最後に、sp_list.htmlにページ遷移ボタン押下時の処理を追加します。 onPageLinkFunc関数で受け取ったページをURLに埋め込みパラメータとして送信します。

    <div data-role="page">
      <script>
        function onPageLinkFunc(page) {
          document.location.href = "sample/sp/list/" + page;
        }
      </script>
    

    コラム

    spPagingButtonタグのページ遷移ボタンは未実装関数「onPageLinkFunc」を呼び出しますので
    必要に応じて実装してください。
  • マークアップ結果。一覧下部にページ遷移ボタンが表示され、一覧が5ページづつ表示されます。

    1ページ目
  • ページ遷移ボタン押下時。2ページ目が表示されました。

    2ページ目

コラム

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

  • ページング処理を実装するには<imart type=”spPagingButton”>タグを使用する
  • ルーティングのpath valiable機能を利用してページ番号を送信する

書式をカスタマイズする

より使いやすいレイアウトにするために、一覧表示の書式を修正します。

  • <ul>タグの内部を以下のように修正します。

    <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>
          <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>
        </li>
      </imart>
      <imart type="spPagingButton" maxRecord=$maxRecord pageLine=$pageLine currentPage=$currentPage/>
    </ul>
    

    コラム

    <li>タグ内の<h>タグは主題として扱われます。
    <p class=”ui-li-aside”>は右端装飾部として表示されます。
    <p class=”ui-li-desc”>は副題として主題下部に表示されます。複数配置可能です。
  • マークアップ結果。日付とコメントが一覧に表示されるようになりました。

    ../../../../../_images/deco.PNG

最終結果

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

    var $list = [];
    var $maxRecord;         //レコード総件数
    var $pageLine = 5;      //一度に表示する件数
    var $currentPage = 1;   //現在表示ページ
    var $contextPath;    //コンテキストパス
    
    function init(request) {
        //表示ページの指定がある場合は$currentPageに設定
        if (request.currentPage !== undefined) {
            $currentPage = request.currentPage;
        }
        //コンテキストパスの取得
        $contextPath = Web.getContextPath();
    
        var tenantDB  = new TenantDatabase();
    
        //全レコード件数を取得
        var countQyery   = "select count(*) from mfw_sample ";
        var countResult = tenantDB.select(countQyery);
        if (countResult.error) {
            Transfer.toErrorPage({
                title: 'エラー',
                message: 'データ検索時にエラーが発生しました。',
                detail: countResult.errorMessage
            });
        }
        $maxRecord = countResult.data[0].count;
    
        //表示するページ分だけTODO情報を取得
        var startLine =  ($currentPage - 1) * $pageLine;
        var selQuery     = "select * from mfw_sample order by timestmp";
        var seltResult = tenantDB.fetch(selQuery, startLine, $pageLine);
        if (seltResult.error) {
            Transfer.toErrorPage({
                title: 'エラー',
                message: 'データ検索時にエラーが発生しました。',
                detail: seltResult.errorMessage
            });
        }
        $list = seltResult.data;
    }
    
  • %CONTEXT_PATH%/WEB-INF/jssp/src/sample/mobile_fw/sp_list.html

    <imart type="head">
      <title>TODO一覧</title>
    </imart>
    <div data-role="page">
      <script>
        function onPageLinkFunc(page) {
          document.location.href = "sample/sp/list/" + page;
        }
      </script>
      <imart type="spHeaderWithLink" headerText="TODO一覧" path="home" />
      <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>
              <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>
            </li>
          </imart>
          <imart type="spPagingButton" maxRecord=$maxRecord pageLine=$pageLine currentPage=$currentPage />
        </ul>
      </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" />
    </routing-jssp-config>