Oracle APEXの画面をファンシーにしよう！

Low Code Cravings Oracle APEXの画⾯をファンシーにしよう︕ ハンズオン⼿順⽇本オラクル株式会社 2024年3⽉15⽇

はじめに本ハンズオンは、海外で⾏われたセミナーをハンズオンとして再構成しています。参考にしている海外セミナー Shakeeb Rahman & Tim Kimberl, Rapid UI
Prototyping Using Oracle APEX, ODTUG Kscope23, June 27th, 2023 Shakeeb Rahman, Rapid UI Prototyping in APEX, Oracle Nordic APEX Tour 2023, Aug. 28th - Sep. 1st, 2023 2 Copyright © 2024, Oracle and/or its affiliates

アジェンダ 1. Oracle APEXの始め⽅ 2. 初期アプリケーションのインストール 3. 本ハンズオンで作成するアプリケーションについて Lab 1:グローバル・ページ
Lab 2:レストラン・カテゴリの⼀覧表⽰ Lab 3:レストランの⼀覧表⽰ Lab 4:テーマの更新 Lab 5:ナビゲーション・バーの変更 Lab 6:ログイン・ページの更新 Lab 7:メニュー・ページの更新おまけ:Oracle APEXのレイアウト・システム Copyright © 2024, Oracle and/or its affiliates 3

無料で始める⽅法は３通り https://apex.oracle.comにアクセスし、今⽇から無料で開始をクリックします。 1. https://apex.oracle.com/go/request-workspaceから無料のワークスペースを取得します。 2. https://signup.cloud.oracle.com/よりOracle Cloudのアカウントを取得し、Always FreeのAutonomous Databaseのインスタンスを作成します。 3.
Oracle Database 23c Freeのインスタンスを作成し、Oracle APEXをインストールします。 5 Copyright © 2024, Oracle and/or its affiliates

無料のワークスペースの取得 • 以下を⼊⼒し、Request Workspaceをクリックします。 • 名(First name)、姓(Last name) • メールアドレス(Email)
• 国(Your Location) • APEX使⽤経験の有無(Are you new to Oracle APEX?) • 授業や研修での使⽤かどうか(Do you plan to use APEX for education or training?) • 利⽤規約の承諾(I agree to the terms of the Oracle APEX Service Agreements) • 指定したメールアドレスにメールが届くので、Create Workspaceをクリックします。 • 検証⽤途に限定されています。 • 容量は50MBです。 • 不具合と思われる事象の再現ケースをOracle Supportと共有するためにも使⽤できます。 • 利⽤できる機能の制限はほぼありません。 Copyright © 2024, Oracle and/or its affiliates 6

Oracle CloudのAlways Free Autonomous Database • Oracle Cloud Free Tierのアカウントにサインアップします。
• 通常、本⼈確認のためにクレジットカード番号の⼊⼒を求められます。 • アカウントをアップグレードするまでは、クレジットカードに課⾦されることはありません。 • Always FreeのAutonomous Databaseは２インスタンスまで作成できます。 • 1 OCPU（オーバーサブスクリプションあり） • 容量は20GBまで。 • 機能制限はありません。 • ⽂字や数値データのみ、少⼈数での利⽤であれば、実⽤に耐える環境です。参考: The story behind a COVID-19 exposure- tracking application in Finland https://blogs.oracle.com/database/post/covid-19-tracking-app-finland On the busiest day recorded, the application had 600,000 distinct users, and the peak period had 300,000 users in a two-hour period, which the application was able to handle quickly. Copyright © 2024, Oracle and/or its affiliates 7

Oracle Database 23c Free + Oracle APEX • Oracle Database
23c Freeがインストールできる環境であれば、どこでも実装可能です。 • AWS、Google Cloud、MS Azure、VirtualBox、⼿元のLinuxやWindows(21c XE)マシンなど。 • Oracle Database 23c Freeの制限 • CPUスレッド: 2 • ユーザー・データ: 12 GB • 利⽤可能なメモリ: 2 GB • 利⽤可能な機能に制限はありません。 • サポート契約がないため、パッチは適⽤できません。 • インストール、構成、管理を⾃分で⾏う必要があります。 • ライセンスについては、Oracle Free Use Terms and Conditionsを参照してください。 REST Data Services、APEX、 Databaseが構成済みの VirtualBox仮想アプライアンスも提供されています。 https://www.oracle.com/database/technologies/databaseappdev-vm.html Oracle Container Registryより、Oracle Autonomous Database Free Container Image（英語リソースのみ）および、Oracle Database Free Release 23c (23.3.0.0) Container ImageとOracle REST Data Services Docker Imageとしてコンテナ・イメージも提供されています。 https://container-registry.oracle.com/ords/ocr/ba/database Copyright © 2024, Oracle and/or its affiliates 8

初期アプリケーションをダウンロードします • 以下よりアプリケーションのエクスポートをダウンロードします。 https://apex.oracle.com/pls/apex/r/japancommunity/simcontents/download?id=LowCodeCrav ings-start.zip • LowCodeCravings-start.zipというファイルがダウンロードされます。 10 Copyright ©
2024, Oracle and/or its affiliates

ハンズオンを始めます 1. https://apex.oracle.com/ja/にアクセスします。 2. サインインをクリックします。 2 Copyright © 2024, Oracle
and/or its affiliates 11

Oracle APEXの開発環境にサインインしますあらかじめ、apex.oracle.comにワークスペースを取得しておきます。 1. ワークスペース名を⼊⼒します。 2. ユーザー名を⼊⼒します。 3. パスワードを⼊⼒します。
4. サインインをクリックします。 1 2 3 4 Copyright © 2024, Oracle and/or its affiliates 12

Oracle APEXにサインインした直後の画⾯です Oracle APEXのホーム・ページです。それぞれの画⾯の説明は、Oracle APEXクイック・ガイドで説明されています。アプリケーションの開発を始めます。 1. アプリケーション・ビルダーを開きます。
1 Copyright © 2024, Oracle and/or its affiliates 13

ダウンロード済みのアプリケーションをインポートします 1. インポートをクリックします。 2. インポートするファイルとして、ダウンロード済みの LowCodeCravings-start.zipを選択します。ファイル・タイプはアプリケーション、ページまたはコンポーネントのエクスポートです。 3. 次へ進みます。
14 Copyright © 2024, Oracle and/or its affiliates 1 2 3

アプリケーションをインストールします 1. アプリケーションのインストールをクリックします。 2. アプリケーションLowCodeCravings - Startが作成されます。このアプリケーションを改良します。 15 Copyright
© 2024, Oracle and/or its affiliates 1

サポートするオブジェクトをインストールします 1. サポートするオブジェクトのインストールをクリックします。表DEMO_MENU_ITEMS、 DEMO_RESTAURANTS、 DEMO_RESTAURANT_CATEGORIESが作成されます。静的アプリケーション・ファイルに、料理などの画像が含まれています。
作成された表に、あらかじめアプリケーションの実⾏に必要なデータがロードされます。 16 Copyright © 2024, Oracle and/or its affiliates 1

アプリケーションLowCodeCravings – Startが作成されます 1. アプリケーションの編集をクリックします。 2. アプリケーション・ビルダーからは、アプリケーション LowCodeCravings – Startをクリックして、アプ
リケーションを開いて編集します。 17 Copyright © 2024, Oracle and/or its affiliates 2 1

左のページを右のページに変更します – レストランの⼀覧 Copyright © 2024, Oracle and/or its affiliates
20

