実装例:参照画面を作る¶
この項では、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>マークアップ結果。一覧右部に右矢印アイコンが表示されます。
一覧押下時。参照画面へ遷移し、選択されたTODOのIDが渡されたことが分かります。
コラム
この項目では、下記のポイントを確認しました。
- 画面遷移を実装する場合、ルーティングを設定し<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>マークアップ結果。各項目が表示されました。
レイアウトをカスタマイズする¶
より参照画面を見やすくするために、画面をカスタマイズします。
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名"> ...マークアップ結果。開閉リストに登録者と登録日が埋め込まれました。
使用するタグについて
jsspタグ名 機能概要 マークアップ例 spCollapsible 開閉可能なブロックを提供します。 コラム
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登録内容が開閉ブロックに囲まれました。
コラム
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>