Documentation

構成の設定とアクセス

Liferayの構成フレームワークを使用して、MVCポートレットの設定UIを追加できます。

サンプルポートレットを参照する

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

docker run -it -m 8g -p 8080:8080 liferay/portal:7.4.3.29-ga29。

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

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

  1. 構成の設定とアクセス をダウンロードして、解凍します。

    curl https://learn.liferay.com/dxp/latest/ja/building-applications/core-frameworks/configuration-framework/liferay-n2f3.zip -O
    
    unzip liferay-n2f3.zip
    
  2. モジュールのルートから、ビルドおよびデプロイします。

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

    注釈

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

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

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

  5. N2F3ポートレットをページに追加します。 サンプルポートレットは、サンプルウィジェットの下にあります。

    N2F3ポートレットをページに追加します。

    UIには、フォントの色、フォントファミリー、フォントサイズの3つの設定可能な属性とともにウェルカムメッセージが表示されます。

  6. 構成を変更するには、 [コントロールパネル] → [設定] → [System Settings] に移動します。 [Other]の下の category.n2f3 をクリックします。

    [Other]カテゴリーの下にあるcategory.n2f3をクリックします。

    別のフォントの色、フォントファミリー、およびフォントサイズを入力してみてください。 [アップデート] ボタンをクリックして、公開されたウィジェットのあるページに戻ります。 属性が変更されたことを確認します。

構成フレームワークの仕組みは次のとおりです。

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

構成インターフェイスで構成可能な属性を定義するだけで、システム設定で構成UIを生成できます。

サンプルプロジェクトでは、N2F3WebConfiguration.javaファイルが構成インターフェイスです。

import com.liferay.portal.configuration.metatype.annotations.ExtendedObjectClassDefinition;

@ExtendedObjectClassDefinition(
	category = "n2f3", scope = ExtendedObjectClassDefinition.Scope.COMPANY
)
@Meta.OCD(
	id = "com.acme.n2f3.web.internal.configuration.N2F3WebConfiguration",
	localization = "content/Language", name = "n2f3-configuration-name"
)
public interface N2F3WebConfiguration {

	@Meta.AD(deflt = "blue", required = false)
	public String fontColor();

このサンプルインターフェイスでは、スコープがScope.COMPANYに設定されていることに注意してください。 詳細については、 スコープ設定を参照してください。

インターフェイスには、フォントの色、フォントファミリー、フォントサイズの3つの設定可能な属性があります。 色とファミリーはstring型であり、サイズはint型であることに注意してください。

Meta.OCDは、このクラスを特定のIDを持つ構成として登録します。

重要

IDには、構成インターフェイスの完全修飾クラス名(FQCN)を指定する必要があることに注意してください。

Meta.ADは、デフォルト値や属性が必須項目であるかどうかなど、属性に関する オプションのメタデータ を指定します。 属性値が必要であるがデフォルトが設定されていない場合、管理者はアプリケーションが正しく機能するように設定で値を設定する必要があることに注意してください。

次に、MVCポートレットによって構成がどのように読み取られるかを確認します。

アプリケーションから構成を読み取る

  1. @Componentアノテーションでは、構成インターフェイスクラスはconfigurationPidで指定されます。

    configurationPid = "com.acme.n2f3.web.internal.configuration.N2F3WebConfiguration"
    
  2. 構成にアクセスするために、render()メソッドはConfigurationProviderを利用します。 構成プロバイダーAPIは、さまざまなレベルのスコープで構成を取得するためのメソッドを提供します。 サンプルプロジェクトの構成はインスタンススコープであり、getCompanyConfiguration()メソッドを使用して構成を取得します。

    	catch (ConfigurationException configurationException) {
    		throw new PortletException(configurationException);
    	}
    
    	super.render(renderRequest, renderResponse);
    }
    
    @Reference
    

    構成オブジェクトがリクエストオブジェクトに追加され、アプリケーションのJSPのリクエストから読み取ることができるようになりました。

構成Bean宣言を作成する

ConfigurationProviderを使用するには、構成クラスもConfigurationBeanDeclarationに登録する必要があります。 これにより、システムは構成の変更が発生したときにそれを追跡できます。

@Component(service = ConfigurationBeanDeclaration.class)
public class N2F3WebConfigurationBeanDeclaration
	implements ConfigurationBeanDeclaration {

	@Override
	public Class<?> getConfigurationBeanClass() {
		return N2F3WebConfiguration.class;
	}

}

このクラスには、アプリケーションの構成インターフェイスのクラスを返すメソッドが1つあります。

JSPから構成にアクセスする

  1. 次のimportステートメントは、構成インターフェイスをJSPに追加します。

    <%@ page import="com.acme.n2f3.web.internal.configuration.N2F3WebConfiguration" %>
    
  2. リクエストオブジェクトから構成オブジェクトが取得され、構成値が読み取られます。

    <%
    N2F3WebConfiguration n2f3WebConfiguration = (N2F3WebConfiguration)request.getAttribute(N2F3WebConfiguration.class.getName());
    %>
    
  3. 属性fontColor()fontFamily()fontSize()をJSPで使用できるようになりました。

ドロップダウン選択UIを実装する

サンプルプロジェクトには、構成可能な3つの属性があります。 現在、属性はテキスト入力フィールドに手動で入力する必要がありますが、これはさらにカスタマイズできます。

たとえば、入力フィールドの代わりに、フォントファミリー属性のドロップダウンリストを使用できます。 プロジェクトの構成インターフェイスで、@Meta.ADアノテーションを次のように置き換えます。

@Meta.AD(
    optionLabels = {"Arial", "Georgia", "Helvetica", "Tahoma", "Verdana"},
    optionValues = {"arial", "georgia", "helvetica", "tahoma", "verdana"},
required = false)

サンプルモジュールを再デプロイします。

フォントファミリーがドロップダウン選択になりました。

これで、フォントファミリー属性はドロップダウン選択になります。