ページ・テンプレート

12.3.14 ページ・テンプレート

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

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

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

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

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

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

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

12.3.14.1.1 名前

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

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

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

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

12.3.14.1.2 定義

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

ヒント:

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

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

ヘッダー: HTMLドキュメントの<Head>セクションを定義するHTMLを入力します。このテンプレート・セクションには、少なくとも#TITLE#および#HEAD#を含めることをお薦めします。
ボディ: HTMLドキュメントの<Body>セクションを構成するHTMLを入力します。ボディ・コンテンツの配置場所および追加のリージョン位置を定義する置換文字列を含めます。
フッター: ボディの後に表示する、ページ・テンプレートの3番目のセクションを定義するHTMLを入力します。

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

12.3.14.1.3 JavaScript

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

ヒント:

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

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

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

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

ショートカットを参照するには、"SHORTCUTNAME"を使用します。
ページ・ロード時に実行: ページのロード時に実行するJavaScriptコードを入力します。このコードはOracle Application Expressによって生成されたJavaScriptコードの後に実行されます。ここに入力したコードによって、ページ・テンプレート内の#GENERATED_JAVASCRIPT#置換文字列が置き換えられます。
ダイアログ初期化コード: この属性は、「テンプレート・タイプ」が「ダイアログ・ページ」の場合にのみ表示されます。ダイアログとしてページを初期化するJavaScriptコードを入力します。置換文字列は、レンダリング時に該当する値で置換されます。
「ダイアログ・クロージャ・コード」。この属性は、「テンプレート・タイプ」が「ダイアログ・ページ」の場合にのみ表示されます。ダイアログ・ページを閉じるJavaScriptコードを入力します。
「ダイアログ取消コード」。この属性は、「テンプレート・タイプ」が「ダイアログ・ページ」の場合にのみ適用されます。ダイアログ・ページを取り消すJavaScriptコードを入力します。

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

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

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

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

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

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

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

12.3.14.1.5 サブテンプレート

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

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

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

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

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

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

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

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

12.3.14.1.7 レイアウト

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

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

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

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

12.3.14.1.8 表示ポイント

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

ブレッドクラム表示ポイント - ブレッドクラムを使用する生成済コンポーネントに適用されます。ブレッドクラムが配置されるページ上の位置を定義します。サイドバー表示ポイント
サイドバー表示ポイント - サイドバーを使用する生成済コンポーネントに適用されます。サイドバーが配置されるページ上の位置を定義します。

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

12.3.14.1.9 ダイアログ

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

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

幅 - ダイアログの幅をピクセル単位または比率で入力します。
高さ - ダイアログの高さをピクセル単位で入力します(たとえば、500)。
最大幅 - ダイアログの最大幅をピクセル単位で入力します。
CSSクラス - ダイアログに適用する追加のCSSクラスを、空白区切りのリストとして入力します。
フレームへの埋込みを許可 - ページ・テンプレート・レベルのブラウザ・フレーム・オプションが、各オプションの現在の設定とともに下に示されます。ブラウザでアプリケーションのページをフレーム内に表示できるかどうかを選択します。現在の設定が、このページ・テンプレートを使用する各モーダルおよび非モーダル・ページのデフォルトです。詳細は、フィールドレベル・ヘルプを参照してください。

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

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

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

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

12.3.14.1.11 置換文字列

表 12-11に、使用可能なページ・テンプレートの置換文字列を示します。置換文字列は、サブテンプレート内でコンポーネント値を参照するために使用されます。

ヒント:

