Themes を使用する

Kanzi は、Theme をIDとして使用し、その Theme に関連付けられたリソースを選択します。Theme のリソースを定義しない場合、Kanzi はその Theme Group のリソースIDのデフォルト値を使用します。

Kanzi アプリケーションのテーマ設定方法を学ぶには、チュートリアルを完了してください。チュートリアル: アプリケーションにテーマを適用する を参照してください。

Theme を作成する

Theme を作成するには:

  1. Library > Themes で、Theme を追加したい Theme Group をダブルクリックします。

    Kanzi Studio は Theme Editor で Theme Group を開きます。

  2. Theme Editor で Create Theme をクリックし、Theme の名前を入力して、OK をクリックします。

    ../../_images/create-theme.png

Theme の名前を変更する

既存の Theme の名前を変更するには:

  1. Library > Themes で、名前を変更したい Theme を含む Theme Group をダブルクリックします。

    ../../_images/color-theme-group-in-library.png
  2. Theme Editor で、名前を変更したい Theme のヘッダーを右クリックし、Rename を選択します。

    ../../_images/rename-theme.png
  3. Theme の新しい名前を入力し、OK をクリックします。

    ../../_images/rename-theme-dialog.png

アプリケーション Theme を設定する

アプリケーション Theme を設定する方法は次のとおりです。

  • To set the Theme that your application uses when a user launches the application or that you want to see in the Kanzi Studio Preview:

    • Library > Themes で、使用したい Theme を含む Theme Group を選択し、Selected Theme を使用したい Theme に設定します。

      ../../_images/color-theme-group-in-library.png ../../_images/properties-startup-theme.png
    • Dictionaries ウィンドウで Locales and Themes をクリックし、プロジェクト内の各 Theme Group に対して使用したい Theme を選択します。

      ../../_images/dictionaries-select-theme.png
  • トリガーを使用して Theme を設定するには、アプリケーションテーマを設定するために使用したいトリガー内で、Theme: Activate Theme アクションを作成し、使用したい Theme を設定します。

    ../../_images/triggers-activate-theme.png ../../_images/triggers-activate-theme-set-theme.png

Theme Group にリソースを手動で追加する

リソースを Theme Group に追加する最も速い方法は、Node Tree で Add Resources to a Theme Group コマンドを使用することです。プロジェクトで使用されるリソースを Theme Group に追加する を参照してください。

../../_images/add-resource-to-theme-group.png

Theme Group にリソースを手動で追加するには:

  1. Library > Themes で、手動でリソースを追加したい Theme を含む Theme Group をダブルクリックします。

    Kanzi Studio は Theme Editor で Theme Group を開きます。

    ../../_images/export-example-library-color.png
  2. Theme Editor で + Add Resource をクリックし、選択します:

    • Create を選択し、作成したいリソースのタイプを選択します。

    • Add Existing を選択し、プロジェクト内に既に存在するリソースを選択します。

    ../../_images/add-resource1.png
  3. そのリソースに使用したいリソースIDの名前を入力し、OK をクリックします。

  4. 各 Theme セットリソースの列の Theme Editor で、作成したリソースIDに使用したいリソースを設定します。

  5. Node Tree で、作成したリソースIDを使用したいノードを選択し、Properties でリソースを指すプロパティを < Resource ID > に設定し、Theme Editor に作成したリソースIDを入力します。

Theme Group からリソースIDを削除する

Theme Group からリソースIDを削除するには、

  • プロジェクトで使用されていないリソースIDを削除するには、Clean をクリックし、削除したいリソースIDを選択して、OK をクリックします。

    ../../_images/delete-unused-resource-ids.png
  • リソースIDを削除するには、リソースIDを右クリックして Delete Resource ID を選択します。

  • 複数のリソースIDを削除するには、Ctrl または Shift キーを押して削除したいリソースIDを選択し、Delete キーを押します。

Theme をローカライズする

Kanzi は、テーマ付きアプリケーションをローカライズすることを可能にします。