左のページを右のページに変更します – ログイン・ページ 21 Copyright © 2024, Oracle and/or its
affiliates

左のページを右のページに変更します – メニューの⼀覧 22 Copyright © 2024, Oracle and/or its
affiliates

画像は静的アプリケーション・ファイルとして保存されています • 画像のファイルは共有コンポーネントの静的アプリケーション・ファイルとして保存されています。 • それぞれの表のイメージを保存する列には、静的アプリケーション・ファイルを参照するURLが記載されています。 • 静的アプリケーション・ファイルはAPEXが実⾏されてい
るデータベースに保存されています。ブラウザに画像を表⽰する際に、データベースから画像ファイルが取り出されます。 • ブラウザ側で画像はキャッシュされるため、毎回画像がダウンロードされるわけではありませんが、画像を取得するリクエストは発⾏されます。 • Oracle APEX 23.2より静的アプリケーション・ファイルを、Oracle Cloudのオブジェクト・ストレージに保存できるようになりました。 23 Copyright © 2024, Oracle and/or its affiliates

静的アプリケーション・ファイルはOCIオブジェクト・ストレージへ保存できます • アプリケーション定義のアプリケーション・ファイル・ストレージに含まれる設定ファイル・ストレージ・タイプを、ローカル・データベースからOracle Cloud Object Storageに変更します。 • アプリケーション・ビルダーによる静的アプリケーション・
ファイルの作成や削除といった操作は、設定したオブジェクト・ストレージに対して実施されます。 • アプリケーション定義のユーザー・インターフェースの詳細に含まれる定義#APP_FILES#のパスに、実際に画像ファイルにアクセスするURLを設定できます。 • オブジェクト・ストレージ上のファイルをCDNにコピーして、 CDNから画像ファイルを参照することを想定した設定です。 24 Copyright © 2024, Oracle and/or its affiliates

静的アプリケーション・ファイルの保存先を検討する理由 • 作成するアプリケーションの1ページに、25枚の画像が含まれています。 • ページを表⽰すると、同時に25枚の画像を取得する要求が発⾏されます。画像がデータベースに保存されていると、これらはすべてデータベースへの処理要求になります。 •
APEXアプリケーションとしての要求は１つだけです。 • 静的アプリケーション・ファイルをデータベースの外に置いていると、これらの画像へのアクセスが発⽣しなくなります。 Oracle CloudでAPEXを使⽤しているときは、静的アプリケーション・ファイルの置き場所としてオブジェクト・ストレージを利⽤することをお勧めします。今回のハンズオンでは、静的アプリケーション・ファイルをそのまま使⽤します。 25 Copyright © 2024, Oracle and/or its affiliates

Lab 1:グローバル・ページアプリケーションに含まれるすべてのページで表⽰されるコンポーネントを作成します。 Copyright © 2024, Oracle and/or its affiliates
26

グローバル・ページを編集しますグローバル・ページはページ番号０として作成されています。グローバル・ページに作成したコンポーネントは、すべてのページに配置できます。 1. グローバル・ページ（ページ番号０）をクリックし、ページ・デザイナで開きます。通常のページではないため、グローバル・ページを実⾏することはできません。 27
Copyright © 2024, Oracle and/or its affiliates 1

DeliveryとPickupを選択するアイテムを作成します 1. コンポーネント・パレットをアイテムに切り替えます。 2. ラジオ・グループをつかみます。 3. レイアウト・ビューのAFTER LOGOの位置にラジオ・グループをドロップします。 Copyright
© 2024, Oracle and/or its affiliates 28 1 2 3

ページ・アイテムP0_ORDER_TYPEを設定します 1. ページ・アイテムP0_NEWを選択します。 2. 識別の名前をP0_ORDER_TYPEに変更します。 3. ラベルはOrder Typeとします。後でラベルは表⽰しないようにしますが、アクセシビリティ（スクリーン・リーダー）のためにラベルは必要とされています。
4. ラジオ・ボタンを横に並べるため、設定の列の数を２以上の値にします。 5. LOVのタイプに静的値を選択し、静的値をクリックして開きます。 6. 静的値として表⽰値がDelivery、戻り値がDELIVERY、表⽰値がPickup、戻り値がPICKUPの２⾏を設定します。設定した順番で表⽰させるため、実⾏時のソートはオフにします。OKをクリックします。 7. 追加値の表⽰はオフ、NULL値の表⽰もオフにします。 8. デフォルトのタイプに静的を選び、静的値はDELIVERYとします。 9. 変更を保存します。 29 Copyright © 2024, Oracle and/or its affiliates 1 2 3 4 5 6 7 8 6 6 9

ページ・アイテムP0_ORDER_TYPEを表⽰するページを限定しますグローバル・ページに作成したコンポーネント（ページ・アイテムを含む）は、すべてのページに表⽰されます。表⽰するページを限定する場合は、コンポーネントにサーバー側の条件を設定します。サーバー側の条件のタイプのうち、現在のページを対象としたタイプは、グローバル・ページにあるコンポーネントの制御に使⽤できます。 1. サーバー側の条件のタイプに現在のページはカンマで区切られたリストに含まれないを選択し、ページに9999を設定
します。ログイン・ページを表⽰対象から除外しています。 2. 変更を保存します。このサーバー側の条件が無くても、位置AFTER_LOGOにあるコンポーネントはログイン・ページに表⽰されません。その場合、ログイン・ページの無効な位置[レンダリングされない]に P0_ORDER_TYPEが配置されます。 30 Copyright © 2024, Oracle and/or its affiliates 1 2

ページ・アイテムP0_ORDER_TYPEの⾒え⽅を確認しますアプリケーションを実⾏し、ホーム・ページを表⽰します。グローバル・ページは実⾏できないため、⼀旦、アプリケーションのホームへ戻ります。 1. アプリケーションの実⾏をクリックします。ナビゲーション・バーにDeliveryとPickupを選択するラジオ・ボタンが表⽰されます。 31 Copyright

AFTER_LOGOって何︖ AFTER_LOGOの位置を確認します。 1. ページ・デザイナでホーム・ページ（ページ番号１）を開きます。 2. 左ペインでページ共有コンポーネントを開きます。 3. テンプレートのページ以下にStandardがあります。ホーム・ページはページ・テンプレートとしてStandard
を選んでいます。これを選択します。 4. コンポーネントの編集をクリックして、ページ・テンプレートのStandardを参照します。 32 Copyright © 2024, Oracle and/or its affiliates 2 3 4 ページ・レイアウトの位置 1

ページ・テンプレートStandardの定義を確認します 1. ページ・テンプレートの定義を確認します。 2. 定義のヘッダーとして記載されているHTMLのテンプレートに#AFTER_LOGO#が含まれています。 AFTER_LOGOに配置したコンポーネント（として表⽰されるHTML）は、ページのこの位置に挿⼊されます。 33 Copyright
© 2024, Oracle and/or its affiliates 1 2

ページ・テンプレートの位置を確認します 1. ページ・テンプレートには位置が定義されています。 2. 位置名としてAfter Logo、テンプレート置換として AFTER_LOGOが定義されています。その位置に配置可能なコンポーネントや条件が設定されています。 34 Copyright

