2022年11月30日水曜日

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 StartButton 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のアプリケーション作成の参考になれば幸いです。