1. アプリケーション・ビルダー・ユーザーズ・ガイド
  2. テーマおよびテーマ・スタイルの使用
  3. カスタム・テーマの作成
  4. ページ・テンプレート

11.3.14 ページ・テンプレート

ページ・テンプレートを使用してページの外観を定義します。

親トピック: カスタム・テーマの作成

11.3.14.1 ページ・テンプレートについて

ユニバーサル・テーマで使用可能なページ・テンプレートについて説明します。

ページ・テンプレートは、ページのレイアウトと目的を定義します。ユニバーサル・テーマでは、サイド・ツリー・ベースのナビゲーションとトップ・タブのようなナビゲーションの2つのタイプのナビゲーション・メニューがサポートされています。

使用可能なすべてのページ・テンプレートのサンプルを表示するには:

  1. ユニバーサル・テーマ参照アプリケーションを実行します。
  2. 「メイン・ナビゲーション」メニューから、「設計」、「ページ・テンプレート」の順に選択します。

関連項目:

ユニバーサル・テーマ参照アプリケーションへのアクセス

親トピック: ページ・テンプレート

11.3.14.2 ページ・テンプレート属性

ページ・テンプレート属性について説明します。

ページ・テンプレートは、ヘッダー・テンプレート、ボディ・テンプレート、フッター・テンプレートおよび多くのサブテンプレートで構成されます。ページレベルの属性としてページ・テンプレートを指定しない場合、Oracle APEXエンジンは、「テーマの作成/編集」ページで定義したデフォルトのページ・テンプレートを使用します。

ページ・テンプレートは、静的HTMLと実行時に置き換えられる置換文字列を組み合せたものです。置換文字列を使用して、ページ・テンプレート内のコンポーネントの存在と配置を指定します。さらに、サブテンプレートを使用して、コンポーネントの表示方法を指定できます。

ここでは、ページ・テンプレートの編集ページの特定のセクションについて説明します。サポートされている置換文字列など、特定の属性についてさらに学習するには、フィールドレベル・ヘルプを参照してください。

親トピック: ページ・テンプレート

11.3.14.2.1 名前

「名前」は、テンプレートの名前を示します。「テーマ」は、テンプレートが関連付けられているテーマを示します。

「テンプレート・クラス」は、そのテンプレートに固有の用途を示します。新しいテーマに切り替えると、あるテーマのすべてのテンプレートは、別のテーマの対応するテンプレートにマップされます。アプリケーション・ビルダーは、テンプレート・クラスの割当てによってこのテンプレート・マッピングを行います。

テンプレートに翻訳が必要なテキスト文字列が含まれているかどうかを示すには、「翻訳可能」チェック・ボックスを使用します。

「テンプレート・タイプ」はページ・テンプレート・タイプを指定します。「ダイアログ・ページ」に設定すると、そのテンプレートを選択できるのは、ページ・モードが「モーダル」または「非モーダル」のページのみになります。「標準ページ」に設定すると、そのテンプレートを選択できるのは、ページ・モードが「標準」のページのみになります。

関連項目:

ダイアログ・ページの作成および必須のダイアログ・ページ・テンプレート属性

親トピック: ページ・テンプレート属性

11.3.14.2.2 定義

