How to develop an asynchronous portlet in DXP?

問題

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で表示されることはありません。
前述のポートレットとテーマは、便宜上ここに添付しておきます。

DXPで非同期ポートレットを開発するには？

問題

Environment

解決策