設定フォームレンダラー

設定インターフェースを作成すると、設定 UI が自動的に生成されます。ただし、UIのルックアンドフィールをカスタマイズしたい場合もあります。たとえば、会社のデザインの美的感覚に一致するようにUIを変更するとします。 ConfigurationFormRendererの実装でこれを行う方法は次のとおりです。

サンプルプロジェクトを参照してください

Liferay DXP の新しいインスタンスを起動するには、以下を実行します。

docker run -it -m 8g -p 8080:8080 liferay/dxp:2026.q1.9-lts

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

次に、以下の手順に従ってください。

1. 設定フォームレンダラー をダウンロードして解凍します。

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

   unzip liferay-b7r2.zip
   

2. モジュールのルートディレクトリから、ビルドとデプロイを実行します。

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

   注記

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

3. Liferay Dockerコンテナコンソールでデプロイメントを確認してください。

   STARTED com.acme.b7r2.web_1.0.0 [1034]
   

4. サンプルモジュールが正しく動作することを確認してください。ブラウザで https://localhost:8080 を開いてください。

5. グローバルメニュー () → コントロールパネル → システム設定 → サードパーティ に移動します。 B7R2 設定 をクリックします。

   

   このビューはカスタムJSPファイルによって配信されることに注意してください。

設定インターフェースを作成する

設定可能な属性は、設定インターフェースで定義します。サンプルプロジェクトには、設定可能な属性が 1 つあります: b7r2Color。

public interface B7R2WebConfiguration {

	@Meta.AD(deflt = "blue", name = "b7r2-color", required = false)
	public String b7r2Color();

}

ConfigurationFormRenderer を使用する場合、生成された UI を非表示にするためにgenerateUIアノテーションは不要であることに注意してください。

注記

Liferay のバージョンが DXP 7.4 U51 または Portal 7.4 GA51 より前の場合は、 ConfigurationBeanDeclaration が必要です。 Liferay の以前のバージョンでの ConfigurationBeanDeclaration については、 を参照してください。。

設定フォームレンダラーを実装する

1. ConfigurationFormRenderer の実装を作成します。 @Component アノテーションで、サービスを ConfigurationScreen.class として宣言します。

   @Component(service = ConfigurationScreen.class)
   

2. getPid() メソッドをオーバーライドします。構成クラスの @Meta.OCD アノテーションで指定されている完全な構成 ID を返すようにしてください。

@Override
public String getPid() {
	return "com.acme.b7r2.web.internal.configuration.B7R2WebConfiguration";
}

1. getRequestParameters() メソッドをオーバーライドします。このメソッドでは、カスタムUIから送信されたパラメータを読み取り、構成インターフェースにあるフィールドとキーが一致するマップに格納します。

@Override
public Map<String, Object> getRequestParameters(
	HttpServletRequest httpServletRequest) {

	String b7r2Color = ParamUtil.getString(httpServletRequest, "b7r2Color");

	return new HashMap<String, Object>() {
		{
			put("b7r2Color", b7r2Color);
		}
	};
}

1. render() メソッドをオーバーライドします。この例では、 ConfigurationProvider が構成オブジェクトにアクセスします。サーブレットコンテキストはリクエストディスパッチャへのアクセスを提供し、これによりカスタムJSPが設定を読み取ることが可能になります。

2. モジュールのシンボル名を定義するには、必ず @Reference アノテーションを使用してください。

   @Reference(
   	target = "(osgi.web.symbolicname=com.acme.b7r2.web)"
   )
   

Web-ContextPathを追加する

Web-ContextPath を bnd.bnd ファイルで指定します。例えば、サンプルプロジェクトでは、Bnd ファイルに Web-ContextPath: /b7r2-web が含まれています。これは、構成フォームレンダラーファイルに ServletContext オブジェクトを登録するものです。ポートレットの場合、サーブレットコンテキストは自動的に作成されますが、このサンプルにはポートレットがないため、 bnd.bnd ファイルにサーブレットコンテキストを追加する必要があります。

カスタムJSPを作成する

1. 設定インターフェースをJSPにインポートします。

   <%@ page import="com.acme.u2g5.web.internal.configuration.B7R2WebConfiguration" %>
   

2. リクエストオブジェクトから設定値にアクセスします。

   <%
   B7R2WebConfiguration b7r2WebConfiguration = (B7R2WebConfiguration)request.getAttribute(B7R2WebConfiguration.class.getName());
   %>
   

3. ユーザーが JSP ファイルで送信した新しい設定入力を読み取るには、 <aui:input> タグを使用します。

   <aui:input name="b7r2Color" value="<%= b7r2WebConfiguration.b7r2Color() %>" />
   

このサンプルプロジェクトは、 ConfigurationFormRenderer を使用した基本的なカスタマイズされた構成 UI を示しています。アプリケーション内で独自のコードを記述することで、設定UIの外観や操作性をさらにカスタマイズできます。