アイテムセレクターの実装

アイテムセレクターは、ドキュメント、ビデオ、ユーザーなどのアセットを選択するためのポップアップダイアログです。

アイテムセレクターの基準を構成し、その使用法を定義することにより、独自のアプリケーション用のアイテムセレクターダイアログを作成できます。

ユーザーがアセットを選択できるように、アイテムセレクターがポップアップ表示されます。

ここでは、アイテムセレクターを作成する方法を学習します。

サンプルモジュールから始める

アイテムセレクターを実装するには、ウィジェット用のモジュールなど、アプリケーションに埋め込む必要があります。この例では、JSPビューを含むMVCポートレットを使用しています。アイテムセレクターには、選択するロールの一覧が表示されます。

サンプルモジュールをダウンロードします。

curl https://resources.learn.liferay.com/dxp/latest/ja/building-applications/data-frameworks/liferay-f5d5.zip -O

unzip liferay-f5d5.zip

次のコマンドを使用して、Liferay DXP Dockerコンテナを起動します。
```
docker run -it -m 8g -p 8080:8080 --name lrdev liferay/portal:7.3.2-ga3
```
モジュールのルートから次のコマンドを実行してビルドし、Dockerコンテナにデプロイします。
```
./gradlew deploy -Ddeploy.docker.container.id=$(docker ps -lq)
```
tip

このコマンドは、デプロイされたjarをDockerコンテナの/opt/liferay/osgi/modulesにコピーするのと同じです。
Liferay Dockerコンテナコンソールでデプロイを確認します。
```
STARTED com.acme.f5d5.web_1.0.0 [1017]
```
サンプルのポートレットモジュールがデプロイされます。これをページに追加すると、ボタンが1つある単純なポートレットになります。
［Select］ボタンをクリックすると、アイテムセレクターが表示されます。
アイテムを選択すると、そのアイテムの値がJavaScriptアラートボックスに表示されます。このアイテムセレクターはロールを選択するため、値は選択されたロールのプライマリーキーとなります。

これで、アイテムセレクターがどのように機能するかを確認できます。

コントローラーでアイテムセレクターの基準を設定する

F5D5MVCPortlet.javaクラスを開きます。 MVCポートレットでは、ポートレットクラスはコントローラークラス（MVCではC）です。クラスは以下の2つのことを実行する必要があります。

セレクターに必要な基準を定義する（つまり、どのエンティティを選択するか）
その基準のURLを作成する

クラスの最後に、OSGiは@Referenceアノテーションのために ItemSelectorクラスインスタンスを挿入します。
```
@Reference
private ItemSelector _itemSelector;
```
ポートレットのrenderメソッドまでスクロールします。
アイテムセレクターに表示する目的のエンティティを表す基準クラスが作成されます。基準クラスは、 ItemSelectorCriterionインターフェイスを実装する必要があります。

この例では、 RoleItemSelectorCriterion への参照を使用して、ロールがセレクターに表示されるようにします。これは、クラスの新しいインスタンスを作成することによって定義されます。
```
ItemSelectorCriterion itemSelectorCriterion =
     new RoleItemSelectorCriterion();
```
tip

必要なエンティティのタイプに基準が存在しない場合は、[BaseItemSelectorCriterion]を拡張することで独自のItemSelectorCriterionを定義できます。
次に、ユーザーがエンティティを選択したときにエンティティが提供する情報を表す戻り値のタイプクラスが必要です。戻り値のタイプクラスは、 ItemSelectorReturnTypeインターフェイスを実装する必要があります。たとえば、戻り値のタイプクラスを使用して、エンティティのURL、UUID、またはプライマリーキーを返すことができます。戻り値のタイプクラスは、以前に作成された基準クラスに追加されます。

important

使用されるすべての基準には、少なくとも1つの戻り値のタイプが関連付けられている必要があります。

この例では、 UUIDItemSelectorReturnType への参照を使用して、選択したロールのUUID値を、戻す重要なデータとして定義します。複数のロールが選択されている場合、それらはコンマ区切りのリストとして返されます。

note

UUIDが使用できない場合は、プライマリーキーが返されます。
戻り値のタイプをアイテム基準に登録して定義します。
```
 itemSelectorCriterion.setDesiredItemSelectorReturnTypes(
     new UUIDItemSelectorReturnType());
```
tip

必要な情報のタイプの戻り値のタイプが存在しない場合は、独自の ItemSelectorReturnType 実装を定義できます。

アイテムセレクターは、これら2つのクラスを使用して、表示するアイテムの選択ビュー（タブとして表示）と、各アイテムの識別方法を決定します。
これで、条件を使用してアイテムセレクターのURLを生成できます。このURLは、フロントエンドコードにアイテムセレクターダイアログを作成します。

RequestBackedPortletURLFactoryクラスは、次の基準を使用してアイテムセレクターのURLをすばやく生成できます。
```
 PortletURL itemSelectorURL = _itemSelector.getItemSelectorURL(
     RequestBackedPortletURLFactoryUtil.create(renderRequest),
     renderResponse.getNamespace() + "selectRole",
     itemSelectorCriterion);
```
important

