基本的なカスタム要素の作成
Liferay DXP 7.4+
カスタム要素クライアント拡張機能は、Liferayのフロントエンドインフラストラクチャを使用して、外部のリモートアプリケーションをLiferayプラットフォームに登録し、ウィジェットとしてレンダリングします。
Custom Elementのクライアント拡張機能は、構築方法、パッケージ化方法、ホスティング方法に関係なく、あらゆるテクノロジーを使用できます。
前提条件
クライアント拡張の開発を開始するには、
-
サポートされているバージョンの Java をインストールしてください。
注サポートされているJDK、データベース、環境については、互換性マトリックスを確認してください。 推奨される JVM 設定については、 JVM 構成 を参照してください。
-
サンプルワークスペースをダウンロードし、解凍します。
curl -o com.liferay.sample.workspace-latest.zip https://repository.liferay.com/nexus/service/local/artifact/maven/content\?r\=liferay-public-releases\&g\=com.liferay.workspace\&a\=com.liferay.sample.workspace\&\v\=LATEST\&p\=zipunzip com.liferay.sample.workspace-latest.zip
これで、最初のカスタム要素クライアント拡張機能をデプロイするためのツールが揃いました。
カスタム要素クライアント拡張機能を調査および変更する
カスタム要素クライアント拡張機能は、サンプルワークスペースの client-extensions/liferay-sample-custom-element-1/ フォルダーにあります。 client-extension.yaml ファイルに定義されています。
liferay-sample-custom-element-1:
cssURLs:
- style.css
friendlyURLMapping: vanilla-counter
htmlElementName: vanilla-counter
instanceable: false
name: Liferay Sample Custom Element 1
portletCategoryName: category.client-extensions
type: customElement
urls:
- index.js
useESM: false
クライアント拡張機能には、ID liferay-sample-custom-element-1 が付与されており、カスタム要素クライアント拡張機能のキー構成が含まれています。これには、 type と、JavaScript リソースファイルの場所を定義する url プロパティが含まれます。 利用可能なプロパティの詳細については、 カスタム要素 YAML 設定リファレンス を参照してください。
また、assembleブロックが含まれています。
assemble:
- from: assets
into: static
これは、 assets/ フォルダ内のすべてを、ビルドされたクライアント拡張.zip ファイルに静的リソースとして含めることを指定します。 クライアント拡張機能内のJavaScriptファイルとCSSファイルは、Liferayでは静的リソースとして使用されます。
assets/index.js ファイルは、シンプルなカウンター コンポーネントを表す vanilla-counter という名前のカスタム HTML 要素を定義します。 カウンターを増減させるボタンを作成し、現在のカウンター値を表示し、URLに基づいて内部ルートを表示します。 さらに、ボタンクリックのイベントリスナーをアタッチし、カウンターの更新やルーティング情報を処理するメソッドを提供します。
(function () {
// Enable strict mode for error handling.
'use strict';
// Define a custom HTML element as a subclass of HTMLElement.
class VanillaCounter extends HTMLElement {
// Constructor function to initialize the element.
constructor() {
super(); // Call the constructor of the superclass (HTMLElement).
// Initialize instance variables.
this.friendlyURLMapping = this.getAttribute('friendly-url-mapping');
this.value = 0;
// Create DOM elements for counter, buttons, and route.
this.counter = document.createElement('span');
this.counter.setAttribute('class', 'counter');
this.counter.innerText = this.value;
this.decrementButton = document.createElement('button');
this.decrementButton.setAttribute('class', 'decrement');
this.decrementButton.innerText = '-';
this.incrementButton = document.createElement('button');
this.incrementButton.setAttribute('class', 'increment');
this.incrementButton.innerText = '+';
// Create a <style> element to apply CSS styles.
const style = document.createElement('style');
style.innerHTML = `
button {
height: 24px;
width: 24px;
}
span {
display: inline-block;
font-style: italic;
margin: 0 1em;
}
`;
// Create a <div> element to display portlet route information
this.route = document.createElement('div');
this.updateRoute();
// Create a root <div> element to hold all elements.
const root = document.createElement('div');
root.setAttribute('class', 'portlet-container');
root.appendChild(style);
root.appendChild(this.decrementButton);
root.appendChild(this.incrementButton);
root.appendChild(this.counter);
root.appendChild(this.route);
// Attach the shadow DOM to the custom element.
this.attachShadow({mode: 'open'}).appendChild(root);
// Bind event handlers to the current instance.
this.decrement = this.decrement.bind(this);
this.increment = this.increment.bind(this);
}
// Called when the custom element is added to the DOM.
connectedCallback() {
this.decrementButton.addEventListener('click', this.decrement);
this.incrementButton.addEventListener('click', this.increment);
}
// Handles the decrement button click event.
decrement() {
this.counter.innerText = --this.value;
}
// Called when the custom element is removed from the DOM.
disconnectedCallback() {
this.decrementButton.removeEventListener('click', this.decrement);
this.incrementButton.removeEventListener('click', this.increment);
}
// Handles the increment button click event.
increment() {
this.counter.innerText = ++this.value;
}
// Method to update the portlet route information based on the current URL
updateRoute() {
const url = window.location.href;
const prefix = `/-/${this.friendlyURLMapping}/`;
const prefixIndex = url.indexOf(prefix);
let route;
if (prefixIndex === -1) {
route = '/';
} else {
route = url.substring(prefixIndex + prefix.length - 1);
}
this.route.innerHTML = `<hr><b>Portlet internal route</b>: ${route}`;
}
}
// Check if the custom element has already been defined
if (!customElements.get('vanilla-counter')) {
// Define the custom element with the tag name 'vanilla-counter'
customElements.define('vanilla-counter', VanillaCounter);
}
})();
異なるフレームワーク、プログラミング言語、ライブラリを使用したその他のカスタム要素クライアント拡張機能のサンプルは、サンプルワークスペースから入手できます。 ぜひ導入して使ってみてください。
それでは、クライアント拡張機能をデプロイしてください。
カスタム要素クライアント拡張機能をLiferayにデプロイする
新しいLiferay インスタンスを起動し、以下を実行します。
docker run -it -m 8g -p 8080:8080 liferay/portal:7.4.3.132-ga132
http://localhost:8080 で Liferay にサインインしてください。 メールアドレス test@liferay.com とパスワード test を使用してください。 プロンプトが表示されたら、パスワードを learnに変更します。
Liferayが起動したら、サンプルワークスペース内のクライアント拡張機能のフォルダから以下のコマンドを実行してください。
../../gradlew clean deploy -Ddeploy.docker.container.id=$(docker ps -lq)
これにより、クライアント拡張が構築され、Liferayのdeploy/フォルダにzipをデプロイします。
クライアント拡張機能を Liferay SaaS にデプロイするには、Liferay Cloud コマンドラインツール を使用して lcp deploy を実行します。
ワークスペース内のすべてのクライアント拡張機能を同時にデプロイするには、 client-extensions/ フォルダーからコマンドを実行します。
Liferayインスタンスのコンソールでデプロイメントを確認します。
STARTED liferaysamplecustomelement1_7.4.13
クライアント拡張機能がデプロイされたので、ウィジェットが正しく動作しているかどうかを確認してください。
カスタム要素クライアント拡張機能をウィジェットとして追加する
-
どのページの上部にもある 編集 (
) をクリックしてください。 -
ウィジェットをページに追加します。 フラグメントとウィジェットのサイドバー（
）で、 ウィジェットをクリックします。 -
「クライアント拡張機能」→「Liferayサンプルカスタム要素1」ウィジェットを見つけて、ページにドラッグします。 ［Publish（公開）］をクリックします。
ボタンを使ってカウンターを増減させ、ウィジェットアプリが正しく動作していることを確認してください。
Liferayでカスタム要素クライアント拡張機能を正常に使用できました。 次に、React カスタム要素で ルート を操作してみてください。