APEX 22.2のアイテム・コンテナについて

 APEX 22.2よりリージョン・テンプレートにItem Containerが追加されました。APEX Office HourのPart 4: PWA, User and Developer Experienceの5:12より、開発者のVincent Morneauさんが紹介しています。

アイテム・コンテナにより、以下のようにボタンとアイテムを横一列に配置する際に、テンプレート・オプションで揃える位置を決めることができます。

以下は中央(Center)の例です。

APEX 22.2以前は、過去の記事に書きましたがCSSを定義する必要がありました。

アイテム・コンテナとは、外観のテンプレートとしてItem Containerを選択した静的コンテンツのリージョンになります。

このリージョンを親としてボタンやページ・アイテムを配置します。ボタンを配置できる位置はButton StartとButton End、ページ・アイテムを配置できる位置はItemです。他の位置には配置できません。

ボタンB_STARTを、Button Startの位置に配置しています。

ページ・アイテムP1_ITEMは位置Itemに配置されます。

ボタンB_ENDは、Button Endの位置に配置しています。

ライブ・テンプレート・オプションを使って、テンプレートとしてItem Containerを指定しているリージョンのテンプレート・オプションを変更してみます。

AlignmentとしてCenterを選択した場合です。

AlignmentとしてStartを選択すると、上揃えになります。

AlignmentとしてEndを選択すると、下揃えになります。

Stretchを選択すると、ボタンの高さがアイテムの高さと同じになります。

Wrap Itemsにチェックを入れると、画面幅が狭い時にアイテムが回り込みます。

Stick On Mobileにチェックが入っていると、コンポーネントの配置は以下のようになります。

アイテム・コンテナの紹介は以上になります。

アイテム・コンテナに含むボタンやページ・アイテムを作成するときの注意点です。

アイテム・コンテナのリージョンのコンテキスト・メニューよりボタンやページ・アイテムを作成しても、レイアウトのリージョンが親なしになり、コンテキスト・メニューを開いたリージョンになりません。

リージョンとしてアイテム・コンテナを設定していないと位置を選択できないため、手動でリージョンを選択します。

リージョンとしてアイテム・コンテナが選択されると、位置を選択できるようになります。

以上です。

Oracle APEXのアプリケーション作成の参考になれば幸いです。

完