基本的なカスタム要素の作成
Liferay DXP 7.4+
カスタム要素クライアント拡張機能は、Liferay のフロントエンド インフラストラクチャを使用して、外部のリモート アプリケーションを Liferay プラットフォームに登録し、ウィジェットとしてレンダリングします。
カスタム要素クライアント拡張機能では、構築、パッケージ化、ホスティングの方法に関係なく、あらゆるテクノロジを使用できます。
前提条件
クライアント拡張の開発を開始するには、
-
サポートされているバージョンの Javaをインストールします。
-
サンプルワークスペースをダウンロードし、解凍します。
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 で、JavaScriptリソースファイルの場所を定義する type や 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」ウィジェットを見つけて、ページにドラッグします。 公開をクリックします。
ボタンを使用してカウンターを増減し、ウィジェット アプリが動作していることを確認します。
Liferay でカスタム要素クライアント拡張機能を正常に使用できました。 次に、React カスタム要素の ルート を操作してみます。