位置AFTER_LOGOにあるコンポーネントを探して、テンプレート置換 #AFTER_LOGO#にコンポーネントのHTMLを挿⼊します Oracle APEXのアプリケーションはデータベースにメタ・データ（アプリケーションの定義）として保存されています。アプリケーションの定義を参照して、⾒つけたコンポーネントとして表⽰されるHTMLを、テンプレートのテンプレート置換の位置に挿⼊することでページが⽣成されます。例えばAPEX_APPLICATION_PAGE_ITEMSをページ位置AFTER_LOGOを条件として検索すると、ページ・
アイテムP0_ORDER_TYPEが⾒つかります。⾒つかった P0_ORDER_ITEMを表⽰させるためのHTMLを⽣成し、それをページ・テンプレートStandardの #AFTER_LOGO#に挿⼊します。 35 Copyright © 2024, Oracle and/or its affiliates select item_name, label, item_label_template, display_position from APEX_APPLICATION_PAGE_ITEMS where application_id = :APP_ID and display_position_code = 'AFTER_LOGO' order by display_sequence asc;

ページ・アイテムP0_ORDER_TYPEの⾒え⽅を変更しますページ・デザイナでグローバル・ページを開き、ページ・アイテムP0_ORDER_TYPEを選択します。 1. 外観のテンプレートをOptional – Floatingから Hiddenに変更し、テンプレート・オプションを開きます。 2.
SizeはX Largeとします。 3. 詳細のItem Group DisplayはDisplay as Pill Buttonとします。 4. OKをクリックします。 5. 変更を保存します。 36 Copyright © 2024, Oracle and/or its affiliates 1 2 3 5 4

外観のテンプレートのOptional – FloatingやHiddenって何︖ 1. グローバル・ページ（ページ番号０）のページ共有コンポーネントを開きます。 2. テンプレートのアイテムにHiddenがあります。ページ・アイテムP0_ORDER_TYPEはこれをテンプレートとして選んでいます。これを選択します。
3. コンポーネントの編集をクリックして、テンプレート Hiddenの定義を参照します。 37 Copyright © 2024, Oracle and/or its affiliates 1 2 3 1

テンプレートHiddenの定義を確認しますページ・アイテムのテンプレートの定義としてHTMLが記載されています。サーバー側でHTMLが⽣成されるコンポーネント（ページ・アイテムやボタンなど）は、必ずテンプレートの定義があります。テンプレートHiddenではラベルの前に記載されている label要素のclassにu-VisuallyHiddenが含まれていて、ラベルが表⽰されないようになっています。ラベルは表⽰されませんが、スクリーン・リーダーに対応する
ため、ラベル⾃体はページに含まれます。 38 Copyright © 2024, Oracle and/or its affiliates テンプレートHiddenの定義テンプレートOptional - Floatingの定義

テンプレート・オプションって何︖ Oracle APEXが提供しているUniversal Themeに事前定義されているCSSクラスです。テンプレート・オプションのグローバル・テンプレート・オプションを開くと、今回設定したテンプレート・オプションについて確認できます。 SizeのX LargeはCSSクラスt-Form-fieldContainer--
xlargeに⾒え⽅が設定されています。 Item Group DisplayのDisplay as Pill ButtonはCSSクラス t-Form-fieldContainer--radioButtonGroupに⾒え⽅が設定されています。 39 Copyright © 2024, Oracle and/or its affiliates

DeliveryとPickupの選択ができるようになりました実⾏中のアプリケーションのページを再ロードすると、今までに実施した変更が反映されます。 40 Copyright © 2024, Oracle and/or its
affiliates

検索フィールドを作成します検索フィールドとして使⽤するページ・アイテムを作成します。先ほどとは違う⼿順で、ページ・アイテムを作成してみます。ページ・デザイナでグローバル・ページを開きます。 1. After Logo（コンポーネントでもよい）上でコンテキスト・メニューを表⽰します。 2.
アイテムの作成を実⾏します。ページ・アイテム P0_NEWが作成されます。 3. レイアウト・ビューでP0_NEWをつかみます。 4. BEFORE NAVIGATION BARの位置にドロップします。 41 Copyright © 2024, Oracle and/or its affiliates 1 2 3 4

検索フィールドとなるページ・アイテムP0_SEARCHを設定します 1. 識別の名前をP0_SEARCHに変更します。 2. ラベルはSearchとします。 3. 設定のサブタイプは検索とします。 4. 外観のテンプレートはHiddenとします。 42
Copyright © 2024, Oracle and/or its affiliates 1 2 3 4

ページ・アイテムP0_SEARCHの設定の続き 1. 外観のテンプレート・オプションをクリックして開きます。 2. Stretch Form Itemをチェックし、SizeにX Largeを選択します。OKをクリックします。 3. 外観のアイコンのリスト・アイコンをクリックします。
4. Font APEXを選択しsearchで検索します。検索されたアイコンよりfa-searchをクリックして選択します。 5. 値のプレースホルダーにSearch food, drinks and APEX…（⽂字列は⾃由に選べます）と⼊⼒します。スクリーンショットに含めていませんが、ページ・アイテム P0_ORDER_TYPEと同じ、サーバー側の条件も設定します。 6. 変更を保存します。 43 Copyright © 2024, Oracle and/or its affiliates 1 2 4 3 5 6 2

検索フィールドが作成されました表⽰中のページを再ロードすると、今までに実施した変更が反映されます。 44 Copyright © 2024, Oracle and/or its
affiliates

Lab 2:レストラン・カテゴリの⼀覧表⽰レストランのカテゴリを表⽰するカード・リーションの⾒え⽅を改善します。 Copyright © 2024, Oracle and/or its affiliates
45

ホーム・ページからブレッドクラムのリージョンを削除しますページ・デザイナでホーム・ページ（ページ番号１）を開きます。ブレッドクラムのリージョンを削除します。 1. Breadcrumb Barにあるリージョン LowCodeCravings – Startの上でコンテキス
ト・メニューを表⽰します。 2. 削除を実⾏します。 3. 変更を保存します。 46 Copyright © 2024, Oracle and/or its affiliates 1 2 3

カード・リージョンCategoriesのソースのSQL問合せを確認します 1. リージョンCategoriesを選択します。 2. プロパティ・エディタのリージョン・タブを選択します。ソースのSQL問合せより、イメージを指すURLが列 IMAGEとして取り出されていることが確認できます。 48 Copyright ©
2024, Oracle and/or its affiliates 1 2 select c.image_url as IMAGE, c.name as CATEGORY, '#' as LINK from demo_restaurant_categories c SQL問合せ

カード上にアイコンを表⽰します 1. プロパティ・エディタの属性タブを選択します。 2. アイコンとバッジのアイコン・ソースはイメージURLとします。 3. イメージURLは#APP_FILES#&IMAGE.とします。#APP_FILES#は静的アプリケーション・ファイルを指すURLに置き換えられます。&IMAGE.は列
IMAGEの値に置き換えられます。列IMAGEにはイメージへの相対パスが保存されているため、 #APP_FILES#に繋げることにより、イメージを指す完全なURLになります。 4. アイコン位置はトップです。 5. 変更を保存します。注) イメージURLは&APP_FILES.&IMAGE.でも同じ結果になります。 49 Copyright © 2024, Oracle and/or its affiliates 2 1 5 3 4

カテゴリにアイコンが表⽰されるようになりました表⽰中のページを再ロードして、実施した変更を確認します。それぞれのカードにカテゴリのアイコンが表⽰されています。 50 Copyright © 2024, Oracle and/or
its affiliates

