ご覧のページは、お客様の利便性のために一部機械翻訳されています。また、ドキュメントは頻繁に更新が加えられており、翻訳は未完成の部分が含まれることをご了承ください。最新情報は都度公開されておりますため、必ず英語版をご参照ください。翻訳に問題がある場合は、こちらまでご連絡ください。

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

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

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

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

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

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

新しいLiferay インスタンスを起動し、以下を実行します。

docker run -it -m 8g -p 8080:8080 liferay/portal:7.4.3.132-ga132

http://localhost:8080でLiferayにサインインします。メールアドレス test@liferay.com とパスワード testを使用してください。プロンプトが表示されたら、パスワードを learnに変更します。

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

curl https://resources.learn.liferay.com/examples/liferay-f5d5.zip -O

unzip liferay-f5d5.zip

モジュールのルートから次のコマンドを実行してビルドし、Dockerコンテナにデプロイします。
```
./gradlew deploy -Ddeploy.docker.container.id=$(docker ps -lq)
```
ヒント

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

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

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

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

クラスの下部では、OSGi は @Reference アノテーションに基づいて、 ItemSelector クラスインスタンスを挿入します。

@Reference
private ItemSelector _itemSelector;

ポートレットのrenderメソッドまでスクロールします。
このメソッドは、アイテムセレクターに表示する目的のエンティティを表す基準クラスインスタンスを作成します。 Criterion クラスは ItemSelectorCriterion インターフェイスを実装する必要があります。

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

ItemSelectorCriterion itemSelectorCriterion =
	new RoleItemSelectorCriterion();

ヒント

必要なエンティティの種類に基準が存在しない場合は、 BaseItemSelectorCriterionを拡張して、独自の ItemSelectorCriterion クラスを作成できます。

次に、ユーザーがエンティティを選択したときにエンティティによって提供される情報を表す戻り値の型クラスが必要です。戻り値の型クラスは、 ItemSelectorReturnType インターフェースを実装する必要があります。たとえば、このクラスは、エンティティの URL、UUID、または主キーを返すために使用できます。戻り値のタイプクラスは、以前に作成された基準クラスに追加されます。

重要

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

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

注

UUIDが使用できない場合は、プライマリーキーが返されます。

戻り値のタイプをアイテム基準に登録して定義します。

itemSelectorCriterion.setDesiredItemSelectorReturnTypes(
	new UUIDItemSelectorReturnType());

ヒント

必要な情報の種類に対する戻りクラスが存在しない場合は、 ItemSelectorReturnType 実装を使用して独自の戻りクラスを定義できます。

アイテムセレクターは、基準と戻り値の型クラスを使用して、表示するアイテムの選択ビュー (タブとして表示) と各アイテムの識別方法を決定します。

これで、基準を使用してアイテムセレクターの URL を生成できるようになります。この URL は、フロントエンドコードにアイテム選択ダイアログを作成します。

RequestBackedPortletURLFactory クラスは、次の基準を使用してアイテムセレクター URL をすばやく生成できます。

PortletURL itemSelectorURL = _itemSelector.getItemSelectorURL(
	RequestBackedPortletURLFactoryUtil.create(renderRequest),
	renderResponse.getNamespace() + "selectRole",
	itemSelectorCriterion);

重要

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

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

ヒント

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

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

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

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

フォームを追加する

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

view.jspを開きます。

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

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

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

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

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

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

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

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

Capability:

Development and Tooling

Resource Type:

Official Documentation

Feature:

Data Frameworks

Deployment Approach:

Liferay PaaS

Liferay SaaS

Liferay Self-Hosted