機械翻訳について
  1. Oracle Integration Generation 2のOracle Visual Builderでのアプリケーションの開発
  2. ユースケース &トラブルシューティング
  3. 一般的なユースケース
  4. スタイルおよびテーマVisual Builderアプリケーション

スタイルおよびテーマVisual Builderアプリケーション

Visual Builderアプリケーションのすべてのスタイル設定は、CSSで手動で行われます。 テキストやイメージの表示を変更するための宣言機能はありません。 すべてのVisual Builderアプリケーションは単なるJETアプリケーションであるため、JETテーマを使用してアプリケーションのスタイルを設定します。

20.10以降のバージョンで作成されたVisual Builderアプリケーションは、デフォルトでRedwoodテーマを使用します。 Redwoodは、アプリケーションのルック・アンド・フィールに関するOracle標準です。 これには、ユーザー・エクスペリエンスを充実させるウォーターフォール・レイアウトやアクション・カードなどのコンポーネントが含まれています。また、アプリで簡単に活用できるアイコンのコレクションも含まれています。

Redwoodは何百ものカスタム・プロパティ(CSS変数とも呼ばれる)を通じてルック・アンド・フィールを実現するため、これらの変数をオーバーライドして、要件に対するデフォルトのルック・アンド・フィールをカスタマイズできます。

ノート:

スタイル・アプリケーションは、Redwoodテーマを使用するwebアプリケーションでのみサポートされます。 Altaテーマを使用するアプリケーションをスタイル設定する場合、AltaテーマのサポートはJET 10以降非推奨になりました。

Visual BuilderアプリケーションまたはJETアプリケーションのスタイルを設定する場合は、それらを正しく使用することが重要です。 これ以外の場合、プラットフォーム・バージョンをアップグレードするときに、再変換ブレークを検出するリスクがあります。 アプリケーションのテーマ作成の詳細は、「MVVMアーキテクチャを使用したOracle JETアプリケーションの開発」の「Oracle JETアプリケーションでのCSSおよびテーマの使用」を参照してください。 最新バージョンを取得するには、https://www.oracle.com/webfolder/technetwork/jet/index.htmlに移動し、「ヘルプとサポート」をクリックし、一番下までスクロールして「テーマ」をクリックします。

Web (またはモバイル)アプリのテーマをRedwoodに移行

バージョン20.07以前で作成されたVisual Builderアプリケーションは、デフォルトでベースUIテーマとしてJET Altaテーマを使用します。 アプリでAltaテーマを使用する場合は、Altaテーマのサポートが終了する前に、Redwoodテーマを使用するようにアプリを移行することを強くお薦めします。

「web(またはモバイル)」アプリケーションのテーマをAltaからRedwoodに移動するには:

  1. ナビゲータでアプリケーション・ノードを選択します。
  2. 「設定」をクリックし、「一般」タブで「テーマ」フィールドを検索します。
  3. テーマがAltaに設定されている場合、ベース・テーマとして「Redwood」または「Redwoodステーブル」 (推奨)に切り替えることができます。

    app-theme-dropdown.pngの説明は以下のとおりです
    「図app-theme-dropdown.pngの説明」

    コンポーネントのディメンションとスタイルが変更されているため、ルック&フィールを確認してください。 必要に応じて、アプリを再設計する必要がある場合があります。

テーマをRedwoodに設定すると、次のことができます:

Webアプリの外観をカスタマイズ

デフォルトでは、アプリは暗いテキストで明るいバックグラウンドに対して表示されます。 バージョン24.07以降で作成されたwebアプリの場合、アプリのテーマをカスタマイズして、暗いバックグラウンドにコンポーネントを表示したり、ユーザーがLightテーマとDarkテーマのいずれかを選択したりすることもできます。 アプリケーションのUIは、選択したテーマ(またはエンドユーザー)に自動的に調整されます。

CSS変数を使用して、「レッド・ウッド」ベース・テーマに基づくアプリケーションのデフォルトのルック・アンド・フィールをオーバーライドすることもできます。 Redwoodテーマは、アプリケーションのOracleルック・アンド・フィールを提供し、Redwoodテーマに対する今後の更新を継承しますが、これらの変更はアプリケーションのカスタム・テーマに流入する可能性があります。 CSSオーバーライドを使用してデフォルト・テーマをカスタマイズすると、ベース・テーマは「Redwoodステーブル」に切り替わります。これは、カスタム・テーマへの変更の出血を最小限に抑えるためのものです。 このオプションを使用すると、アプリケーションはベース・テーマとしてStable CSSファイルを使用しますが、別のCSSファイルの一部の変数をオーバーライドして、ベース・テーマのルック・アンド・フィールをカスタマイズします。