カテゴリのカードを横⼀列に配置しますカードのカテゴリを横⼀列に配置します。Universal ThemeのLayout ModifiersのFlexを使います。 https://apex.oracle.com/pls/apex/r/apex_pm/ut/la yout-modifiers 1. カード・リージョンCategoriesの属性を開きます。 2. 外観のCSSクラスにu-flex
u-justify- content-centerを設定します。 3. 変更を保存します。以下のCSSがカード・リージョンに適⽤されます。フレックスボックスの指定です。 51 Copyright © 2024, Oracle and/or its affiliates 2 1 { display: flex!important; justify-content: center!important; } 3

アイコンをカードの中央に配置しますアイコンをカードの中央に配置します。Layout ModifiersのMarginを使います。 1. アイコンとバッジのアイコンCSSクラスにmargin- autoを設定します。 2. 変更を保存します。以下のCSSがアイコンの要素に適⽤されています。 52
Copyright © 2024, Oracle and/or its affiliates 1 { margin-inline-end: auto; margin-inline-start: auto; } 2

カードの横幅をそろえますカードの横幅を100pxにそろえます。Layout Modifiers のWidthを使います。 1. カードのCSSクラスにmnw100を設定します。 2. 変更を保存します。以下のCSSがカードの要素に適⽤されています。 53
Copyright © 2024, Oracle and/or its affiliates 1 { min-width: 100px; } 2

カテゴリにテキストを中央揃えにします Universal ThemeのContent ModifiersのText Alignmentを使います。 https://apex.oracle.com/pls/apex/r/apex_pm/ut/c ontent-modifiers 1. カードのCSSクラスにu-textCenterを追加します。 2.
変更を保存します。以下のCSSがカードの要素に適⽤されています。 54 Copyright © 2024, Oracle and/or its affiliates 1 { text-align: center!important; } 2

CSS変数の値を変更して⾒え⽅を変更しますページ・プロパティのCSSのインラインに、CSS変数を変更するクラスを定義します。 1. ページを選択します。 2. ページ・プロパティのCSSのインラインに以下を記述します。 CSSはページのコメントに記載してあるので、コピペしてください。
55 Copyright © 2024, Oracle and/or its affiliates .c-Categories { --a-cv-background-color: transparent; --a-cv-border-width: 0px; --a-cv-border-radius: .5rem; --a-cv-shadow: none; --a-cv-title-font-size: .875rem; --a-cv-title-font-weight: 400; } 2 1

CSS変数の値を変更しますカード・リージョンCategoriesの属性タブを開きます。 1. 外観のCSSクラスにc-Categoriesを追加します。 2. 変更を保存します。 56 Copyright © 2024,
Oracle and/or its affiliates 1 2

CSS変数について⼀部のCSS変数は、Universal Themeのリファレンスに記載されています。 https://apex.oracle.com/pls/apex/r/apex_pm/ut/c ss-variables Universal Themeで定義しているCSS変数は--ut-で始まります。 APEXのコンポーネントで使⽤されているCSS変数は--a-
で始まります。 --a-cv- APEX CardView --a-button- APEX Button --a-datepicker- APEX Date Picker --a-checkbox- APEX CheckBox Oracle APEXが使⽤しているCSS変数は、APEXのバージョンアップに伴い扱いが変更される可能性があります。 57 Copyright © 2024, Oracle and/or its affiliates 1

カードにアクションを作成しますポインタが載ったときにカードがハイライトするように、アクションを作成します。 1. カード・リージョンCategoriesのアクション上でコンテキスト・メニューを表⽰します。 2. アクションの作成を実⾏します。 58 Copyright

カード全体にアクションを定義しますポインタがカードに乗ったときにカードをハイライトさせます。それ以上の動作は定義しません。 1. 作成したアクションを選択します。 2. 識別のタイプをカード全体にします。 3. リンクのタイプをURLにリダイレクトとし、ターゲットを開きます。
4. リンク・ビルダーのURLに&LINK.を設定し、OKをクリックします。 5. 変更を保存します。アプリケーションのページをリロードしたのち、カテゴリにポインタを載せると、カテゴリの枠に影が付きます。 59 Copyright © 2024, Oracle and/or its affiliates 1 2 3 4 4 5

Lab 3:レストランの⼀覧表⽰レストランの⼀覧をカード・リーションで表⽰します。 Copyright © 2024, Oracle and/or its affiliates
60

カード・リージョンに変更しますページ・デザイナでホーム・ページ（ページ番号１）を開きます。レストランの表⽰をレポートからカードに変更します。 1. リージョンRestaurantsを選択します。 2. 識別のタイプをカードに変更します。 61 Copyright

カードの基本的な設定を⾏います 1. カード・リージョンRestaurantsを選択します。 2. プロパティ・エディタの属性タブを開きます。 3. タイトルの列はNAMEとします。 4. サブタイトルの列はCATEGORYとします。 5.
メディアのソースにイメージURLを選択し、URLは &APP_FILES.&IMAGE.とします。 6. 変更を保存します。 62 Copyright © 2024, Oracle and/or its affiliates 2 1 3 4 5 6

カード・リージョンのタイトルを表⽰します 1. リージョンRestaurantsを選択します。 2. プロパティ・エディタでリージョン・タブを開きます。 3. 識別のタイトルをLowCode Cravingsに変更します。 4.
外観のテンプレートをContent Blockに変更し、テンプレート・オプションを開きます。 5. Region TitleはMediumとします。OKをクリックします。 6. 変更を保存します。 Universal Themeのリファレンスに、コンポーネントのテンプレートの説明があります。 https://apex.oracle.com/pls/apex/r/apex_pm/ut/c ontent-block 64 Copyright © 2024, Oracle and/or its affiliates 1 4 3 2 5 5 6

リージョンのタイトルが表⽰されましたリージョンのタイトルとしてLowCode Cravingsが表⽰されていることを確認します。 65 Copyright © 2024, Oracle and/or
its affiliates

評価や配達時間などを表⽰します 1. プロパティ・エディタの属性タブを開きます。 2. 本体の拡張フォーマットをオンにし、HTML式として以下を記述します。 3. ２次本体の拡張フォーマットをオンにし、HTML式として以下を記述します。 4.
アイコンとバッジのバッジ列はRATINGとします。 5. メディアの位置は最初、外観はワイドスクリーン、サイズ指定はカバーとします。 6. 変更を保存します。 HTML式にはテンプレート・ディレクティブを使⽤できます。 https://docs.oracle.com/cd/F86785_01/htm db/using-template-directives.html 66 Copyright © 2024, Oracle and/or its affiliates 2 3 4 5 6 $&FEE. Delivery Fee &TIME. Estimated Delivery 1

メニューのページを開くアクションを作成します 1. カード・リージョンLowCode Cravingsのアクション上でコンテキスト・メニューを表⽰します。 2. アクションの作成を実⾏します。 68 Copyright ©
2024, Oracle and/or its affiliates 1 2

ページ番号２を開くようにアクションを設定します 1. 識別のタイプはカード全体とします。 2. リンクのタイプにこのアプリケーションのページにリダイレクトを選び、ターゲットを開きます。 3. リンク・ビルダーのターゲットのページに２を設定します。 4.
アイテムの設定の名前に P2_RESTAURANT_ID、値に&ID.を設定します。 5. OKをクリックし、リンク・ビルダーを閉じます。 6. 変更を保存します。 69 Copyright © 2024, Oracle and/or its affiliates 1 2 3 5 4 6

メニューのページが開くことを確認しますレストランのカードをクリックすると、ページ番号２のメニューのページが開きます。 70 Copyright © 2024, Oracle and/or its
affiliates

