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

基本的な画面の作り方

本項では 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>
    

    注意

    この設定を行わない場合は、jQueryMobilw 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
    Hello IM-Mobile Framework!

    コラム

    PCブラウザから動作確認する場合はスマートフォン版テーマに切り替える必要があります。

マークアップの説明

Hello IM-Mobile Framework!
  • <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>

再表示すると、以下の様に各要素が青系色で装飾されます。

スウォッチ"b"を適用

コラム

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

  • ページ要素は<div data-role=”page”>で定義する
  • ヘッダ要素は<div data-role=”header”>で定義する
  • コンテンツ要素は<div class=”ui-content” role=”main”>で定義する
  • フッタ要素は<div data-role=”footer”>で定義する