機械翻訳について

サンプル・シナリオ: フラグメントの作成および値の受渡し

次に、入力パラメータを有効にし、フラグメントとそのフラグメントを使用するページの間で値を渡す方法について説明するサンプル・シナリオを示します。

たとえば、表に従業員データを含むページがあるとします。 ページ表の行をクリックすると、従業員の連絡先情報が表示されます。 ユーザーは、連絡先詳細など、従業員情報を編集できる別のページを使用できます。 時間と労力を節約するために、UIの連絡先情報部分をフラグメントで定義し、両方のページにプルできます。
「fragment-scenario.pngの説明は以下のとおりです
図fragment-scenario.pngの説明」

どちらの場合も、フラグメントを含むページは、選択した従業員IDを入力パラメータとしてフラグメントに渡し、フラグメントはIDを受け取り、連絡先情報を取得してレンダリングします。 ユーザーが選択した従業員を更新した場合(つまり、入力変数値が変更された場合)、フラグメントによってonValueChangedイベントが発生し、ページの連絡先詳細がリフレッシュされます。

  1. まず、従業員の連絡先情報を表示するフラグメントを設定します。 デモンストレーションの目的で、見出しアバター、と入力テキスト・コンポーネントを使用して、フラグメントが次のようなものであるとします:

    fragment-data-designerview.pngの説明は以下のとおりです
    「図fragment-data-designerview.pngの説明」

    これらのコンポーネントに値を指定するには、Employeeビジネス・オブジェクトのget_employeeエンドポイント(データ・ソース)から取得された、この情報を保持するタイプと変数を作成します。

    1. 連絡先詳細を定義するフラグメントで、「タイプ」タブをクリックし、「+タイプ」をクリックして「エンドポイントから」を選択します。
    2. 「エンドポイントからのタイプの作成」ダイアログ・ボックスで、ビジネス・オブジェクトを展開し、従業員の下のGet/Employee/{Employee_Id}エンドポイントを選択し、「次」をクリックします。
    3. フラグメントに表示するフィールド(Picture, Name, Country, Email、Phoneなど)を選択します。 「終了」をクリックします。
    4. 新しく作成したget_Employeeタイプを右クリックし、「変数の作成」を選択します。 フラグメント変数タブに、新しいget_EmployeeVar (型としてget_Employee)が作成されます。
    5. フラグメント・デザイナに切り替えて、各コンポーネントを対応するget_EmployeeVar変数値にバインドします。 たとえば、アバターを従業員の図にバインドするには、アバター・コンポーネントをクリックし、コンポーネントの「データ」タブで、「ソース」フィールドにマウス・ポインタを重ねて選択変数 「変数ピッカーを開く」をクリックします。 get_EmployeeVarフラグメント変数の下にあるpictureを選択します。
  2. 表示するwhatがあるため、このフラグメントを使用するページに従業員情報を表示するように「方法」を設定します。 (「従業員リスト」ページなど)ページによっては、単に情報を読み取り専用データとして表示し、(「従業員の編集」ページなど)で編集する方法が必要な場合があります。
    1. フラグメント変数タブで、ブール型変数(allowEditingなど)を定義します。
    2. allowEditing変数を選択し、プロパティ・ペインの入力パラメータで「有効」を選択して、変数値をそのフラグメントを使用するページに入力パラメータとして渡します。
    3. フラグメント・デザイナに切り替えて、各入力テキスト・コンポーネントの読取り専用プロパティをallowEditing変数にバインドします。 たとえば:
      1. 「名前」入力テキスト・コンポーネントをクリックし、「一般」タブのコンポーネントの「読取り専用」フィールドで、選択変数 「変数ピッカーを開く」をクリックし、フラグメント変数の下のallowEditingを選択します。
      2. ドル記号($)の前に感嘆符(!)を追加して、フラグメントが編集モードでない場合にフィールドが読取り専用であることを示します。

      fragment-data-readonly-bind.pngの説明は以下のとおりです
      「図fragment-data-readonly-bind.pngの説明」

  3. フラグメントがページにロードされたときに、選択した従業員の連絡先詳細を表示する必要があるため、アクション・チェーンをトリガーして正しい従業員情報を取得する"vbEnter"ライフサイクル・イベントを追加します。 このように、フラグメントがロードされると、ページで選択した従業員IDを取得し、その従業員の連絡先詳細をデータソースから取得して、ページレベルの変数に渡します。
    1. フラグメントの「イベント・リスナー」タブをクリックし、「+イベント・リスナー」をクリックして、ライフサイクル・イベントの下のvbEnterを選択します。 「次」をクリックします。
    2. 「フラグメント・アクション・チェーンの作成」を選択し、「終了」をクリックして、vbEnterListenerというアクション・チェーンを作成します。
    3. vbEnterListener (「ライフサイクル・イベント・リスナー」およびvbEnterの下)の横にカーソルを置き、「アクション・チェーンに移動」リンクをクリックします。
    4. エディタでvbEnterListenerアクション・チェーンが開いたら、「コールREST」アクションをキャンバスにドラッグ・アンド・ドロップします。 アクションのプロパティ・ペインで、エンドポイントの横にある「選択」をクリックし、ビジネス・オブジェクトおよび従業員の下のGet/Employee/{Employee_Id}エンドポイントを選択します。 「Select」をクリックします。
    5. アクションの「プロパティ」ペインの入力パラメータで、employee_Idをクリックして「入力パラメータの割当」ダイアログを開きます。 ソース・ペインで、フラグメントの横にある+をクリックして、タイプ番号のempId変数を作成します(empIdを入力パラメータとして有効にすることもできますが、デモ目的の場合は、後のステップで有効にします)。 「Create」をクリックします。 次に、「ソース」ペインから「ターゲット」ペインのempIdをemployee_Idにドラッグします。 「保存」をクリックします。
    6. 次に、パレットの変数の割当アクションをダブルクリックして、アクション・チェーンの末尾に追加します。 アクションのプロパティ・ペインで、「変数」ドロップダウン・リストのフラグメントの下にあるget_EmployeeVarを選択します。 「値」プロパティにマウス・ポインタを重ねて「変数」ピッカーを開き、「ローカル」および「response」でbodyを選択します。
      fragment-data-loademployee-actionchain-assignvar.pngの説明は以下のとおりです
      「図fragment-data-loademployee-actionchain-assignvar.pngの説明」

    7. 「変数」タブに切り替えて、作成したempId変数を検索します。 これを選択し、プロパティ・ペインの入力パラメータで、「有効」を選択して、変数の値を入力パラメータとしてフラグメントを使用するページに渡します。 入力パラメータの「デフォルト値」として1と入力します。
    8. 変数を入力パラメータとして有効にして、「この変数をコンテナに作成」を選択します。 このオプションは、このフラグメントを使用するページにこの変数を自動的に作成し、その値をフラグメント入力パラメータの値にワイヤリングします。
    9. 変数の「イベント」タブをクリックし、「+イベント・リスナー」をクリックして、以前に作成したvbEnterListenerアクション・チェーンを選択します。 「選択」をクリックします。

      fragment-data-inputparameter-empid-onvaluechangedevent.pngの説明は以下のとおりです
      「図fragment-data-inputparameter-empid-onvaluechangedevent.pngの説明」

      このようにして、入力変数の値(選択した従業員ID)が変更されると、"onValueChanged"イベントによってvbEnterListenerアクション・チェーンがトリガーされ、ページ上のコンテンツを更新するようにフラグメントに通知されます。

  4. 次に、従業員連絡先情報フラグメントをページに追加します。
    1. フラグメントを追加する従業員データを含むページを開きます。
    2. 「ページ・デザイナ」タブのコンポーネント・パレットで、従業員の連絡先情報フラグメントを検索し、表示する場所にドラッグ・アンド・ドロップします。

      fragment-data-container.pngの説明は以下のとおりです
      「図fragment-data-container.pngの説明」

      ページのフラグメントのプロパティ・ペインをノートにとります。 empIdフラグメント入力パラメータをフラグメント・コンテナで自動調整するようにマークしたため、empId変数がページに自動的に作成され(変数タブで参照)、フラグメント入力パラメータの値(デフォルトでは1)にワイヤリングされます。

    3. 次に、ifのフラグメントをラップして、employeeテーブルで行が選択された場合にのみ表示されるようにします。 これを行うには、フラグメントを選択し、右クリックして「囲む」および「条件」を選択します。 必要に応じて、「構造」ビューで「次の場合」コンポーネントを選択し、「プロパティ」ペインの「テスト」条件で「変数」ピッカーを使用してempId変数を選択します。
  5. 選択した行の従業員IDに基づいて情報を取得するように従業員表を設定します。
    1. ページの表コンポーネントをクリックし、「イベント」タブを選択してから、「+イベント・リスナー」をクリックし、「First Selected Row」を選択して、選択した行に関する情報を取得します。
    2. TableFirstSelectedRowChangeChainアクション・チェーンが作成されたら、変数の割当てアクションをドラッグ・アンド・ドロップします。
    3. アクションのプロパティ・ペインで、「変数」ドロップダウン・リストのページの下にあるempId変数を選択します。 「値」プロパティの「変数」ピッカーを使用し、「入力パラメータ」でrowkeyを選択します。
    4. ページ・デザイナに戻り、「ライブ」をクリックし、表内の行を選択して、IDに基づいてフラグメントに反映された従業員の連絡先情報を表示します。
    5. 「設計」ビューに戻ります。
  6. 同じ連絡先フラグメントを別のページに追加します。
    1. ページ・デザイナで、表を選択し、編集ページを追加クイック・スタートを使用して編集ページを追加します。
    2. 「ライブ」をクリックし、表内の従業員を選択し、「従業員の編集」をクリックして、新しく作成した編集ページを開きます。
    3. 前に他のページに追加した方法と同様に、ページに連絡先フラグメントを追加します。
    4. 選択した従業員IDがページとフラグメントの間に確実に渡されるようにするには、フラグメントを選択し、プロパティ・ペインのempId入力パラメータでemployeeId変数を選択します。
    5. このページでフラグメント連絡先情報を編集可能にするため、プロパティ・ペインでallowEditing入力パラメータを選択します。
  7. 最後のステップとして、ヘッダーのプレビュー・アイコンをクリックします。
    1. 表の行を選択すると、従業員の連絡先詳細が右側に表示されます。 フラグメントの連絡先詳細がread-only値としてどのように表示されるかを確認します。
    2. 選択した行の「従業員の編集」をクリックすると、連絡先の詳細を含む従業員の情報が「従業員の編集」ページに表示および編集されます。 フラグメントからの連絡先詳細が編集可能な値としてどのように表示されるかを確認します。