Lab 4:テーマの更新テーマ・ローラーを使⽤してページ全体の⾒え⽅を変更します。 Copyright © 2024, Oracle and/or its affiliates
71

テーマ・ローラーを開きますテーマ・ローラーは開発者ツールバーから開きます。 1. ナビゲーション・メニューからアプリケーションのホーム・ページを開きます。 2. 開発者ツールバーのカスタマイズをクリックします。 3. テーマ・ローラーを開きます。 72
Copyright © 2024, Oracle and/or its affiliates 2 3 1

グローバル⾊のプライマリ・アクセントを変更しますテーマ・ローラーよりアプリケーションの⾒え⽅を変更します。 1. グローバル⾊を開きます。 2. プライマリ・アクセントの⾊をクリックします。 3. Hexにff3107を⼊⼒し、Enterを⼊⼒します。テーマ・ローラーでの変更は、即座に画⾯に反映されます。 73
Copyright © 2024, Oracle and/or its affiliates 1 2 3

ヘッダーの⾊を変更しますヘッダーの⾊を⽩に変更します。 1. コンテナを開きます。 2. ヘッダーの背景（左）⾊をクリックします。 3. Hexにffffffを⼊⼒し、Enterを⼊⼒します。 74 Copyright
© 2024, Oracle and/or its affiliates 1 2 3 ヘッダーの背景が⽩になりタイトルが隠れます

ヘッダーのテキストの⾊を変更しますヘッダーのテキストの⾊を⿊に変更します。 1. ヘッダーの前景（右）⾊をクリックします。 2. Hexに000000を⼊⼒し、Enterを⼊⼒します。 75 Copyright © 2024,
Oracle and/or its affiliates 1 2 ヘッダーの前景が⿊になりタイトルが現れます

ページ・アイテムの⾓を丸めます 1. フォームを開きます。 2. 枠線の⾓の丸めを30pxにします。 76 Copyright © 2024, Oracle
and/or its affiliates 1 2 丸くなります

ボタンの⾓を丸くします 1. ボタンを開きます。 2. 枠線の⾓の丸めを24pxにします。 77 Copyright © 2024, Oracle
and/or its affiliates 1 2 丸くなります

コンテナの⾓を丸くします 1. コンテナを開きます。 2. コンテナ枠線の⾓の丸めを30pxにします。ページに表⽰されているコンテナ枠線（リージョンの枠線）がないため、⾓の丸めは確認できません。 78 Copyright ©
2024, Oracle and/or its affiliates 1 2

テーマ・ローラーによる変更を⼀旦保存します 1. テーマ・ローラーの保存をクリックします。 2. スタイル名はLowCodeCravingsとします。 3. 保存をクリックします。 79 Copyright ©
2024, Oracle and/or its affiliates 1 2 3

次の作業で記述するカスタムCSSをコピーします次の作業で記述するカスタムCSSは、ホーム・ページのコメントに記載されています。以下の部分をコピーします。 80 Copyright © 2024, Oracle and/or
its affiliates :root { --ut-header-item-spacing: 1rem; --ut-header-logo-height: 2rem; --ut-logo-img-spacing: .75rem; --ut-logo-font-size: 1rem; --ut-logo-font-weight: 700; --ut-logo-line-height: 1.5rem; }

カスタムCSSを追加します Universal ThemeのCSS変数の値を変更して、ヘッダーの表⽰を微調整します。 1. カスタムCSSを開きます。 2. コード・エディタを開きます。 3. コード・エディタに以下のCSSを記述します。
4. OKをクリックし、変更したCSS変数の値を画⾯に反映します。 81 Copyright © 2024, Oracle and/or its affiliates 1 2 3 4 :root { --ut-header-item-spacing: 1rem; --ut-header-logo-height: 2rem; --ut-logo-img-spacing: .75rem; --ut-logo-font-size: 1rem; --ut-logo-font-weight: 700; --ut-logo-line-height: 1.5rem; }

テーマ・ローラーによる変更を確認します JavaScriptコンソールより apex.utr.config(); を実⾏すると、テーマ・ローラーによる設定値を確認できます。この設定値はエクスポートしたファイルの内容と同じです。 1. JavaScriptコンソールよりapex.utr.config()を実⾏して、出⼒を確認します。 2.
テーマ・ローラーの３点メニューを開き、エクスポートを実⾏します。ダウンロードされたファイルの内容を確認します。 82 Copyright © 2024, Oracle and/or its affiliates 2 1 2

テーマ・ローラーによる変更を保存します 1. テーマ・ローラーの保存をクリックします。 83 Copyright © 2024, Oracle and/or its
affiliates 1

テーマ・ローラーを終了します保存したテーマLowCodeCravingsがカレントのテーマとなっていることを確認します。 1. テーマ・ローラーの右上の X をクリックして、テーマ・ローラーを閉じます。 84 Copyright

Lab 5:ナビゲーション・バーの変更ナビゲーション・バーにショッピング・カートやアプリケーション・ロゴを追加します。 Copyright © 2024, Oracle and/or its affiliates
85

ショッピング・カートのエントリを作成します 1. エントリの作成をクリックします。 87 Copyright © 2024, Oracle and/or its
affiliates 1

リスト・エントリを設定します 1. イメージ/クラスにアイコンfa-shopping-cartを設定します。 2. リスト・エントリ・ラベルはCartとします。 3. ターゲット・タイプはURLとします。 4. URLターゲットは#とします。ショッピング・カートのアイ
コンを表⽰するだけで、ショッピング・カートは実装しません。 5. ユーザー定義属性のList Item CSS Classesに icon-onlyを設定します。 6. リスト・エントリの作成をクリックします。 88 Copyright © 2024, Oracle and/or its affiliates 1 5 2 3 4 6

ナビゲーション・バーにショッピング・カートが追加されました 89 Copyright © 2024, Oracle and/or its affiliates ナビゲーション・バーにショッピング・カートのアイコンが追加
されました。

アプリケーション・ロゴにアイコンの表⽰を追加します 1. 開発者ツールバーのカスタマイズを開き、ロゴの編集を実⾏します。 2. アプリケーション・ロゴのタイプにイメージとテキストを選択し、テキストはLowCodeCravingsとします。 3. 変更を保存します。このロゴ・タイプにはロゴ・イメージが必要です、とエラー
になります。静的アプリケーション・ファイルとして保存されているファイルは、開発者ツールバーからはロゴとして設定できません。代わりに、アプリケーション・ビルダーから設定します。 90 Copyright © 2024, Oracle and/or its affiliates 1 2 3

アプリケーション・ビルダーからロゴを設定しますアプリケーション定義のユーザー・インターフェースを開きます。 1. ロゴのセクションに移動します。 2. ロゴはイメージとテキストに変更します。 3. イメージURLに#APP_FILES#app-224603- logo.pngを設定します。
4. テキストはLowCodeCravingsにします。 5. 変更の適⽤をクリックします。 91 Copyright © 2024, Oracle and/or its affiliates 1 2 ５ 3 ４

ヘッダーのアプリケーション・ロゴの表⽰が変わりました 93 Copyright © 2024, Oracle and/or its affiliates ナビゲーション・メニューがなくなり、アプリケーション・ロゴにイ
メージが追加されました。

ページ単位でナビゲーション・メニューを⾮表⽰にしますナビゲーション・メニューはページ単位で⾮表⽰にできます。すでに⾮表⽰なので、この操作は不要です。 1. ページを選択します。 2. 外観のページ・テンプレートをテーマのデフォルト値からMinimal (No Navigation)を選択します。
94 Copyright © 2024, Oracle and/or its affiliates 1 2