別のファイルでCSS変数を上書きする利点は、新しいバージョンのJETごとにwebアプリケーションを再構築する必要がないことです。 デフォルトのRedwoodテーマが変更されるたびに、これらの更新は変更なしでアプリケーションのCSSファイルによって取得されます。

  • 次のステップに従って、webアプリケーションのテーマを切り替え、オプションでバージョン24.07以降で作成されたアプリケーションのCSS変数をオーバーライドします:
    1. ナビゲータのWebアプリケーションタブで、アプリケーションを選択し、設定タブをクリックします:
      setting-app-oic.pngの説明は以下のとおりです
      図setting-app-oic.pngの説明

    2. 「外観」でテーマを選択します:
      • 「暗い」を選択して、コンポーネントが暗いバックグラウンドに対して明るいテキストでレンダリングされる暗い色の表示にアプリケーションを切り替えます。

      • ユーザーの選択を選択して、ユーザーにアプリケーションの優先テーマを設定できるようにし、デフォルト・テーマとして明るいまたは暗いを選択します:
        app-appearance.pngの説明は以下のとおりです
        図app-appearance.pngの説明

        このオプションを選択すると、ユーザーはメニューからアプリのテーマを変更できます: 明るい、暗いまたはOS (OS設定で指定されたテーマを継承するため):
        app-appearance-userchoice.pngの説明は以下のとおりです
        図app-appearance-userchoice.pngの説明

      • デフォルトを変更した場合は、「明るい」を選択して、暗いテキスト表示でアプリケーションを明るいバックグラウンドに戻します。
    3. アプリケーションをプレビューし、選択したテーマでどのように見えるかを確認します。
    4. オプショナル: CSS変数を使用して、デフォルトのRedwoodルック・アンド・フィールを上書きします。 限られた数のアプリケーション固有のオーバーライドをベース・テーマに追加する場合は、このオプションを選択します。
      1. テーマの「上書きの作成」リンクをクリックします。
      2. 新しいredwood-overrides.cssまたはredwood-overrides-dark.cssファイルへのリンクが作成されたら、ファイルをクリックして開きます:
        app-appearance-override.pngの説明は以下のとおりです
        図app-appearance-override.pngの説明

      3. 上書きする変数を指定します。 変更できる変数のリストは、https://www.oracle.com/webfolder/technetwork/jet/jsdocs/CssVariablesOverview.htmlにあるJETドキュメントを参照してください。

        たとえば、アプリケーションのRedwoodダーク・テーマで使用されるフォントをオーバーライドするには、--oj-html-font-family変数を追加し、その値を変更します。 変数の前後に/*および*/を削除し、コメントを解除してください:
        redwood-override-dark-change.pngの説明は以下のとおりです
        図redwood-override-dark-change.pngの説明

      4. アプリケーションを確認し、変更を確認します。
  • Redwoodテーマを使用するバージョン24.01以前で作成されたアプリケーションのCSS変数をオーバーライドするには、次のステップに従います:
    1. ナビゲータの「Webアプリケーション」タブで、アプリケーションを選択し、「設定」タブをクリックします。
    2. テーマがRedwoodに設定されている場合、上書きの作成リンクをクリックします:

      redwood-override-create.pngの説明は以下のとおりです
      「図redwood-override-create.pngの説明」

      テーマをカスタマイズする場合は、「Redwoodステーブル」を選択して、今後の更新によってアプリケーションの影響を受ける可能性を減らすことをお薦めします。 このようにすると、変更したい変数のみをオーバーライドし、Redwoodテーマに対する他のすべての更新を継承します。

    3. 新しいredwood-overrides.cssファイルへのリンクが作成されたら、テーマの上書きの下のファイルをクリックして開きます:
    4. 変更する変数の値をコメント解除して変更します。

      これを行うには、変数の直前に/*を削除し、その後に*/を削除してから、変数値を更新します。 たとえば、アプリケーションのRedwoodテーマで使用されるフォントをオーバーライドするには、--oj-html-font-family変数の値をコメント解除して変更します:
      redwood-override-change.pngの説明は以下のとおりです
      図redwood-override-change.pngの説明

      上書きする変数を追加することもできます。 変更できる変数のリストは、https://www.oracle.com/webfolder/technetwork/jet/jsdocs/CssVariablesOverview.htmlにあるJETドキュメントを参照してください。

    5. アプリケーションを確認し、変更を確認します。

