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

WYSIWYGエディタの使用

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

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

鉛筆アイコンをクリックして、ページ品目のプロパティを編集します。
Xアイコンをクリックして、UIページからページ品目を削除します。
矢印アイコンをクリックして、ページ上で品目を上下に移動します。

UI品目のプロパティは、品目のタイプに応じて異なります。よく使用されるプロパティは次のとおりです:

品目の内部「名前」。実行時に表示されません。
UI品目が表す「関連モデル・ノード」。名前は読み取り専用です。ノードの詳細を表示するには、情報アイコンをクリックします。
UI品目のコントロール・テンプレートを選択するための「テンプレート」オプション。
実行時に品目に対して表示される「ページ・キャプション」。
UI品目の表示条件を定義するための「実行時条件」オプション。

生成されたUI品目のロケーションの変更

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

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

編集コントロール・バーの矢印アイコンをクリックして、ページ上で品目を上下に移動します。
ページ品目を切り取って貼り付けて移動することはできません。かわりに、元のページから品目を削除し、別のページに追加します。
ステップ・バイ・ステップまたは動的ツリーUIでは、ページ・ペインから新しいページを追加し、構造ペインから新しいノードをページに追加できます。ノードを選択して「ページ品目として追加」アクションをクリックすると、新しいページ品目がWYSIWYGペインで現在選択されている項目のすぐ下に追加されます。
UIページの順序を変更するには、ページ・ペインでページを選択し、ツールバーの矢印アイコンをクリックします。
UIページを削除するには、ページ・ペインでページを選択し、ツールバーのXアイコンをクリックします。最初に、UIに保持するページ品目がページに含まれていないことを確認します。ただし、後から別の場所にページ品目を追加できます。
生成されたUIページのタイトルを変更するには、編集コントロールがあるページを選択するか、ページ・ペインでページを選択し、「ページを編集」ダイアログ・ボックスで「ページ・キャプション」を変更します。

UIへのモデル・ノードの追加

コンフィギュレータ・モデルを表すUIページおよびUIページ品目のセットを変更できます。これらは、生成されたUIの作成時に作成されます。

生成されたUIでは、UI品目に品目ベースのモデル構造が反映されます:

UIページは、モデル・ルートのすぐ下の子である品目ベースのオプション区分ごとに生成されます。補足構造機能はモデル構造のルート・ノードに作成する必要があるため、これらの機能はUIのルート・ページに生成されます。ただし、他のページに配置することもできます。
UIページ品目は、品目ベースの標準品目または補足構成機能ごとに生成されます。
UIコントロール・テンプレートは、エンド・ユーザーがモデル・ノードと対話するためのコントロールをUIで提供します。

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

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

ページ要素を選択するには、その編集コントロールのChevronアイコンをクリックします。コンテキスト・ラベルは、編集コントロールに関連付けられているページ要素の種類を示します。
リソース・ペインの構造タブのモデル構造ツリーで、ページに追加するノードを選択します。目的のモデル・ノードを簡単に検索できるように、ツリーを説明で表示できます。
コンテキスト・メニューまたは「ページに追加」メニューから、使用可能なアクションを選択して、ノードをページに追加します。
- 「ページ品目として追加」は、ノードをページ品目として追加します。このページでは、別の制御テンプレートおよび表示条件を選択できます。
- 「ヘッダー・リージョンとして追加」は、ノードをヘッダー・リージョンとして追加し、ノード名をセクション・ヘッダーとして表示し、リージョンの制御テンプレートおよび表示条件を設定できます。セクション・ヘッダーの下にページ品目としてノードを追加したり、他のノードやUI要素を追加することもできます。
- 「レイアウト・リージョンとして追加」は、ノードをレイアウト・リージョンとして追加します。これにより、リージョンの制御テンプレートおよび表示条件を設定できます。リージョンのフォームまたはスタック・レイアウトを選択できます。
ノードまたはその子の表示名はモデル自体のノードの摘要テキストを反映しているため、ノードの表示名を変更できません。

ノート:

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

基本的なUI要素の追加

生成されたUIに自動的に挿入されるモデル依存の要素に加えて、モデル体系に依存しない基本的なUI要素を追加して、エンド・ユーザーのUIの外観や使いやすさを向上できます。

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

新しいUI要素を追加するロケーションを選択します。要素は、現在選択されているページ要素の下に追加されます。
リソース・ペインの「UI要素」タブのリストから、ページに追加するUI要素を選択します。
コンテキスト・メニューまたはUI要素ツールバーから、「ページに追加」をクリックします。
追加した要素の「追加」ダイアログで、「内容」グループに目的のプロパティを入力します。
- 「テキスト」要素の場合は、次のように入力します:
  - テキスト: 表示するテキスト。
  - インライン・スタイル: CSS式。例:
```
font-family:Arial,sans-serif;font-weight:bold;font-style:italic;color:#cc33cc;font-size:24pt
```
  - 「スタイル・クラス」 CSSクラス・セレクタ。スタイル・シートは、実行時にUIからアクセスできる必要があります。例:
```
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式。
基本UI要素のデフォルトの関連モデル・ノードを変更するには、「関連モデル・ノード」フィールドの検索と選択コントロールをクリックし、UIページに相対的にアクセス可能なノードを選択します。関連するモデル・ノードを変更すると、モデルの他の部分の値またはイベントに基づいて、基本的なUI要素に影響を与えることができます。次に例を示します。
- 構成セッション中にテキスト機能に入力された値を、IFrame基本要素のURLパラメータの値の一部として使用できます。テキスト機能をIFrameの関連モデル・ノードとして設定し、UI式#{amn.value}を使用してそのノードの値にアクセスします。例:
```
https://www.mysite.com:1000/perform?taskID=#{amn.value}
```
- 構成セッション中にオプション・クラスまたはオプション機能の値の選択を使用して、Image基本要素を表示するかどうかを条件付きで制御できます。オプション機能をイメージの関連モデル・ノードとして設定し、選択の出現によってオプション機能が値にバインドされている場合にイメージの表示条件をTRUEに設定します。例:
  - オブジェクト: 関連付けられたモデル・ノード
  - 属性: IsBound
  - 値: TRUEと等しい

UIの変更に関する制限事項

UIの変更方法には制限があります。

UIの作成時に選択したUIテンプレート・マップは変更できません。したがって、UIのナビゲーション・スタイルは変更できません。
モデル・ノードを直接表すUI品目の関連モデル・ノードは変更できません。したがって、特定のUI品目によって表されるノードは変更できません。ただし、UI品目に対して選択したUI管理テンプレートを変更して、その外観を変更できます。
モデルに子参照モデルがある場合、実行時に使用する子モデルのUIを明示的に指定することはできません。子モデルのUIは、適用パラメータに基づいて選択されます。
構成要約ページは変更できません。