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

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

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

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

サンプル実装を参照する

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

docker run -it -m 8g -p 8080:8080 liferay/portal:7.4.3.55-ga55。

http://localhost:8080でLiferayへのサインインします。 メールアドレス[email protected]_とパスワード_test_を使用してください。 プロンプトが表示されたら、パスワードを _learn_に変更します。

次に、以下の手順に従います。

  1. サンプルをダウンロードして解凍します。

    curl https://resources.learn.liferay.com/dxp/latest/ja/building-applications/developing-a-java-web-application/using-mvc/liferay-p1z2.zip -O
    
    unzip liferay-p1z2.zip
    
  2. モジュールのルートから、ビルドおよびデプロイします。

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

    このコマンドは、デプロイされたjarをDockerコンテナの/opt/liferay/osgi/modulesにコピーするのと同じです。

  3. Liferay Dockerコンテナコンソールでデプロイを確認します。

    STARTED com.acme.p1z2.web_1.0.0 [2725]
    
  4. サンプルのモジュールが機能していることを確認します。 ブラウザでhttps://localhost:8080を開きます。

  5. P1Z2ポートレットをページに追加します。 サンプルポートレットは、サンプルウィジェットの下にあります。 デフォルトのカラー変数が青に設定されていることに注意してください。

  6. ポートレットのオプションアイコン(options icon)をクリックし、 [設定] をクリックします。 ポートレットの設定ウィンドウが開きます。

    構成をクリックして、ポートレットの設定を開きます

  7. 別の色を選択し、 [保存] をクリックします。 設定メニューを閉じると、ポートレットに新しい選択が表示されます。

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

設定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(
	configurationPolicy = ConfigurationPolicy.OPTIONAL,
	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
)

関連情報