次の作業で記述するカスタムCSSをコピーします次の作業で記述するカスタムCSSは、ホーム・ページのコメントに記載されています。以下の部分をコピーします。 95 Copyright © 2024, Oracle and/or
its affiliates @media (max-width: 767px) { .t-Header-logo-link { flex-shrink: 0; margin-inline-end: 0; } .t-Header-logo-link .apex-logo-text { display: none; } }

画⾯幅が767px以下のときにロゴ・テキストを⾮表⽰にします 1. 開発者ツールバーのカスタマイズからテーマ・ローラーを開きます。 2. カスタムCSSのコード・エディタを開きます。 3. 以下のコードを追記します。 4. OKをクリックし、コードの変更を反映します。
5. 変更したテーマを保存します。 6. テーマ・ローラーを閉じます。 96 Copyright © 2024, Oracle and/or its affiliates @media (max-width: 767px) { .t-Header-logo-link { flex-shrink: 0; margin-inline-end: 0; } .t-Header-logo-link .apex-logo-text { display: none; } } 1 2 3 4 5 6

メディアクエリの効果を確認します JavaScriptコンソールを開きます。 1. 画⾯幅を変更できるようにします。 2. サイズにレスポンシブを選択します。 3. 画⾯幅を縮⼩し、サイズを767px以下にします。画⾯幅が767px以下で、アプリケーション・ロゴのテキストが⾮表⽰になることを確認します。
97 Copyright © 2024, Oracle and/or its affiliates 1 3 2 ロゴのテキストが消える未設定の場合はロゴは表⽰されます（Lが少しだけ表⽰されています）

Visibility Classesを指定して調整します Universal ThemeにVisibility Classesとして、画⾯幅により表⽰/⾮表⽰を切り替えるCSSクラスが定義されています。 https://apex.oracle.com/pls/apex/r/apex_pm/ut/g rid-layout?request=responsive_design ページ・デザイナでグローバル・ページ（ページ番号０）
を開きます。 1. ページ・アイテムP0_ORDER_TYPEを選択します。 2. 外観のCSSクラスにhidden-sm-downを設定します。 3. 変更を保存します。 98 Copyright © 2024, Oracle and/or its affiliates 1 2 3

Visibility Classesの注意点 Universal ThemeのリファレンスにあるVisibility Classesの定義は、右のようになっています。しかし、hidden-sm-downは実際、ビューポートが 991px以下で⾮表⽰になります。リファレンスの仕様では 767px以下で⾮表⽰になります。 Oracle APEX
23.2の時点で、Visibility Classesの定義はビューポートが⼀段ずれている（hidden-sm- downは本来hidden-md-downの動作）ようです。そのため、現時点ではVisibility Classesは使わずメディア・クエリを使ったCSSを記述した⽅が良いでしょう。 99 Copyright © 2024, Oracle and/or its affiliates

Lab 6:ログイン・ページの更新ログイン・ページの⾒え⽅を更新します。 Copyright © 2024, Oracle and/or its affiliates
100

ログイン・ページに作成したテーマLowCodeCravingsが適⽤されていますサインイン・ページにテーマ・ローラーで作成したテーマ LowCodeCravingsが適⽤されています。 101 Copyright © 2024, Oracle and/or its
affiliates

バックグラウンドに画像を表⽰しますページ・デザイナでログイン・ページ（ページ番号 9999）を開きます。バックグラウンドに表⽰する画像は、リージョンを作成して設定します。 1. コンポーネント上でコンテキスト・メニューを表⽰します。 2. リージョンの作成を実⾏します。 102
Copyright © 2024, Oracle and/or its affiliates 1 2

バックグランド・イメージを設定します 1. 識別のタイトルはBackground Artとします。 2. レイアウトの位置はBackground Imageとします。 3. 外観のテンプレートはImageとします。 4.
イメージのファイルURLに#APP_FILES#lowcode-cravings-bg-alt.jpgを指定します。 5. 変更を保存します。 103 Copyright © 2024, Oracle and/or its affiliates 1 2 3 4 5

変更を確認しますバックグラウンドに画像が表⽰されるだけで、雰囲気がずいぶん変わります。 104 Copyright © 2024, Oracle and/or its
affiliates

ページのタイトルを変更します 105 Copyright © 2024, Oracle and/or its affiliates 1
2 1. ページを選択します。 2. 識別のタイトルをLowCodeCravings – ログインに変更します。 3. 変更を保存します。ページのタイトルはブラウザのタブに表⽰されます（HTML のTITLE要素）。アプリケーション名が初期値になります。アプリケーション名を変更しても、更新されません。 3

住所を⼊⼒するリージョンを作成します 1. 新しくリージョンを作成します。 2. 識別のタイトルはLowCodeCravings、タイプは静的コンテンツとします。 3. 外観のテンプレートはHeroとします。テンプレート・オプションを開きます。 4.
テンプレート・オプションのStyleをStacked Featuredにします。OKをクリックします。 5. イメージのファイルURLにアプリケーションのロゴ #APP_FILES#icons/app-icon-192.png を設定します。 107 Copyright © 2024, Oracle and/or its affiliates 1 2 3 4 5

住所を⼊⼒するページ・アイテムを作成します 1. リージョンLowCodeCravingsに新しくページ・アイテムを作成します。 2. 識別の名前はP9999_ADDRESS、タイプはテキスト・フィールドです。 3. ラベルはAddressです。 4.
レイアウトの⾏CSSクラスにu-align-items- centerを設定します。 5. 外観のテンプレートはHiddenとし、テンプレート・オプションを開きます。 6. テンプレート・オプションのStretch Form Itemをチェックし、SizeはX Largeとします。OKをクリックします。 7. ラベル⾏スパンを０にします。 8. アイコンにfa-map-markerを設定します。 9. 外観の幅は空⽩、値のプレースホルダーとして Enter your address…を⼊⼒します。 108 Copyright © 2024, Oracle and/or its affiliates 1 2 4 3 5 6 6 8 9 7

住所から次に進むボタンを作成します 109 Copyright © 2024, Oracle and/or its affiliates 2
1 3 4 5 6 6 6 7 1. リージョンLowCodeCravingsに新しくボタンを作成します。 2. 識別のボタン名はNEXT、ラベルはNextとします。 3. レイアウトの新規⾏の開始をオフにします。ページ・アイテムP9999_ADDRESSの右に配置され、⾏CSS クラスu-align-items-centerが適⽤されます。 4. 列スパンは２とします。 5. 外観のボタン・テンプレートはIcon、ホットはオンとし、テンプレート・オプションを開きます。 6. テンプレート・オプションのSizeをLarge、Widthを Stretchにします。OKをクリックします。 7. アイコンにfa-arrow-rightを設定します。

サインインのダイアログを開くボタンを作成します 1. リージョンLowCodeCravingsに新しくボタンを作成します。 2. 識別のボタン名はSIGN_IN、ラベルはSign Inとします。 3. 外観のテンプレート・オプションを開きます。
4. テンプレート・オプションのSizeをLarge、Widthを Stretch、Spacing TopをLargeとします。OKをクリックします。 5. 動作のアクションは動的アクションで定義とします。 6. 変更を保存します。 110 Copyright © 2024, Oracle and/or its affiliates 2 1 3 5 4 4 4 4 6

