1. アプリケーション・ビルダー・ユーザーズ・ガイド
  2. テーマおよびテーマ・スタイルの使用
  3. テーマの使用
  4. テーマ・スタイルの使用

11.1.3 テーマ・スタイルの使用

テーマ・スタイルは、ベースCSSに追加されるCSSです。開発者は、テーマ・ローラー・ユーティリティを使用してアプリケーションの外観を変更できます。ユニバーサル・テーマ - 42には、テーマ・スタイルが含まれています。

親トピック: テーマの使用

11.1.3.1 テーマ・スタイルについて

テーマ・スタイルは、アプリケーションのルック・アンド・フィールを変更するためにベースCSSに追加されるCSSスタイルシートです。

ユニバーサル・テーマ - 42などの新しいテーマには、ベースCSSファイルに加えてテーマ・スタイルCSSファイルを含めることができます。テーマ・スタイルCSSファイルは、ページ・テンプレート内で#THEME_STYLE_CSS#置換文字列を使用して参照されます。Application Expressエンジンによって、この置換文字列は、テーマ・スタイル属性で定義されているCSSファイル参照と置き換えられます。テーマ・スタイルを使用して、テーマをカスタマイズしたり、別のカラー・スキームに切り替えたり、フラットな外観を適用したり、テーマをレスポンシブにします。1つのテーマに複数のテーマ・スタイルを設定し、その1つのスタイルをアクティブに設定できます。テーマ・スタイルCSSファイルは、テーマ・ローラーを使用して変更できます。

テーマ・スタイルの選択

定義後、開発者は次の方法でテーマ・スタイルを選択できます。

親トピック: テーマ・スタイルの使用

11.1.3.2 テーマ・スタイルの作成

テーマ・スタイルを作成するには、既存のスタイルを選択し、「スタイルの追加」を選択します。

テーマ・スタイルを作成するには:

  1. テーマ・ページにナビゲートします。
    1. ワークスペースのホームページで、「アプリケーション・ビルダー」アイコンをクリックします。
    2. アプリケーションを選択します。
    3. 「共有コンポーネント」をクリックします。
    4. 「ユーザー・インタフェース」で、「テーマ」を選択します。
  2. テーマを選択し、「スタイル」タブをクリックします。
  3. 「スタイルの追加」をクリックします。
    テーマ・スタイル・ページが表示されます。
  4. 「設定」で、次のステップを実行します。
    1. 名前 - テーマ・スタイルに説明的な短い名前を指定します。
    2. カレント - このスタイルが、テーマで使用されている現在のスタイルかどうかを選択します。
    3. パブリック - このスタイルが、エンド・ユーザーによって選択可能かどうかを選択します。
    4. アクセシビリティのテスト済 - このテーマ・スタイルが該当するアクセシビリティのガイドラインに従ってテストされているかどうかを指定します。Oracleで作成されたテーマ・スタイルについては、製品のVPATで準拠するアクセシビリティ・ガイドラインを参照してください。
    5. ファイルURL: テーマ・スタイルが最新の場合にすべてのページにロードされるカスケード・スタイルシート・ファイルのURLを入力します。各URLを新しい行に記述する必要があります。ファイルの縮小バージョンを指定する場合、置換文字列#MIN#を使用して.min ,を、または#MIN_DIRECTORY#を使用して minified/を通常ページ・ビューのファイルURLに含めたり、ページをデバッグ・モードで表示する場合は空の文字列を含めることができます。アプリケーションのバージョンをファイルURLに含める場合、置換文字列#APP_VERSION#にアクセスすることもできます。ここに入力したファイルURLによって、ページ・テンプレート内の#THEME_STYLE_CSS#置換文字列が置き換えられます。例を表示するには、フィールドレベル・ヘルプを参照してください。
    6. CSSクラス - このテーマ・スタイルが現在アクティブな場合は、#PAGE_CSS_CLASSES#置換文字列に追加され、アプリケーションのすべてのページに適用されるCSSクラスを入力します。
  5. 「テーマ・ローラー属性」について:
    1. 読取り専用 - テーマ・スタイルが更新されないようにする場合は、「オン」を選択します。テーマ・スタイルをテーマ・ローラーを使用して編集および上書きできるようにする場合は、「オフ」を選択します。
    2. 入力パラメータ・ファイルURL - テーマ・ローラーの使用時に、このテーマ・スタイルを生成するために使用されるLESSファイルのURLを入力します。
    3. 出力CSSファイルURL - このテーマ・スタイルについてテーマ・ローラーによって生成されるCSSファイルのURLを入力します。
    4. テーマ・ローラーJSON構成、JSON構成 - テーマ・スタイルが保存されると、テーマ・ローラーによってJSON構成が生成されます。

      構成を手動で更新することはお薦めしません。ただし、別のアプリケーションのテーマ・スタイルなど、別のテーマ・スタイルからJSON構成をコピーして手動で更新できます。

  6. コメント - ここにコメントまたはノートを入力します。これらのコメントは、アプリケーションの実行時には表示されません。
  7. 「作成」をクリックします。

