intra-mart Accel Platform / テーマ仕様書

初版 2013-10-01

«  ThemeManager   ::   コンテンツ   ::   テーマモジュール  »

PageBuilder

ここでは PageBuilder の役割と、制御方法を説明します。

PageBuilder の役割

PageBuilder は、テーマモジュールの JSSP と、コンテンツを組み合わせた HTML を生成します。

テーマモジュールは、以下の 4 つの JSSP で構成されています。

  • head
    • HTML の head タグの部分
  • header
    • ヘッダ部
  • body
    • ボディ部
  • footer
    • フッタ部

組み合わせ方は、

  • head, header, body, footer
  • head, body, footer
  • head, body
  • body
  • テーマ適用無し

の 5 パターンであるものと定義しています。

実装は以下の６つがあります。

  1. HeadWithFooterThemeBuilder

    • head, body, footer を含んだ HTML を生成します。
    • header （メニューや、ユーティリティ）を表示したくないが、footer は表示したい場合に使用します。
    • body は、<div id=”imui-container”> で囲まれて出力されます。

  2. HeadWithContainerThemeBuilder

    • head, body を含んだ HTML を生成します。
    • header （メニューや、ユーティリティ）、footer を表示したくないが、CSS やクライアントサイド JavaScript は使用したい場合に使用します。
    • 主に intra-mart Accel Platform 向けに作成した画面を表示するために使用することを想定しています。
    • body は、<div id=”imui-container”> で囲まれて出力されます。

  3. HeadOnlyThemeBuilder

    • head, body を含んだ HTML を生成します。
    • header （メニューや、ユーティリティ）、footer を表示したくないが、CSS やクライアントサイド JavaScript は使用したい場合に使用します。
    • 主に iWP7.2 以前のシステム向けに作成した画面を表示するために使用することを想定しています。
    • body は、指定された URL の HTML そのものが出力されます。

  4. BodyOnlyThemeBuilder

    • DOCTYPE、htmlタグ、body を含んだ HTML を生成します。
    • header （メニューや、ユーティリティ）、footer を表示せず、CSS やクライアントサイド JavaScript も使用しない場合に使用します。
    • body は、指定された URL の HTML そのものが出力されます。

  5. NoThemeBuilder

    • 指定された URL の HTML をそのまま返します。
    • テーマを一切使用せず、自分で作成した HTML をそのまま出力したい場合に使用します。
    • body は、指定された URL の HTML そのものが出力されます。

  6. FullThemeBuilder

    • head, header, body, footer のすべてを含んだ HTML を生成します。
    • body は、<div id=”imui-container”> で囲まれて出力されます。
    • 基本はこれを使用します。

上記の順に処理すべき PageBuilder を検索し、上の５つに該当しない場合最後の FullThemeBuilder がリクエストを処理します。 リクエストを処理すべきかどうかは、それぞれのモジュールが持つ設定ファイルに記載されたパスがリクエストパスに合致するかどうかで判断します。

コラム

CSSモジュール一覧内のスタイルの一部は、<div id=”imui-container”> の内部の要素だけに適用されます。 この div で内容が囲まれない PageBuilder (HeadOnlyThemeBuilder, BodyOnlyThemeBuilder, NoThemeBuilder) を利用し、 かつ CSSモジュール一覧のスタイルを適用したい場合は、<div id=”imui-container”> で内容を囲むように実装してください。

組み合わせ方の制御

head, header, body, footer の組み合わせは上述の PageBuilder の６つの実装の設定で決まります。 それぞれの設定ファイルを記述したり、リクエストへパラメータを指定したりすることで、 どの組み合わせ方にするかを指定することができます。

設定ファイルで指定する

どの組み合わせ方にするかが静的に決定する場合、設定ファイルに記述します。

設定ファイルは、WEB-INF/conf 配下の PageBuilder の実装毎のフォルダに配置します。 ファイル名は任意です。

  • HeadWithFooterThemeBuilder
    • WEB-INF/conf/theme-head-with-footer-path-config
  • HeadWithContainerThemeBuilder
    • WEB-INF/conf/theme-head-with-container-path-config
  • HeadOnlyThemeBuilder
    • WEB-INF/conf/theme-head-only-path-config
  • BodyOnlyThemeBuilder
    • WEB-INF/conf/theme-body-only-path-config
  • NoThemeBuilder
    • WEB-INF/conf/theme-no-theme-path-config
  • FullThemeBuilder
    • なし

注意

それぞれの設定ファイルは異なる XML Schema で定義されています。 いずれかの設定ファイルを別のフォルダにコピーしても動作しないので注意してください。

リクエストへのパラメータで指定する

どの組み合わせ方にするかが動的に決定する場合や、forward する場合、リクエストへパラメータを指定します。

forward を行うと、PageBuilder が処理対象とする URL は forward 前の URL となります。 forward 後のページに対して forward 前の PageBuilder とは別の PageBuilder を指定したい場合、 リクエストにパラメータを指定することで PageBuilder を切り替えることができます。

指定するキー imui-theme-builder-module
適用したい PageBuilder 指定する値
HeadWithFooterThemeBuilder headwithfooter
HeadWithContainerThemeBuilder headwithcontainer
HeadOnlyThemeBuilder headonly
BodyOnlyThemeBuilder bodyonly
NoThemeBuilder notheme

上記の値をリクエストのパラメータ、または属性として指定することで PageBuilder が切り替わります。

適用順位

設定ファイル、パラメータ、属性の適用は、以下の順に検索し、最初に合致した PageBuilder を使用します。 設定ファイルに記述したものより、属性に指定したものの方が優先されます。

  1. 属性
  2. パラメータ
  3. 設定ファイル

指定例

設定ファイルで指定する例

例として、http://hostname/iap/sample/page へのリクエストを head, body, footer を含んだ HTML としたい場合を取り上げます。 この場合、使用する PageBuilder は、HeadWithFooterThemeBuilder になります。

HeadWithFooterThemeBuilder の設定ファイルは以下のようになります。

<?xml version="1.0" encoding="UTF-8"?>
<theme-head-with-footer-path-config xmlns="http://www.intra-mart.jp/theme/theme-head-with-footer-path-config">
    <path>/sample/page</path>
</theme-head-only-path-config>

path の中に、コンテキストパス以下のパスを、”/” から記述します。

別の例として、http://hostname/iap/example/{parameter1}、http://hostname/iap/example/{parameter1}/{parameter2} へのリクエストを異なるビルダーモジュールで表示する場合を取り上げます。この場合、正規表現を利用して path を表現します。path 要素に regex 属性を true として追加することで正規表現として扱われます。

<?xml version="1.0" encoding="UTF-8"?>
<theme-head-with-container-path-config xmlns="http://www.intra-mart.jp/theme/theme-head-with-container-path-config">
    <path regex="true">/example/[^/]+?</path>
</theme-head-only-path-config>

<?xml version="1.0" encoding="UTF-8"?>
<theme-head-with-footer-path-config xmlns="http://www.intra-mart.jp/theme/theme-head-with-footer-path-config">
    <path regex="true">/example/[^/]+?/[^/]+?</path>
</theme-head-only-path-config>

リクエストへの属性として指定する例

function init(request) {
    request.setAttribute("imui-theme-builder-module", "headwithfooter");
    forward("somewhere");
}

リクエストへのパラメータとして指定する例

<form name="form" action="sample/page">
  <input type="hidden" name="imui-theme-builder-module" value="headwithfooter">
  <input type="submit" value="submit"/>
</form>

«  ThemeManager   ::   コンテンツ   ::   テーマモジュール  »

Copyright © 2013 NTT DATA INTRAMART CORPORATION