Liferay DXPは、完全に自由な開発者フロントエンドを提供します。手作業でのJavaScriptのコーディングに対する好みや、Liferayのフロントエンドフレームワークの使用経験の有無、jQuery、Lodash、またはモジュールに対する好みに関わらず、希望するフロントエンドフレームワークを使用することができます。
Liferay DXPを以前のバージョンから使用しているユーザーは、Liferayではなじみ深いAlloy UIを引き続き使用できますが、一番好きなフロントエンドテクノロジーを使用することもできます。
モジュールをロードするには、いつ必要なのか、ビルド時の場所はどこなのか、モジュールを一緒にバンドルするのか、個別にロードするのかについて把握しておき、実行時にアセンブルする必要があります。これらのタスクを追跡するのは大変ですが、 Liferay DXPのローダー(YUI/AUI、AMD、およびAMD形式のnpm)がロードを処理するため、すべての詳細を心配する必要はありません。モジュールに関するわずかな情報を提供するだけで、Liferay DXPのローダーが残りを処理します。
アプリケーションでnpmパッケージを使用する場合は、liferay-npm-bundler
を使用できます。
これはまさに上記の目的のために構築されており、時間を節約するために一般的なモジュールタイプ(AMD、React、Angular JSなど)のプリセットもいくつか提供しています。これによりOSGiバンドルが作成され、すべてのnpm依存関係が抽出され、Liferay AMD Loader用にコードがトランスパイルされます。
Liferay DXP用のJavaScriptアプリケーションを開発する際、Liferay DXP固有の情報、またはWebサービスにアクセスする必要がある場合があります。Liferay
のグローバルJavaScript Objectでは 、この情報を公開しており、JavaScriptアプリケーションでLiferay DXPを活用しながら、好きなフロントエンドフレームワークとテクノロジーを使用することができます。
LexiconとClay
Liferay DXPでは、Lexiconと呼ばれる独自の設計言語を使用して、Liferay製品のエコシステム全体で一貫したUIとユーザーエクスペリエンスを構築するための共通フレームワークを提供しています。LexiconのWeb実装(CSS、JS、およびHTML)はClayと呼ばれています。一連のCSSクラスまたはタグライブラリを介して、アプリケーション開発者は自動的に使用することができます。
テンプレート
テンプレート化には、Java EEのJSP、FreeMarker、GoogleのSoy(別名Closure Templates)など、好きなものを使用できます。
テーマ
Liferay DXPテーマは、サイトのルック&フィールを提供します。テーマは、CSS、JavaScript、HTML、およびFreeMarkerテンプレートを組み合わせたものです。デフォルトのテーマもありますが、独自のルック&フィールを作成することもできます。
Theme Builder GradleプラグインやLiferay Theme Generator、Dev Studio DXPやBlade CLIのテーマテンプレートを使って最適な開発ツールを選択できるため、洗練されたテーマの作成に専念することができます。
フロントエンドの拡張
Liferay DXPのモジュール性は、開発のカスタマイズや拡張ポイントという形で、フロントエンド開発者に多くの利点をもたらします。これらの拡張機能は、アプリケーションの安定性、適合性、および将来的な進化を保証します。
以下は、利用可能なフロントエンド拡張の一部です。
- Theme Contributors
- Context Contributors
- Creating Configurable Styles for Portlet Wrappers
- Dynamic Includes
Read on to learn more.