基本的な画面の作り方¶
本項では IM-Mobile Frameworkを利用した基本的な画面開発方法について説明します。
コラム
本項では IM-Mobile Frameworkを利用する上で最低限知っておくべきjQuery Mobileの使用方法を紹介しています。
jQuery Mobileのより具体的な使用方法についてはjQuery Mobileのリファレンスを参照してください。
項目
Hello IM-Mobile Framework!を作る¶
HTMLファイルを用意する¶
以下のファイルを作成し、%CONTEXT_PATH%/webapps/imart/WEB-INF/jssp/srcフォルダに保存します。
hello_mfw.html
<div data-role="page"> <div data-role="header"> <h3>Header</h3> </div> <div role="main" class="ui-content"> <p>Hello IM-Mobile Framework!</p> </div> <div data-role="footer"> <h3>Footer</h3> </div> </div>
ライブラリ群の設定用ファイルを用意する¶
以下のファイルを作成し、%CONTEXT_PATH%/webapps/imart/WEB-INF/conf/theme-full-theme-path-configフォルダに保存します。
im_mobile_fw_test.xml
<theme-full-theme-path-config xmlns="http://www.intra-mart.jp/theme/theme-full-theme-path-config" xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xsi:schemaLocation="http://www.intra-mart.jp/theme/theme-full-theme-path-config theme-full-theme-path-config.xsd"> <path client-type="sp" libraries-version="iap-8.0.11">/mobile_fw/.*</path> </theme-full-theme-path-config>注意
この設定を行わない場合は、jQueryMobile 1.3.0 が読み込まれます。
ルーティングXMLファイルを用意する¶
以下のファイルを作成し、%CONTEXT_PATH%/webapps/imart/WEB-INF/conf/routing-jssp-configフォルダに保存します。
im_mobile_fw_test.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="/mobile_fw/hello" page="hello_mfw" /> </routing-jssp-config>注意
サンプルで使用している <authz-default mapper="welcome-all" /> の記述は認可の設定がない場合、デフォルトで全てのユーザがアクセス可能にする設定です。サンプルでは説明省略のため使用していますが、本番環境などで使用することは控え、認可を必ず設定するようにしてください。認可の設定については 認可 を参照してください。 サーバを再起動し、スマートフォンから以下のURLにアクセスします。http://<HOST>:<PORT>/<CONTEXT_PATH>/mobile_fw/helloコラム
PCブラウザから動作確認する場合はスマートフォン版テーマに切り替える必要があります。
マークアップの説明¶
<div data-role=”page”>1ページ当たりのブロック要素であることを定義します。最も上位のブロック要素であり、以下3つの要素は必ずこの要素内に定義する必要があります。 <div data-role=”header”>ヘッダのブロック要素であることを定義します。任意の要素です。 <div class=”ui-content” role=”main”>コンテンツのブロック要素であることを定義します。必須の要素です。<div data-role=”content”>でも動作しますが、推奨されていません。 <div data-role=”footer”>フッタのブロック要素であることを定義します。任意の要素です。
スウォッチを指定する¶
jQuery Mobileでは各要素に スウォッチ を指定できます。先ほどの作成したプレゼンテーションページの各要素に属性data-theme=”b”を追記します。<div data-role="page" data-theme="b"> <div data-role="header"> <h3>Header</h3> </div> <div class="ui-content" role="main"> <p>Hello IM-Mobile Framework!</p> </div> <div data-role="footer"> <h3>Footer</h3> </div> </div>再表示すると、以下の様に各要素が青系色で装飾されます。
コラム
この項目では、下記のポイントを確認しました。
- ページ要素は<div data-role=”page”>で定義する
- ヘッダ要素は<div data-role=”header”>で定義する
- コンテンツ要素は<div class=”ui-content” role=”main”>で定義する
- フッタ要素は<div data-role=”footer”>で定義する