ページへのフラグメントの作成および追加

1つ以上のフラグメントを作成して、ページのセクションを定義します。たとえば、このページには従業員とマネージャ用の個別のタブがあり、いずれかのタブ・コンテンツ用に1つずつ2つのフラグメントを作成できます。作成するフラグメントの数は、アプリケーション、複数のページ間でページの一部を再利用する程度、および複雑なページを単純化する範囲によって異なります。

フラグメントを作成する方法は数多くあります: 次のように、アプリケーションの「Webアプリケーション」ビューまたは「ソース」ビューの「フラグメント」ノードの横にある「フラグメントの作成」アイコン()を使用して作成できます:

図fragment-create-nav.pngの説明

または、コンポーネント・パレットの「フラグメント」の横にあるをクリックして、ページの設計時にフラグメントを作成します。ページ上のフラグメント・コンテナから開始し、フラグメントを追加することもできます。ここでは、次のことを行います:

ナビゲータでwebアプリケーションを開き、フラグメントを使用するページを開きます。フラグメントは、ページ、その他のフラグメント、フォーム・テンプレートとフィールド・テンプレート、動的コンテナ、リスト・アイテムと折りたたみパネルのコンポーネントで最もよく組み込まれています。
コンポーネント・パレットからフラグメント・コンテナをキャンバスにドラッグし、フラグメントを表示する場所にドロップします。使用するコンポーネントをフィルタするのが最も簡単です。

「図fragment-container-dragndrop.pngの説明」

ヒント:
フィルタ・フィールドにfragmentと入力した場合、フラグメント・コンテナに加えてsearchフラグメントがどのように表示されるかを確認します。これは、既存のすべてのフラグメント(webアプリケーション・テンプレートによって自動的に作成されたShell HeaderやShell Footerなどを含む)が、アプリケーション・ページで使用可能であるためです。これらのフラグメントをページで使用する場合は、単にキャンバスにドラッグ・アンド・ドロップできます。フラグメント・コンテナをページに追加した場合(ここで行ったように)、フラグメント・コンテナのプロパティからこれらのフラグメントを選択できます。
コンテナのプロパティ・ペインの一般タブで、「選択」をクリックして既存のフラグメントを選択するか、「作成」をクリックして新しいフラグメントを作成します。デモンストレーションのため、新しいフラグメントを作成します。

「図fragment-add-page.pngの説明」

選択をクリックして、使用可能なフラグメントがニーズを満たさない場合は、次に示すように、「フラグメントの選択」ダイアログからも新しいフラグメントを作成できます:

図fragment-select.pngの説明

「選択」をクリックします。
「フラグメントの作成」ダイアログで、「フラグメントID」フィールドにフラグメントの名前を入力します。

「図fragment-create-visapp.pngの説明」
1. 「使用対象」フィールドで、ページまたはページ・コンポーネントにフラグメントをドロップするときにそのフラグメントを表示する場所を選択します。
  
  デフォルトでは、すべてのフラグメントはpageContentとしてタグ付けされ、コンポーネント・パレットのフラグメントの下に、任意のページで使用可能な汎用コンテンツとして表示されます。ただし、適切なメタデータ・タグを使用すると、最もよく使用されるフラグメントのみが表示されます。たとえば、formTemplateというタグが付いたフラグメントは、動的フォーム・テンプレートでフラグメントを削除する場合にのみ使用できます。
  
  フラグメント・プロパティ・ペインまたはその「設定エディタ」で「使用対象」設定を編集すると、フラグメント・サーフェスの場所をいつでも変更できます。
2. 「実装」フィールドで、フラグメントを特定のコンポーネントの優先コンテンツとして提示するタグを選択します。不明な場合は空白のままにします。フラグメントのプロパティ・ペインまたはその「設定エディタ」で後で追加できます。
3. 「作成」をクリックします。
フラグメント・デザイナで新しい空のフラグメントが開きます:

「図fragment-designer-view.pngの説明」

ヒント:
フラグメントが使用されている場所を表示するには、フラグメントのプロパティ・ペインの「使用方法」の下を確認します。この例では、mainフローのmain-startページでemployee-contact-detailsフラグメントが使用されています。 main/main-startリンクをクリックすると、ページ・デザイナでページが開きます。
フラグメント・デザイナでフラグメントを設計します。

フラグメント・デザイナはページ・デザイナに似ていますが、ページではなくフラグメントを作成します。標準コンポーネントおよび動的コンポーネント(「動的コンテナ」を含む)をフラグメントに追加し、他のエディタ・タブを使用して、ページ開発時と同様に、イベント、アクション・チェーン、変数および関数にコンポーネントをバインドできます。 InstanceFactory変数に関連付けることができる「コードから」など、型を定義することもできます。

フラグメントは、親コンテナ・コンテキストを認識しない自己完結型のUIです。そのため、キャンバスおよび構造ビューとコード・ビューに表示される内容は、この特定のフラグメントの内容です。その他のエディタ・タブでは、このフラグメントの範囲内のアーティファクトを編集できます。そのため、フラグメントは親コンテナでアクションを呼び出すことはできませんが、親が処理できるカスタム・イベントを起動する場合があります。フラグメントはページにのみナビゲートできません。

次に、従業員の連絡先情報を表示するように設定されたフラグメントの例を示します:

図fragment-example.pngの説明

(このサンプル・フラグメントを設計し、必要なパラメータをワイヤー・アップするステップは、「サンプル・シナリオ: フラグメントの作成および値の受渡し」を参照してください。)
オプショナル: ページに戻り、フラグメントをさらに作成してページに追加します。ページに必要な数のフラグメントを追加でき、他のフラグメントにもフラグメントを追加できます。
1. コンポーネント・パレットの「フラグメント」の横にあるをクリックして、フラグメントを作成します。
2. キャンバスにドラッグ・アンド・ドロップしてページに追加します。
または、ステップ2を5に繰り返して、ページ上のフラグメント・コンテナから始まるフラグメントを作成および追加します。

ヒント:
「既存のフラグメントの内容から開始するページの作成」は、基本的にフラグメントをページ・テンプレートとして使用することもできます。

フラグメントがページに追加されると、そのコンテンツは、次に示すように、そのフラグメントを消費するページに自動的にレンダリングされます(これには、フラグメントに対して行った変更も含まれます):

図fragment-container-properties.pngの説明

その後、フラグメントのプロパティ・ペインを使用して、入力パラメータとして有効になっているフラグメント変数を表示し、フラグメント・コンテナに作成することもできます。ページの代替値で「パラメータのデフォルト値をオーバーライド」を選択するか、「フラグメント入力パラメータの初期値を指定するページ変数」を使用できます。 (各入力パラメータの上にカーソルを置くと、そのタイプと説明が表示されます(指定されている場合)

フラグメント・コンテナを「フラグメントで発生したイベントに対応」に構成することもできます。

フラグメントがページに追加されると、必要に応じて変更できます。別のフラグメントに置き換えることもでき、ページから完全に削除することもできます。これを行うには:

変更するフラグメントを使用するページを開き、ページ上のフラグメントを選択し、フラグメントのプロパティ・ペインで、フラグメントの横にある「選択」をクリックします。
「フラグメントの選択」ダイアログで選択します:
- ページ上の既存のフラグメントを削除するには、「フラグメントなし」を選択します。
- 既存のフラグメントを別のフラグメントに置き換えるには、フラグメントの下で使用するフラグメントを選択します。
「選択」をクリックします。