今までの作業を確認しますユーザー名、パスワードの⼊⼒フォームは、この後にInline Dialogへ変更します。今回のハンズオンはアプリケーションの⾒え⽅にフォーカスを当てています。そのため、住所を⼊⼒してアプリケーションを使⽤する実装は省略します。もう少し住所の⼊⼒の⾒え⽅を調整します。 111 Copyright ©
2024, Oracle and/or its affiliates

Heroリージョンに適⽤するCSSを記述します 1. ページを選択します。 2. ページ・プロパティのCSSのインラインに以下を記述します。ページのコメントに記載されています。 3. 変更を保存します。 112 Copyright
© 2024, Oracle and/or its affiliates 2 1 /* Splash */ .c-SplashBox { --ut-hero-region-title-text-color: var(--ut-palette-primary-contrast); --ut-xs-hero-region-icon-container-size: 6rem; --ut-xs-hero-region-title-font-size: 2rem; --ut-xs-hero-region-title-line-height: 2.5rem; margin-inline: auto; max-inline-size: 30rem; } .c-SplashBox .t-HeroRegion-title { margin-block-end: 1rem; } .c-SplashBox .t-HeroRegion-col--content { align-self: stretch; } 3

ユーザー名・パスワードの⼊⼒をInline Dialogに変更します 1. ユーザー名・パスワードを含むリージョンを選択します。 2. 識別のタイトルをLowCodeCravings – サインインに変更します。このタイトルもアプリケーション名から作成されますが、アプリケーション名を変更してもその
まま変わりません。 3. 外観のテンプレートをInline Dialogに変更し、テンプレート・オプションを開きます。 4. テンプレート・オプションのAuto Heightにチェックを⼊れ、SizeにSmall (480x320)を選択します。 OKをクリックします。 114 Copyright © 2024, Oracle and/or its affiliates 1 2 4 4 4 3

ボタンLOGINを変更します 1. ボタンLOGINを選択します。 2. レイアウトの位置をRegion Bodyに変更します。 3. 外観のボタン・テンプレートをText with Iconに変
更し、テンプレート・オプションを開きます。 4. テンプレート・オプションのSizeをLarge、Widthを Stretchとします。 5. Spacing TopをLarge、Spacing Bottomを Smallとします。OKをクリックします。 6. 外観のアイコンにfa-chevron-rightを設定します。 7. 変更を保存します。 116 Copyright © 2024, Oracle and/or its affiliates 1 2 3 4 4 5 5 6 7

リージョンを開くTRUEアクションを作成します 1. TRUEアクション（表⽰となっています）を選択します。 2. 識別のアクションはリージョンを開くとします。 3. 影響を受ける要素の選択タイプをリージョンとし、リージョンにLowCodeCravings – サインインを
選択します。 4. 変更を保存します。 119 Copyright © 2024, Oracle and/or its affiliates 2 1 3 4

リージョンRestaurant Detailsをカードに変更しますページ・デザイナでMenuのページ（ページ番号2）を開きます。 1. リージョンRestaurant Detailsを選択します。 2. 識別のタイプをカードに変更します。 3.
レイアウトの位置はFull Width Contentとします。 123 Copyright © 2024, Oracle and/or its affiliates 1 2 3

カードに表⽰する画像を設定します 1. アイコンとバッジのアイコン・ソースにイメージURLを選び、イメージURLとして #APP_FILES#&ICON.を設定します。 2. アイコン位置はトップとします。 3. メディアのソースにイメージURLを選び、URLとして #APP_FILES#&IMAGE.を設定します。
4. 位置は最初、外観はワイドスクリーン、サイズ指定はカバーとします。 5. 変更を保存します。 125 Copyright © 2024, Oracle and/or its affiliates 1 2 3 4 5

変更されたページを表⽰しますこの表⽰を以下のCSSにより更新します。 126 Copyright © 2024, Oracle and/or its affiliates
/* Hero */ .c-HeroCard { --a-cv-item-width: 100%; } .c-HeroCard .a-CardView-media--widescreen:before { padding-block-start: 10%; } .c-HeroCard .a-CardView-iconImg { --a-cv-icon-image-border-radius: .5rem; --a-cv-icon-image-size: 6rem; margin-block-start: -5rem; position: relative; box-shadow: rgba(255, 255, 255, 1) 0 0 0 4px; }

ページ・プロパティにCSSを記述します 1. ページを選択します。 2. ページ・プロパティのCSSのインラインにCSSを記述します。 CSSはページのコメントに記載されているので、それをコピー＆ペーストします。 127 Copyright

メニュー⼀覧をContent Rowに変更しますリージョンMenuのタイプをTemplate Componentの Content Rowに変更します。 1. リージョンMenuを選択します。 2. 識別のタイプをContent
Rowに変更します。 3. 外観のテンプレートにContent Blockを選び、テンプレート・オプションを開きます。 4. Region TitleをMediumとし、OKをクリックします。 Template ComponentはOracle APEX 23.1より新たに導⼊された、レポートの表⽰に使われるコンポーネントです。以前のクラシック・レポートのレポート・テンプレートに近いですが、より⾼度なカスタマイズを宣⾔的に実装できます。 130 Copyright © 2024, Oracle and/or its affiliates 2 3 4 4 1

Content Rowの属性を設定します 131 Copyright © 2024, Oracle and/or its affiliates
2 3 4 9 1 5 6 8 1. プロパティ・エディタの属性タブを開きます。 2. 設定のTitleは&NAME.とします。 3. Descriptionは&DESCRIPTION.とします。 4. Miscellaneousは&PRICE.とします。 5. Display Avatarをオンにします。 6. AvatarのTypeにImageを選び、Imageを開きます。 7. URLに#APP_FILES#&IMAGE.を設定し、 OKをクリックします。 8. SizeはMediumとします。 9. 変更を保存します。 7 7

ボタンの⾒え⽅を設定します 1. 新しく作成されたアクションを選択します。 2. 識別の位置はPrimary Actionsとします。テンプレートはButton、ラベルはAddとします。 3. リンクのタイプにURLにリダイレクトを選び、ターゲットを開きます。
4. URLに#を設定し、OKをクリックします。ボタンをクリックしたときの動作は実装しません。 5. 外観の表⽰タイプにアイコンを選び、アイコンとして fa-plus-square-oを設定します。 6. 変更を保存します。 136 Copyright © 2024, Oracle and/or its affiliates 1 2 3 5 6 4 4

レイアウト列を表⽰させてみます左のページを追加で作成します。 1. 開発者ツールバーの情報を開きます。 2. レイアウト列の表⽰を実⾏します。レイアウト列を表⽰すると、メニューはレイアウト列の⾮表⽰に変わります。 139 Copyright

空⽩ページを作成します空⽩ページを作成して、その後にログイン・ページにあるページ・アイテムやボタンをコピーします。 1. ページの作成をクリックします。 2. 空⽩ページを選択します。 3. ページ定義のページ番号は３とします。名前は Layout、ページ・モードは標準を選びます。ナビゲー
ションは双⽅ともオフとします。 4. ページの作成をクリックします。ページ番号３に空⽩ページが作成されます。 140 Copyright © 2024, Oracle and/or its affiliates 1 2 3 4

ログイン・ページのリージョンLowCodeCravingsを空⽩ページにコピーしますページ・デザイナでログイン・ページ（ページ番号9999）を開き、リージョンLowCodeCravings（アドレスの⼊⼒があるリージョン）を空⽩ページにコピーします。 1. リージョンLowCodeCravings上でコンテキスト・メニューを表⽰します。 2. 他のページにコピーを実⾏します。 141
Copyright © 2024, Oracle and/or its affiliates 1 2