各テンプレートは、ヘッダー、ボディ、フッターおよびサブテンプレートで構成されます。動的コンテンツを含めるには、置換文字列を使用します。テンプレートのすべての置換文字列は、大文字で指定し、シャープ記号(#)で囲む必要があります。

ヒント:

サポートされている置換文字列のリストおよび例は、フィールドレベル・ヘルプを参照してください。

定義属性は次のとおりです。

  • ヘッダー - HTMLドキュメントの<Head>セクションを定義するHTMLを入力します。このテンプレート・セクションには、少なくとも#TITLE#および#HEAD#を含めることをお薦めします。

  • ボディ- HTMLドキュメントの<Body>セクションを構成するHTMLを入力します。ボディ・コンテンツの配置場所および追加のリージョン位置を定義する置換文字列を含めます。

  • フッター - ボディの後に表示する、ページ・テンプレートの3番目のセクションを定義するHTMLを入力します。

親トピック: ページ・テンプレート属性

11.3.14.2.3 JavaScript

ヒント:

サポートされている置換文字列のリストおよび例は、フィールドレベル・ヘルプを参照してください。

選択可能な属性は次のとおりです。

  • ファイルURL - このページにロードするコードのJavaScriptファイルURLを入力します。各URLを新しい行に記述する必要があります。ファイルの縮小バージョンを指定する場合、置換文字列#MIN#を使用して.minを、または#MIN_DIRECTORY#を使用してminified/を通常ページ・ビューのファイルURLに含めたり、ページをデバッグ・モードで表示する場合は空の文字列を含めることができます。アプリケーションのバージョンをファイルURLに含める場合、置換文字列#APP_VERSION#にアクセスすることもできます。

    ここに入力したJavaScriptのファイルURLによって、ページ・テンプレート内の#TEMPLATE_JAVASCRIPT#置換文字列が置き換えられます。

    スクリプトの開始タグや閉じタグを含めずに、URLのみを記述します。

  • ファンクションおよびグローバル変数の宣言 - 対象のページ・テンプレートで使用するコード用のJavaScriptコード(たとえば、ファンクションまたはグローバル変数宣言)を入力します。重複を避け、ブラウザで静的ファイルをキャッシュするため、外部ファイルに挿入することを検討してください。ここに入力したコードによって、ページ・テンプレート内の#TEMPLATE_JAVASCRIPT#置換文字列が置き換えられます。

    スクリプトの開始タグや閉じタグを含めずに、JavaScriptコードのみを含めます。

    ショートカットを参照するには、"SHORTCUTNAME"を使用します。

  • ページ・ロード時に実行 - ページのロード時に実行するJavaScriptコードを入力します。このコードはOracle APEXによって生成されたJavaScriptコードの後に実行されます。ここに入力したコードによって、ページ・テンプレート内の#GENERATED_JAVASCRIPT#置換文字列が置き換えられます。

    スクリプトの開始タグや閉じタグを追加する必要はなく、JavaScriptコードのみ追加します。

  • ダイアログ初期化コード - この属性は、「テンプレート・タイプ」が「ダイアログ・ページ」の場合にのみ表示されます。ダイアログとしてページを初期化するJavaScriptコードを入力します。置換文字列は、レンダリング時に該当する値で置換されます。

  • 「ダイアログ・クロージャ・コード」。この属性は、「テンプレート・タイプ」が「ダイアログ・ページ」の場合にのみ表示されます。ダイアログ・ページを閉じるJavaScriptコードを入力します。

  • 「ダイアログ取消コード」。この属性は、「テンプレート・タイプ」が「ダイアログ・ページ」の場合にのみ適用されます。ダイアログ・ページを取り消すJavaScriptコードを入力します。

親トピック: ページ・テンプレート属性

11.3.14.2.4 カスケード・スタイルシート

ファイルURL

このページ・テンプレートにロードされるカスケード・スタイルシート・ファイルURLを入力します。各URLを新しい行に記述する必要があります。ファイルの縮小バージョンを指定する場合、置換文字列#MIN#を使用して.minを、または#MIN_DIRECTORY#を使用してminified/を通常ページ・ビューのファイルURLに含めたり、ページをデバッグ・モードで表示する場合は空の文字列を含めることができます。アプリケーションのバージョンをファイルURLに含める場合、置換文字列#APP_VERSION#にアクセスすることもできます。

スクリプトの開始タグや閉じタグを含めずに、ファイルURLのみを含めます。

インライン

このページ・テンプレートに使用されるカスケード・スタイルシートのコードを入力します。重複を避け、ブラウザで静的ファイルをキャッシュするため、外部ファイルに挿入することを検討してください。ここに入力したコードによって、テンプレート内の#TEMPLATE_CSS#置換文字列が置き換えられます。

開始スタイル・タグや閉じスタイル・タグを含めずに、カスケード・スタイルシートのコードのみを含めます。

親トピック: ページ・テンプレート属性

11.3.14.2.5 サブテンプレート

次のサブテンプレートのHTMLを入力します。サブテンプレートは、置換文字列を使用してページ・テンプレートのボディ内に配置されます。

サブテンプレートは次のとおりです。

  • 成功メッセージ - テンプレート・ボディ、ヘッダー、フッター内の文字列#SUCCESS_MESSAGE#を置換するHTMLを入力します。

  • ナビゲーション・バー - テンプレート・ヘッダー、ボディ、フッター内の文字列#NAVIGATION_BAR#を置換するHTMLまたはテキストを入力します。置換文字列#BAR_BODY#を使用して、ナビゲーション・バーにエントリが表示される位置を指定します。

  • ナビゲーション・バー・エントリ - 各ナビゲーション・バー・エントリのナビゲーション・バー#BAR_BODY#置換文字列に置換されるHTMLまたはテキストを入力します。

  • 通知 - #NOTIFICATION_MESSAGE#置換文字列が、テンプレートのヘッダー、ボディまたはフッターで参照される際に置換されるHTMLまたはテキストを入力します。

親トピック: ページ・テンプレート属性

11.3.14.2.6 イメージ・ベースのタブ属性

このサブテンプレートは、完全にイメージに基づくタブに使用します。選択可能な属性は次のとおりです。

  • カレント・イメージ・タブ - イメージベースのタブが現在選択されていることを示すために使用するHTMLを入力します。タブに表示される名前を示す#TAB_TEXT#置換文字列を含めます。

  • 非カレント・イメージ・タブ - イメージ・タブが現在選択されていないことを示すために使用するHTMLを入力します。タブに表示される名前を示す#TAB_TEXT#置換文字列を含めます。

親トピック: ページ・テンプレート属性

11.3.14.2.7 レイアウト

ページで使用するレイアウトのタイプを指定します。選択したタイプによって、表示される属性が決まります。属性についてさらに学習するには、フィールドレベル・ヘルプを参照してください。

「タイプ」から、レイアウトを選択します。

  • HTML表 - HTML表を使用して、リージョン、ページ・アイテムおよびボタンを配置します。

  • 固定列数 - 画面を固定のグリッド列数で分割するグリッドに使用します。

  • 可変列数 - リージョン、ページ・アイテムおよびボタンの配置方法に応じて、グリッド列を最大n列まで表示できるグリッドに使用します。

親トピック: ページ・テンプレート属性

11.3.14.2.8 位置

このページ・テンプレートの位置を作成します。位置を使用すると、このページ・テンプレートでコンポーネント(リージョン、アイテム、ボタン)を表示する場所を識別できます。位置の置換文字列は、予約済ページ置換文字列(たとえば、NOTIFICATION_MESSAGE)の1つにすることはできません。

「ページ・テンプレートの編集」の「位置」タブにナビゲートして、予約済置換文字列の完全なリストを表示します。

親トピック: ページ・テンプレート属性

11.3.14.2.9 ダイアログ

ダイアログ属性は、「テンプレート・タイプ」に「ダイアログ・ページ」を選択した場合にのみ表示されます。これらの設定は、ページ・レベルで指定された類似の属性によって上書きされます。

選択可能なダイアログ属性は次のとおりです。

  • 幅 - ダイアログの幅をピクセル単位または比率で入力します。
  • 高さ - ダイアログの高さをピクセル単位で入力します(たとえば、500)。
  • 最大幅 - ダイアログの最大幅をピクセル単位で入力します。
  • CSSクラス - ダイアログに適用する追加のCSSクラスを、空白区切りのリストとして入力します。

  • フレームへの埋込みを許可 - ページ・テンプレート・レベルのブラウザ・フレーム・オプションが、各オプションの現在の設定とともに下に示されます。ブラウザでアプリケーションのページをフレーム内に表示できるかどうかを選択します。現在の設定が、このページ・テンプレートを使用する各モーダルおよび非モーダル・ページのデフォルトです。さらに学習するには、フィールドレベル・ヘルプを参照してください。

    APEXは、iframeにモーダル・ダイアログを埋め込みます。アプリケーション・セキュリティ属性ブラウザ・フレームを「拒否」に設定する場合、「モーダル・ダイアログ」の「フレームへの埋込みを許可」を選択すると、かわりにこのテンプレートを使用するダイアログ・ページの「同じ起点から許可」が使用されます

関連項目:

必須のダイアログ・ページ・テンプレート属性

親トピック: ページ・テンプレート属性

11.3.14.2.10 エラー・ページ・テンプレートの制御

ページ・テンプレートをエラー・テンプレートとして指定する場合は、この属性を使用します。

親トピック: ページ・テンプレート属性

11.3.14.2.11 置換文字列

置換文字列は、テンプレート内でコンポーネント値を参照するために使用されます。特定のテンプレートについてサポートされている最新のリストの置換文字列を表示するには、テンプレートを表示し、「置換文字列」レポートを検索します。

ヒント:

テンプレートのすべての置換文字列は、大文字で指定し、シャープ記号(#)で囲む必要があります。

親トピック: ページ・テンプレート属性

11.3.14.3 必須のダイアログ・ページ・テンプレート属性

必須のダイアログ・ページ・テンプレート属性について学習します。

ダイアログ・ページ・テンプレートを作成するには、次の「ページ・テンプレート」属性を定義する必要があります。

属性 説明
名前、テンプレート・タイプ 「ダイアログ・ページ」として定義する必要があります。
JavaScript、ダイアログ初期化コード ダイアログとしてページを初期化するJavaScriptコードを入力します。ファンクション・コール構文は、フィールドレベル・ヘルプを参照してください。
JavaScript、ダイアログ・クロージャ・コード ダイアログ・ページを閉じるJavaScriptコードを入力します。ファンクション・コール構文は、フィールドレベル・ヘルプを参照してください。
JavaScript、ダイアログ取消コード ダイアログ・ページを取り消すJavaScriptコードを入力します。ファンクション・コール構文は、フィールドレベル・ヘルプを参照してください。
ダイアログ、幅 ダイアログのデフォルトの幅を設定します。ページ・テンプレート・レベルの設定は、ページ・レベルで上書きできます。
ダイアログ、高さ ダイアログのデフォルトの高さを設定します。ページ・テンプレート・レベルの設定は、ページ・レベルで上書きできます。
ダイアログ、最大幅 ダイアログの最大幅をピクセル単位で設定します。ページ・テンプレート・レベルの設定は、ページ・レベルで上書きできます。
ダイアログ、CSSクラス ダイアログに適用する追加のCSSクラスを入力します。ページ・テンプレート・レベルの設定は、ページ・レベルで上書きできます。
ダイアログ、フレームへの埋込みを許可 この属性を使用してブラウザでアプリケーションのページをフレーム内に表示できるかどうかを制御するページ・モードを選択します。APEXは、iframeにモーダル・ダイアログを埋め込みます。アプリケーション・セキュリティ属性ブラウザ・フレームを「拒否」に設定する場合、「モーダル・ダイアログ」の「フレームへの埋込みを許可」を選択すると、かわりにこのテンプレートを使用するダイアログ・ページの「同じ起点から許可」が使用されます。

関連項目:

ダイアログ・ページの作成

親トピック: ページ・テンプレート