URLの生成に使用する文字列（この例ではselectRole）は、ダイアログのイベント名です。これは、後でフロントエンドコードでダイアログを作成するときに使用する値と一致する必要があります。
アイテムセレクターのURLをrenderRequestに追加して、JSPで使用できるようにします。
```
renderRequest.setAttribute(F5D5WebKeys.ITEM_SELECTOR_URL, itemSelectorURL);
```
view.jspファイルは、フロントエンドコードが定義されている場所です。 JavaクラスのrenderメソッドのrenderRequestオブジェクトは、後でJSPファイルに渡されます。定数を使用して、コントローラー（ポートレットクラス）とビュー（JSP）の両方でURLを一貫して識別するようにします。
最後に、MVCPortletのrenderメソッドを呼び出して、コードが実行されたらレンダリングプロセスを続行します。
```
super.render(renderRequest, renderResponse);
```

それがコントローラーコードです。実行は、view.jspファイルに実装されているビューレイヤー（MVCではV）に渡されます。

ビューでアイテムセレクターを使用する

アイテムセレクターを取得し、フロントエンドコードでそれを使用する方法を定義する必要があります。サンプルからview.jspを開きます。
```
<%
   String itemSelectorURL = String.valueOf(request.getAttribute(F5D5WebKeys.ITEM_SELECTOR_URL));
%>
```
URLを取得したら、アイテムセレクターを開く方法を指定し、次に結果を使用する方法を定義する必要があります。
Clayボタンタグを使用して、アイテムセレクターを開くためのボタンを作成できます。
```
<clay:button
  id='<%= liferayPortletResponse.getNamespace() + "selectRoleButton" %>'
  label="Select"
/>
```
clay:buttonタグは、ウィジェット上にボタン（ID selectRoleButtonとラベル Select が画面に表示されます）を作成します。このボタンは、文字列<portlet:namespace />selectRoleButtonで識別できます。

<script>タグを使用して、アイテムセレクターを開くJavaScriptを埋め込みます。

<script>
   var selectRoleButton = document.getElementById('<portlet:namespace />selectRoleButton');

   selectRoleButton.addEventListener(
      'click',
      function(event) {
         new Liferay.Util.openSelectionModal(
            {
               onSelect: function (event) {
                  alert(event.value);
               },
               selectEventName: '<portlet:namespace />selectRole',
               title: 'Select Role',
               url: '<%= request.getAttribute(F5D5WebKeys.ITEM_SELECTOR_URL) %>'
            }
         );
      }
   );
</script>

このJavaScriptのスニペットは、最初にその識別子（portlet:namespace />selectRoleButton）を介して［ロールの選択］ボタンを取得します。次に、クリックされたときにアイテムセレクターダイアログを作成するためのイベントリスナーを追加します。

Liferay.Util.openSelectionModalメソッドは、ダイアログを作成します。

onSelectフィールドでは、クリックされたときに値を処理する関数を定義する必要があります。ユーザーがこの関数内で選択を行ったときのダイアログの動作を定義します。この実装は、選択された値を含むアラートボックスを表示します。

eventNameフィールドの値は、JavaコードのRequestBackedPortletURLFactoryで使用した文字列と一致する必要があります（この例ではselectRole）。コントローラーがアイテムを保存したリクエストからアイテムセレクターURLを取得し、同じ定数を使用してそれを識別し、urlフィールドに入力する必要があります。

tip

アイテムセレクターで複数アイテムの選択をサポートする場合は、openSelectionModal呼び出しにmultiple: trueを追加することで、複数選択を有効にできます。

eventに保存されているアイテム選択を使用します。結果に含まれるデータ型と情報は、Javaコードで使用した戻り値のタイプクラスによって異なります。この例ではUUIDItemSelectorReturnTypeを使用しているため、データは1つ以上の選択されたアイテムのUUIDを持つString値です。

選択関数内で、値の使用方法を実装します。この例は、単純なJavaScriptアラートを示しています。

これでどのように機能するかを確認できたので、JavaScriptアラートをより便利なものに置き換えることができます。

フォームを追加する

アイテムセレクターを使用する場合、選択した値をフォームに挿入したい場合があります。その方法は以下の通りです。

view.jspを開きます。

<clay:button>タグを探します。次のようにフォームで囲みます。

<form name="<portlet:namespace/>fm">
   <input name="role" />
   <clay:button
      id='<%= liferayPortletResponse.getNamespace() + "selectRoleButton" %>'
      label="Select"
   />
</form>

roleと呼ばれる1つの入力フィールドを持つフォームができました。

JavaScriptアラートまで下にスクロールします。 JavaScriptアラートをLiferayのフロントエンドsetFormValuesメソッドの呼び出しに置き換えます。
```
Liferay.Util.setFormValues(document.<portlet:namespace />fm, {
       role: event.value
});
```

ポートレットを再デプロイします。

./gradlew deploy -Ddeploy.docker.container.id=$(docker ps -lq)

先ほどと同じように、アイテムを選択します。そのIDは、作成したフォーム項目に挿入されます。

まとめ

　これで、アイテムセレクターを実装する方法がわかりました。