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

ポートレットのルック&フィール

管理者とユーザーに、ポートレットのルック&フィールを使用してポートレットをカスタマイズする方法を提供できます。ポートレットのルック&フィールを任意のMVCポートレットに追加して、ユーザーがプリファレンスにアクセスして設定するためのUIを提供できます。

ポートレットのルック&フィールは、アプリケーションの構成とは別に保存されるプロパティであることに注意してください。詳細については、ポートレットレベルの構成を参照してください。

サンプル実装を参照する

新しい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-p1z2.zip -O

unzip liferay-p1z2.zip

モジュールのルートから、ビルドおよびデプロイします。
```
./gradlew deploy -Ddeploy.docker.container.id=$(docker ps -lq)
```
注

このコマンドは、デプロイされたjarをDockerコンテナ上の /opt/liferay/osgi/modules にコピーするのと同じです。
Liferay Dockerコンテナコンソールでデプロイを確認します。
```
STARTED com.acme.p1z2.web_1.0.0 [2725]
```
サンプルのモジュールが機能していることを確認します。ブラウザでhttps://localhost:8080を開きます。
P1Z2ポートレットをページに追加します。サンプルポートレットは、サンプルウィジェットの下にあります。デフォルトのカラー変数が青に設定されていることに注意してください。
ウィジェットヘッダーのポートレットのオプションアイコン () をクリックし、 [構成]をクリックします。ポートレットの設定ウィンドウが開きます。

注

Liferay DXP 2025.Q1/Portal GA132 より前では、設定オプションはウィジェットの右上隅に表示されていました。
別の色を選択し、［保存］をクリックします。設定メニューを閉じると、ポートレットに新しい選択が表示されます。

次に設定の仕組みを確認します。

設定JSPを作成する

ポートレットのルック&フィールのユーザーインターフェイスは、configuration.jspファイルによって提供されます。

<portlet:defineObjects />

<liferay-portlet:actionURL portletConfiguration="<%= true %>" var="configurationActionURL" />

<aui:form action="<%= configurationActionURL %>" method="post" name="fm">
	<aui:input name="<%= Constants.CMD %>" type="hidden" value="<%= Constants.UPDATE %>" />

	<liferay-portlet:renderURL portletConfiguration="<%= true %>" var="configurationRenderURL" />

	<aui:input name="redirect" type="hidden" value="<%= configurationRenderURL %>" />

	<aui:fieldset>
		<aui:select label="color" name="color" value='<%= (String)portletPreferences.getValue("color", "blue") %>'>
			<aui:option label="Blue" value="blue" />
			<aui:option label="Red" value="red" />
			<aui:option label="Yellow" value="yellow" />
		</aui:select>
	</aui:fieldset>

	<aui:button-row>
		<aui:button type="submit" />
	</aui:button-row>
</aui:form>

JSP ファイルは、 <liferay-portlet:actionURL /> および <liferay-portlet:renderURL /> タグを使用して、変数 configurationActionURL および configurationRenderURL内の URL を構築します。

誰かがフォームを送信すると、configurationActionURLが呼び出され、リクエストパラメータとして含まれているcolor変数を使用してアプリケーションのprocessActionメソッドがトリガーされます。

リクエストの目的を示すcmdという名前のURLパラメーターが提供されます。 cmdパラメーターの値はupdateです。

設定アクションを作成する

カスタム構成アクションクラスを作成して、ポートレットの設定にアクセスできるようにします。

@Component(
	property = "javax.portlet.name=com_acme_p1z2_web_internal_portlet_P1Z2Portlet",
	service = ConfigurationAction.class
)
public class P1Z2ConfigurationAction extends DefaultConfigurationAction {

	@Override
	public void processAction(
			PortletConfig portletConfig, ActionRequest actionRequest,
			ActionResponse actionResponse)
		throws Exception {

		setPreference(
			actionRequest, "color",
			ParamUtil.getString(actionRequest, "color"));

		super.processAction(portletConfig, actionRequest, actionResponse);
	}

}

@Componentアノテーションで、アクションクラスが適用されるポートレットをpropertyタグで指定します。

構成フォームからポートレットのルック&フィールを読み取り、それらをデータベースに保管するprocessAction()メソッドを追加します。サンプルのポートレットでは、メソッドはcolor URLパラメーターを読み取り、その値をポートレット設定として設定します。

プリファレンスロジックを追加する

view.jspファイルにロジックを追加して、ポートレットの設定にアクセスします。

<h4>P1Z2 Portlet</h4>

JSPファイルは、選択されたポートレット設定をチェックし、値を返します。値がまだ保存されていない場合は、デフォルト値としてblueが返されます。

<portlet:defineObjects /> タグにより、 portletPreferences が使用可能になり、これを使用して JSP で color 設定を取得することに注意してください。

ポートレットのパスパラメータを追加する

ポートレットの@Componentアノテーションで、ビューテンプレートと設定用テンプレートのパスパラメーターを追加します。

@Component(
	property = {
		"com.liferay.portlet.display-category=category.sample",
		"javax.portlet.display-name=P1Z2 Portlet",
		"javax.portlet.init-param.config-template=/configuration.jsp",
		"javax.portlet.init-param.view-template=/view.jsp",
		"javax.portlet.name=com_acme_p1z2_web_internal_portlet_P1Z2Portlet"
	},
	service = Portlet.class
)