1. SCMのモデリング構成
  2. ユーザー・インタフェースの変更方法
機械翻訳について

ユーザー・インタフェースの変更方法

モデルのユーザー・インタフェースを作成した後は、アプリケーションのニーズにあわせて変更できます。

「概要」タブでは、使用するテンプレート・マップを確認し、その適用パラメータを設定できます。 「デザイン」タブのWYSIWYGエディタでは、ユーザー・インタフェースで要素を表示および操作できます。

ユーザー・インタフェースを変更するには、次の手順を実行します:

  • 生成されたユーザー・インタフェース項目のロケーションの変更

  • ユーザー・インタフェースへのモデル・ノードの追加

  • ユーザー・インタフェースの外観を向上させる基本要素の追加

  • ユーザー・インタフェース要素の表示の制御

WYSIWYGエディタの使用

「設計」タブには、ユーザー・インタフェース内のページを制御するための「ページ」ペイン、モデル構造ノードまたは基本ユーザー・インタフェース要素を追加するための「リソース」ペイン、および「ページ」ペインで選択したページに対する変更の結果を対話形式で表示できる「WYSIWYG」エディタ・リージョンがあります。 WYSIWYGリージョンのモデル関連品目のラベルには、モデル自体のノードの摘要の値が反映されます。

各ユーザー・インタフェース項目には、シェブロン・アイコンで示される非表示の編集コントロール・バーがあります。 chevronをクリックして編集するユーザー・インタフェース項目を選択し、編集コントロール・バーを開きます。

  • 鉛筆アイコンをクリックして、ページ品目のプロパティを編集します。

  • 「X」アイコンをクリックして、ユーザー・インタフェース・ページからページ品目を削除します。

  • 矢印アイコンをクリックして、ページ上で品目を上下に移動します。

ユーザー・インタフェース品目のプロパティは、品目のタイプによって異なります。 よく使用されるプロパティは次のとおりです:

  • 品目の内部「名前」。実行時に表示されません。

  • ユーザー・インタフェース項目が表す「関連モデル・ノード」。 名前は読み取り専用です。 ノードの詳細を表示するには、情報アイコンをクリックします。

  • ユーザー・インタフェース項目の制御テンプレートを選択するための「テンプレート」オプション。

  • 実行時に品目に対して表示される「ページ・キャプション」。

  • ユーザー・インタフェース品目の表示条件を定義するための「実行時条件」オプション。

生成されたユーザー・インタフェース品目のロケーションの変更

ユーザー・インタフェースのページ品目のデフォルトのロケーションは、ユーザー・インタフェースの作成時に選択したユーザー・インタフェース・テンプレート・マップによって決まります。 デフォルトのロケーションを変更できます。

ページ品目のロケーションに次の変更を加えることができます:

  • 編集コントロール・バーの矢印アイコンをクリックして、ページ上で品目を上下に移動します。

  • ページ品目を切り取って貼り付けて移動することはできません。 かわりに、元のページから品目を削除し、別のページに追加します。

  • ステップ・バイ・ステップまたは動的ツリーのユーザー・インタフェースでは、「ページ」ペインから新しいページを追加し、「構造」ペインから新しいノードをページに追加できます。 ノードを選択して「ページ品目として追加」アクションをクリックすると、新しいページ品目がWYSIWYGペインで現在選択されている項目のすぐ下に追加されます。

  • ユーザー・インタフェース・ページの順序を変更するには、「ページ」ペインでページを選択し、ツールバーの矢印アイコンをクリックします。

  • ユーザー・インタフェース・ページを削除するには、「ページ」ペインでページを選択し、ツールバーの「X」アイコンをクリックします。 最初に、ユーザー・インタフェースに保持するページ品目がページに含まれていないことを確認してください。ただし、後で別の場所に追加することもできます。

  • ユーザー・インタフェース・ページの生成されたタイトルを変更するには、編集コントロールがあるページを選択するか、「ページ」ペインでページを選択し、「ページを編集」ダイアログ・ボックスで「ページ・キャプション」を変更します。

ユーザー・インタフェースへのモデル・ノードの追加

生成されたユーザー・インタフェースの作成時に作成されるコンフィギュレータ・モデルを表すユーザー・インタフェース・ページおよびユーザー・インタフェース・ページ項目のセットを変更できます。

