1. SCMのモデリング構成
  2. UI要素の変更方法
機械翻訳について

UI要素の変更方法

モデルのUIを生成した後、そのモデル内の個々のUI要素を変更して、アプリケーションのニーズに合うようにできます。

UI要素の表示の制御

UIのどの要素を表示するか、どの条件下に表示されるかは、いくつかの方法で制御できます。

UI要素の表示を制御する最も柔軟な方法は、ページ以外のすべての要素に適用される表示条件を使用することです。

表示条件を設定するには:

  1. UIの要素を選択し、その編集コントロールをクリックしてそのプロパティ・ダイアログ・ボックスを開きます。

  2. 「実行時条件」で、「表示」コントロールの値を「常に」から「条件付き」に変更します。

  3. これで、オプションの「条件」グループが提供されます。 モデル内のオブジェクトの一部の属性に値が指定されていることを指定するオプションを選択して、要素の表示条件を定義します。 指定した属性にその値がある場合、定義しているUI要素は実行時に、またはモデルをテストしたときに表示されます。

  4. 値が表示条件をトリガーする「オブジェクト」を選択します。 デフォルトのオブジェクトは、UI要素自体に関連付けられたモデル・ノードです。 「その他のモデル・ノード」を選択すると、そのノードを選択するための検索コントロールが提供されます。 「構成セッション」を選択した場合、「属性」オプションは、モデル・ノードの属性ではなく、実行時に構成セッションの属性をまとめて一覧表示します。

  5. 表示条件がトリガーされるかどうかを決定する値を持つ「属性」を選択します。

  6. 選択した属性の実行時間「値」、表示条件の最後のオプションで選択した値「等しい」または「次と等しくない」のどちらを選択します。

たとえば、エンド・ユーザーが「カラー」というオプション機能に対してオプション「赤色」を選択したときに、UIにメッセージYou picked red.を表示するとします。 次の操作を行います:

  1. 「カラー」機能の近くに配置されたテキスト要素をUIに追加します。

  2. テキスト要素のプロパティを編集し、テキスト・フィールドにYou picked red.と入力します。

  3. 「表示」の「条件付き」を選択します。

  4. オブジェクト「その他のモデル・ノード」を選択し、オプション機能「カラー」でサプリメンタル・ノード「赤色」を検索して選択します。

  5. 属性SelectionStateを選択します。

  6. 演算子「等しい」および属性値「選択済」を選択します。

  7. 「テスト・モデル」をクリックします。 オプション機能色にナビゲートし、赤を選択します。 メッセージYou picked red.が表示されます。 エンド・ユーザーには、実行時に同じメッセージが表示されます。

UIにモデル・ノードが表示されないようにする他の方法もあります:

  • モデルの特定の構造ノードを新しいUIに表示しないようにするには、そのノードの構造詳細ペインの「UIプレゼンテーション」タブで「ユーザー・インタフェースに表示」チェック・ボックスの選択を解除します。 この設定は、この設定を変更する前に生成したUIには影響しませんが、変更後に生成するすべてのUIに影響します。

  • モデルの編集時に「ユーザー・インタフェース」タブの詳細概要セクションにある「実行時コンフィギュレータでの除外品目の非表示」チェック・ボックスを選択すると、実行時にUIでエンド・ユーザーに表示される選択肢の数を最小化できます。 この設定はモデル構造から独立しており、設定した特定のUIにのみ影響します。 実行時に、オプションまたは品目がコンフィギュレータ・ルールによる選択から除外されると、UIには表示されません。

UI要素キャプションの変更

UI式言語を使用して、特定のUI品目のデフォルト品目表示名をオーバーライドできます。DisplayNameを除いて、静的テキストと関連するすべてのモデル・ノード属性の組合せに置き換えます。

次の表に、UI式言語を使用する影響の例を示します。

UIキャプションの要素

例

モデル構造内の関連付けられたモデル・ノード

名前: カー・ホイール

説明: ホイール

UIのデフォルト表示名

ホイール

UI式

 
Item Name: #{amn.name} - Item Description: #{amn.description}

実行時に変更された表示名

品目名: カー・ホイール - 品目摘要: ホイール

UI要素のデフォルトの表示名を上書きするには:

  1. UI要素を選択します。

    次のUI要素を変更できます:

    • ページ要素のページ・キャプション

    • ヘッダー・リージョン要素のヘッダー・リージョン・キャプション

    • ページ品目要素のページ品目のキャプション

    • ページ品目の一部にできるリスト品目要素のリスト品目のキャプション

    ノート: UIキャプション要素のデフォルト表示名を上書きする場合、ノード・プロパティDisplayNameは、関連付けられたモデル・ノードには使用できません。

  2. UI要素のEdit(編集)コントロールをクリックします。

  3. 編集ダイアログ・ボックスで、UI要素のキャプションのUI式を入力します。

  4. 編集ダイアログでOKをクリックし、UIを保存して、「テスト・モデル」をクリックします。

  5. テストUIでは、上書きする式テキストとともにキャプションが表示されます。