親トピック: テーマ・スタイルの使用

11.1.3.3 テーマ・スタイルの編集

「テーマ」ページからテーマ・スタイルを編集します。

テーマ・スタイルを編集するには:

  1. テーマ・ページにナビゲートします。
    1. ワークスペースのホームページで、「アプリケーション・ビルダー」アイコンをクリックします。
    2. アプリケーションを選択します。
    3. 「共有コンポーネント」をクリックします。
    4. 「ユーザー・インタフェース」で、「テーマ」を選択します。
  2. テーマ名をクリックします。
  3. テーマを選択し、「スタイル」タブをクリックします。
  4. テーマ・スタイルを選択します。
  5. 現在のテーマ・スタイルを変更するには、該当する属性を編集し、「変更の適用」をクリックします。

    属性についてさらに学習するには、フィールドレベル・ヘルプを参照してください。

  6. 現在のテーマ・スタイルを削除するには、「削除」をクリックします。

親トピック: テーマ・スタイルの使用

11.1.3.4 ユーザー・インタフェース・ページでのテーマ・スタイルの選択

アプリケーションのユーザー・インタフェース・ページで、テーマ・スタイルを選択します。

ユーザー・インタフェース・ページからテーマ・スタイルを選択するには:

  1. ユーザー・インタフェース・ページにナビゲートします。
    1. ワークスペースのホームページで、「アプリケーション・ビルダー」アイコンをクリックします。
    2. アプリケーションを選択します。
    3. 「共有コンポーネント」をクリックします。
    4. 「ユーザー・インタフェース」で「ユーザー・インタフェース属性」をクリックします。
      ユーザー・インタフェース・ページが表示されます。
  2. 属性、テーマ・スタイル - 新しいテーマ・スタイルを選択します。
    テーマ・スタイル・ページが表示されます。
  3. 「変更の適用」をクリックします。

親トピック: テーマ・スタイルの使用

11.1.3.5 ユーザーによるテーマ・スタイルの選択の可能化

実行中のアプリケーションで、ユーザーがテーマ・スタイルを選択できるようにします

このことを可能にすると、実行中のアプリケーションで、「カスタマイズ」リンクが、通常は左下隅に表示されます。ユーザーが「カスタマイズ」リンクをクリックすると、ポップアップが表示され、使用可能なテーマ・スタイルがリストされます。ユーザーがテーマ・スタイルを選択すると、テーマ・スタイルがユーザー・プリファレンスとして永続的に格納され、将来のセッション中に保持されます。

ユーザーがテーマ・スタイルを選択できるようにするには:

  1. 2つ以上のテーマ・スタイルを含むアプリケーションを作成します。
  2. アプリケーションのユーザー・インタフェース・ページに移動します。
    1. 「共有コンポーネント」をクリックします。
    2. 「ユーザー・インタフェース」で「ユーザー・インタフェース属性」をクリックします。
      ユーザー・インタフェース属性ページが表示されます。
  3. 「属性」で、「テーマ・スタイルを選択できるようにエンド・ユーザーを有効化」を有効にします。
  4. 「変更の適用」をクリックします。

親トピック: テーマ・スタイルの使用