生成されたユーザー・インタフェースでは、ユーザー・インタフェース品目に品目ベースのモデル体系が反映されます:

  • ユーザー・インタフェース・ページは、モデル・ルートの直接の子である品目ベースのオプション区分ごとに生成されます。 補足構造機能はモデル構造のルート・ノードに作成する必要があるため、これらの機能はユーザー・インタフェースのルート・ページに生成されます。ただし、かわりに他のページに配置できます。

  • ユーザー・インタフェース・ページ品目は、品目ベースの標準品目または補足構成機能ごとに生成されます。

  • ユーザー・インタフェース制御テンプレートは、エンド・ユーザーがモデル・ノードと対話するためのユーザー・インタフェースのコントロールを提供します。

1つの操作でページ品目をページ間で移動することはできません。 かわりに、元のページから削除し、別のページに追加します。 モデル・ノードであるページ品目の場合は、リソース・ペインの構造タブから追加する必要があります。 モデル・ノードのページ要素を追加するには:

  1. 新しいページ品目を追加するロケーションを選択します。 ページ品目は、現在選択されているページelement.(If the currently selected user interface element is a layout region, then the new page item is added as the last item in the layout region.)の下に追加されます ページ要素を選択する際のサイズとロケーション、および追加したページ品目の配置への影響を考慮します。

    ページ要素を選択するには、その編集コントロールのChevronアイコンをクリックします。 コンテキスト・ラベルは、編集コントロールに関連付けられているページ要素の種類を示します。

  2. リソース・ペインの構造タブのモデル構造ツリーで、ページに追加するノードを選択します。 目的のモデル・ノードを簡単に検索できるように、ツリーを説明で表示できます。

  3. コンテキスト・メニューまたは「ページに追加」メニューから、使用可能なアクションを選択して、ノードをページに追加します。

    • 「ページ品目として追加」は、ノードをページ品目として追加します。このページでは、別の制御テンプレートおよび表示条件を選択できます。

    • 「ヘッダー・リージョンとして追加」は、ノードをヘッダー・リージョンとして追加し、ノード名をセクション・ヘッダーとして表示し、リージョンの制御テンプレートおよび表示条件を設定できます。 セクション・ヘッダーの下にページ品目としてノードを追加したり、他のノードやユーザー・インタフェース要素を追加したりできます。

    • 「レイアウト・リージョンとして追加」は、ノードをレイアウト・リージョンとして追加します。これにより、リージョンの制御テンプレートおよび表示条件を設定できます。 リージョンのフォームまたはスタック・レイアウトを選択できます。

    ノードまたはその子の表示名はモデル自体のノードの摘要テキストを反映しているため、ノードの表示名を変更できません。

ノート:

オートコンプリート・プロセスを実行する前に値または選択を行う必要がある(実行時に「終了」または「終了してレビュー」をクリックすることでトリガーされる)ノードをモデルに指定できます。 ノード詳細の「プレゼンテーション」タブで「オートコンプリートの前提条件」チェック・ボックスを選択すると、「コンフィギュレータ・モデルの編集」ページの「構造」ビューで、必要な値が欠落している場合、ユーザー・インタフェースのノードの横にアスタリスクが表示されます。 このインジケータはユーザー・インタフェースに表示され、ユーザー・インタフェースではなくモデルの構造およびルールの一部であるため、ユーザー・インタフェースの一部として変更することはできません。

基本要素の追加

生成されたユーザー・インタフェースに自動的に挿入されるモデル依存要素に加えて、モデル構造とは無関係な基本要素を追加して、エンド・ユーザーのユーザー・インタフェースの外観または使いやすさを向上できます。

