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中是假的，在onload调用方法之后你更新loaded为真：

private loaded;

// getters and setters

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