intra-mart Accel Platform UIデザインガイドライン（PC版） 第6版 2022-12-01

intra-mart Accel Platform UIデザインガイドライン（PC版） 第6版 2022-12-01

目次 ≪  6.2.3. テーマを使って画面レイアウトを行う 6.2.5. 設定ファイルに指定する方法  ≫

6.2.4. 画面レイアウトの指定方法

本項では、「テーマ」を利用した画面レイアウトの方法を説明します。
「テーマ」を利用すると、画面によって header を表示しない、作成した画面だけを表示したい、など組み合わせることが可能です。

コラム

テーマの画面レイアウトやスタイルを切り替える仕組みの中の PageBuilder を使い、画面レイアウトの指定します。
詳細は、 テーマ仕様書 の PageBuilder を参照してください。

6.2.4.1. 画面を構成する 4 つのパーツ

テーマからみた画面の 4 つのパーツ に示したとおり、intra-mart Accel Platform の画面レイアウトは、テーマの観点から head 、 header 、 body 、 footer の 4 つの パーツに分類されます。
../../_images/theme.png
この 4 つのパーツは、標準テーマ、標準（シンプル）テーマにおいては、以下の通り HTML 要素として出力します。
パーツ名 HTML 要素 備考
head head タグ 画面上には表示されません。
header body タグ内の header タグ 標準テーマにおいては、グローバルナビ等が表示されます。
body body タグ内の div.imui-container タグ 開発者が作成した画面タイトル、ツールバーやコンテンツが表示されます。
footer body タグ内の footer タグ 標準テーマにおいては、コピーライト等が表示されます。
HTML ソースは以下の通り出力されます。
 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
<html>
  <head>ヘッド情報</head>
  <body>
    <header>ヘッダー</header>
    <div class="imui-container">
     画面タイトル
     ツールバー
     コンテンツエリア
    </div>
    <footer>フッタ</footer>
  </body>
</html>

6.2.4.2. パーツ組合せの種類

4 つのパーツの組合せの種類を説明します。
組合せの種類は以下 5 つです。
  • head 、 header 、 body 、 footer ヘッダー、フッタ表示あり。
  • head 、 body 、 footer ヘッダー表示なし。フッタ表示あり。
  • head 、 body ヘッダー、フッタ表示なし。
  • body ヘッダー、フッタ表示なし。
  • テーマ適用無し ヘッダー、フッタ表示なし。
これらのパーツの組合せは、 PageBuilder にて実装を行います。

6.2.4.3. PageBuilder で実装可能な画面レイアウトの種類

PageBuilder で実装可能な画面レイアウトの 6 種類を説明します。
（パーツの組み合わせ方のうち、 head 、 body の組み合わせが 2 パターンあります。）
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”> で囲まれて出力されます。
  • 基本はこれを使用します。

注意

パーツの組み合わせ方のうち、 head 、 body を含んだ HTML を生成する実装は、 HeadWithContainerThemeBuilder と HeadOnlyThemeBuilder の 2 つあります。
2 つの違いは、 HeadWithContainerThemeBuilder は、 bodyを <div id=”imui-container”> で囲んで出力します が、 HeadOnlyThemeBuilder は、出力されません。
intra-mart Accel Platform の UIモジュール を利用する場合は、 HeadWithContainerThemeBuilder を指定してください。

コラム

FullThemeBuilder は、 基本的な画面レイアウト の説明で使用した全ての構成を含むレイアウトです。

6.2.4.4. PageBuilderを利用した画面レイアウトの 3 つの指定方法

PageBuilderを利用した画面レイアウトの指定方法は 3 つあります。

6.2.4.4.1. 適用順位

画面レイアウトの 3 つの指定方法には適用順位があります。
設定ファイル、パラメータ、属性の適用は、以下の順に検索し、最初に合致した PageBuilder を使用します。
設定ファイルに記述したものより、属性に指定したものの方が優先されます。
  1. 属性
  2. パラメータ
  3. 設定ファイル

目次 ≪  6.2.3. テーマを使って画面レイアウトを行う 6.2.5. 設定ファイルに指定する方法  ≫

Copyright © 2014 NTT DATA INTRAMART CORPORATION

⇄ Sidebar ↑Top