Oracle APEX 21.2より、コンポーネントの配置方法に大きな変更がありました。新しいコンポーネントの配置方法について、Oracle APEXの開発者のVincent MorneauさんがYouTubeに短い解説動画(Getting Started with the New Page Component Positions in Oracle APEX)を公開しています。
私が使った感じでは、変更点は以下の３つにまとめられると思います。
- ページ・アイテムおよびボタンの配置にリージョンが不要になった。
- 位置のオプションにAfter Logo、Before Navigation Bar、After Navigation Bar、Footerが追加された。
- リージョンを配置する位置の名称が変更された。
リージョンに依存しないページ・アイテムおよびボタンの配置
リージョンに依存せず、ボタンとページ・アイテムが配置できるようになりました。この変更に伴い、レンダリング・ツリーの節リージョンがコンポーネントに変更されています。
Oracle APEX 21.2以前で実行できるのはリージョンの作成だけでしたが、21.2からはリージョンの作成、アイテムの作成およびボタンの作成が実行できます。
以下のように、ページにページ・アイテムP1_LINKとボタンB_OPENを作成してみます。画面はサンプル・データセットのEMP/DEPTをインストールして作成したアプリケーションのホーム画面です。
レンダリング・ツリーのBody(コンポーネント)からアイテムの作成を実行します。
左ペインのレンダリング・ビューおよび中央ペインのレイアウト・ビューともに、ページ・アイテムP1_LINKが直接配置（リージョンなし）されていることが確認できます。
LOVのタイプは静的値、静的値の表示値と戻り値の組み合わせとして、ダッシュボードが２、従業員が３、部門が５の３行を設定します。追加値の表示はOFF、NULL値の表示もOFFにします。
作成したボタンはページ・アイテムP1_LINKの直下に配置します。識別のボタン名はB_OPEN、ラベルは開くとします。外観のホットをON、テンプレート・オプションのWidthをStrechに変更します。
ボタンの動作のアクションはこのアプリケーションのページにリダイレクト、ページは&P1_LINK.とします。
ページ・アイテムP1_LINKで移動先のページを選択し、開くボタンをクリックするとページが移動します。ページ・プロパティの保存されていない変更の警告がONだと不要な警告がポップアップするので、OFFにします。
Oracle APEX 21.2以前では、ページ・アイテムやボタンは必ずリージョンに配置する必要があります。同じレイアウトでページ・アイテムやボタンを配置するには、そのためのリージョンを作成する必要があります。
以下の例ではページ・アイテムP1_LINK、ボタンB_OPENを配置するため、リージョン移動リンクをタイプを静的コンテンツとして作成しています。リージョンの存在を隠すために、外観のテンプレートにBlank with Attributesを選択しています。
結果としては以下のように同じ画面が表示されますが、21.2の方が同じレイアウトの画面を作る作業が容易になっています。
追加された位置
位置として、After Logo、Before Navigation Bar、After Navigation Bar、Body、Footerを選択できます。
それぞれが指定している位置は以下です。これらの位置は、リージョンの外に配置しているページ・アイテムとボタンに対して選択可能です。リージョンに配置しているコンポーネントはリージョンの内部(Region Body)に配置されます。
ページ・アイテムP1_LINKの位置をBefore Navigation Bar、ボタンB_OPENの位置をAfter Navigation Barに変更します。ボタンについては外観のボタン・テンプレートをアイコン、アイコンはfa-external-linkに変更します。変更後の画面は以下になります。
ページ・アイテムP1_LINKの位置をFooter、ボタンB_OPENの位置をAfter Logoに変更した画面は以下になります。
Oracle APEX 21.2以前で同様の位置にページ・アイテムやボタンを配置するには、ページ・テンプレートをカスタマイズする必要がありました。ページ・テンプレートをカスタマイズすると、Oracle APEXがバージョン・アップされる毎に新たに提供されるページ・テンプレートに同様のカスタマイズを適用する必要があります。Oracle APEX 21.2からはそのような工数は発生しません。
After Logoなどの位置へ配置するコンポーネントは、大抵はそれぞれのページ毎ではなく、ページ番号０のグローバル・ページに作成するでしょう。グローバル・ページにページ・アイテムP0_LINK、ボタンB_OPENを作成し、ページ番号１のコンポーネントは削除します。
グローバル・ページにページ・アイテムとボタンを配置することにより、すべてのページに同じページ・アイテムとボタンが表示することができます。
モーダル・ダイアログのページはAfter Logoといった表示位置がないので、これら位置に配置されたコンポーネントは表示されません。そのため、非表示の条件に含める必要はありません。
ページ・デザイナでは、無効な位置[レンダリングされない]以下に、グローバル・ページのコンポーネントが配置されます。
Oracle APEX 21.2での位置の名称を21.2以前と対応づけると、以下になります。
リージョンを配置する位置の名称変更
Oracle APEX 21.2よりリージョンの位置として、以下が選択可能になっています。位置のAfter Logo、Before Navigation Bar、After Navigation BarはOracle APEX 21.2にて新設されたものです。これらの位置は領域が狭いためページ・アイテムやボタンが主に配置され、広さが必要とされるリージョンが配置されることはあまりないでしょう。
Footerは21.2以前からリージョンを配置する位置として指定できました。ただし、21.2からはページ・アイテムやボタンを直接配置できる位置になっています。
レガシーの位置を除くと、太字が主にリージョンが配置される位置になります。
- ヘッダーの後[レガシー]
- Banner
- After Logo
- Before Navigation Bar
- After Navigation Bar
- Top Navigation
- Breadcrumb Bar
- Full Width Content
- Body
- Footer
- Dialog, Drawers and Popups
- フッターの前[レガシー]
Oracle APEX 21.2以前で選択可能な位置は以下でした。
- ヘッダーの前
- Page Header
- Page Navigation
- Breadcrumb Bar
- Before Content Body
- Content Body
- Body 1
- Body 2
- Body 3
- Footer
- Inline Dialogs
- フッターの前
Banner = Page Header
Top Navigation = Page Navigation
Breadcrumb Bar = Breadcrumb Bar
Full Width Content = Before Content Body
Body = Content Body, Body1, Body2, Body3
Dialogs, Drawers and Popups = Inline Dialogs
Dialogs, Drawers and Popups = Inline Dialogs
これらの位置を画面上で確認すると以下になります。
以上で新しいレイアウト・システムの説明は終了です。
Oracle APEXのアプリケーション作成の参考になれば幸いです。
補足
新しくページ・アイテムやボタンを配置できるAfter Logo、Before Navigation Bar、After Navigation Barの位置はページ・テンプレートに埋め込まれています。このページ・テンプレートはOracle APEX 21.2に含まれています。
Oracle APEX 21.2のページ・テンプレートStandardのヘッダーの定義は以下を含んでいます。
<div class="t-Header-logo">
<a href="#HOME_LINK#" class="t-Header-logo-link">#LOGO#</a>
#AFTER_LOGO#
</div>
<div class="t-Header-navBar">
<div class="t-Header-navBar--start">#BEFORE_NAVIGATION_BAR#</div>
<div class="t-Header-navBar--center">#NAVIGATION_BAR#</div>
<div class="t-Header-navBar--end">#AFTER_NAVIGATION_BAR#</div>
</div>
21.1での定義は以下です。追加されたプレースホルダーはありません。
<div class="t-Header-logo">
<a href="#HOME_LINK#" class="t-Header-logo-link">#LOGO#</a>
</div>
<div class="t-Header-navBar">#NAVIGATION_BAR#</div>
</div>
つまり、Oracle APEXを21.2へバージョンアップしても、既存のアプリケーションについてはテーマのリフレッシュを実施して、使用しているテンプレートを更新するまではAfter Logo、Before Navigation Bar、After Navigation Barへのコンポーネントの配置は行えません。
テーマをリフレッシュしなくても、リージョンの外にコンポーネントを配置することはできますが、その際に指定可能な位置はContent Bodyに制限されます。
完