テーマをローカライズするには:

  1. ローカライズしたい各テーマについて、ローカライズしたいテキストノードを含むコンテンツからプレハブを作成します。ノードプレハブの作成と使用 を参照してください。

    ../../_images/table-rpm-gasoline-hybrid-prefabs.png
  2. テキストリソースをローカライズしてください。

    1. Prefabs で、前のステップで作成したプレハブを選択し、それらのリソースをローカライゼーションテーブルに追加します。

      ローカライゼーションテーブルにリソースを追加する を参照してください。

      ../../_images/add-resources-to-localization-table.png ../../_images/localization-table-add.png
    2. Library > Localization で、前のステップで作成したローカライゼーションテーブルをダブルクリックして Localization Editor で開き、ローカライズしたいロケールを追加し、テキストリソースをローカライズします。テキストリソースのローカライズ を参照してください。

      ロケールを追加するには、+ Create Locale をクリックし、ロケールの名前を入力して、OK をクリックします。

      ../../_images/localization-editor-with-localized-text.png
  3. Prefab View ノードを使用して、ローカライズされたコンテンツを表示します。

    1. Prefabs の中で、ローカライズされたコンテンツを表示したいノードの下に Prefab View ノードを作成し、Properties で Prefab Template プロパティを追加して、ステップ1で作成したプレハブの1つに設定します。

      Prefab View がインスタンス化するプレハブを動的に変更できるようにするためには、Prefab View ノードを使用しなければなりません。Prefab Placeholder ノードと Prefab View ノード を参照してください。

      ../../_images/table-rpm-prefab-view-in-project.png ../../_images/displayed-prefab-in-properties.png
    2. Prefabs で、前のステップで作成した Prefab View ノードを右クリックし、Add Resources to a Theme Group を選択します。

      ../../_images/add-resource-to-theme-group.png
    3. Add Resources to a Theme Group ウィンドウで:

      • Theme Group を、リソースを追加したいテーマグループに設定します。

        テーマグループは、どのテーマがどのリソースを使用するかに関する情報を含んでいます。

      • Resource ID をプロジェクトの文脈において意味のある名前にリネームしてください。

      Add をクリックします。

      Kanzi Studio は、Value 列に表示されるプレハブを指すリソースIDをテーマグループに追加します。リソースを Theme Group に追加する Prefab View ノードで、Kanzi Studio は Prefab Template プロパティの値をリソースIDに設定します。

      ../../_images/add-displayed-prefab-to-theme-group.png ../../_images/table-rpm-displayed-prefab.png
    4. (オプション) In the Prefabs copy the Prefab View node you created in step 1 to the places where you want to show the same content.

      ../../_images/table-rpm-prefab-views-in-project.png
    5. Library > Themes で、リソースを追加したテーマグループをダブルクリックし、ステップ3で作成したリソースIDの Theme Editor で、各テーマに対して正しいプレハブを選択します。

      ../../_images/table-rpm-in-theme-editor.png
  4. プロジェクト内のローカライゼーションテーブルとテーマグループのリソース辞書を表示するために、Dictionaries ウィンドウで Locales and Themes をクリックし、異なるロケールとテーマを選択して、Preview でローカライズされたテーマを確認します。

    ../../_images/dictionaries-set-locale.png ../../_images/dictionaries-set-car-variant-theme.png

複数の Kanzi Studio プロジェクトを Kanzi アプリケーションに統合してテーマを使用する

複数の Kanzi Studio プロジェクトを Kanzi アプリケーションに統合する際にテーマを使用するには、次のいずれかの方法でアプリケーションのメインプロジェクトの Screen ノードからテーマグループにアクセスできるようにする必要があります。

  • アプリケーションのメインプロジェクトでテーマグループを定義します。

  • 参照プロジェクトからテーマグループを、Screen ノードを含むメインプロジェクトにマージします。その後、リソースIDを使用して、参照プロジェクトのテーマグループ内のリソースにアクセスできます。プロジェクトのマージ を参照してください。

  • Rightware サポートチームに連絡し、複数の Kanzi Studio プロジェクトとkzbファイルでテーマを使用できるようにする Kanzi Engine プラグインをリクエストしてください。サポートリクエストの提出 を参照してください。

関連項目

チュートリアル: アプリケーションにテーマを適用する

アプリケーションのテーマ設定

Themes のエクスポート

トリガーの使用

ノードプレハブの使用

Kanzi Studio プロジェクトを Kanzi アプリケーションに統合する