テンプレートのすべての置換文字列は、大文字で指定し、シャープ記号(#)で囲む必要があります。特定のテンプレートでサポートされる置換文字列のレポートを表示するには、ページ・テンプレートの編集ページの「置換文字列」セクションを参照してください。

表 12-11 ページ・テンプレートの置換文字列

参照元	置換文字列	説明
All	`#HIGH_CONTRAST_TOGGLE#`	ハイ・コントラストの切替え。
All	`#PAGE_STATIC_ID#`	ページの静的ID (例: `'P100'`)。
All	`#PARENT_TAB_CELLS#`	親タブの表示。
All	`#REGION_POSITION_01#`	リージョン位置1。
All	`#REGION_POSITION_02#`	リージョン位置2。
All	`#REGION_POSITION_03#`	リージョン位置3。
All	`#REGION_POSITION_04#`	リージョン位置4。
All	`#REGION_POSITION_05#`	リージョン位置5。
All	`#REGION_POSITION_06#`	リージョン位置6。
All	`#REGION_POSITION_07#`	リージョン位置7。
All	`#REGION_POSITION_08#`	リージョン位置8。
All	`#REQUESTED_URL#`	ブラウザによってリクエストされたページURL
All	`#SCREEN_READER_TOGGLE#`	スクリーン・リーダーの切替え。
All	`#SWITCH_UI_TO_DESKTOP#`	デスクトップ・ユーザー・インタフェースのホームページへのハイパーリンク。
All	`#SWITCH_UI_TO_JQM_SMARTPHONE#`	スマートフォン・ユーザー・インタフェースのホーム・ページへのハイパーリンク。
All	`#TITLE#`	ページ・タイトルを定義します。通常、HTMLのtitleタグ内に含まれます。
Body	`#BODY#`	ページ・ボディ。
Body	`#BOX_BODY#`	ボディを表示する位置。ボディがNULLの場合、かわりに`#BOX_BODY#`が使用されます。
Body	`#FORM_OPEN#`	HTMLのフォームの開始タグ`<form>`を配置する位置。フォームを送信するには、この置換文字列を含める必要があります。
Body	`#GENERATED_CSS#`	コンポーネントによって作成されるカスケード・スタイルシート・ファイル。
Body	`#GLOBAL_NOTIFICATION#`	グローバル通知属性を表示します。グローバル通知は、システム・ステータス(保留中のシステム停止時間など)との通信に使用します。`APEX_APPLICATION`.`G_GLOBAL_NOTIFICATION`を使用すると、この値をプログラムによって設定できます。関連項目: グローバル通知
Body	`#LOGO#`	アプリケーション・イメージまたはログ。「アプリケーション定義の編集」ページの「ロゴ」セクションで、アプリケーションのロゴのイメージおよびイメージ属性を指定できます。この機能を使用するには、「ヘッダー」または「ボディ」ページ・テンプレートに置換文字列`#LOGO#`も含める必要があります。関連項目: ロゴ
Body	`#NAVIGATION_BAR#`	ナビゲーション・バー。関連項目: 「ナビゲーション・バー」サブテンプレートは、サブテンプレートを参照してください。
Body	`#NOTIFICATION_MESSAGE#`	インライン・エラー・メッセージのサマリーが表示される位置を定義します。インライン・エラー・メッセージは、フィールドの横または通知領域にインライン(あるいはその両方)で表示できます。
Body	`#SUCCESS_MESSAGE#`	成功メッセージ。ページの成功メッセージおよびエラー・メッセージを表示する位置を定義します。エラーなしでページ・プロセスが実行されると、このテキストが表示されます。成功メッセージの前後にHTMLを追加すると、各テンプレートの成功メッセージの表示をカスタマイズできます。
Body	`#TAB_CELLS#`	標準タブの表示。
Body	`#TEMPLATE_JAVASCRIPT#`	標準タブの表示。
フッター	`#CUSTOMIZE#`	「カスタマイズ」リンク。
フッター	`#FORM_CLOSE#`	HTMLのフォームの終了タグ`<form>`を配置する位置。
フッター	`#BUILT_WITH_LOVE_USING_APEX#`	「Built with ♥ using Oracle APEX」を表示します。
ヘッダー	`#APEX_CSS#`	Application Expressによって使用されるカスケード・スタイルシート・ファイル。
ヘッダー	`#APEX_JAVASCRIPT#`	Oracle Application Expressによって使用されるJavaScriptファイルとコード。
ヘッダー	`#APPLICATION_CSS#`	ユーザー・インタフェース・レベルで定義されているCSSファイル。
ヘッダー	`#APPLICATION_JAVASCRIPT#`	ユーザー・インタフェース・レベルで定義されているJavaScriptファイル。
ヘッダー	`#GENERATED_JAVASCRIPT#`	コンポーネントによって必要に応じて作成されるJavaScriptコード。
ヘッダー	`#HEAD#`	`<head>`開始タグと`</head>`閉じタグの間に使用します。オプションで、各ページの`#HEAD#`のコンテンツを定義できます(たとえば、追加のスタイルシートまたはJavaScriptライブラリを参照するように定義できます)。
ヘッダー	`#ONLOAD#`	ページのonload。 Webブラウザでページがロードされたときに実行される JavaScriptコールで、この文字列を置換文字列として使用します。コールするJavaScriptは、ページごとに変更できます。
ヘッダー	`#PAGE_CSS#`	ページ・レベルで定義されているカスケード・スタイルシート・ファイルとインライン・スタイル。
ヘッダー	`#PAGE_JAVASCRIPT#`	ページ・レベルで定義されているJavaScriptファイルとコード。
ヘッダー	`#TEMPLATE_CSS#`	ページ・テンプレート・レベルで定義されているカスケード・スタイルシート・ファイルとインライン・スタイル。
ヘッダー	`#THEME_CSS#`	テーマレベルで定義されているカスケード・スタイルシート・ファイル。
ヘッダー	`#THEME_JAVASCRIPT#`	テーマレベルで定義されているJavaScriptファイル。
ヘッダー	`#THEME_STYLE_CSS#`	テーマ・スタイル・レベルで定義されているカスケード・スタイルシート・ファイル。
ページ	`#FAVICONS#`	アプリケーションのユーザー・インタフェース属性ファビコンのサポートを有効化します。開発者は、ファビコン(またはショートカット・アイコン)を作成するために、ファビコン属性を使用できます。この機能を使用するには、ページ・テンプレートに`#FAVICONS#`置換文字列が含まれている必要があります。
ページ	`#PAGE_URL#`	ページURL。
JavaScript	`#DIALOG_ATTRIBUTES#`	宣言的にサポートされていないダイアログ属性を定義します。
JavaScript	`#DIALOG_CSS_CLASSES#`	ダイアログCSSクラス。
JavaScript	`#DIALOG_HEIGHT#`	ダイアログの高さ。
JavaScript	`#DIALOG_MAX_WIDTH#`	ダイアログの最大幅。
JavaScript	`#DIALOG_WIDTH#`	ダイアログの幅。
JavaScript	`#IS_MODAL#`	ダイアログ・ページ・モード(たとえば、モーダルの場合は`true`、非モーダルの場合は`false`)。
JavaScript	`#SIDE_GLOBAL_NAVIGATION_LIST#`	ナビゲーション・メニュー(サイド)。
JavaScript	`#TOP_GLOBAL_NAVIGATION_LIST#`	ナビゲーション・メニュー(トップ)。
JavaScript	`#TRIGGERING_ELEMENT#`	トリガー要素(たとえば、現在のDOM要素)。

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

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

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

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

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