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

2024年3月15日に日本オラクル本社で開催したOracle APEXハンズオンで使用した資料です。

Transcript

1. Low Code Cravings Oracle APEXの画⾯をファンシーにしよう︕ ハンズオン⼿順 ⽇本オラクル株式会社 2024年3⽉15⽇
2. はじめに 本ハンズオンは、海外で⾏われたセミナーをハンズオンとして再構成しています。 参考にしている海外セミナー 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
3. アジェンダ 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
4. Oracle APEXの始め⽅ Copyright © 2024, Oracle and/or its affiliates 4
5. 無料で始める⽅法は３通り 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
6. 無料のワークスペースの取得 • 以下を⼊⼒し、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
7. 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
8. 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
9. 初期アプリケーションのインストール Copyright © 2024, Oracle and/or its affiliates 9
10. 初期アプリケーションをダウンロードします • 以下よりアプリケーションのエクスポートをダウンロードします。 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
11. ハンズオンを始めます 1. https://apex.oracle.com/ja/にアクセスします。 2. サインインをクリックします。 2 Copyright © 2024, Oracle and/or its affiliates 11
12. Oracle APEXの開発環境にサインインします あらかじめ、apex.oracle.comにワークスペースを取 得しておきます。 1. ワークスペース名を⼊⼒します。 2. ユーザー名を⼊⼒します。 3. パスワードを⼊⼒します。 4. サインインをクリックします。 1 2 3 4 Copyright © 2024, Oracle and/or its affiliates 12
13. Oracle APEXにサインインした直後の画⾯です Oracle APEXのホーム・ページです。 それぞれの画⾯の説明は、Oracle APEXクイック・ガイ ドで説明されています。 アプリケーションの開発を始めます。 1. アプリケーション・ビルダーを開きます。 1 Copyright © 2024, Oracle and/or its affiliates 13
14. ダウンロード済みのアプリケーションをインポートします 1. インポートをクリックします。 2. インポートするファイルとして、ダウンロード済みの LowCodeCravings-start.zipを選択します。 ファイル・タイプはアプリケーション、ページまたはコンポー ネントのエクスポートです。 3. 次へ進みます。 14 Copyright © 2024, Oracle and/or its affiliates 1 2 3
15. アプリケーションをインストールします 1. アプリケーションのインストールをクリックします。 2. アプリケーションLowCodeCravings - Startが作 成されます。このアプリケーションを改良します。 15 Copyright © 2024, Oracle and/or its affiliates 1
16. サポートするオブジェクトをインストールします 1. サポートするオブジェクトのインストールをクリックしま す。 表DEMO_MENU_ITEMS、 DEMO_RESTAURANTS、 DEMO_RESTAURANT_CATEGORIESが作成さ れます。 静的アプリケーション・ファイルに、料理などの画像が含ま れています。 作成された表に、あらかじめアプリケーションの実⾏に必要 なデータがロードされます。 16 Copyright © 2024, Oracle and/or its affiliates 1
17. アプリケーションLowCodeCravings – Startが作成されます 1. アプリケーションの編集をクリックします。 2. アプリケーション・ビルダーからは、アプリケーション LowCodeCravings – Startをクリックして、アプ リケーションを開いて編集します。 17 Copyright © 2024, Oracle and/or its affiliates 2 1
18. これからアプリケーションの⾒え⽅を改善します 本⽇のハンズオンを始める準備が整いました。 18 Copyright © 2024, Oracle and/or its affiliates
19. 本ハンズオンで作成するアプリケーションについて Copyright © 2024, Oracle and/or its affiliates 19
20. 左のページを右のページに変更します – レストランの⼀覧 Copyright © 2024, Oracle and/or its affiliates 20
21. 左のページを右のページに変更します – ログイン・ページ 21 Copyright © 2024, Oracle and/or its affiliates
22. 左のページを右のページに変更します – メニューの⼀覧 22 Copyright © 2024, Oracle and/or its affiliates
23. 画像は静的アプリケーション・ファイルとして保存されています • 画像のファイルは共有コンポーネントの静的アプリケー ション・ファイルとして保存されています。 • それぞれの表のイメージを保存する列には、静的アプ リケーション・ファイルを参照するURLが記載されてい ます。 • 静的アプリケーション・ファイルはAPEXが実⾏されてい るデータベースに保存されています。ブラウザに画像を 表⽰する際に、データベースから画像ファイルが取り出 されます。 • ブラウザ側で画像はキャッシュされるため、毎回画像が ダウンロードされるわけではありませんが、画像を取得 するリクエストは発⾏されます。 • Oracle APEX 23.2より静的アプリケーション・ファイル を、Oracle Cloudのオブジェクト・ストレージに保存で きるようになりました。 23 Copyright © 2024, Oracle and/or its affiliates
24. 静的アプリケーション・ファイルはOCIオブジェクト・ストレージへ保存できます • アプリケーション定義のアプリケーション・ファイル・ス トレージに含まれる設定ファイル・ストレージ・タイプを、 ローカル・データベースからOracle Cloud Object Storageに変更します。 • アプリケーション・ビルダーによる静的アプリケーション・ ファイルの作成や削除といった操作は、設定したオブ ジェクト・ストレージに対して実施されます。 • アプリケーション定義のユーザー・インターフェースの 詳細に含まれる定義#APP_FILES#のパスに、実 際に画像ファイルにアクセスするURLを設定できます。 • オブジェクト・ストレージ上のファイルをCDNにコピーして、 CDNから画像ファイルを参照することを想定した設定 です。 24 Copyright © 2024, Oracle and/or its affiliates
25. 静的アプリケーション・ファイルの保存先を検討する理由 • 作成するアプリケーションの1ページに、25枚の画像が 含まれています。 • ページを表⽰すると、同時に25枚の画像を取得する 要求が発⾏されます。画像がデータベースに保存され ていると、これらはすべてデータベースへの処理要求に なります。 • APEXアプリケーションとしての要求は１つだけです。 • 静的アプリケーション・ファイルをデータベースの外に置い ていると、これらの画像へのアクセスが発⽣しなくなりま す。 Oracle CloudでAPEXを使⽤しているときは、静的アプ リケーション・ファイルの置き場所としてオブジェクト・ストレー ジを利⽤することをお勧めします。 今回のハンズオンでは、静的アプリケーション・ファイルをそ のまま使⽤します。 25 Copyright © 2024, Oracle and/or its affiliates
26. Lab 1:グローバル・ページ アプリケーションに含まれるすべてのページで表⽰されるコンポーネントを作成します。 Copyright © 2024, Oracle and/or its affiliates 26
27. グローバル・ページを編集します グローバル・ページはページ番号０として作成されていま す。グローバル・ページに作成したコンポーネントは、すべて のページに配置できます。 1. グローバル・ページ（ページ番号０）をクリックし、 ページ・デザイナで開きます。 通常のページではないため、グローバル・ページを実⾏する ことはできません。 27 Copyright © 2024, Oracle and/or its affiliates 1
28. DeliveryとPickupを選択するアイテムを作成します 1. コンポーネント・パレットをアイテムに切り替えます。 2. ラジオ・グループをつかみます。 3. レイアウト・ビューのAFTER LOGOの位置にラジ オ・グループをドロップします。 Copyright © 2024, Oracle and/or its affiliates 28 1 2 3
29. ページ・アイテム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
30. ページ・アイテムP0_ORDER_TYPEを表⽰するページを限定します グローバル・ページに作成したコンポーネント（ページ・アイテムを 含む）は、すべてのページに表⽰されます。表⽰するページを限 定する場合は、コンポーネントにサーバー側の条件を設定します。 サーバー側の条件のタイプのうち、現在のページを対象としたタ イプは、グローバル・ページにあるコンポーネントの制御に使⽤で きます。 1. サーバー側の条件のタイプに現在のページはカンマで区切 られたリストに含まれないを選択し、ページに9999を設定 します。ログイン・ページを表⽰対象から除外しています。 2. 変更を保存します。 このサーバー側の条件が無くても、位置AFTER_LOGOにある コンポーネントはログイン・ページに表⽰されません。その場合、ロ グイン・ページの無効な位置[レンダリングされない]に P0_ORDER_TYPEが配置されます。 30 Copyright © 2024, Oracle and/or its affiliates 1 2
31. ページ・アイテムP0_ORDER_TYPEの⾒え⽅を確認します アプリケーションを実⾏し、ホーム・ページを表⽰します。グ ローバル・ページは実⾏できないため、⼀旦、アプリケー ションのホームへ戻ります。 1. アプリケーションの実⾏をクリックします。 ナビゲーション・バーにDeliveryとPickupを選択するラ ジオ・ボタンが表⽰されます。 31 Copyright © 2024, Oracle and/or its affiliates 1
32. AFTER_LOGOって何︖ AFTER_LOGOの位置を確認します。 1. ページ・デザイナでホーム・ページ（ページ番号１） を開きます。 2. 左ペインでページ共有コンポーネントを開きます。 3. テンプレートのページ以下にStandardがあります。 ホーム・ページはページ・テンプレートとしてStandard を選んでいます。これを選択します。 4. コンポーネントの編集をクリックして、ページ・テンプ レートのStandardを参照します。 32 Copyright © 2024, Oracle and/or its affiliates 2 3 4 ページ・レイアウトの位置 1
33. ページ・テンプレートStandardの定義を確認します 1. ページ・テンプレートの定義を確認します。 2. 定義のヘッダーとして記載されているHTMLのテンプ レートに#AFTER_LOGO#が含まれています。 AFTER_LOGOに配置したコンポーネント（として表⽰ されるHTML）は、ページのこの位置に挿⼊されます。 33 Copyright © 2024, Oracle and/or its affiliates 1 2
34. ページ・テンプレートの位置を確認します 1. ページ・テンプレートには位置が定義されています。 2. 位置名としてAfter Logo、テンプレート置換として AFTER_LOGOが定義されています。その位置に配 置可能なコンポーネントや条件が設定されています。 34 Copyright © 2024, Oracle and/or its affiliates 2 1
35. 位置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;
36. ページ・アイテム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
37. 外観のテンプレートのOptional – FloatingやHiddenって何︖ 1. グローバル・ページ（ページ番号０）のページ共有 コンポーネントを開きます。 2. テンプレートのアイテムにHiddenがあります。ペー ジ・アイテムP0_ORDER_TYPEはこれをテンプレート として選んでいます。これを選択します。 3. コンポーネントの編集をクリックして、テンプレート Hiddenの定義を参照します。 37 Copyright © 2024, Oracle and/or its affiliates 1 2 3 1
38. テンプレートHiddenの定義を確認します ページ・アイテムのテンプレートの定義としてHTMLが記載 されています。 サーバー側でHTMLが⽣成されるコンポーネント（ペー ジ・アイテムやボタンなど）は、必ずテンプレートの定義が あります。 テンプレートHiddenではラベルの前に記載されている label要素のclassにu-VisuallyHiddenが含まれて いて、ラベルが表⽰されないようになっています。 ラベルは表⽰されませんが、スクリーン・リーダーに対応する ため、ラベル⾃体はページに含まれます。 38 Copyright © 2024, Oracle and/or its affiliates テンプレートHiddenの定義 テンプレートOptional - Floatingの定義
39. テンプレート・オプションって何︖ 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
40. DeliveryとPickupの選択ができるようになりました 実⾏中のアプリケーションのページを再ロードすると、今ま でに実施した変更が反映されます。 40 Copyright © 2024, Oracle and/or its affiliates
41. 検索フィールドを作成します 検索フィールドとして使⽤するページ・アイテムを作成しま す。先ほどとは違う⼿順で、ページ・アイテムを作成してみ ます。 ページ・デザイナでグローバル・ページを開きます。 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
42. 検索フィールドとなるページ・アイテムP0_SEARCHを設定します 1. 識別の名前をP0_SEARCHに変更します。 2. ラベルはSearchとします。 3. 設定のサブタイプは検索とします。 4. 外観のテンプレートはHiddenとします。 42 Copyright © 2024, Oracle and/or its affiliates 1 2 3 4
43. ページ・アイテム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. 検索フィールドが作成されました 表⽰中のページを再ロードすると、今までに実施した変更 が反映されます。 44 Copyright © 2024, Oracle and/or its affiliates
45. Lab 2:レストラン・カテゴリの⼀覧表⽰ レストランのカテゴリを表⽰するカード・リーションの⾒え⽅を改善します。 Copyright © 2024, Oracle and/or its affiliates 45
46. ホーム・ページからブレッドクラムのリージョンを削除します ページ・デザイナでホーム・ページ（ページ番号１）を開 きます。 ブレッドクラムのリージョンを削除します。 1. Breadcrumb Barにあるリージョン LowCodeCravings – Startの上でコンテキス ト・メニューを表⽰します。 2. 削除を実⾏します。 3. 変更を保存します。 46 Copyright © 2024, Oracle and/or its affiliates 1 2 3
47. レストランのカテゴリを表⽰するカードの⾒え⽅を改善します 現在はカード上にカテゴリ名だけが表⽰されています。 47 Copyright © 2024, Oracle and/or its affiliates
48. カード・リージョン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問合せ
49. カード上にアイコンを表⽰します 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. カテゴリにアイコンが表⽰されるようになりました 表⽰中のページを再ロードして、実施した変更を確認しま す。 それぞれのカードにカテゴリのアイコンが表⽰されています。 50 Copyright © 2024, Oracle and/or its affiliates
51. カテゴリのカードを横⼀列に配置します カードのカテゴリを横⼀列に配置します。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
52. アイコンをカードの中央に配置します アイコンをカードの中央に配置します。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
53. カードの横幅をそろえます カードの横幅を100pxにそろえます。Layout Modifiers のWidthを使います。 1. カードのCSSクラスにmnw100を設定します。 2. 変更を保存します。 以下のCSSがカードの要素に適⽤されています。 53 Copyright © 2024, Oracle and/or its affiliates 1 { min-width: 100px; } 2
54. カテゴリにテキストを中央揃えにします 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
55. 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
56. CSS変数の値を変更します カード・リージョンCategoriesの属性タブを開きます。 1. 外観のCSSクラスにc-Categoriesを追加します。 2. 変更を保存します。 56 Copyright © 2024, Oracle and/or its affiliates 1 2
57. 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
58. カードにアクションを作成します ポインタが載ったときにカードがハイライトするように、アク ションを作成します。 1. カード・リージョンCategoriesのアクション上でコンテ キスト・メニューを表⽰します。 2. アクションの作成を実⾏します。 58 Copyright © 2024, Oracle and/or its affiliates 1 2
59. カード全体にアクションを定義します ポインタがカードに乗ったときにカードをハイライトさせます。 それ以上の動作は定義しません。 1. 作成したアクションを選択します。 2. 識別のタイプをカード全体にします。 3. リンクのタイプをURLにリダイレクトとし、ターゲットを 開きます。 4. リンク・ビルダーのURLに&LINK.を設定し、OKをク リックします。 5. 変更を保存します。 アプリケーションのページをリロードしたのち、カテゴリにポイ ンタを載せると、カテゴリの枠に影が付きます。 59 Copyright © 2024, Oracle and/or its affiliates 1 2 3 4 4 5
60. Lab 3:レストランの⼀覧表⽰ レストランの⼀覧をカード・リーションで表⽰します。 Copyright © 2024, Oracle and/or its affiliates 60
61. カード・リージョンに変更します ページ・デザイナでホーム・ページ（ページ番号１）を開 きます。 レストランの表⽰をレポートからカードに変更します。 1. リージョンRestaurantsを選択します。 2. 識別のタイプをカードに変更します。 61 Copyright © 2024, Oracle and/or its affiliates 2 1
62. カードの基本的な設定を⾏います 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
63. Restaurantsのカード・リージョンを表⽰します 対話モード・レポートがカードに変わりました。 63 Copyright © 2024, Oracle and/or its affiliates
64. カード・リージョンのタイトルを表⽰します 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
65. リージョンのタイトルが表⽰されました リージョンのタイトルとしてLowCode Cravingsが表⽰ されていることを確認します。 65 Copyright © 2024, Oracle and/or its affiliates
66. 評価や配達時間などを表⽰します 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
67. レストランの表⽰ができました 以上でレストランの表⽰ができました。 67 Copyright © 2024, Oracle and/or its affiliates
68. メニューのページを開くアクションを作成します 1. カード・リージョンLowCode Cravingsのアクション 上でコンテキスト・メニューを表⽰します。 2. アクションの作成を実⾏します。 68 Copyright © 2024, Oracle and/or its affiliates 1 2
69. ページ番号２を開くようにアクションを設定します 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. メニューのページが開くことを確認します レストランのカードをクリックすると、ページ番号２のメニュー のページが開きます。 70 Copyright © 2024, Oracle and/or its affiliates
71. Lab 4:テーマの更新 テーマ・ローラーを使⽤してページ全体の⾒え⽅を変更します。 Copyright © 2024, Oracle and/or its affiliates 71
72. テーマ・ローラーを開きます テーマ・ローラーは開発者ツールバーから開きます。 1. ナビゲーション・メニューからアプリケーションのホーム・ ページを開きます。 2. 開発者ツールバーのカスタマイズをクリックします。 3. テーマ・ローラーを開きます。 72 Copyright © 2024, Oracle and/or its affiliates 2 3 1
73. グローバル⾊のプライマリ・アクセントを変更します テーマ・ローラーよりアプリケーションの⾒え⽅を変更します。 1. グローバル⾊を開きます。 2. プライマリ・アクセントの⾊をクリックします。 3. Hexにff3107を⼊⼒し、Enterを⼊⼒します。 テーマ・ローラーでの変更は、即座に画⾯に反映されます。 73 Copyright © 2024, Oracle and/or its affiliates 1 2 3
74. ヘッダーの⾊を変更します ヘッダーの⾊を⽩に変更します。 1. コンテナを開きます。 2. ヘッダーの背景（左）⾊をクリックします。 3. Hexにffffffを⼊⼒し、Enterを⼊⼒します。 74 Copyright © 2024, Oracle and/or its affiliates 1 2 3 ヘッダーの背景が⽩になりタイトルが隠れます
75. ヘッダーのテキストの⾊を変更します ヘッダーのテキストの⾊を⿊に変更します。 1. ヘッダーの前景（右）⾊をクリックします。 2. Hexに000000を⼊⼒し、Enterを⼊⼒します。 75 Copyright © 2024, Oracle and/or its affiliates 1 2 ヘッダーの前景が⿊になりタイトルが現れます
76. ページ・アイテムの⾓を丸めます 1. フォームを開きます。 2. 枠線の⾓の丸めを30pxにします。 76 Copyright © 2024, Oracle and/or its affiliates 1 2 丸くなります
77. ボタンの⾓を丸くします 1. ボタンを開きます。 2. 枠線の⾓の丸めを24pxにします。 77 Copyright © 2024, Oracle and/or its affiliates 1 2 丸くなります
78. コンテナの⾓を丸くします 1. コンテナを開きます。 2. コンテナ枠線の⾓の丸めを30pxにします。 ページに表⽰されているコンテナ枠線（リージョンの枠 線）がないため、⾓の丸めは確認できません。 78 Copyright © 2024, Oracle and/or its affiliates 1 2
79. テーマ・ローラーによる変更を⼀旦保存します 1. テーマ・ローラーの保存をクリックします。 2. スタイル名はLowCodeCravingsとします。 3. 保存をクリックします。 79 Copyright © 2024, Oracle and/or its affiliates 1 2 3
80. 次の作業で記述するカスタム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; }
81. カスタム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; }
82. テーマ・ローラーによる変更を確認します JavaScriptコンソールより apex.utr.config(); を実⾏すると、テーマ・ローラーによる設定値を確認できま す。この設定値はエクスポートしたファイルの内容と同じで す。 1. JavaScriptコンソールよりapex.utr.config()を 実⾏して、出⼒を確認します。 2. テーマ・ローラーの３点メニューを開き、エクスポートを 実⾏します。ダウンロードされたファイルの内容を確認 します。 82 Copyright © 2024, Oracle and/or its affiliates 2 1 2
83. テーマ・ローラーによる変更を保存します 1. テーマ・ローラーの保存をクリックします。 83 Copyright © 2024, Oracle and/or its affiliates 1
84. テーマ・ローラーを終了します 保存したテーマLowCodeCravingsがカレントのテーマ となっていることを確認します。 1. テーマ・ローラーの右上の X をクリックして、テーマ・ ローラーを閉じます。 84 Copyright © 2024, Oracle and/or its affiliates 1
85. Lab 5:ナビゲーション・バーの変更 ナビゲーション・バーにショッピング・カートやアプリケーション・ロゴを追加します。 Copyright © 2024, Oracle and/or its affiliates 85
86. ナビテーション・バーにショッピング・カートのアイコンを表⽰します 1. 共有コンポーネントのナビゲーション・バー・リストを 開きます。 2. ナビゲーション・バーを開きます。 86 Copyright © 2024, Oracle and/or its affiliates 1 2
87. ショッピング・カートのエントリを作成します 1. エントリの作成をクリックします。 87 Copyright © 2024, Oracle and/or its affiliates 1
88. リスト・エントリを設定します 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. ナビゲーション・バーにショッピング・カートが追加されました 89 Copyright © 2024, Oracle and/or its affiliates ナビゲーション・バーにショッピング・カートのアイコンが追加 されました。
90. アプリケーション・ロゴにアイコンの表⽰を追加します 1. 開発者ツールバーのカスタマイズを開き、ロゴの編集 を実⾏します。 2. アプリケーション・ロゴのタイプにイメージとテキストを 選択し、テキストはLowCodeCravingsとします。 3. 変更を保存します。 このロゴ・タイプにはロゴ・イメージが必要です、とエラー になります。 静的アプリケーション・ファイルとして保存されているファイル は、開発者ツールバーからはロゴとして設定できません。 代わりに、アプリケーション・ビルダーから設定します。 90 Copyright © 2024, Oracle and/or its affiliates 1 2 3
91. アプリケーション・ビルダーからロゴを設定します アプリケーション定義のユーザー・インターフェースを開き ます。 1. ロゴのセクションに移動します。 2. ロゴはイメージとテキストに変更します。 3. イメージURLに#APP_FILES#app-224603- logo.pngを設定します。 4. テキストはLowCodeCravingsにします。 5. 変更の適⽤をクリックします。 91 Copyright © 2024, Oracle and/or its affiliates 1 2 ５ 3 ４
92. ナビゲーション・メニューを⾮表⽰にします 1. ナビゲーション・メニューのセクションに移動します。 2. ナビゲーションの表⽰をオフにします。 3. 変更の適⽤をクリックします。 92 Copyright © 2024, Oracle and/or its affiliates 1 2 3
93. ヘッダーのアプリケーション・ロゴの表⽰が変わりました 93 Copyright © 2024, Oracle and/or its affiliates ナビゲーション・メニューがなくなり、アプリケーション・ロゴにイ メージが追加されました。
94. ページ単位でナビゲーション・メニューを⾮表⽰にします ナビゲーション・メニューはページ単位で⾮表⽰にできます。 すでに⾮表⽰なので、この操作は不要です。 1. ページを選択します。 2. 外観のページ・テンプレートをテーマのデフォルト値か らMinimal (No Navigation)を選択します。 94 Copyright © 2024, Oracle and/or its affiliates 1 2
95. 次の作業で記述するカスタム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; } }
96. 画⾯幅が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
97. メディアクエリの効果を確認します JavaScriptコンソールを開きます。 1. 画⾯幅を変更できるようにします。 2. サイズにレスポンシブを選択します。 3. 画⾯幅を縮⼩し、サイズを767px以下にします。 画⾯幅が767px以下で、アプリケーション・ロゴのテキスト が⾮表⽰になることを確認します。 97 Copyright © 2024, Oracle and/or its affiliates 1 3 2 ロゴのテキストが消える 未設定の場合はロゴは表⽰されます （Lが少しだけ表⽰されています）
98. 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
99. 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
100. Lab 6:ログイン・ページの更新 ログイン・ページの⾒え⽅を更新します。 Copyright © 2024, Oracle and/or its affiliates 100
101. ログイン・ページに作成したテーマLowCodeCravingsが適⽤されています サインイン・ページにテーマ・ローラーで作成したテーマ LowCodeCravingsが適⽤されています。 101 Copyright © 2024, Oracle and/or its affiliates
102. バックグラウンドに画像を表⽰します ページ・デザイナでログイン・ページ（ページ番号 9999）を開きます。 バックグラウンドに表⽰する画像は、リージョンを作成して 設定します。 1. コンポーネント上でコンテキスト・メニューを表⽰します。 2. リージョンの作成を実⾏します。 102 Copyright © 2024, Oracle and/or its affiliates 1 2
103. バックグランド・イメージを設定します 1. 識別のタイトルはBackground Artとします。 2. レイアウトの位置はBackground Imageとします。 3. 外観のテンプレートはImageとします。 4. イメージのファイルURLに#APP_FILES#low- code-cravings-bg-alt.jpgを指定します。 5. 変更を保存します。 103 Copyright © 2024, Oracle and/or its affiliates 1 2 3 4 5
104. 変更を確認します バックグラウンドに画像が表⽰されるだけで、雰囲気がず いぶん変わります。 104 Copyright © 2024, Oracle and/or its affiliates
105. ページのタイトルを変更します 105 Copyright © 2024, Oracle and/or its affiliates 1 2 1. ページを選択します。 2. 識別のタイトルをLowCodeCravings – ログイン に変更します。 3. 変更を保存します。 ページのタイトルはブラウザのタブに表⽰されます（HTML のTITLE要素）。アプリケーション名が初期値になります。 アプリケーション名を変更しても、更新されません。 3
106. ログイン・ページで選べるテンプレート・オプションSplitの表⽰ テンプレート・オプションのPage LayoutにSplitを選択 すると、フォームの表⽰が変わります。 今回の作業では、この形式の表⽰は使いません。 106 Copyright © 2024, Oracle and/or its affiliates
107. 住所を⼊⼒するリージョンを作成します 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
108. 住所を⼊⼒するページ・アイテムを作成します 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. 住所から次に進むボタンを作成します 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を設定します。
110. サインインのダイアログを開くボタンを作成します 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
111. 今までの作業を確認します ユーザー名、パスワードの⼊⼒フォームは、この後にInline Dialogへ変更します。 今回のハンズオンはアプリケーションの⾒え⽅にフォーカスを 当てています。そのため、住所を⼊⼒してアプリケーション を使⽤する実装は省略します。 もう少し住所の⼊⼒の⾒え⽅を調整します。 111 Copyright © 2024, Oracle and/or its affiliates
112. 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
113. CSSクラスc-SplashBoxを適⽤します 1. 住所を⼊⼒するリージョンを選択します。 2. 外観のCSSクラスにc-SplashBoxを設定します。 3. 変更を保存します。 113 Copyright © 2024, Oracle and/or its affiliates 1 2 3
114. ユーザー名・パスワードの⼊⼒を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
115. ユーザー名とパスワードの⾒え⽅を変更します 1. ページ・アイテムP9999_USERNAMEと P9999_PASSWORDを選択します。 2. 外観のテンプレートをOptional – Floatingに変 更します。 3. レイアウトの列は2、列スパンは10とします。 115 Copyright © 2024, Oracle and/or its affiliates 1 2 3
116. ボタン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
117. ボタンSIGN_INに動的アクションを作成します 1. ボタンSIGN_INの上でコンテキスト・メニューを表 ⽰します。 2. 動的アクションの作成を実⾏します。 117 Copyright © 2024, Oracle and/or its affiliates 1 2
118. 動的アクションに名前をつけます 1. 作成された動的アクションを選択します。 2. 識別の名前はonClick Open Regionとします。 ボタンに作成した動的アクションは、デフォルトでタイミング のイベントはクリックになります。そのため、通常はタイミン グの設定変更は不要です。 118 Copyright © 2024, Oracle and/or its affiliates 2 1
119. リージョンを開くTRUEアクションを作成します 1. TRUEアクション（表⽰となっています）を選択します。 2. 識別のアクションはリージョンを開くとします。 3. 影響を受ける要素の選択タイプをリージョンとし、 リージョンにLowCodeCravings – サインインを 選択します。 4. 変更を保存します。 119 Copyright © 2024, Oracle and/or its affiliates 2 1 3 4
120. アプリケーションにサインインします アプリケーションにサインインし、変更した内容を確認しま す。 1. Sign Inをクリックします。 2. ユーザー名とパスワードを⼊⼒し、サインインをクリック します。 3. ホーム・ページが開きます。 120 Copyright © 2024, Oracle and/or its affiliates
121. Lab 7:メニュー・ページの更新 メニューを⼀覧表⽰するページを更新します。 Copyright © 2024, Oracle and/or its affiliates 121
122. レストランのメニューを⼀覧するページを更新します ページ番号２に、レストランのメニューを⼀覧するページが あらかじめ作成されています。 レストランの詳細を表⽰する対話モード・レポートが上にあ り、メニューの⼀覧の対話モード・レポートが下にあります。 122 Copyright © 2024, Oracle and/or its affiliates
123. リージョンRestaurant Detailsをカードに変更します ページ・デザイナでMenuのページ（ページ番号2）を 開きます。 1. リージョンRestaurant Detailsを選択します。 2. 識別のタイプをカードに変更します。 3. レイアウトの位置はFull Width Contentとします。 123 Copyright © 2024, Oracle and/or its affiliates 1 2 3
124. カードに表⽰する⽂字を設定します 1. プロパティ・エディタの属性タブを開きます。 2. タイトルの列はNAMEとします。 3. サブタイトルの列はCATEGORYとします。 124 Copyright © 2024, Oracle and/or its affiliates 1 2 3
125. カードに表⽰する画像を設定します 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
126. 変更されたページを表⽰します この表⽰を以下の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; }
127. ページ・プロパティにCSSを記述します 1. ページを選択します。 2. ページ・プロパティのCSSのインラインにCSSを記述し ます。 CSSはページのコメントに記載されているので、それをコ ピー＆ペーストします。 127 Copyright © 2024, Oracle and/or its affiliates 2 1
128. カードにCSSを適⽤します リージョンRestaurant Detailsの属性を更新します。 1. 外観のCSSクラスにc-HeroCardを設定します。 2. カードのCSSクラスにa-CardView--noUIを設 定します。 3. 変更を保存します。 128 Copyright © 2024, Oracle and/or its affiliates 1 2 3
129. 変更を確認します リージョンRestaurant Detailsの変更は完了です。 129 Copyright © 2024, Oracle and/or its affiliates
130. メニュー⼀覧を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
131. 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
132. メニュー⼀覧の変更を確認します メニュー⼀覧の表⽰は概ね完成です。 残っている以下の変更を実施します。 1. ページ・アイテムP2_RESTAURANT_IDを⾮表 ⽰にします。 2. 価格に円マークを表⽰させます。 3. メニュー⼀覧に料理の選択ボタンを作成します。 132 Copyright © 2024, Oracle and/or its affiliates
133. ページ・アイテムP2_RESTAURANT_IDを⾮表⽰にします 1. ページ・アイテムP2_RESTAURANT_IDを選択し ます。 2. 識別のタイプを⾮表⽰に変更します。 133 Copyright © 2024, Oracle and/or its affiliates 2 1
134. 価格に円マークを表⽰します 1. 列PRICEを選択します。 2. 外観の書式マスクに以下を設定します。 FML999G999G999G999G990D00 134 Copyright © 2024, Oracle and/or its affiliates 1 2
135. 料理に追加ボタンを作成します 1. リージョンMenuのアクション上でコンテキスト・メ ニューを表⽰します。 2. アクションの作成を実⾏します。 135 Copyright © 2024, Oracle and/or its affiliates 1 2
136. ボタンの⾒え⽅を設定します 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
137. メニュー・ページの表⽰を確認します メニューのページが表⽰されました。 以上でアプリケーションは完成です。 137 Copyright © 2024, Oracle and/or its affiliates
138. おまけ︓Oracle APEXのレイアウト・システム Copyright © 2024, Oracle and/or its affiliates 138
139. レイアウト列を表⽰させてみます 左のページを追加で作成します。 1. 開発者ツールバーの情報を開きます。 2. レイアウト列の表⽰を実⾏します。 レイアウト列を表⽰すると、メニューはレイアウト列の⾮表 ⽰に変わります。 139 Copyright © 2024, Oracle and/or its affiliates 2 1
140. 空⽩ページを作成します 空⽩ページを作成して、その後にログイン・ページにある ページ・アイテムやボタンをコピーします。 1. ページの作成をクリックします。 2. 空⽩ページを選択します。 3. ページ定義のページ番号は３とします。名前は Layout、ページ・モードは標準を選びます。ナビゲー ションは双⽅ともオフとします。 4. ページの作成をクリックします。 ページ番号３に空⽩ページが作成されます。 140 Copyright © 2024, Oracle and/or its affiliates 1 2 3 4
141. ログイン・ページのリージョンLowCodeCravingsを空⽩ページにコピーします ページ・デザイナでログイン・ページ（ページ番号9999） を開き、リージョンLowCodeCravings（アドレスの⼊⼒ があるリージョン）を空⽩ページにコピーします。 1. リージョンLowCodeCravings上でコンテキスト・メ ニューを表⽰します。 2. 他のページにコピーを実⾏します。 141 Copyright © 2024, Oracle and/or its affiliates 1 2
142. リージョンLowCodeCravingsをページ番号３にコピーします 1. コピー先ページに３を指定します。 2. リージョン・アイテムのコピーははいです。 3. ボタンのコピーははいです。 4. 次へ進みます。 5. リージョン名はそのまま変更せず、コピーをクリックしま す。 同じ⼿順を実施し、リージョンLowCodeCravings – サインイン（ユーザー名やパスワードのページ・アイテムを 含むリージョン）も空⽩ページ（ページ番号３）にコピー します。 142 Copyright © 2024, Oracle and/or its affiliates 1 2 3 4 5
143. リージョンのテンプレートをBlank with Attributesに変更します ページ・デザイナで空⽩ページ（ページ番号３）を開き ます。 1. リージョンLowCodeCravingsを選択します。 2. リージョンLowCodeCravings – サインインを選 択します。 3. 外観のテンプレートをBlank with Attributesに 変更します。 4. ページの保存と実⾏をします。 以上で確認に使⽤するページが出来上がりました。 143 Copyright © 2024, Oracle and/or its affiliates 1 3 2 4
144. コンポーネントは横12列のグリッドに配置されます Oracle APEXのページ・レイアウトは、横12列のグリッド に配置されます。 レイアウト列を表⽰させると、グリッドのどの列に配置されて いるか確認できます。 144 Copyright © 2024, Oracle and/or its affiliates 1 2 3 4 5 6 7 8 9 10 11 12
145. ページ・アイテム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
146. ページ・アイテム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
147. ユーザー名とパスワードのレイアウト • 列が２（つまり２列⽬から開始）、列スパンが10なので、結果として12列の中央10列にユーザー名とパスワードのテキスト・フィールドが配置されます。 • 選択している外観のテンプレートのOptional – Floatingにはラベル列スパンはありません。 147 Copyright © 2024, Oracle and/or its affiliates 列スパン = 10 列(開始位置) = 2
148. ユーザー名を記憶のレイアウト • ユーザー名を記憶のページ・アイテムの列と列スパンは⾃動になっています。 • ラベル列スパンのデフォルトは２です。 • ラベル列スパンを1にする、またはラベル列スパンを0、列を2にすると、ユーザー名とパスワードとほぼ同じ開始位置になります。 148 Copyright © 2024, Oracle and/or its affiliates 列スパン = 12 ラベル列スパン = 2 列(開始位置) = 1 テキスト・フィールドの占有列 = 12 – 2 = 10 ラベル列スパン = 1 列 = ⾃動 = 1 ラベル列スパン = 0 列 = 2
149. 新規⾏、新規列、いろいろな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クラスが有効）
150. テンプレート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
151. APEXのレイアウト・システムが適⽤されなくなります コンポーネントのレイアウトから、列、列スパン、ラベル列ス パン、⾏CSSクラス、列CSSクラスといった、APEXのレ イアウト・システムに関係する属性が無くなります。 151 Copyright © 2024, Oracle and/or its affiliates
152. 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
153. 外観の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
154. お疲れ様でした。 Copyright © 2024, Oracle and/or its affiliates 154
156. Our mission is to help people see data in new ways, discover insights, unlock endless possibilities.