構成フォームレンダラー

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

サンプルプロジェクトを参照する

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

docker run -it -m 8g -p 8080:8080 liferay/dxp:7.4.13-u55。

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

次に、以下の手順を実行します。

Configuration Form Renderer をダウンロードし、解凍してください。

curl https://resources.learn.liferay.com/dxp/latest/ja/building-applications/core-frameworks/configuration-framework/liferay-b7r2.zip -O

unzip liferay-b7r2.zip

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

このコマンドは、デプロイされたjarをDockerコンテナの/opt/liferay/osgi/modulesにコピーするのと同じです。
Liferay Dockerコンテナコンソールでデプロイを確認します。
```
STARTED com.acme.b7r2.web_1.0.0 [1034]
```
サンプルのモジュールが機能していることを確認します。ブラウザでhttps://localhost:8080を開きます。
［コントロールパネル］ → ［設定］ → ［System Settings］ → ［Third Party］に移動します。［B7R2 Configuration］をクリックします。

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

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

構成インターフェイスで構成可能な属性を定義します。サンプルプロジェクトには、b7r2Colorという1つの構成可能な属性があります。

public interface B7R2WebConfiguration {

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

}

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

note

DXP 7.4 U51 または Portal 7.4 GA51 より前の Liferay バージョンでは、ConfigurationBeanDeclaration が必要です。 ConfigurationBeanDeclaration with Previous Versions of Liferay](./setting-and-accessing-configurations.md#configurationbeanandeclaration-with-previous-versions-of-liferay) を参照してください。

Configuration Form Rendererを実装する

ConfigurationFormRendererの実装を作成します。 @Componentアノテーションで、サービスをConfigurationScreen.classとして宣言します。
```
@Component(service = ConfigurationScreen.class)
```
getPid()メソッドをオーバーライドします。構成クラスの@Meta.OCDアノテーションで指定されている完全な構成IDを必ず返すようにしてください。

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

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

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

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

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

render()メソッドをオーバーライドします。この例では、 ConfigurationProviderが構成オブジェクトにアクセスします。サーブレットコンテキストは、リクエストディスパッチャへのアクセスを提供します。これにより、カスタムJSPが構成を読み取ることができます。
必ず@Referenceアノテーションを使用して、モジュールのシンボリック名を定義してください。
```
@Reference(
 target = "(osgi.web.symbolicname=com.acme.b7r2.web)"
)
```

Web-ContextPathを追加する

bnd.bndファイルでバンドルのWeb-ContextPathを指定します。たとえば、サンプルプロジェクトのBndファイルにはWeb-ContextPath: /b7r2-webがあります。これは、configuration form rendererファイルにServletContextオブジェクトを登録するものです。サーブレットコンテキストはポートレット用に自動的に作成されますが、このサンプルにはポートレットがないため、サーブレットコンテキストをbnd.bndファイルに追加する必要があることに注意してください。

カスタムJSPを作成する

構成インターフェイスをJSPにインポートします。

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

リクエストオブジェクトから構成値にアクセスします。

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

<aui:input> タグを使用して、ユーザーがJSPファイルに送信する新しい構成入力を読み取ります。
```
<aui:input name="b7r2Color" value="<%= b7r2WebConfiguration.b7r2Color() %>" />
```

このサンプルプロジェクトは、ConfigurationFormRendererを使用してカスタマイズされた基本的な構成UIを示しています。アプリケーションでは、独自のコードを記述して、構成UIのルックアンドフィールをさらにカスタマイズしてください。