Prime Faces: how to navigate from page A to (slow) page B with progress “Loading…” indicator

问题

I am using Prime Faces (JSF UI library).

I would like to navigate from page A to page B, but with some kind of progress indicator because page B is slow, it takes time to load.

How should I do this?

回答1:

You can do this with adding AJAX loading on page B. On page B you have something like this:

<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>

With this you initially loaded just page with AJAX (it is fast), and you called method which updates panel which groups real page. During loading you will see modal dialog (you can experiment with p:ajaxStatus as well). In bean initali loaded is false, and after onload method is called you update loaded to true:

private loaded;

// getters and setters

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

来源：https://stackoverflow.com/questions/14954395/prime-faces-how-to-navigate-from-page-a-to-slow-page-b-with-progress-loading