Upgrade to Pro — share decks privately, control downloads, hide ads and more …

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

oracle4engineer
March 15, 2024
1.1k

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

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

oracle4engineer

March 15, 2024
Tweet

More Decks by oracle4engineer

Transcript

  1. はじめに 本ハンズオンは、海外で⾏われたセミナーをハンズオンとして再構成しています。 参考にしている海外セミナー 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
  2. アジェンダ 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
  3. 無料のワークスペースの取得 • 以下を⼊⼒し、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
  4. 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
  5. 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
  6. 画像は静的アプリケーション・ファイルとして保存されています • 画像のファイルは共有コンポーネントの静的アプリケー ション・ファイルとして保存されています。 • それぞれの表のイメージを保存する列には、静的アプ リケーション・ファイルを参照するURLが記載されてい ます。 • 静的アプリケーション・ファイルはAPEXが実⾏されてい

    るデータベースに保存されています。ブラウザに画像を 表⽰する際に、データベースから画像ファイルが取り出 されます。 • ブラウザ側で画像はキャッシュされるため、毎回画像が ダウンロードされるわけではありませんが、画像を取得 するリクエストは発⾏されます。 • Oracle APEX 23.2より静的アプリケーション・ファイル を、Oracle Cloudのオブジェクト・ストレージに保存で きるようになりました。 23 Copyright © 2024, Oracle and/or its affiliates
  7. 静的アプリケーション・ファイルはOCIオブジェクト・ストレージへ保存できます • アプリケーション定義のアプリケーション・ファイル・ス トレージに含まれる設定ファイル・ストレージ・タイプを、 ローカル・データベースからOracle Cloud Object Storageに変更します。 • アプリケーション・ビルダーによる静的アプリケーション・

    ファイルの作成や削除といった操作は、設定したオブ ジェクト・ストレージに対して実施されます。 • アプリケーション定義のユーザー・インターフェースの 詳細に含まれる定義#APP_FILES#のパスに、実 際に画像ファイルにアクセスするURLを設定できます。 • オブジェクト・ストレージ上のファイルをCDNにコピーして、 CDNから画像ファイルを参照することを想定した設定 です。 24 Copyright © 2024, Oracle and/or its affiliates
  8. 静的アプリケーション・ファイルの保存先を検討する理由 • 作成するアプリケーションの1ページに、25枚の画像が 含まれています。 • ページを表⽰すると、同時に25枚の画像を取得する 要求が発⾏されます。画像がデータベースに保存され ていると、これらはすべてデータベースへの処理要求に なります。 •

    APEXアプリケーションとしての要求は1つだけです。 • 静的アプリケーション・ファイルをデータベースの外に置い ていると、これらの画像へのアクセスが発⽣しなくなりま す。 Oracle CloudでAPEXを使⽤しているときは、静的アプ リケーション・ファイルの置き場所としてオブジェクト・ストレー ジを利⽤することをお勧めします。 今回のハンズオンでは、静的アプリケーション・ファイルをそ のまま使⽤します。 25 Copyright © 2024, Oracle and/or its affiliates
  9. ページ・アイテム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
  10. AFTER_LOGOって何︖ AFTER_LOGOの位置を確認します。 1. ページ・デザイナでホーム・ページ(ページ番号1) を開きます。 2. 左ペインでページ共有コンポーネントを開きます。 3. テンプレートのページ以下にStandardがあります。 ホーム・ページはページ・テンプレートとしてStandard

    を選んでいます。これを選択します。 4. コンポーネントの編集をクリックして、ページ・テンプ レートのStandardを参照します。 32 Copyright © 2024, Oracle and/or its affiliates 2 3 4 ページ・レイアウトの位置 1
  11. 位置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;
  12. ページ・アイテム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
  13. 検索フィールドを作成します 検索フィールドとして使⽤するページ・アイテムを作成しま す。先ほどとは違う⼿順で、ページ・アイテムを作成してみ ます。 ページ・デザイナでグローバル・ページを開きます。 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
  14. ページ・アイテム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
  15. カード上にアイコンを表⽰します 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
  16. カテゴリのカードを横⼀列に配置します カードのカテゴリを横⼀列に配置します。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
  17. カテゴリにテキストを中央揃えにします 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
  18. 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
  19. カード全体にアクションを定義します ポインタがカードに乗ったときにカードをハイライトさせます。 それ以上の動作は定義しません。 1. 作成したアクションを選択します。 2. 識別のタイプをカード全体にします。 3. リンクのタイプをURLにリダイレクトとし、ターゲットを 開きます。

    4. リンク・ビルダーのURLに&LINK.を設定し、OKをク リックします。 5. 変更を保存します。 アプリケーションのページをリロードしたのち、カテゴリにポイ ンタを載せると、カテゴリの枠に影が付きます。 59 Copyright © 2024, Oracle and/or its affiliates 1 2 3 4 4 5
  20. カードの基本的な設定を⾏います 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
  21. カード・リージョンのタイトルを表⽰します 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
  22. 評価や配達時間などを表⽰します 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
  23. ページ番号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
  24. 次の作業で記述するカスタム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; }
  25. カスタム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; }
  26. リスト・エントリを設定します 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
  27. アプリケーション・ロゴにアイコンの表⽰を追加します 1. 開発者ツールバーのカスタマイズを開き、ロゴの編集 を実⾏します。 2. アプリケーション・ロゴのタイプにイメージとテキストを 選択し、テキストはLowCodeCravingsとします。 3. 変更を保存します。 このロゴ・タイプにはロゴ・イメージが必要です、とエラー

    になります。 静的アプリケーション・ファイルとして保存されているファイル は、開発者ツールバーからはロゴとして設定できません。 代わりに、アプリケーション・ビルダーから設定します。 90 Copyright © 2024, Oracle and/or its affiliates 1 2 3
  28. 画⾯幅が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
  29. 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
  30. バックグランド・イメージを設定します 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
  31. ページのタイトルを変更します 105 Copyright © 2024, Oracle and/or its affiliates 1

    2 1. ページを選択します。 2. 識別のタイトルをLowCodeCravings – ログイン に変更します。 3. 変更を保存します。 ページのタイトルはブラウザのタブに表⽰されます(HTML のTITLE要素)。アプリケーション名が初期値になります。 アプリケーション名を変更しても、更新されません。 3
  32. 住所を⼊⼒するリージョンを作成します 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
  33. 住所を⼊⼒するページ・アイテムを作成します 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
  34. 住所から次に進むボタンを作成します 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を設定します。
  35. サインインのダイアログを開くボタンを作成します 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
  36. 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
  37. ユーザー名・パスワードの⼊⼒を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
  38. ボタン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
  39. 変更されたページを表⽰します この表⽰を以下の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; }
  40. メニュー⼀覧を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
  41. 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
  42. ボタンの⾒え⽅を設定します 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
  43. リージョンLowCodeCravingsをページ番号3にコピーします 1. コピー先ページに3を指定します。 2. リージョン・アイテムのコピーははいです。 3. ボタンのコピーははいです。 4. 次へ進みます。 5.

    リージョン名はそのまま変更せず、コピーをクリックしま す。 同じ⼿順を実施し、リージョンLowCodeCravings – サインイン(ユーザー名やパスワードのページ・アイテムを 含むリージョン)も空⽩ページ(ページ番号3)にコピー します。 142 Copyright © 2024, Oracle and/or its affiliates 1 2 3 4 5
  44. リージョンのテンプレートを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
  45. ページ・アイテム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
  46. 新規⾏、新規列、いろいろな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クラスが有効)
  47. テンプレート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
  48. 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
  49. 外観の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
  50. Our mission is to help people see data in new

    ways, discover insights, unlock endless possibilities.