基本的な画面の作り方¶

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

• 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

  

コラム

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

• ルートパッケージの設定はconversion.diconで行います。

  詳しくは 基本（ intra-mart Accel Platform での初めてのプログラミング） を参照してください。

マークアップの説明¶

• <div data-role=”page”>

  1ページ当たりのブロック要素であることを定義します。

  最も上位のブロック要素であり、以下３つの要素は必ずこの要素内に定義する必要があります。
• <div data-role=”header”>

  ヘッダのブロック要素であることを定義します。

  任意の要素です。
• <div class=”ui-content” role=”main”>

  コンテンツのブロック要素であることを定義します。

  必須の要素です。

  <div data-role=”content”>でも動作しますが、推奨されていません。
• <div data-role=”footer”>

  フッタのブロック要素であることを定義します。

  任意の要素です。