リージョンLowCodeCravingsをページ番号３にコピーします 1. コピー先ページに３を指定します。 2. リージョン・アイテムのコピーははいです。 3. ボタンのコピーははいです。 4. 次へ進みます。 5.
リージョン名はそのまま変更せず、コピーをクリックします。同じ⼿順を実施し、リージョンLowCodeCravings – サインイン（ユーザー名やパスワードのページ・アイテムを含むリージョン）も空⽩ページ（ページ番号３）にコピーします。 142 Copyright © 2024, Oracle and/or its affiliates 1 2 3 4 5

リージョンのテンプレートをBlank with Attributesに変更しますページ・デザイナで空⽩ページ（ページ番号３）を開きます。 1. リージョンLowCodeCravingsを選択します。 2. リージョンLowCodeCravings –
サインインを選択します。 3. 外観のテンプレートをBlank with Attributesに変更します。 4. ページの保存と実⾏をします。以上で確認に使⽤するページが出来上がりました。 143 Copyright © 2024, Oracle and/or its affiliates 1 3 2 4

ページ・アイテムADDRESSとボタンNEXTのレイアウト • ボタンNEXTの新規⾏の開始はオフなので、ページ・アイテムADDRESSと同じ⾏に配置されます。 • 列スパンは２なので、２列を占有します。テンプレート・オプションのWidthがStretchなので、２列いっぱいに横幅が広がります。 • ページ・アイテムADDRESSの列スパンは⾃動なので、ボタンが占有している2列を除く10列を占有します。これもWidthがStretchなので10列いっぱいに横幅が広がります。 • ラベル列スパンが0なので、ラベルが表⽰される領域は無くなります。
• ページ・アイテムADDRESSの列が⾃動です。⾏の先頭のアイテムなので、列は１が割り当たります。 145 Copyright © 2024, Oracle and/or its affiliates ページ・アイテムADDRESSの外観ボタンNEXTの外観列スパン = 2 列スパン = 12 – 2 = 10 ラベル列スパン = 0 (表⽰なし) 列(開始位置) = 1

ページ・アイテムADDRESSのラベル列スパンを2に変更すると • ラベル列スパンを2に変更すると、ページ・アイテムADDRESSの列スパン10列の内の2列がラベル列になります。 • 結果としてテキスト・フィールドは8列になります。 • ラベル列スパンの有無は選択した外観のテンプレートに依存します。Hidden、Optionalにはラベル列スパンがありますが、Optional – Above （ラベルは左ではなく上部にある）、Optional
– Floating（ラベルがテキスト・フィールド⾃体に含まれる）ではラベル列スパンはありません。 146 Copyright © 2024, Oracle and/or its affiliates ページ・アイテムADDRESSの外観ボタンNEXTの外観列スパン = 2 列スパン = 12 – 2 = 10 ラベル列スパン = 2 列(開始位置) = 1 テキスト・フィールドの占有列 = 12 – 2 – 2 = 8

ユーザー名とパスワードのレイアウト • 列が２（つまり２列⽬から開始）、列スパンが10なので、結果として12列の中央10列にユーザー名とパスワードのテキスト・フィールドが配置されます。 • 選択している外観のテンプレートのOptional – Floatingにはラベル列スパンはありません。 147 Copyright ©
2024, Oracle and/or its affiliates 列スパン = 10 列(開始位置) = 2

ユーザー名を記憶のレイアウト • ユーザー名を記憶のページ・アイテムの列と列スパンは⾃動になっています。 • ラベル列スパンのデフォルトは２です。 • ラベル列スパンを1にする、またはラベル列スパンを0、列を2にすると、ユーザー名とパスワードとほぼ同じ開始位置になります。 148 Copyright ©
2024, Oracle and/or its affiliates 列スパン = 12 ラベル列スパン = 2 列(開始位置) = 1 テキスト・フィールドの占有列 = 12 – 2 = 10 ラベル列スパン = 1 列 = ⾃動 = 1 ラベル列スパン = 0 列 = 2

新規⾏、新規列、いろいろなCSSクラスの設定について • 新規⾏の開始がオンであるコンポーネントがあると、列を囲むDIV要素が⽣成されます。新規⾏の開始がオフである後続のコンポーネントは、このDIV要素に含まれます。⾏CSSクラスはこのDIV要素のclass指定に追加されます。 • 新規列がオンであるコンポーネントは、列のDIV要素が⽣成されます。列の開始位置（列）および幅（列スパン）を指定しています。列CSSクラスはこのDIV要素のclass指定に追加されます。 • コンポーネントは列（新規列がオンであれば）のDIV要素に含まれます。外観のテンプレートは、列のDIV要素の⼦要素になります。外観のテンプレートのCSSクラスを追加する位置はテンプレートに記載されています。
• 詳細にCSSクラスがある場合は、テンプレートより内部にある要素のclass指定に追加されます。テキスト・フィールドでは、INPUT要素が対象です。 • CSSクラスを指定する場所を選ぶことにより、⾒え⽅に影響を与える範囲を限定することができます。 149 Copyright © 2024, Oracle and/or its affiliates </div> <div class=“row … ⾏のDIV要素（⾏CSSクラスが有効） <div class=“col … 列のDIV要素（列CSSクラスが有効）新規列がオンであれば<div class=“col …が作成される </div> 外観のテンプレートとして定義されているHTML（外観のCSSクラスが有効） INPUT要素（詳細のCSSクラスが有効）

テンプレートBlank with Attributes (No Grid）について • リージョンの外観のテンプレートにBlank with Attributes (No
Grid)を選択すると、そのリージョンに含まれるコンポーネントにOracle APEXのグリッド・レイアウトは適⽤されなくなります。 • 外観のテンプレートをBlank with Attributes (No Grid）に変更してみます。 150 Copyright © 2024, Oracle and/or its affiliates 1 2

CSSグリッド・レイアウトを適⽤してみますページ・プロパティのCSSのインラインに以下を記述します。 152 Copyright © 2024, Oracle and/or its affiliates
.c-Grid { display: grid; grid-template-columns: 1fr 8fr 1fr; } .c-Grid-1 { grid-column: 2; grid-row: 1; } .c-Grid-2 { grid-column: 2; grid-row: 2; } .c-Grid-3 { grid-column: 2; grid-row: 3; } .c-Grid-4 { grid-column: 2; grid-row: 4; } 1 2

外観のCSSクラスにCSSグリッドに関するクラスを設定します • リージョンLowCodeCravings – サインインの外観のCSSクラスにc-Gridを設定します。 • ページ・アイテムP3_USERNAMEの外観のCSSクラスにc-Grid-1を設定します。 •
ページ・アイテムP3_PASSWORDの外観のCSSクラスにc-Grid-2を設定します。 • ページ・アイテムP3_REMENBERの外観のCSSクラスにc-Grid-3を設定します。 • ボタンLOGINの外観のCSSクラスにc-Grid-4を設定します。 grid-template-columnsに8frとして設定した領域にコンポーネントが配置されています。 153 Copyright © 2024, Oracle and/or its affiliates 1 2

Our mission is to help people see data in new
ways, discover insights, unlock endless possibilities.

Oracle APEXの画面をファンシーにしよう！

Oracle APEXの画面をファンシーにしよう！

More Decks by oracle4engineer

Featured

Transcript