【第4回】Oracle APEX入門：参照ページを部品（リージョン、アイテム、ボタン）から作成

はじめに

こんにちは、株式会社メンバーズの中村です。
Oracle APEXについて、第4回目の記事となります。
今回は、0から各部品(リージョン、アイテム、ボタン)の組み合わせで参照ページを作成していく様子を記載したいと思います。
前回までの「ページの自動作成」から一歩進み、より柔軟な画面カスタマイズの基礎を身につけることができます。

※前回作成した、テストアプリケーションを元に開発していきますが、まだの場合は、前回の記事を参考にアプリやテーブルを作成してみてください。テーブル作成／データ投入については、SQLが得意な方は「SQLワークショップ」という画面からも実装できますので興味ある方はトライしてみてください。

01 参照ページの作成

・アプリケーション・ビルダー⇒作成済みアプリ選択⇒ページの作成

・空白ページのまま「次へ」

・任意の名前(参照サンプル等)を入力して「ページ作成」

・何もないページの確認
ページ作成後、以下のようにページ編集画面に遷移しているので、右上の「保存と実行」ボタンを押下する。

※ログインが求められた場合はログインしてください。
以下のように何もない画面が表示されます。
ただし、メニュータブを開くと作成したページが追加されていると思います。
これはページ作成時のデフォルトのナビゲーション設定が効いているためです。
ナビゲーションメニューについては省略しますが、興味がある方は「共有コンポーネント」から「ナビゲーション・メニュー」を開くとなんとなく理解できると思います。

02 ページの大枠作成

検索条件エリア作成

ページ編集画面に戻り、Bodyを右クリック⇒リージョンの作成
真ん中のレイアウトエリアに、下部の部品をドラッグ＆ドロップでもリージョンやアイテムの追加ができます。

・検索条件エリアの名前(検索条件等)を付ける
タイプは元々「静的コンテンツ」となっているはずで、これは特に何も機能はない枠のようなものです。「静的コンテンツ」は今回みたいに部品をまとめるときにも使えます。

表エリア作成

※検索条件のエリアにはあとでアイテムを追加するのでそのままにしておきます。
Bodyを右クリック⇒リージョン作成
名前：サンプル表、タイプ：「対話モード・レポート」
表名：TEST_AB　・・・事前に作っておいたテーブル名です。

各リージョン(エリア)の確認

右上の「保存と実行」ボタンを押下してページを開いて確認してみましょう。
検索条件と、表があれば成功です。

03 検索用アイテム、ボタン追加

A列検索用アイテム追加

検索条件リージョンを右クリック⇒アイテムの作成

・A列検索用アイテムの名前を付ける
タイプは元々「テキスト・フィールド」となっているはずで、これは自由入力できる欄です。
名前：P6_A、ラベル：A列※1
※1 P[ページ]_xxxというページ単位のユニーク書式ルールを守ることを推奨します。
　理由１：ページのコピー時などで、別ページ用のアイテム名に自動変換してくれます。
　理由２：設定によってセッションごとにこの名前で保存されるので、別ページでもこの名前で参照できる場合があります。（同じ名前は使えません）

作成日検索用アイテム追加

B列は省略して、続いて「Creation date」の作成日検索用のアイテムを作ります。
検索条件リージョンを右クリック⇒アイテムの作成。
日付は範囲で検索したいことが多いので、From／To用に二つ作成して日付用のアイテムを選択します。
①名前：P6_DATE_FROM、ラベル：作成日(FROM)、タイプ：日付ピッカー
②名前：P6_DATE_TO、ラベル：作成日(TO)、タイプ：日付ピッカー

・検索用ボタン追加
検索条件リージョンを右クリック⇒ボタンの作成

・検索用ボタンの名前を付ける
ボタン名：B6_SEARCH、ラベル：検索

・各アイテムの確認
右上の「保存と実行」ボタンを押下してページを確認してみましょう。
以下のように追加したアイテムやボタンがあれば成功です。
入力等もしてみましょう。

作成日右側をクリックすると以下のような日付を選ぶポップアップが出たと思います。

04 検索条件のレイアウト調整

アイテムが間延びしてて、ボタンも薄くて見栄え悪いかも・・・と思った方も多いかと思うので少し調整していきます。

幅調整(列スパン)

3つのアイテム（P6_A、P6_DATE_FROM、P6_DATE_TO）のレイアウトの列スパン※2で「2」を選択する。
※2「列スパン」とは、画面を12分割した時の割合です。上部の「列」は開始位置ですが自動で左詰めなのでそのままで良いです。

行の位置調整

作成日のアイテム2つ（P6_DATE_FROM、P6_DATE_TO）とも、「新規行の開始」をOFFにします。
これでアイテムすべて横並びになります。

ボタンの調整

レイアウトのスロット(位置)を「Close」、外観のホットを「ON」にします。

・各アイテムの再確認
どうでしょうか？少しスッキリして見栄えが良くなったと思います。
※まだ条件にした各アイテムと、リージョンの紐づけができていないので、検索後の表は変わらないと思います。

最後に

いかがでしたでしょうか？最後まで読んでいただきありがとうございます。
GUI操作で部品を組み合わせながら画面を作成していく様子が見えたと思います。
次回は、条件にした各アイテムと、リージョンの紐づけあたりを作成していくところから記載しようかと思います。
その時までお楽しみに！