Upgrade to Pro
— share decks privately, control downloads, hide ads and more …
Speaker Deck
Features
Speaker Deck
PRO
Sign in
Sign up for free
Search
Search
Oracle APEXの画面をファンシーにしよう!
Search
oracle4engineer
PRO
March 15, 2024
2
1.1k
Oracle APEXの画面をファンシーにしよう!
2024年3月15日に日本オラクル本社で開催したOracle APEXハンズオンで使用した資料です。
oracle4engineer
PRO
March 15, 2024
Tweet
Share
More Decks by oracle4engineer
See All by oracle4engineer
Oracle Base Database Service 技術詳細
oracle4engineer
PRO
5
48k
Graph Database と Generative AI の素敵な関係
oracle4engineer
PRO
13
2.2k
Oracle Database 23ai 新機能#4 Connection Manager (CMAN)
oracle4engineer
PRO
0
150
Oracle Database 23ai 新機能#4 Real Application Clusters
oracle4engineer
PRO
0
170
Oracle Database 23ai 新機能#4 Application Continuity
oracle4engineer
PRO
0
130
マーケットプレイス版Oracle WebCenter Content For OCI
oracle4engineer
PRO
2
240
Oracle Database 23ai 新機能#4 Rolling Maintenance
oracle4engineer
PRO
0
140
Oracle GoldenGate 23ai 導入Tips
oracle4engineer
PRO
1
280
Oracle Cloud Infrastructure:2024年9月度サービス・アップデート
oracle4engineer
PRO
0
500
Featured
See All Featured
Rails Girls Zürich Keynote
gr2m
93
13k
5 minutes of I Can Smell Your CMS
philhawksworth
202
19k
The Invisible Customer
myddelton
119
13k
Keith and Marios Guide to Fast Websites
keithpitt
408
22k
Performance Is Good for Brains [We Love Speed 2024]
tammyeverts
1
310
Distributed Sagas: A Protocol for Coordinating Microservices
caitiem20
327
21k
Adopting Sorbet at Scale
ufuk
73
9k
No one is an island. Learnings from fostering a developers community.
thoeni
19
2.9k
Learning to Love Humans: Emotional Interface Design
aarron
272
40k
Templates, Plugins, & Blocks: Oh My! Creating the theme that thinks of everything
marktimemedia
26
2k
Git: the NoSQL Database
bkeepers
PRO
425
64k
Bash Introduction
62gerente
608
210k
Transcript
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
Oracle APEXの始め⽅ Copyright © 2024, Oracle and/or its affiliates 4
無料で始める⽅法は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は2インスタンスまで作 成できます。 • 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
初期アプリケーションのインストール Copyright © 2024, Oracle and/or its affiliates 9
初期アプリケーションをダウンロードします • 以下よりアプリケーションのエクスポートをダウンロードします。 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
これからアプリケーションの⾒え⽅を改善します 本⽇のハンズオンを始める準備が整いました。 18 Copyright © 2024, Oracle and/or its affiliates
本ハンズオンで作成するアプリケーションについて Copyright © 2024, Oracle and/or its affiliates 19
左のページを右のページに変更します – レストランの⼀覧 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アプリケーションとしての要求は1つだけです。 • 静的アプリケーション・ファイルをデータベースの外に置い ていると、これらの画像へのアクセスが発⽣しなくなりま す。 Oracle CloudでAPEXを使⽤しているときは、静的アプ リケーション・ファイルの置き場所としてオブジェクト・ストレー ジを利⽤することをお勧めします。 今回のハンズオンでは、静的アプリケーション・ファイルをそ のまま使⽤します。 25 Copyright © 2024, Oracle and/or its affiliates
Lab 1:グローバル・ページ アプリケーションに含まれるすべてのページで表⽰されるコンポーネントを作成します。 Copyright © 2024, Oracle and/or its affiliates
26
グローバル・ページを編集します グローバル・ページはページ番号0として作成されていま す。グローバル・ページに作成したコンポーネントは、すべて のページに配置できます。 1. グローバル・ページ(ページ番号0)をクリックし、 ページ・デザイナで開きます。 通常のページではないため、グローバル・ページを実⾏する ことはできません。 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. ラジオ・ボタンを横に並べるため、設定の列の数を2以上の 値にします。 5. LOVのタイプに静的値を選択し、静的値をクリックして開 きます。 6. 静的値として表⽰値がDelivery、戻り値がDELIVERY、 表⽰値がPickup、戻り値がPICKUPの2⾏を設定しま す。設定した順番で表⽰させるため、実⾏時のソートはオフ にします。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
© 2024, Oracle and/or its affiliates 1
AFTER_LOGOって何︖ AFTER_LOGOの位置を確認します。 1. ページ・デザイナでホーム・ページ(ページ番号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
© 2024, Oracle and/or its affiliates 2 1
位置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. グローバル・ページ(ページ番号0)のページ共有 コンポーネントを開きます。 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)を開 きます。 ブレッドクラムのリージョンを削除します。 1. Breadcrumb Barにあるリージョン LowCodeCravings – Startの上でコンテキス
ト・メニューを表⽰します。 2. 削除を実⾏します。 3. 変更を保存します。 46 Copyright © 2024, Oracle and/or its affiliates 1 2 3
レストランのカテゴリを表⽰するカードの⾒え⽅を改善します 現在はカード上にカテゴリ名だけが表⽰されています。 47 Copyright © 2024, Oracle and/or its affiliates
カード・リージョン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
© 2024, Oracle and/or its affiliates 1 2
カード全体にアクションを定義します ポインタがカードに乗ったときにカードをハイライトさせます。 それ以上の動作は定義しません。 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)を開 きます。 レストランの表⽰をレポートからカードに変更します。 1. リージョンRestaurantsを選択します。 2. 識別のタイプをカードに変更します。 61 Copyright
© 2024, Oracle and/or its affiliates 2 1
カードの基本的な設定を⾏います 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
Restaurantsのカード・リージョンを表⽰します 対話モード・レポートがカードに変わりました。 63 Copyright © 2024, Oracle and/or its affiliates
カード・リージョンのタイトルを表⽰します 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. 2次本体の拡張フォーマットをオンにし、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 Copyright © 2024, Oracle and/or its affiliates
メニューのページを開くアクションを作成します 1. カード・リージョンLowCode Cravingsのアクション 上でコンテキスト・メニューを表⽰します。 2. アクションの作成を実⾏します。 68 Copyright ©
2024, Oracle and/or its affiliates 1 2
ページ番号2を開くようにアクションを設定します 1. 識別のタイプはカード全体とします。 2. リンクのタイプにこのアプリケーションのページにリダ イレクトを選び、ターゲットを開きます。 3. リンク・ビルダーのターゲットのページに2を設定しま す。 4.
アイテムの設定の名前に P2_RESTAURANT_ID、値に&ID.を設定しま す。 5. OKをクリックし、リンク・ビルダーを閉じます。 6. 変更を保存します。 69 Copyright © 2024, Oracle and/or its affiliates 1 2 3 5 4 6
メニューのページが開くことを確認します レストランのカードをクリックすると、ページ番号2のメニュー のページが開きます。 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.
テーマ・ローラーの3点メニューを開き、エクスポートを 実⾏します。ダウンロードされたファイルの内容を確認 します。 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
© 2024, Oracle and/or its affiliates 1
Lab 5:ナビゲーション・バーの変更 ナビゲーション・バーにショッピング・カートやアプリケーション・ロゴを追加します。 Copyright © 2024, Oracle and/or its affiliates
85
ナビテーション・バーにショッピング・カートのアイコンを表⽰します 1. 共有コンポーネントのナビゲーション・バー・リストを 開きます。 2. ナビゲーション・バーを開きます。 86 Copyright © 2024,
Oracle and/or its affiliates 1 2
ショッピング・カートのエントリを作成します 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 5 3 4
ナビゲーション・メニューを⾮表⽰にします 1. ナビゲーション・メニューのセクションに移動します。 2. ナビゲーションの表⽰をオフにします。 3. 変更の適⽤をクリックします。 92 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 ページ・デザイナでグローバル・ページ(ページ番号0)
を開きます。 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#low- code-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
ログイン・ページで選べるテンプレート・オプションSplitの表⽰ テンプレート・オプションのPage LayoutにSplitを選択 すると、フォームの表⽰が変わります。 今回の作業では、この形式の表⽰は使いません。 106 Copyright © 2024, Oracle
and/or its affiliates
住所を⼊⼒するリージョンを作成します 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. ラベル⾏スパンを0にします。 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. 列スパンは2とします。 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
CSSクラスc-SplashBoxを適⽤します 1. 住所を⼊⼒するリージョンを選択します。 2. 外観のCSSクラスにc-SplashBoxを設定します。 3. 変更を保存します。 113 Copyright ©
2024, Oracle and/or its affiliates 1 2 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
ユーザー名とパスワードの⾒え⽅を変更します 1. ページ・アイテムP9999_USERNAMEと P9999_PASSWORDを選択します。 2. 外観のテンプレートをOptional – Floatingに変 更します。 3.
レイアウトの列は2、列スパンは10とします。 115 Copyright © 2024, Oracle and/or its affiliates 1 2 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
ボタンSIGN_INに動的アクションを作成します 1. ボタンSIGN_INの上でコンテキスト・メニューを表 ⽰します。 2. 動的アクションの作成を実⾏します。 117 Copyright © 2024,
Oracle and/or its affiliates 1 2
動的アクションに名前をつけます 1. 作成された動的アクションを選択します。 2. 識別の名前はonClick Open Regionとします。 ボタンに作成した動的アクションは、デフォルトでタイミング のイベントはクリックになります。そのため、通常はタイミン グの設定変更は不要です。
118 Copyright © 2024, Oracle and/or its affiliates 2 1
リージョンを開くTRUEアクションを作成します 1. TRUEアクション(表⽰となっています)を選択します。 2. 識別のアクションはリージョンを開くとします。 3. 影響を受ける要素の選択タイプをリージョンとし、 リージョンにLowCodeCravings – サインインを
選択します。 4. 変更を保存します。 119 Copyright © 2024, Oracle and/or its affiliates 2 1 3 4
アプリケーションにサインインします アプリケーションにサインインし、変更した内容を確認しま す。 1. Sign Inをクリックします。 2. ユーザー名とパスワードを⼊⼒し、サインインをクリック します。 3.
ホーム・ページが開きます。 120 Copyright © 2024, Oracle and/or its affiliates
Lab 7:メニュー・ページの更新 メニューを⼀覧表⽰するページを更新します。 Copyright © 2024, Oracle and/or its affiliates
121
レストランのメニューを⼀覧するページを更新します ページ番号2に、レストランのメニューを⼀覧するページが あらかじめ作成されています。 レストランの詳細を表⽰する対話モード・レポートが上にあ り、メニューの⼀覧の対話モード・レポートが下にあります。 122 Copyright © 2024, Oracle
and/or its affiliates
リージョンRestaurant Detailsをカードに変更します ページ・デザイナでMenuのページ(ページ番号2)を 開きます。 1. リージョンRestaurant Detailsを選択します。 2. 識別のタイプをカードに変更します。 3.
レイアウトの位置はFull Width Contentとします。 123 Copyright © 2024, Oracle and/or its affiliates 1 2 3
カードに表⽰する⽂字を設定します 1. プロパティ・エディタの属性タブを開きます。 2. タイトルの列はNAMEとします。 3. サブタイトルの列はCATEGORYとします。 124 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
© 2024, Oracle and/or its affiliates 2 1
カードにCSSを適⽤します リージョンRestaurant Detailsの属性を更新します。 1. 外観のCSSクラスにc-HeroCardを設定します。 2. カードのCSSクラスにa-CardView--noUIを設 定します。 3. 変更を保存します。
128 Copyright © 2024, Oracle and/or its affiliates 1 2 3
変更を確認します リージョンRestaurant Detailsの変更は完了です。 129 Copyright © 2024, Oracle and/or its
affiliates
メニュー⼀覧を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. ページ・アイテムP2_RESTAURANT_IDを⾮表 ⽰にします。 2. 価格に円マークを表⽰させます。 3. メニュー⼀覧に料理の選択ボタンを作成します。
132 Copyright © 2024, Oracle and/or its affiliates
ページ・アイテムP2_RESTAURANT_IDを⾮表⽰にします 1. ページ・アイテムP2_RESTAURANT_IDを選択し ます。 2. 識別のタイプを⾮表⽰に変更します。 133 Copyright © 2024,
Oracle and/or its affiliates 2 1
価格に円マークを表⽰します 1. 列PRICEを選択します。 2. 外観の書式マスクに以下を設定します。 FML999G999G999G999G990D00 134 Copyright © 2024,
Oracle and/or its affiliates 1 2
料理に追加ボタンを作成します 1. リージョンMenuのアクション上でコンテキスト・メ ニューを表⽰します。 2. アクションの作成を実⾏します。 135 Copyright © 2024,
Oracle and/or its affiliates 1 2
ボタンの⾒え⽅を設定します 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 Copyright © 2024, Oracle and/or its
affiliates
おまけ︓Oracle APEXのレイアウト・システム Copyright © 2024, Oracle and/or its affiliates 138
レイアウト列を表⽰させてみます 左のページを追加で作成します。 1. 開発者ツールバーの情報を開きます。 2. レイアウト列の表⽰を実⾏します。 レイアウト列を表⽰すると、メニューはレイアウト列の⾮表 ⽰に変わります。 139 Copyright
© 2024, Oracle and/or its affiliates 2 1
空⽩ページを作成します 空⽩ページを作成して、その後にログイン・ページにある ページ・アイテムやボタンをコピーします。 1. ページの作成をクリックします。 2. 空⽩ページを選択します。 3. ページ定義のページ番号は3とします。名前は Layout、ページ・モードは標準を選びます。ナビゲー
ションは双⽅ともオフとします。 4. ページの作成をクリックします。 ページ番号3に空⽩ページが作成されます。 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をページ番号3にコピーします 1. コピー先ページに3を指定します。 2. リージョン・アイテムのコピーははいです。 3. ボタンのコピーははいです。 4. 次へ進みます。 5.
リージョン名はそのまま変更せず、コピーをクリックしま す。 同じ⼿順を実施し、リージョンLowCodeCravings – サインイン(ユーザー名やパスワードのページ・アイテムを 含むリージョン)も空⽩ページ(ページ番号3)にコピー します。 142 Copyright © 2024, Oracle and/or its affiliates 1 2 3 4 5
リージョンのテンプレートをBlank with Attributesに変更します ページ・デザイナで空⽩ページ(ページ番号3)を開き ます。 1. リージョンLowCodeCravingsを選択します。 2. リージョンLowCodeCravings –
サインインを選 択します。 3. 外観のテンプレートをBlank with Attributesに 変更します。 4. ページの保存と実⾏をします。 以上で確認に使⽤するページが出来上がりました。 143 Copyright © 2024, Oracle and/or its affiliates 1 3 2 4
コンポーネントは横12列のグリッドに配置されます Oracle APEXのページ・レイアウトは、横12列のグリッド に配置されます。 レイアウト列を表⽰させると、グリッドのどの列に配置されて いるか確認できます。 144 Copyright © 2024,
Oracle and/or its affiliates 1 2 3 4 5 6 7 8 9 10 11 12
ページ・アイテムADDRESSとボタンNEXTのレイアウト • ボタンNEXTの新規⾏の開始はオフなので、ページ・アイテムADDRESSと同じ⾏に配置されます。 • 列スパンは2なので、2列を占有します。テンプレート・オプションのWidthがStretchなので、2列いっぱいに横幅が広がります。 • ページ・アイテムADDRESSの列スパンは⾃動なので、ボタンが占有している2列を除く10列を占有します。これもWidthがStretchなので10列いっぱ いに横幅が広がります。 • ラベル列スパンが0なので、ラベルが表⽰される領域は無くなります。
• ページ・アイテムADDRESSの列が⾃動です。⾏の先頭のアイテムなので、列は1が割り当たります。 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
ユーザー名とパスワードのレイアウト • 列が2(つまり2列⽬から開始)、列スパンが10なので、結果として12列の中央10列にユーザー名とパスワードのテキスト・フィールドが配置されます。 • 選択している外観のテンプレートのOptional – Floatingにはラベル列スパンはありません。 147 Copyright ©
2024, Oracle and/or its affiliates 列スパン = 10 列(開始位置) = 2
ユーザー名を記憶のレイアウト • ユーザー名を記憶のページ・アイテムの列と列スパンは⾃動になっています。 • ラベル列スパンのデフォルトは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
APEXのレイアウト・システムが適⽤されなくなります コンポーネントのレイアウトから、列、列スパン、ラベル列ス パン、⾏CSSクラス、列CSSクラスといった、APEXのレ イアウト・システムに関係する属性が無くなります。 151 Copyright © 2024, Oracle and/or
its affiliates
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
お疲れ様でした。 Copyright © 2024, Oracle and/or its affiliates 154
None
Our mission is to help people see data in new
ways, discover insights, unlock endless possibilities.