実装例:一覧画面を作る¶
この項では、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>
一覧表示部品を配置する¶
一覧表示を実現するには、<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 リストのページを移動するためのボタンを提供します。
ルーティングにパラメータを設定¶
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ページづつ表示されます。
ページ遷移ボタン押下時。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”>は副題として主題下部に表示されます。複数配置可能です。マークアップ結果。日付とコメントが一覧に表示されるようになりました。
最終結果¶
%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>