intra-mart Accel Platform SAStruts+S2JDBC プログラミングガイド 第17版 2020-08-01

基本的な画面の作り方

本項では IM-Mobile Frameworkを利用した基本的な画面開発方法について説明します。

コラム

本項では IM-Mobile Frameworkを利用する上で最低限知っておくべきjQuery Mobileの使用方法を紹介しています。
jQuery Mobileのより具体的な使用方法についてはjQuery Mobileのリファレンスを参照してください。

Hello IM-Mobile Framework!を作る

アクションクラスを用意する

  • Actionクラスを作成します。 パッケージ名はsample.sastruts.action.samplespとし、クラス名はHelloActionとします。

    package sample.sastruts.action.samplesp;
    import org.seasar.struts.annotation.Execute;
    
    public class HelloAction {
        /**
         * 入力ページのパスを返却します。
         * @return 入力ページのパス
         */
        @Execute(validator = false)
        public String index() {
            return "/sample/imsp/hello/hello_mfw.jsp";
        }
    }
    

JSPファイルを用意する

以下のファイルを作成し、%CONTEXT_PATH%/webapps/imart/WEB-INF/view/sample/imsp/helloフォルダに保存します。

  • hello_mfw.jsp

    <%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8" %>
    <%@ taglib prefix="c" uri="http://java.sun.com/jstl/core" %>
    <%@ taglib prefix="imsp" uri="http://www.intra-mart.co.jp/taglib/imsp" %>
    <%@ taglib prefix="imui" uri="http://www.intra-mart.co.jp/taglib/imui" %>
    <imui:head>
      <title>Hello Mobile Framework!</title>
    </imui>
    <div data-role="page">
      <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>
    

ライブラリ群の設定用ファイルを用意する

以下のファイルを作成し、%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">/samplesp/hello</path>
    </theme-full-theme-path-config>
    

    注意

    この設定を行わない場合は、jQueryMobilw 1.3.0 が読み込まれます。

app.diconを編集する

  • %CONTEXT_PATH%/webapps/imart/WEB-INF/classes/app.dicon を編集します。
    s2jdbc.dicon のコメントアウトをはずして、include を有効にします。
    <?xml version="1.0" encoding="UTF-8"?>
    <!DOCTYPE components PUBLIC "-//SEASAR//DTD S2Container 2.4//EN"
       "https://www.seasar.org/dtd/components24.dtd">
    <components>
       <include path="convention.dicon"/>
       <include path="aop.dicon"/>
       <include path="j2ee.dicon"/>
       <include path="s2jdbc.dicon"/>
       <component name="actionMessagesThrowsInterceptor" class="org.seasar.struts.interceptor.ActionMessagesThrowsInterceptor"/>
    </components>
    

convention.diconを編集する

  • %CONTEXT_PATH%/webapps/imart/WEB-INF/classes/convention.dicon を編集します。

    <?xml version="1.0" encoding="UTF-8"?>
    <!DOCTYPE components PUBLIC "-//SEASAR//DTD S2Container 2.4//EN"
        "https://www.seasar.org/dtd/components24.dtd">
    <components>
        <component class="jp.co.intra_mart.framework.extension.seasar.convention.IMNamingConventionImpl">
            <initMethod name="addRootPackageName">
                <arg>"org.seasar.framework.container.warmdeploy"</arg>
            </initMethod>
            <initMethod name="addRootPackageName">
                <arg>"sample.sastruts"</arg>
            </initMethod>
        </component>
        <component class="org.seasar.framework.convention.impl.PersistenceConventionImpl"/>
    </components>
    
  • スマートフォンから以下のURLにアクセスします。
    http://<HOST>:<PORT>/<CONTEXT_PATH>/samplesp/hello
    Hello IM-Mobile Framework!

コラム

マークアップの説明

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”>で定義する