PageBuilder¶

ここでは 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 パターンであるものと定義しています。

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

HeadWithFooterThemeBuilder

head, body, footer を含んだ HTML を生成します。

header （メニューや、ユーティリティ）を表示したくないが、footer は表示したい場合に使用します。

body は、<div id=”imui-container”> で囲まれて出力されます。

HeadWithContainerThemeBuilder

head, body を含んだ HTML を生成します。

header （メニューや、ユーティリティ）、footer を表示したくないが、CSS やクライアントサイド JavaScript は使用したい場合に使用します。

主に intra-mart Accel Platform 向けに作成した画面を表示するために使用することを想定しています。

body は、<div id=”imui-container”> で囲まれて出力されます。

HeadOnlyThemeBuilder

head, body を含んだ HTML を生成します。

header （メニューや、ユーティリティ）、footer を表示したくないが、CSS やクライアントサイド JavaScript は使用したい場合に使用します。

主に iWP7.2 以前のシステム向けに作成した画面を表示するために使用することを想定しています。

body は、指定された URL の HTML そのものが出力されます。

BodyOnlyThemeBuilder

DOCTYPE、htmlタグ、body を含んだ HTML を生成します。

header （メニューや、ユーティリティ）、footer を表示せず、CSS やクライアントサイド JavaScript も使用しない場合に使用します。

body は、指定された URL の HTML そのものが出力されます。

NoThemeBuilder

指定された URL の HTML をそのまま返します。

テーマを一切使用せず、自分で作成した HTML をそのまま出力したい場合に使用します。

body は、指定された URL の HTML そのものが出力されます。

FullThemeBuilder

head, header, body, footer のすべてを含んだ HTML を生成します。

body は、<div id=”imui-container”> で囲まれて出力されます。

基本はこれを使用します。

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

リクエストパスが設定ファイルに合致しない場合や、パラメータで指定されていない場合、FullThemeBuilder がリクエストを処理します。

コラム

設定ファイルについては、「設定ファイルリファレンス」 - 「 UI 」より各テーマビルダーのドキュメントを参照してください。

コラム

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

WEB-INF/conf/theme-full-theme-path-config

注意

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

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

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

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

指定するキー imui-theme-builder-module

適用したい PageBuilder 指定する値

FullThemeBuilder fulltheme

HeadWithFooterThemeBuilder headwithfooter

HeadWithContainerThemeBuilder headwithcontainer

HeadOnlyThemeBuilder headonly

BodyOnlyThemeBuilder bodyonly

NoThemeBuilder notheme

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

適用順位 ¶

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

属性

パラメータ

設定ファイル

指定例 ¶

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

例として、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-with-footer-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-with-footer-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>

ライブラリ群の切り替え ¶

intra-mart Accel Platform 2015 Winter(Lydia) からライブラリ群の切り替え機能を追加しました。

この機能は jQuery のバージョンを切り替えることを主な目的としています。指定されなかったり、存在しない組み合わせ名を指定されたりした場合、「設定ファイルリファレンス」 - 「ライブラリ群の指定」に指定された version を辞書の昇順でソートし、最初のものが利用されます。標準では iap-8.0.0 が指定されます。

ライブラリの切り替えは上記の設定ファイル、パラメータ、属性でライブラリ群の組み合わせ名を指定します。どのような組み合わせ名が用意されているかは「設定ファイルリファレンス」 - 「ライブラリ群設定」を参照してください。

適用順位 ¶

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

属性

パラメータ

設定ファイル

指定例 ¶

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

設定ファイルの path 要素に、libraries-version 属性を追加します。ここでは /sample/page に対して iap-8.0.11 を指定します。この指定によって /sample/page は jQuery 2.1.4 や jQueryUI 1.11.4 が使用されます。
<?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 libraries-version="iap-8.0.11">/sample/page</path>
</theme-head-with-footer-path-config>

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

リクエストのパラメータとして指定する場合、キーに IMUI_THEME_LIBRARIES_VERSION を、値にライブラリ群の組み合わせ名を指定します。
<form name="form" action="sample/page">
  <input type="hidden" name="IMUI_THEME_LIBRARIES_VERSION" value="iap-8.0.11">
  <input type="submit" value="submit"/>
</form>

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

リクエストの属性として指定する場合、キーに IMUI_THEME_LIBRARIES_VERSION を、値にライブラリ群の組み合わせ名を指定します。
function init(request) {
    request.setAttribute("IMUI_THEME_LIBRARIES_VERSION", "iap-8.0.11");
    forward("somewhere");
}

目次

PageBuilder¶

PageBuilder の役割 ¶

組み合わせ方の制御 ¶

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

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

適用順位 ¶

指定例 ¶

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

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

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

ライブラリ群の切り替え ¶

適用順位 ¶

指定例 ¶

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

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

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

目次

適用したい PageBuilder	指定する値
FullThemeBuilder	fulltheme
HeadWithFooterThemeBuilder	headwithfooter
HeadWithContainerThemeBuilder	headwithcontainer
HeadOnlyThemeBuilder	headonly
BodyOnlyThemeBuilder	bodyonly
NoThemeBuilder	notheme