モデル・ノードのページ要素を追加するには:

  1. 新しいエレメントを追加するロケーションを選択します。 要素は、現在選択されているページ要素の下に追加されます。

  2. 「リソース」ペインの「要素」タブのリストから、ページに追加する要素を選択します。

  3. コンテキスト・メニューまたは「要素」ツールバーで、「ページに追加」をクリックします。

  4. 追加した要素の「追加」ダイアログで、「内容」グループに目的のプロパティを入力します。

    • 「テキスト」要素の場合は、次のように入力します:

      • テキスト: 表示するテキスト。

      • インライン・スタイル: CSS式。 例: 

        font-family:Arial,sans-serif;font-weight:bold;font-style:italic;color:#cc33cc;font-size:24pt

      • 「スタイル・クラス」 CSSクラス・セレクタ。 スタイル・シートは、実行時にユーザー・インタフェースからアクセスできる必要があります。 例: 

        background-yellow

    • 「イメージ」要素の場合は、次のように入力します:

      • イメージ: コンフィギュレータ環境にアップロードされるイメージ・ファイル。

      • 代替テキスト: イメージのアクセシビリティ・テキストを提供します。

      • インライン・スタイル: CSS式。 例: 

        position:relative;top:10px;left:-200px

    • 「スペーサ」要素の場合は、次のように入力します:

      • 幅: スペーサの幅(ピクセル単位)。 pxを数値に追加しないでください。

      • 高さ: スペーサの高さ(ピクセル単位)。 pxを数値に追加しないでください。

      • インライン・スタイル: CSS式。 例: 

        position:relative;left:-150px;background-color:gray

    • IFrame要素の場合は、次のように入力します:

      • URL: フレーム内に出力を生成するオプションのURLパラメータを含む、アクセス可能な内部または外部webサイトのURL。 例: 

        https://www.mysite.com:1000/perform?taskID=12345678

        IFrame要素は、ユーザー・インタフェースの独自のレイアウト・リージョンに配置する必要があります。

        URLが現在のドメイン外にある場合は、Cross-Origin Resource Sharing (CORS)を使用して、あるドメインで実行されているクライアント・アプリケーションが、HTTPリクエストを使用して別のドメインからリソースを取得できるようにする必要があります。 詳細は、CORSに関する関連トピックを参照してください。

      • 幅: IFrameの幅(ピクセル単位)。 pxを数値に追加しないでください。

      • 高さ: IFrameの高さ(ピクセル単位)。 pxを数値に追加しないでください。

      • インライン・スタイル: CSS式。

  5. 基本要素のデフォルトの関連モデル・ノードを変更するには、「関連モデル・ノード」フィールドの「検索と選択」コントロールをクリックし、ユーザー・インタフェース・ページに対してアクセス可能なノードを選択します。 関連付けられたモデル・ノードを変更すると、モデルの他の部分の値またはイベントに基づいて、基本的なユーザー・インタフェース要素に影響を与えることができます。 次に例を示します。

    • 構成セッション中にテキスト機能に入力された値を、IFrame基本要素のURLパラメータの値の一部として使用できます。 テキスト機能をIFrameの関連モデル・ノードとして設定し、式#{amn.value}を使用してそのノードの値にアクセスします。 例: 

      https://www.mysite.com:1000/perform?taskID=#{amn.value}

    • 構成セッション中にオプション・クラスまたはオプション機能の値の選択を使用して、Image基本要素を表示するかどうかを条件付きで制御できます。 オプション機能をイメージの関連モデル・ノードとして設定し、選択の出現によってオプション機能が値にバインドされている場合にイメージの表示条件をTRUEに設定します。 例:

      • オブジェクト: 関連付けられたモデル・ノード

      • 属性: IsBound

      • 値: TRUEと等しい

ユーザー・インタフェースの変更に関する制限事項

ユーザー・インタフェースを変更する方法には制限があります。

  • ユーザー・インタフェースの作成時に選択したテンプレート・マップは変更できません。 したがって、ユーザー・インタフェースのナビゲーション・スタイルは変更できません。

  • モデル・ノードを直接表すユーザー・インタフェース項目の「関連モデル・ノード」は変更できません。 したがって、特定のユーザー・インタフェース項目で表されるノードは変更できません。 ただし、ユーザー・インタフェース品目に選択したユーザー・インタフェース・コントロール・テンプレートを変更して、その外観を変更できます。

  • モデルに子参照モデルがある場合、実行時にどの子モデルのユーザー・インタフェースを使用するかを明示的に指定することはできません。 子モデルのユーザー・インタフェースは、その適用パラメータに基づいて選択されます。

  • 構成要約ページは変更できません。

関連トピック