Liferay 7.2のカスタムフォーム項目の開発
Reactベースのカスタムフォーム項目は、Liferay 7.3およびLiferay 7.4用に開発できます。 方法については、カスタムフォーム項目タイプの書き込みを参照してください。 Liferay 7.2では、MetalJSとSoyクロージャテンプレートをベースにした、異なるフロントエンド技術を採用しました。 このチュートリアルでは、ReactベースのAcme C2P9 SliderフィールドをLiferay 7.2インストール上で動作するように適合させることについて学びます。
Acme C2P9 SliderをLiferay 7.2で動作するように調整する
Liferay 7.2 では、カスタムフォーム項目に別のフロントエンドフレームワークを使用していました。 Acme C2P9 SliderフィールドをLiferay 7.2上で動作するよう調整するには、以下の手順に従ってください。
-
カスタムフォーム項目タイププロジェクト をダウンロードし、解凍してください。
-
liferay-c2p9.zip/gradle.properties
ファイルを開き、次の行を下記に変更します。
-
liferay-c2p9.zip/settings.gradle
ファイルを開き、次の行を下記に変更します。
-
liferay-c2p9.zip/c2p9-impl/build.gradle
ファイルを開き、次の行を追加します。 -
liferay-c2p9.zip/c2p9-impl/package.json
ファイルを開きます。 次のdevDependencies
の行を下記の2行に置き換えるところから始めます。
次に、既存の
scripts
コンテンツ(2行)を下記の3行に置き換えます。 -
liferay-c2p9.zip/c2p9-impl/bnd.bnd
ファイルを開き、次の行を追加します。 -
liferay-c2p9.zip/c2p9-impl/.babelrc.js
の内容を次のように置き換えます。チェックポイント: プロジェクトは7.2のフロントエンドフレームワークを想定して再設定されているので、フォーム項目プロジェクトのフロントエンドを置き換える必要があります。
-
既存の
Slider.es.js
ファイルを削除し、それに代わる以下の3つのファイルを作成します。-
Slider.es.js
:MetalJS + Soyフロントエンドを使用した新しいスライダーコンポーネント。 -
Slider.soy
:フィールドのSoyテンプレート。 -
SliderRegister.soy
:スライダーのSoyテンプレートの登録コード。
-
-
DDMFormFieldType
に対して細かい調整が必要です:フィールドの識別子(名前
)は、Soy テンプレートで Stringリテラルとして参照されるため、ハイフン(-
)を持つことができません。C2P9DDMFormFieldType
クラスを開き、以下のハイフンを削除してください。- コンポーネントプロパティ
ddm.form.field.type.name
getName
によって返される文字列
両方の場所の値は
c2p9slider
になりました。 - コンポーネントプロパティ
-
プロジェクトのフロントエンドを置き換えたら、それを稼働中のLiferay 7.2にデプロイします。
- Liferay 7.2のDockerコンテナを起動するには、次のコマンドを実行します。
- 再構成されたフォーム項目プロジェクトをデプロイするには、
liferay-c2p9.zip
フォルダーに移動し、以下を実行します。
-
Liferay Dockerコンテナコンソールでデプロイを確認します。
フォーム項目はデプロイされ、Liferay 7.2上で 使用できるように準備されています 。