問題
- DXPで非同期ポートレットを開発するには?
Environment
- Liferay DXP 7.0+
解決策
-
このシンプルでダミーな縮小シナリオでは、MVCポートレットの
view.jsp
に次のコードがあります:<script>
Liferay.on(
'pocEvent',
function() {
console.log("pocEvent listened!");
$.ajax({
url: "https://www.mocky.io/v2/5185415ba171ea3a00704eed",
method: "GET",
error: function() {
console.log("error fetching the data");
},
success: function(data) {
console.log(data);
}
});
}
);
</script> - あなたのテーマ(またはポートレット自体のJSファイルのような他の互換性のあるリソース)は、
main.js
ファイルにこのコードを持っています:
Liferay.on(
'allPortletsReady',
/*
This function gets loaded when everything, including the portlets, is on
the page.
*/
function() {The theme injects this in the
console.log('all portlet is ready');
Liferay.fire('pocEvent');
}
); - ポートレットが置かれているページに移動すると、ブラウザのコンソールに
{ hello: "world" }
json オブジェクトが表示され、all portlet is ready
//pocEvent listened!
debug lines
- 注意点として、ポートレットのJavaクラスで
"com.liferay.portlet.render-weight=0"
を設定しないようにしてください。 これにより、ポートレットは順次動作するようになり、Ajaxとは逆の概念となる。 DTDによると、:
<render-weight> render-weightのデフォルト値は1です。 1より小さい値を設定すると、ポートレットは並列に描画されます。 1以上の値を設定した場合、ポートレットはシリアルにレンダリングされます。 レンダーウェイトが大きいポートレットは優先度が高く、レンダーウェイトが小さいポートレットよりも先にレンダリングされます。
ajaxableの値がfalseに設定されている場合、render-weightが1より小さい値に設定されると、常に1が設定される。 これは、ajaxableがfalseに設定されている場合、ajaxableがrender-weightを上書きできることを意味する。<ajaxable> ajaxableのデフォルト値はtrueです。 falseに設定すると、このポートレットはAjaxで表示されることはありません。
- 前述のポートレットとテーマは、便宜上ここに添付しておきます。