ajax - Prime Faces: ページ A から (遅い) ページ B に移動し、進行中の "読み込み中..." インジケーターを表示する方法

Question

Prime Faces (JSF UI ライブラリ) を使用しています。

ページ A からページ B に移動したいのですが、ページ B が遅いため何らかの進行状況インジケーターを使用すると、読み込みに時間がかかります。

どうすればいいですか？

Answer 1

これは、ページBにAJAXロードを追加することで実行できます。ページBには、次のようなものがあります。

<h:head>
  <script type="text/javascript">
    function onLoadCallback(data) {
      if (data.status == "begin") {
        dialogWidget.show();
      } else {
        dialogWidget.hide();
      }
    }
  </script>
</h:head>
<h:body>
  <f:ajax event="load" listener="#{bean.onload}" onevent="onLoadCallback" render=":include1"/>

  <h:panelGroup id="include1">
    <h:panelGroup id="include2" rendered="#{bean.loaded}">
      <ui:include src="realPageB.xhtml"/>
    </h:panelGroup>
  </h:panelGroup>

  <p:dialogid="dialog" widgetVar="dialogWidget" modal="true">
    Loading
  </p:dialog>
</h:body>

これを使用して、最初にAJAXを使用してページのみをロードし（高速です）、実際のページをグループ化するパネルを更新するメソッドを呼び出しました。ロード中にモーダルダイアログが表示さp:ajaxStatusれます（実験することもできます）。Beanでは、initaliloadedはfalseであり、メソッドが呼び出された後、trueonloadに更新します。loaded

private loaded;

// getters and setters

public void onload(AjaxBehaviourEvent event) {
  loaded = true;
}