主要面孔：如何使用进度"Loading..."指示器从页面 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中，initali loaded为false，调用onload方法后，将loaded更新为true:

private loaded;
// getters and setters
public void onload(AjaxBehaviourEvent event) {
  loaded = true;
}