UIファセットの使用

特定のUIページ品目のヘッダーのUIファセットに基本的なUIテキスト要素を追加して、実行時にエンド・ユーザーに表示される情報を補足できます。

UIファセットは、UI品目の関連モデル・ノードに関連する追加のUI品目を配置したり、関連するモデル・ノードからアクセス可能なUI品目を配置できるUI品目の領域です。 次のコンフィギュレータ・モデル・ノード・タイプには、UIファセットを含むUIテンプレートがあります:

  • オプション区分

  • オプション機能

  • ブール機能

ファセットを持つテンプレートは、次のUIページ品目で使用できます:

  • ファセット付きのブール機能

  • ファセットがあるチェック・ボックス・グループ

  • 数量およびファセットがあるチェック・ボックス・グループ

  • ファセットを含む選択リスト

  • ファセットを持つ品目インスタンス管理表

  • ファセット付きラジオ・ボタン・グループ

  • 数量およびファセットのあるラジオ・ボタン・グループ

ファセットを持つテンプレートには、次のデフォルト関係に配置されたレイアウト・リージョンが含まれます:

Header: template with facets
Messages facet:  Compact Stack Layout template containing:
    Basic UI text elements (in vertical sequence)
Information facet: Flow Layout template containing:
    Basic UI text elements (in horizontal sequence)
Items or options of the associated model node

レイアウト・リージョンは、目的の動作に適していない場合に変更できます。

メッセージ・ファセットにスタックした2つのテキスト要素と、情報ファセットのフロー内の4つのテキスト要素を示す例:

System Memory
    Memory mixing requires firmware version: XXYY123
    Your selection of DIMMs exceeds the maximum of: 64
  Memory (GB) Included: 0 | Minimum Required: 64 | Maximum Allowed: 2048 | Total Configured: 2608 
    [0] A8V234 Four 8 GB DIMM
    [0] A8V567 Four 16 GB DIMM
    [0] A8V890 Four 32 GB DIMM
    [18] A8V999 Four 64 GB DIMM

ページ品目にUIファセットを使用するには:

  1. ファセットを使用できる関連モデル・ノードのページ品目を選択して編集します。

  2. ファセットを含むいずれかのテンプレートを適用します。 OKをクリックすると、ファセットがページ品目に追加されます。

  3. ヘッダーの下の最初のレイアウト・リージョン(メッセージ・ファセット)を選択します。 このリージョンのテンプレートはコンパクト・スタック・レイアウトです。 テンプレートを変更しないでください。

  4. リソース・ペインの「UI要素」タブのリストから、「テキスト」要素を選択し、コンテキスト・メニューまたは「UI要素」ツールバーから「ページに追加」をクリックします。

  5. ファセットに挿入した基本テキスト要素を編集します。 「テキスト」フィールドに静的テキストを追加して、関連するモデル・ノードの構成に関するメッセージをエンド・ユーザーに提供します。

  6. UI式言語を使用して、関連するモデル・ノードまたは関連するモデル・ノードからアクセス可能なノードに関する情報を動的に表示できます。 ファセットでUIテンプレートを使用できるノード・タイプに対応する式言語属性を使用する必要があります。

    たとえば、関連するモデル・ノードが最小選択数が2、最大選択数が5のオプション機能であり、メッセージ・ファセットの3つの基本テキスト要素のテキスト・フィールドに次の3つの式を入力したとします:

    Number of options you selected: #{amn.selectedCount}
Maximum number of selections allowed: #{amn.maxSelected}
Minimum number of options selected?: #{ amn.minSelectionSatisfied}

    モデルをテストして1つのオプションを選択すると、ファセットに次のテキストが表示されます:

    Number of options you selected: 1
Maximum number of selections allowed: 5
Minimum number of options selected?: false

  7. ヘッダーの下にある2番目のレイアウト・リージョン(情報ファセット)を選択します。 このリージョンのテンプレートはフロー・レイアウトです。 テンプレートを変更しないでください。

  8. メッセージ・ファセットについて説明したステップを繰り返して、情報ファセットの基本テキスト要素に静的テキストまたは動的テキストを追加します。

  9. 変更をUIに保存し、「テスト・モデル」をクリックします。

注意: UI品目をファセットに追加した後、ページ品目のテンプレートをファセットなしでテンプレートに変更すると、ファセットは削除され、ファセットに追加したすべてのUI品目は失われます。

関連トピック