モバイル・アプリケーションのレッド・ウッド・テーマの上書き

モバイル・アプリでRedwoodテーマをオーバーライドする場合は、新しいCSSファイルを作成し、app-flow.jsonを更新して新しいCSSを含める必要があります。

ノート:

モバイル・アプリケーションは、PWAに優先して非推奨になりました。 既存のモバイル・アプリは、PWA対応アプリを含むモバイル・アプリがEnd of Life (EOL)に到達するまで、2024年7月までPWAとしてデプロイすることで引き続き使用できます。 「PWAとしてのモバイル・アプリケーションの実行」を参照してください。
  1. モバイル・アプリケーションで、「リソース」ノードを展開し、redwood-overrides.cssという名前のファイルをcssフォルダに追加します。
    mobile-redwood-override-css.pngの説明は以下のとおりです
    「図mobile-redwood-override-css.pngの説明」

  2. ソース・ビューでapp-flow.jsonを選択し、 "imports": { "css"セクションに次を追加します:
    "/resources/css/redwood-overrides.css"

    mobile-redwood-override-json.pngの説明は以下のとおりです
    「図mobile-redwood-override-json.pngの説明」

    または、CSSファイルをモバイル・アプリケーション設定にインポートできます。 「カスタム・コンポーネント、CSSおよびモジュール・インポートの管理」を参照してください。

コンポーネントへのカスタム・スタイルの追加

特定のコンポーネント・インスタンスの外観をカスタマイズする場合は、スタイル・クラスを作成し、アプリケーション・スタイル・シートでスタイルを定義してから、そのクラスをオーバーライドする特定のコンポーネント・インスタンスに割り当てます。

一部のスタイル・クラスは、アプリケーションに事前定義されており、ページに追加するとコンポーネントに自動的に適用されます。 事前定義された特定のスタイル・クラスが多くのOracle JETコンポーネントに適用され、正確かつ一貫して表示されるようにします。 たとえば、ページ・コード・エディタでHeaderコンポーネントのHTMLを参照する場合、次のスタイル・クラスがh1要素に適用されます: oj-flex-item oj-sm-12 oj-md-12。 Oracle JETコンポーネントで使用される事前定義済のスタイル・クラスには、oj-が付加されます。

ノート:

一般に、事前定義済クラスを上書きまたは変更したり、コンポーネントから削除することはできません。 コンポーネントにカスタム・クラスを定義して追加する場合は、コンポーネントにすでに適用されている事前定義済クラスとクラスが競合しないように注意してください。

カスタム・スタイル・クラスは、アプリケーションのapp.cssスタイル・シートで定義できます。 アプリケーションに空のapp.cssスタイル・シートがデフォルトで作成され、アプリケーション・ページのヘッダーに含まれるリンクが作成されます。 ページ・デザイナのデザイン・ビューまたはページ・コード・エディタのプロパティ・ペインで、コンポーネントにクラスを適用できます。

コンポーネントにカスタム・スタイルを追加するには、次のステップを実行します:

  1. ページ・デザイナでページを開き、カスタム・クラスで変更するコンポーネントを探します。
  2. コンポーネントに適用するカスタム・クラスの名前を入力します。

    ページ・デザイナの設計ビューでコンポーネントを選択すると、プロパティ・ペインのすべてタブにあるclassプロパティ・フィールドにカスタム・クラスの名前を追加できます。 ページ・コード・エディタでクラスの名前を直接コンポーネントに追加することもできます。


    page-designer-inspector-styles.pngの説明は以下のとおりです
    「図page-designer-inspector-styles.pngの説明」

  3. ナビゲータで、アプリケーションresourcesフォルダ内のcssノードを展開し、app.cssをクリックして、エディタでスタイル・シートを開きます。
  4. app.cssでクラスを定義します。
コンポーネントに適用されているクラスを表示するには、ページ・デザイナのページを再ロードします。